:root {
    /* Kashavi Homes visual system: semantic source of truth. */
    --kh-app-bg: #f4f7f5;
    --kh-surface: #ffffff;
    --kh-surface-elevated: #ffffff;
    --kh-border: #e2e8e4;
    --kh-border-muted: #edf1ee;
    --kh-text: #18211d;
    --kh-text-secondary: #5f6d66;
    --kh-text-muted: #84908a;
    --kh-primary: #1f5a49;
    --kh-primary-strong: #18493c;
    --kh-primary-soft: #e9f3ef;
    --kh-accent: #c5963f;
    --kh-accent-soft: #fbf4e7;
    --kh-success: #2e8b68;
    --kh-success-soft: #e9f6f0;
    --kh-warning: #c47a21;
    --kh-warning-soft: #fff4e5;
    --kh-danger: #c74858;
    --kh-danger-soft: #fcecef;
    --kh-info: #3c78b5;
    --kh-info-soft: #eaf2fb;
    --kh-neutral: #6b7671;
    --kh-neutral-soft: #f0f2f1;
    --kh-purple: #7964a8;
    --kh-purple-soft: #f0edf8;
    --kh-chart-1: #1f6a56;
    --kh-chart-2: #d09a45;
    --kh-chart-3: #497fb8;
    --kh-chart-4: #8b6bb1;
    --kh-chart-5: #d9686d;
    --kh-chart-6: #50a7a0;
    --kh-focus-ring: rgba(31, 90, 73, .22);
    --kh-hover: #f1f6f3;
    --kh-sidebar: #fbfcfb;
    --kh-sidebar-active: #e8f2ee;
    --kh-topbar: rgba(255, 255, 255, .96);
    --kh-shadow-sm: 0 2px 8px rgba(24, 57, 46, .04);
    --kh-shadow-card: 0 8px 26px rgba(24, 57, 46, .055);
    --kh-shadow-float: 0 18px 46px rgba(24, 57, 46, .11);
    --kh-radius-xs: .5rem;
    --kh-radius-sm: .65rem;
    --kh-radius-md: .85rem;
    --kh-radius-lg: 1rem;
    --kh-radius-xl: 1.2rem;
    --kh-control-height: 44px;

    /* Correction-wave semantic ramps: brand anchors the product; semantic tones carry meaning. */
    --kh-brand-50: #eef6f2;
    --kh-brand-100: #dcece5;
    --kh-brand-200: #bdd9cc;
    --kh-brand-500: #24705a;
    --kh-brand-600: #1f5a49;
    --kh-brand-700: #18493c;
    --kh-brand-800: #123b31;
    --kh-neutral-25: #fcfdfc;
    --kh-neutral-50: #f7f9f8;
    --kh-neutral-100: #eef2f0;
    --kh-neutral-200: #dfe6e2;
    --kh-neutral-300: #cbd5d0;
    --kh-neutral-500: #66736d;
    --kh-neutral-700: #34423c;
    --kh-neutral-900: #17201c;
    --kh-success-500: #238a62;
    --kh-success-100: #ddf3e8;
    --kh-info-500: #2588a7;
    --kh-info-100: #dff3f8;
    --kh-blue-500: #3e70c8;
    --kh-blue-100: #e7eefc;
    --kh-warning-500: #c9801d;
    --kh-warning-100: #fff0d7;
    --kh-danger-500: #c4475e;
    --kh-danger-100: #fbe4e9;
    --kh-violet-500: #7c62c7;
    --kh-violet-100: #eee9fb;
    --kh-gold-500: #b8862f;
    --kh-gold-100: #f8edda;
    --kh-cyan-500: #208fa0;
    --kh-cyan-100: #dcf2f5;
    --kh-sidebar-item: #f4f6f5;
    --kh-sidebar-item-hover: #e8eeeb;
    --kh-sidebar-item-active: var(--kh-brand-600);
    --kh-sidebar-item-active-hover: var(--kh-brand-700);
    --kh-action-focus: rgba(36, 112, 90, .28);

    /* Backward-compatible aliases used by existing package views. */
    --dkkr-midnight: var(--kh-primary);
    --dkkr-midnight-soft: var(--kh-primary-strong);
    --dkkr-gold: var(--kh-accent);
    --dkkr-gold-soft: #eedbb7;
    --dkkr-ivory: var(--kh-app-bg);
    --dkkr-paper: var(--kh-surface);
    --dkkr-ink: var(--kh-text);
    --dkkr-slate: var(--kh-text-secondary);
    --dkkr-line: var(--kh-border);
    --dkkr-success: var(--kh-success);
    --dkkr-warning: var(--kh-warning);
    --dkkr-critical: var(--kh-danger);
    --dkkr-information: var(--kh-info);
    --dkkr-neutral: var(--kh-neutral);
}

body,
.fi-body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dkkr-ink);
    background: var(--dkkr-ivory);
}

.fi-main {
    background:
        linear-gradient(90deg, rgba(20, 37, 31, .025) 1px, transparent 1px) 0 0 / 88px 88px,
        linear-gradient(rgba(20, 37, 31, .025) 1px, transparent 1px) 0 0 / 88px 88px,
        var(--dkkr-ivory);
}

.fi-sidebar {
    background: var(--dkkr-midnight) !important;
    border-right: 0 !important;
    box-shadow: 16px 0 42px rgba(20, 37, 31, .09);
}

.fi-sidebar-header {
    background: var(--dkkr-midnight) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: none !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header a {
    color: #fff !important;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
}

.fi-sidebar-nav {
    padding-block: 1.15rem !important;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, .42) !important;
    font-size: .67rem !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}

.fi-sidebar-item-button {
    min-height: 42px;
    color: rgba(255, 255, 255, .76) !important;
    border-radius: .55rem !important;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.fi-sidebar-item-button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
    transform: translateX(1px);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    position: relative;
    color: #fff !important;
    background: rgba(200, 152, 69, .14) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-sidebar-item-button[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -.5rem;
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 999px;
    background: var(--dkkr-gold);
}

.fi-sidebar-item-icon,
.fi-sidebar-group-collapse-button {
    color: rgba(255, 255, 255, .55) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--dkkr-gold-soft) !important;
}

.fi-topbar {
    background: rgba(255, 255, 255, .9) !important;
    border-bottom: 1px solid rgba(20, 37, 31, .08) !important;
    box-shadow: 0 6px 24px rgba(20, 37, 31, .035) !important;
    backdrop-filter: blur(18px);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.025em;
    color: var(--dkkr-midnight);
}

.fi-header-heading {
    font-weight: 800 !important;
}

.fi-section,
.fi-ta-ctn,
.fi-fo-field-wrp,
.fi-dropdown-panel,
.fi-modal-window {
    border-color: rgba(20, 37, 31, .09) !important;
}

.fi-section,
.fi-ta-ctn {
    box-shadow: 0 12px 34px rgba(20, 37, 31, .045) !important;
}

.fi-btn {
    border-radius: .62rem !important;
    min-height: 42px;
    font-weight: 700 !important;
}

.fi-btn-color-primary {
    background: var(--dkkr-midnight) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(20, 37, 31, .16) !important;
}

.fi-btn-color-primary:hover {
    background: var(--dkkr-midnight-soft) !important;
}

.fi-account-widget,
.fi-filament-info-widget {
    display: none !important;
}

.fi-main:has(.dkkr-workforce-widget) .fi-header {
    display: none !important;
}

.fi-main:has(.dkkr-workforce-widget) .fi-page {
    gap: 0 !important;
}

.dkkr-workforce-widget {
    grid-column: 1 / -1 !important;
}

.dkkr-workforce {
    --panel-shadow: 0 17px 44px rgba(20, 37, 31, .065);
    color: var(--dkkr-ink);
}

.dkkr-dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border-radius: 1.15rem;
    background:
        linear-gradient(90deg, transparent 0 64%, rgba(255, 255, 255, .045) 64% 64.2%, transparent 64.2%),
        linear-gradient(0deg, transparent 0 48%, rgba(255, 255, 255, .04) 48% 48.4%, transparent 48.4%),
        var(--dkkr-midnight);
    color: #fff;
    box-shadow: 0 24px 55px rgba(20, 37, 31, .19);
}

.dkkr-dashboard-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -110px;
    top: -175px;
    border: 1px solid rgba(200, 152, 69, .55);
    transform: rotate(45deg);
}

.dkkr-dashboard-hero h1 {
    position: relative;
    z-index: 1;
    margin: .45rem 0 .5rem;
    color: #fff;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
}

.dkkr-dashboard-hero p {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: .94rem;
}

.dkkr-kicker,
.dkkr-section-index {
    color: var(--dkkr-gold-soft);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.dkkr-hero-actions {
    position: relative;
    z-index: 1;
    min-width: 250px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
}

.dkkr-updated {
    flex-basis: 100%;
    text-align: right;
    color: rgba(255, 255, 255, .65);
    font-size: .72rem;
}

.dkkr-live-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: .35rem;
    border-radius: 50%;
    background: #55d996;
    box-shadow: 0 0 0 4px rgba(85, 217, 150, .12);
}

.dkkr-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem .9rem;
    border: 1px solid transparent;
    border-radius: .62rem;
    font-size: .78rem;
    font-weight: 760;
    text-decoration: none;
    transition: transform .16s ease, background .16s ease;
}

.dkkr-btn:hover { transform: translateY(-1px); }
.dkkr-btn:focus-visible { outline: 3px solid rgba(200, 152, 69, .5); outline-offset: 3px; }
.dkkr-btn-primary { background: var(--dkkr-gold); color: var(--dkkr-midnight); }
.dkkr-btn-primary:hover { background: #d3a95e; }
.dkkr-btn-secondary { border-color: rgba(255, 255, 255, .25); color: #fff; background: rgba(255, 255, 255, .05); }
.dkkr-btn-secondary:hover { background: rgba(255, 255, 255, .11); }

.dkkr-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.dkkr-metric {
    position: relative;
    overflow: hidden;
    min-height: 138px;
    padding: 1.2rem;
    border: 1px solid rgba(20, 37, 31, .09);
    border-radius: .9rem;
    background: var(--dkkr-paper);
    box-shadow: var(--panel-shadow);
}

.dkkr-metric::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.dkkr-metric-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--dkkr-slate); font-size: .75rem; font-weight: 700; }
.dkkr-metric-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: .5rem; background: color-mix(in srgb, currentColor 10%, transparent); font-size: 1rem; }
.dkkr-metric > strong { display: block; margin-top: .65rem; color: var(--dkkr-midnight); font-family: Manrope, Inter, sans-serif; font-size: 2.05rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dkkr-metric > small { display: block; margin-top: .55rem; color: var(--dkkr-slate); font-size: .7rem; }
.dkkr-tone-midnight { color: var(--dkkr-midnight); border-top: 3px solid var(--dkkr-midnight); }
.dkkr-tone-success { color: var(--dkkr-success); border-top: 3px solid var(--dkkr-success); }
.dkkr-tone-warning { color: var(--dkkr-warning); border-top: 3px solid var(--dkkr-warning); }
.dkkr-tone-information { color: var(--dkkr-information); border-top: 3px solid var(--dkkr-information); }

.dkkr-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.dkkr-panel {
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid rgba(20, 37, 31, .09);
    border-radius: .95rem;
    background: var(--dkkr-paper);
    box-shadow: var(--panel-shadow);
}

.dkkr-panel-attention { grid-column: span 7; }
.dkkr-panel-field { grid-column: span 5; }
.dkkr-panel-performance { grid-column: span 7; }
.dkkr-panel-payroll { grid-column: span 5; background: linear-gradient(150deg, #fff 0 72%, rgba(200, 152, 69, .08)); }
.dkkr-panel-leaderboard { grid-column: span 7; }
.dkkr-panel-teams { grid-column: span 5; }
.dkkr-panel-compliance { grid-column: span 6; }
.dkkr-panel-activity { grid-column: span 6; }

.dkkr-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.dkkr-panel-heading .dkkr-section-index { color: var(--dkkr-gold); }
.dkkr-panel-heading h2 { margin: .2rem 0 .15rem; color: var(--dkkr-midnight); font-family: Manrope, Inter, sans-serif; font-size: 1.18rem; line-height: 1.2; letter-spacing: -.025em; }
.dkkr-panel-heading p { margin: 0; color: var(--dkkr-slate); font-size: .72rem; }
.dkkr-heading-count { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--dkkr-midnight); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.dkkr-inline-link { color: var(--dkkr-midnight); font-size: .72rem; font-weight: 780; text-decoration: none; white-space: nowrap; }
.dkkr-inline-link:hover { color: var(--dkkr-gold); }
.dkkr-muted { color: var(--dkkr-slate); font-size: .7rem; }
.dkkr-badge { padding: .35rem .55rem; border-radius: 999px; background: rgba(200, 152, 69, .14); color: #805f27; font-size: .65rem; font-weight: 800; }

.dkkr-attention-list { border-top: 1px solid var(--dkkr-line); }
.dkkr-attention-item { min-height: 64px; display: grid; grid-template-columns: 10px 1fr auto; gap: .85rem; align-items: center; border-bottom: 1px solid var(--dkkr-line); }
.dkkr-attention-item strong, .dkkr-leader strong, .dkkr-activity strong { display: block; color: var(--dkkr-midnight); font-size: .79rem; }
.dkkr-attention-item small, .dkkr-leader small, .dkkr-activity small { display: block; margin-top: .1rem; color: var(--dkkr-slate); font-size: .67rem; }
.dkkr-attention-item b { color: var(--dkkr-midnight); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dkkr-status-mark { width: 8px; height: 8px; border-radius: 50%; }
.dkkr-status-critical { background: var(--dkkr-critical); box-shadow: 0 0 0 4px rgba(180, 35, 47, .1); }
.dkkr-status-warning { background: var(--dkkr-warning); box-shadow: 0 0 0 4px rgba(161, 92, 0, .1); }
.dkkr-status-information { background: var(--dkkr-information); box-shadow: 0 0 0 4px rgba(23, 105, 166, .1); }
.dkkr-status-neutral { background: var(--dkkr-neutral); box-shadow: 0 0 0 4px rgba(102, 112, 133, .1); }
.dkkr-panel-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.dkkr-panel-links a { padding: .4rem .6rem; border: 1px solid var(--dkkr-line); border-radius: .48rem; color: var(--dkkr-midnight); font-size: .67rem; font-weight: 750; text-decoration: none; }
.dkkr-panel-links a:hover { border-color: var(--dkkr-gold); background: rgba(200, 152, 69, .07); }

.dkkr-field-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.dkkr-field-summary > div { padding: .85rem; border-radius: .7rem; background: var(--dkkr-ivory); }
.dkkr-field-summary strong { display: block; color: var(--dkkr-midnight); font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dkkr-field-summary span { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; color: var(--dkkr-slate); font-size: .64rem; }
.dkkr-dot { width: 6px; height: 6px; border-radius: 50%; }
.dkkr-dot-live { background: var(--dkkr-success); }
.dkkr-dot-known { background: var(--dkkr-warning); }
.dkkr-dot-interrupted { background: var(--dkkr-critical); }
.dkkr-distance { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .8rem 0; padding: .8rem 0; border-bottom: 1px solid var(--dkkr-line); }
.dkkr-distance span { color: var(--dkkr-slate); font-size: .68rem; }
.dkkr-distance strong { color: var(--dkkr-midnight); font-size: 1rem; }
.dkkr-team-bars { display: grid; gap: .65rem; }
.dkkr-team-row { display: grid; grid-template-columns: 115px 1fr 24px; gap: .55rem; align-items: center; font-size: .65rem; }
.dkkr-team-row > span { overflow: hidden; color: var(--dkkr-slate); text-overflow: ellipsis; white-space: nowrap; }
.dkkr-team-row > div { height: 6px; overflow: hidden; border-radius: 999px; background: #ece9e1; }
.dkkr-team-row i { display: block; height: 100%; border-radius: inherit; background: var(--dkkr-midnight); }
.dkkr-team-row b { color: var(--dkkr-midnight); text-align: right; }

.dkkr-performance-head { display: flex; justify-content: space-between; gap: 1rem; }
.dkkr-performance-head span { display: block; color: var(--dkkr-slate); font-size: .66rem; }
.dkkr-performance-head strong { display: block; margin-top: .25rem; color: var(--dkkr-midnight); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.dkkr-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #eae8e2; }
.dkkr-panel-performance > .dkkr-progress { margin: .9rem 0; }
.dkkr-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--dkkr-midnight); }
.dkkr-progress-critical { background: var(--dkkr-critical) !important; }
.dkkr-progress-behind { background: var(--dkkr-warning) !important; }
.dkkr-progress-near { background: #c48a16 !important; }
.dkkr-progress-achieved { background: var(--dkkr-success) !important; }
.dkkr-progress-exceeded { background: #0c5935 !important; }
.dkkr-performance-critical { color: var(--dkkr-critical) !important; }
.dkkr-performance-behind { color: var(--dkkr-warning) !important; }
.dkkr-performance-near { color: #9a6a09 !important; }
.dkkr-performance-achieved { color: var(--dkkr-success) !important; }
.dkkr-performance-exceeded { color: #0c5935 !important; }
.dkkr-money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.dkkr-money-grid div { padding: .65rem; border: 1px solid var(--dkkr-line); border-radius: .55rem; }
.dkkr-money-grid span { display: block; color: var(--dkkr-slate); font-size: .61rem; }
.dkkr-money-grid strong { display: block; margin-top: .2rem; color: var(--dkkr-midnight); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dkkr-trend { height: 110px; display: flex; gap: .65rem; align-items: stretch; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--dkkr-line); }
.dkkr-trend-column { flex: 1; min-width: 20px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .35rem; }
.dkkr-trend-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.dkkr-trend-bars i, .dkkr-trend-bars b { width: 30%; max-width: 12px; min-height: 4px; border-radius: 3px 3px 0 0; }
.dkkr-trend-bars i { background: #d6d7d1; }
.dkkr-trend-bars b { background: var(--dkkr-gold); }
.dkkr-trend-column > span { color: var(--dkkr-slate); font-size: .58rem; }

.dkkr-payroll-total { padding: 1.2rem; border-radius: .75rem; background: var(--dkkr-midnight); color: #fff; }
.dkkr-payroll-total span { display: block; color: rgba(255, 255, 255, .58); font-size: .67rem; }
.dkkr-payroll-total strong { display: block; margin: .35rem 0; color: #fff; font-family: Manrope, Inter, sans-serif; font-size: 1.75rem; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.dkkr-payroll-total small { color: var(--dkkr-gold-soft); font-size: .62rem; }
.dkkr-payroll-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.dkkr-payroll-breakdown div { display: flex; justify-content: space-between; gap: .5rem; padding: .62rem 0; border-bottom: 1px solid var(--dkkr-line); }
.dkkr-payroll-breakdown span { color: var(--dkkr-slate); font-size: .64rem; }
.dkkr-payroll-breakdown b { color: var(--dkkr-midnight); font-size: .68rem; font-variant-numeric: tabular-nums; }
.dkkr-block-link { display: flex; justify-content: space-between; padding: .72rem .85rem; border-radius: .55rem; background: rgba(200, 152, 69, .1); color: var(--dkkr-midnight); font-size: .7rem; font-weight: 800; text-decoration: none; }
.dkkr-block-link:hover { background: rgba(200, 152, 69, .17); }

.dkkr-leader-list { border-top: 1px solid var(--dkkr-line); }
.dkkr-leader { min-height: 61px; display: grid; grid-template-columns: 28px 34px 1fr auto; gap: .7rem; align-items: center; border-bottom: 1px solid var(--dkkr-line); }
.dkkr-rank { color: var(--dkkr-gold); font-size: .67rem; font-weight: 850; }
.dkkr-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--dkkr-midnight); color: #fff; font-size: .64rem; font-weight: 800; }
.dkkr-leader-value { text-align: right; }
.dkkr-leader-value strong { font-variant-numeric: tabular-nums; }
.dkkr-leader-value small { font-weight: 800; }

.dkkr-top-team-list { display: grid; gap: .75rem; }
.dkkr-top-team { padding: .85rem; border: 1px solid var(--dkkr-line); border-radius: .65rem; }
.dkkr-top-team > div:first-child { display: grid; grid-template-columns: 24px 1fr; column-gap: .5rem; align-items: center; }
.dkkr-top-team > div:first-child > span { grid-row: span 2; color: var(--dkkr-gold); font-size: .72rem; font-weight: 850; }
.dkkr-top-team strong { color: var(--dkkr-midnight); font-size: .76rem; }
.dkkr-top-team small { color: var(--dkkr-slate); font-size: .62rem; }
.dkkr-top-team > b { display: block; margin: .5rem 0 .35rem; text-align: right; font-size: .72rem; }

.dkkr-compliance-grid { display: grid; grid-template-columns: 142px 1fr; gap: 1.2rem; align-items: center; }
.dkkr-ring { width: 138px; height: 138px; padding: 11px; border-radius: 50%; background: conic-gradient(var(--dkkr-gold) calc(var(--value) * 1%), #ece8dd 0); }
.dkkr-ring > div { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #fff; }
.dkkr-ring strong { display: block; color: var(--dkkr-midnight); font-size: 1.5rem; line-height: 1; }
.dkkr-ring span { display: block; max-width: 70px; margin-top: .4rem; color: var(--dkkr-slate); font-size: .58rem; }
.dkkr-compliance-details { display: grid; gap: .6rem; }
.dkkr-compliance-details div { display: flex; justify-content: space-between; gap: .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--dkkr-line); }
.dkkr-compliance-details span { color: var(--dkkr-slate); font-size: .65rem; }
.dkkr-compliance-details strong { color: var(--dkkr-midnight); font-size: .7rem; }
.dkkr-document-progress { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--dkkr-line); }
.dkkr-document-progress > span, .dkkr-document-progress > b { display: inline-block; margin-bottom: .4rem; font-size: .65rem; }
.dkkr-document-progress > span { color: var(--dkkr-slate); }
.dkkr-document-progress > b { float: right; color: var(--dkkr-midnight); }

.dkkr-activity-list { border-top: 1px solid var(--dkkr-line); }
.dkkr-activity { min-height: 60px; display: grid; grid-template-columns: 9px 1fr auto; gap: .75rem; align-items: center; border-bottom: 1px solid var(--dkkr-line); }
.dkkr-activity > span { width: 7px; height: 7px; border-radius: 50%; background: var(--dkkr-gold); box-shadow: 0 0 0 4px rgba(200, 152, 69, .11); }
.dkkr-activity time { color: var(--dkkr-slate); font-size: .6rem; white-space: nowrap; }

.dkkr-empty { padding: 1rem; border: 1px dashed var(--dkkr-line); border-radius: .55rem; color: var(--dkkr-slate); font-size: .7rem; text-align: center; }

.dkkr-quick-actions { margin-top: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 1rem; background: var(--dkkr-midnight); color: #fff; }
.dkkr-quick-actions > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dkkr-quick-actions h2 { margin: .15rem 0 0; color: #fff; font-family: Manrope, Inter, sans-serif; font-size: 1.35rem; }
.dkkr-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); }
.dkkr-quick-grid a { min-height: 100px; position: relative; padding: 1rem; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); color: #fff; text-decoration: none; transition: background .16s ease; }
.dkkr-quick-grid a:hover { background: rgba(255,255,255,.07); }
.dkkr-quick-grid span { display: block; color: var(--dkkr-gold-soft); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dkkr-quick-grid strong { display: block; margin-top: .45rem; color: #fff; font-size: .84rem; }
.dkkr-quick-grid i { position: absolute; right: .9rem; bottom: .8rem; color: var(--dkkr-gold); font-style: normal; }

@media (max-width: 1100px) {
    .dkkr-panel-attention,
    .dkkr-panel-field,
    .dkkr-panel-performance,
    .dkkr-panel-payroll,
    .dkkr-panel-leaderboard,
    .dkkr-panel-teams,
    .dkkr-panel-compliance,
    .dkkr-panel-activity { grid-column: span 6; }
}

@media (max-width: 850px) {
    .dkkr-dashboard-hero { align-items: flex-start; flex-direction: column; }
    .dkkr-hero-actions { justify-content: flex-start; }
    .dkkr-updated { text-align: left; }
    .dkkr-metric-grid { grid-template-columns: repeat(2, 1fr); }
    .dkkr-panel-attention,
    .dkkr-panel-field,
    .dkkr-panel-performance,
    .dkkr-panel-payroll,
    .dkkr-panel-leaderboard,
    .dkkr-panel-teams,
    .dkkr-panel-compliance,
    .dkkr-panel-activity { grid-column: span 12; }
    .dkkr-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .dkkr-dashboard-hero { padding: 1.35rem; }
    .dkkr-hero-actions, .dkkr-hero-actions .dkkr-btn { width: 100%; }
    .dkkr-metric-grid { grid-template-columns: 1fr; }
    .dkkr-field-summary, .dkkr-money-grid { grid-template-columns: 1fr; }
    .dkkr-compliance-grid { grid-template-columns: 1fr; }
    .dkkr-ring { margin: 0 auto; }
    .dkkr-quick-actions > div:first-child { align-items: flex-start; flex-direction: column; }
    .dkkr-quick-grid { grid-template-columns: 1fr; }
    .dkkr-leader { grid-template-columns: 24px 34px 1fr; }
    .dkkr-leader-value { grid-column: 3; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* DKKR HRMS RC1 operational pages */
.kh-page-stack,
.kh-dashboard-shell { display: grid; gap: 1rem; }
.kh-page-intro,
.kh-dashboard-hero,
.kh-workspace-hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
    padding: 1.5rem; border: 1px solid rgba(20,37,31,.1); border-radius: 1rem;
    background: linear-gradient(135deg, #fff 0 72%, rgba(200,152,69,.11));
    box-shadow: 0 14px 36px rgba(20,37,31,.055);
}
.kh-dashboard-hero { color: #fff; background: var(--dkkr-midnight); border-color: transparent; }
.kh-page-intro h2,.kh-dashboard-hero h2,.kh-workspace-hero h2 { margin:.25rem 0; font: 800 clamp(1.6rem,3vw,2.35rem)/1.05 Manrope,Inter,sans-serif; letter-spacing:-.04em; color:var(--dkkr-midnight); }
.kh-dashboard-hero h2 { color:#fff; }
.kh-page-intro p,.kh-dashboard-hero p,.kh-workspace-hero p { max-width:760px; margin:0; color:var(--dkkr-slate); font-size:.86rem; line-height:1.6; }
.kh-dashboard-hero p { color:rgba(255,255,255,.68); }
.kh-eyebrow { color:var(--dkkr-gold)!important; font-size:.66rem!important; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.kh-summary-chip,.kh-status { display:inline-flex; align-items:center; min-height:28px; padding:.25rem .6rem; border-radius:.5rem; font-size:.7rem; font-weight:800; white-space:nowrap; }
.kh-status-success { color:#0f613a; background:#e7f5ed; }
.kh-status-warning { color:#864d00; background:#fff1d8; }
.kh-status-danger { color:#92202b; background:#feecee; }
.kh-status-info { color:#12598d; background:#e8f2fa; }
.kh-status-gray,.kh-summary-chip { color:#4d5a55; background:#eef0ed; }
.kh-button-gold,.kh-button-secondary,.kh-text-link { display:inline-flex; align-items:center; justify-content:center; min-height:42px; border-radius:.6rem; font-size:.75rem; font-weight:800; text-decoration:none; }
.kh-button-gold { padding:.65rem .9rem; color:var(--dkkr-midnight); background:var(--dkkr-gold); }
.kh-button-secondary { padding:.6rem .85rem; color:var(--dkkr-midnight); border:1px solid rgba(20,37,31,.16); background:#fff; }
.kh-button-secondary[disabled] { opacity:.55; cursor:not-allowed; }
.kh-text-link { min-height:auto; color:var(--dkkr-midnight); }
.kh-text-link:hover { color:var(--dkkr-gold); }
.kh-metric-grid { display:grid; gap:1rem; }
.kh-metric-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kh-metric-card { min-width:0; padding:1.1rem; border:1px solid rgba(20,37,31,.09); border-top:3px solid var(--dkkr-midnight); border-radius:.85rem; background:#fff; box-shadow:0 12px 30px rgba(20,37,31,.045); }
.kh-metric-card>span,.kh-summary-grid span,.kh-route-locations span { display:block; color:var(--dkkr-slate); font-size:.7rem; font-weight:750; }
.kh-metric-card>strong { display:block; margin:.55rem 0; color:var(--dkkr-midnight); font:800 1.7rem/1 Manrope,Inter,sans-serif; letter-spacing:-.035em; }
.kh-metric-card>small,.kh-summary-grid small,.kh-responsive-table small { display:block; color:var(--dkkr-slate); font-size:.68rem; line-height:1.45; }
.kh-target-success { border-top-color:var(--dkkr-success); }.kh-target-warning{border-top-color:var(--dkkr-warning)}.kh-target-danger{border-top-color:var(--dkkr-critical)}
.kh-progress { overflow:hidden; height:6px; margin:.65rem 0; border-radius:99px; background:#e8e8e2; }.kh-progress i{display:block;height:100%;border-radius:inherit;background:var(--dkkr-gold)}.kh-progress-large{height:9px;max-width:520px}
.kh-two-column { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.kh-detail-list { display:grid; gap:.8rem; }.kh-detail-list div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid rgba(20,37,31,.08)}.kh-detail-list dt{color:var(--dkkr-slate);font-size:.73rem}.kh-detail-list dd{margin:0;color:var(--dkkr-midnight);font-size:.78rem;font-weight:750;text-align:right}
.kh-action-list { display:grid;gap:.5rem;margin:0;padding:0;list-style:none}.kh-action-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem;border:1px solid rgba(20,37,31,.08);border-radius:.65rem}
.kh-input { min-height:44px; border:1px solid rgba(20,37,31,.18); border-radius:.6rem; background:#fff; color:var(--dkkr-ink); padding:.65rem .75rem; }
.kh-input:focus { outline:3px solid rgba(200,152,69,.28); border-color:var(--dkkr-gold); }
.kh-form-error { margin-top:.35rem;color:var(--dkkr-critical);font-size:.73rem;font-weight:700 }
.kh-filter-bar { display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.5fr) auto;gap:1rem;align-items:end}.kh-filter-bar label{display:grid;gap:.35rem;color:var(--dkkr-slate);font-size:.72rem;font-weight:750}.kh-filter-actions{display:flex;gap:.5rem;align-items:center}
.kh-responsive-table { overflow-x:auto; border:1px solid rgba(20,37,31,.08); border-radius:.8rem; background:#fff; }.kh-responsive-table table{width:100%;border-collapse:collapse;font-size:.76rem}.kh-responsive-table th{padding:.75rem;text-align:left;color:var(--dkkr-slate);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;background:#faf9f5}.kh-responsive-table td{padding:.8rem .75rem;border-top:1px solid rgba(20,37,31,.075);vertical-align:middle}.kh-responsive-table tr:hover td{background:#fcfbf7}.kh-table-actions{display:flex;gap:.4rem;justify-content:flex-end;align-items:center}
.kh-empty-state { display:grid;place-items:center;gap:.25rem;min-height:100px;padding:1rem;text-align:center;color:var(--dkkr-slate)}.kh-empty-state strong{color:var(--dkkr-midnight)}.kh-empty-success{background:#eef8f2;border-radius:.75rem}
.kh-info-banner { display:flex;gap:.7rem;align-items:flex-start;padding:1rem 1.1rem;border-left:4px solid var(--dkkr-information);border-radius:.65rem;background:#eef6fb;color:var(--dkkr-slate);font-size:.76rem}.kh-info-banner strong{color:var(--dkkr-midnight)}.kh-info-warning{border-left-color:var(--dkkr-warning);background:#fff6e7}
.kh-map { width:100%; border:1px solid rgba(20,37,31,.12); border-radius:.85rem; background:#ebe9e2; z-index:1; }.kh-live-map{height:470px}.kh-route-map{height:560px}
.kh-live-legend { display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}.kh-live-legend span{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:750;color:var(--dkkr-slate)}.kh-dot{width:8px;height:8px;border-radius:50%}.kh-dot-live{background:var(--dkkr-success)}.kh-dot-known{background:var(--dkkr-warning)}.kh-dot-attention{background:var(--dkkr-critical)}
.kh-map-marker,.kh-route-marker { display:block;width:22px;height:22px;border:3px solid #fff;border-radius:50%;box-shadow:0 3px 12px rgba(20,37,31,.35)}.kh-map-marker-live{background:var(--dkkr-success)}.kh-map-marker-last_known{background:var(--dkkr-warning)}.kh-map-marker-no_recent_update{background:var(--dkkr-critical)}.kh-route-marker-start{background:var(--dkkr-success)}.kh-route-marker-end{background:var(--dkkr-midnight)}.kh-route-marker-current{background:var(--dkkr-warning)}.kh-route-marker-point{width:12px;height:12px;background:var(--dkkr-information)}
.kh-map-popup{display:grid;gap:.2rem;min-width:210px;font-family:Inter,sans-serif}.kh-map-popup strong{color:var(--dkkr-midnight);font-size:.84rem}.kh-map-popup span,.kh-map-popup small{color:var(--dkkr-slate);font-size:.68rem}.kh-map-popup p{margin:.25rem 0;font-size:.72rem}.kh-map-popup a{margin-top:.35rem;color:var(--dkkr-midnight);font-size:.7rem;font-weight:800;text-decoration:none}
.kh-location-name { display:block;max-width:360px;color:var(--dkkr-midnight)}
.kh-summary-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.kh-summary-grid>div{padding:.9rem;border:1px solid rgba(20,37,31,.08);border-radius:.7rem;background:#faf9f5}.kh-summary-grid strong{display:block;margin:.35rem 0;color:var(--dkkr-midnight);font-size:.9rem}.kh-route-locations{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.kh-route-locations>div{padding:.85rem;border-left:3px solid var(--dkkr-gold);background:#faf9f5}.kh-route-locations strong{display:block;margin-top:.25rem;font-size:.76rem;color:var(--dkkr-midnight)}
.kh-performance-hero { display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:1.5rem;border-radius:1rem;background:var(--dkkr-midnight);color:#fff}.kh-performance-hero span{color:rgba(255,255,255,.65);font-size:.72rem}.kh-performance-hero>div>strong{display:block;margin:.4rem 0;color:#fff;font:800 3rem/1 Manrope,Inter,sans-serif}.kh-performance-hero dl{display:grid;gap:.6rem}.kh-performance-hero dl div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.12)}.kh-performance-hero dt{color:rgba(255,255,255,.6);font-size:.72rem}.kh-performance-hero dd{margin:0;font-size:.8rem;font-weight:800}.kh-chart-wrap{height:330px}
.kh-leaderboard { display:grid;gap:.25rem;margin:0;padding:0;list-style:none}.kh-leaderboard li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.7rem;border-bottom:1px solid rgba(20,37,31,.075)}.kh-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:.45rem;background:#f1eee5;color:var(--dkkr-midnight);font-weight:850}.kh-leaderboard strong{display:block;color:var(--dkkr-midnight);font-size:.76rem}.kh-leaderboard small{display:block;color:var(--dkkr-slate);font-size:.66rem}.kh-leader-value{text-align:right}
.kh-report-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.kh-report-card{display:flex;flex-direction:column;min-height:230px;padding:1.1rem;border:1px solid rgba(20,37,31,.09);border-radius:.85rem;background:#fff;box-shadow:0 10px 28px rgba(20,37,31,.04)}.kh-report-card>span{color:var(--dkkr-gold);font-size:.62rem;font-weight:850;letter-spacing:.12em}.kh-report-card h3{margin:.65rem 0 .35rem;color:var(--dkkr-midnight);font:800 1.05rem/1.2 Manrope,Inter,sans-serif}.kh-report-card p{flex:1;margin:0 0 1rem;color:var(--dkkr-slate);font-size:.72rem;line-height:1.55}
@media (max-width:1024px){.kh-metric-grid-four,.kh-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kh-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.kh-page-intro,.kh-dashboard-hero,.kh-workspace-hero{align-items:flex-start;flex-direction:column}.kh-two-column,.kh-performance-hero,.kh-route-locations{grid-template-columns:1fr}.kh-filter-bar{grid-template-columns:1fr}.kh-live-map{height:390px}.kh-route-map{height:430px}.kh-responsive-table table,.kh-responsive-table thead,.kh-responsive-table tbody,.kh-responsive-table th,.kh-responsive-table td,.kh-responsive-table tr{display:block}.kh-responsive-table thead{position:absolute;left:-9999px}.kh-responsive-table tr{padding:.65rem;border-top:1px solid rgba(20,37,31,.1)}.kh-responsive-table tr:first-child{border-top:0}.kh-responsive-table td{display:grid;grid-template-columns:110px 1fr;gap:.65rem;padding:.45rem;border:0}.kh-responsive-table td::before{content:attr(data-label);color:var(--dkkr-slate);font-size:.65rem;font-weight:800;text-transform:uppercase}.kh-table-actions{justify-content:flex-start}.kh-leaderboard li{grid-template-columns:32px 1fr}.kh-leader-value{grid-column:2;text-align:left}}
@media (max-width:520px){.kh-metric-grid-four,.kh-report-grid,.kh-summary-grid{grid-template-columns:1fr}.kh-live-legend{align-items:flex-start;flex-direction:column}.kh-page-intro,.kh-dashboard-hero,.kh-workspace-hero{padding:1.1rem}.kh-performance-hero{padding:1.1rem}.kh-responsive-table td{grid-template-columns:1fr}.kh-responsive-table td::before{margin-bottom:.1rem}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.kh-payroll-period{display:grid;gap:1rem;padding:1.25rem;border:1px solid rgba(20,37,31,.1);border-radius:.9rem;background:#fff;box-shadow:0 12px 32px rgba(20,37,31,.045)}.kh-payroll-period header,.kh-payroll-period footer{display:flex;justify-content:space-between;align-items:center;gap:1rem}.kh-payroll-period h3{margin:.2rem 0;color:var(--dkkr-midnight);font:800 1.15rem/1.2 Manrope,Inter,sans-serif}.kh-payroll-period header span,.kh-payroll-period small,.kh-payroll-period footer span{color:var(--dkkr-slate);font-size:.7rem}.kh-payroll-period footer{padding-top:1rem;border-top:1px solid rgba(20,37,31,.08)}.kh-payroll-period footer strong{display:block;color:var(--dkkr-midnight);font:800 1.25rem Manrope,Inter,sans-serif}@media(max-width:768px){.kh-payroll-period header,.kh-payroll-period footer{align-items:flex-start;flex-direction:column}}
.kh-attendance-ready,.kh-attendance-active{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem;border-radius:1rem;background:var(--dkkr-midnight);color:#fff;box-shadow:0 20px 48px rgba(20,37,31,.18)}.kh-attendance-ready h3{margin:.3rem 0;color:#fff;font:800 2rem/1.1 Manrope,Inter,sans-serif}.kh-attendance-ready p{max-width:700px;margin:0;color:rgba(255,255,255,.66);font-size:.8rem;line-height:1.6}.kh-attendance-active{background:linear-gradient(135deg,var(--dkkr-midnight),#20372f)}.kh-attendance-active>div{display:grid;gap:.3rem}.kh-attendance-active span{color:rgba(255,255,255,.6);font-size:.68rem}.kh-attendance-active strong{font:800 1.65rem Manrope,Inter,sans-serif}.kh-attendance-active small{color:rgba(255,255,255,.65);font-size:.68rem}.kh-clock-button{min-height:52px;padding:.75rem 1.1rem;border:0;border-radius:.7rem;background:var(--dkkr-gold);color:var(--dkkr-midnight);font-weight:850;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18)}.kh-clock-out{background:#fff;color:var(--dkkr-midnight)}.kh-form-stack{display:grid;gap:.8rem}.kh-form-stack label{display:grid;gap:.35rem;color:var(--dkkr-slate);font-size:.7rem;font-weight:750}.kh-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.kh-request-list{display:grid;gap:.3rem;margin:0;padding:0;list-style:none}.kh-request-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(20,37,31,.08)}.kh-request-list strong{display:block;color:var(--dkkr-midnight);font-size:.76rem}.kh-request-list small{display:block;margin-top:.25rem;color:var(--dkkr-slate);font-size:.66rem}.kh-request-list li>div:last-child{text-align:right}@media(max-width:768px){.kh-attendance-ready,.kh-attendance-active{align-items:flex-start;flex-direction:column}.kh-form-grid{grid-template-columns:1fr}.kh-request-list li{flex-direction:column}.kh-request-list li>div:last-child{text-align:left}}

/* WCAG-focused sidebar contrast and keyboard focus treatment. */
.fi-sidebar-group-label { color: #b8c5c0 !important; }
.fi-sidebar-item-label { color: #f4f7f5 !important; }
.fi-sidebar-item-icon,
.fi-sidebar-group-collapse-button { color: #d8e2de !important; }
.fi-sidebar-item-button:focus-visible {
    outline: 3px solid #ead6ad !important;
    outline-offset: 2px;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #ffffff !important; }
.kh-text-link {
    display: inline-flex;
    margin-top: .35rem;
    color: #1769a6;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: .18em;
}
.kh-text-link:focus-visible {
    outline: 3px solid #c89845;
    outline-offset: 3px;
    border-radius: .25rem;
}


/* RC11 accessibility hardening. Filament applies nested utility colours to the
   label span, so both the button and descendants receive an explicit contrast. */
.fi-sidebar .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item-button * {
    color: #f7faf8 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] {
    background: #365145 !important;
    box-shadow: inset 0 0 0 1px rgba(234, 214, 173, .42) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button *,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] * {
    color: #ffffff !important;
}
.fi-sidebar .fi-sidebar-item-button:hover {
    background: #2b443a !important;
}
.kh-profile-score {
    display: grid;
    min-width: 132px;
    gap: .2rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .75rem;
    background: #fff;
    text-align: right;
}
.kh-profile-score strong,
.kh-profile-score span { display: block; }
.kh-profile-score strong { color: var(--dkkr-midnight); font: 800 1.65rem/1 Manrope, Inter, sans-serif; }
.kh-profile-score span { color: var(--dkkr-slate); font-size: .7rem; font-weight: 700; }
.kh-error-summary {
    padding: .9rem 1rem;
    border-left: 4px solid var(--dkkr-critical);
    border-radius: .6rem;
    background: #fff0f1;
    color: #75151d;
}
.kh-guidance { color: var(--dkkr-slate); font-size: .7rem; line-height: 1.55; }
.kh-avatar {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    background: var(--dkkr-midnight);
    color: #fff;
    font-weight: 800;
}
.kh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kh-split-mobile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 768px) {
    .kh-profile-score { min-width: 0; text-align: left; }
    .kh-split-mobile { grid-template-columns: 1fr; }
    .fi-topbar { position: sticky; top: 0; z-index: 40; }
    .kh-page-stack { scroll-margin-top: 5rem; }
}

/* RC11 workflow, ledger and responsive presentation. */
.kh-mobile-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.kh-mobile-tabs button { min-height:42px; padding:.6rem .85rem; border:1px solid rgba(20,37,31,.14); border-radius:.65rem; background:#fff; color:var(--dkkr-midnight); font-weight:800; cursor:pointer; }
.kh-mobile-tabs button[aria-selected="true"], .kh-mobile-tabs button.is-active { background:var(--dkkr-midnight); color:#fff; }
.kh-review-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin:0 0 1.2rem; padding:0; list-style:none; }
.kh-review-steps li { display:flex; align-items:center; gap:.55rem; min-height:46px; padding:.65rem; border:1px solid rgba(20,37,31,.1); border-radius:.65rem; background:#faf9f5; color:var(--dkkr-slate); }
.kh-review-steps li span { display:grid; width:25px; height:25px; place-items:center; flex:0 0 auto; border-radius:50%; background:#e7e3d8; color:var(--dkkr-midnight); font-size:.68rem; font-weight:850; }
.kh-review-steps li strong { font-size:.7rem; }
.kh-review-steps li.is-current { border-color:rgba(200,152,69,.55); background:#fff7e7; color:var(--dkkr-midnight); }
.kh-review-steps li.is-current span { background:var(--dkkr-gold); }
.kh-review-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(20,37,31,.08); }
.kh-review-heading div span,.kh-review-heading div strong { display:block; }.kh-review-heading div span{color:var(--dkkr-slate);font-size:.68rem}.kh-review-heading div strong{margin-top:.2rem;color:var(--dkkr-midnight)}
.kh-snapshot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-bottom:1.2rem; }
.kh-snapshot-grid>div { padding:.8rem; border:1px solid rgba(20,37,31,.08); border-radius:.65rem; background:#faf9f5; }
.kh-snapshot-grid span,.kh-snapshot-grid strong { display:block; }.kh-snapshot-grid span{color:var(--dkkr-slate);font-size:.65rem}.kh-snapshot-grid strong{margin-top:.3rem;color:var(--dkkr-midnight);font-size:.82rem}
.kh-brokerage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.kh-brokerage-card { display:grid; gap:1rem; padding:1rem; border:1px solid rgba(20,37,31,.1); border-radius:.85rem; background:#fff; box-shadow:0 10px 28px rgba(20,37,31,.04); }
.kh-brokerage-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.kh-brokerage-card header span:first-child { color:var(--dkkr-gold); font-size:.63rem; font-weight:850; letter-spacing:.08em; }
.kh-brokerage-card h3 { margin:.2rem 0; color:var(--dkkr-midnight); font:800 1rem/1.25 Manrope,Inter,sans-serif; }
.kh-brokerage-card header small { color:var(--dkkr-slate); font-size:.67rem; }
.kh-brokerage-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; }
.kh-brokerage-summary div { padding:.65rem; border-radius:.55rem; background:#faf9f5; }.kh-brokerage-summary dt{color:var(--dkkr-slate);font-size:.62rem}.kh-brokerage-summary dd{margin:.25rem 0 0;color:var(--dkkr-midnight);font-size:.75rem;font-weight:800}
.kh-ledger { border-top:1px solid rgba(20,37,31,.08); padding-top:.75rem; }.kh-ledger summary{cursor:pointer;color:var(--dkkr-midnight);font-size:.7rem;font-weight:800}
.kh-integrity-list { display:grid; gap:.5rem; margin-top:.7rem; }.kh-integrity-list>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.65rem;align-items:center;padding:.6rem;border:1px solid rgba(20,37,31,.08);border-radius:.55rem;background:#faf9f5}.kh-integrity-list strong,.kh-integrity-list small{display:block}.kh-integrity-list strong{color:var(--dkkr-midnight);font-size:.72rem}.kh-integrity-list small{margin-top:.18rem;color:var(--dkkr-slate);font-size:.63rem}
.kh-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding-top:.75rem; border-top:1px solid rgba(20,37,31,.08); }
.kh-payroll-payments { display:grid; gap:.55rem; }.kh-payroll-payments>div{display:grid;grid-template-columns:1fr auto;gap:.7rem;padding:.7rem;border:1px solid rgba(20,37,31,.08);border-radius:.55rem;background:#faf9f5}
.kh-tie-label { display:inline-flex; margin-left:.35rem; padding:.12rem .3rem; border-radius:.35rem; background:#eee7d5; color:var(--dkkr-midnight); font-size:.56rem; font-weight:800; }
.kh-ranking-note { padding:.7rem .85rem; border-left:3px solid var(--dkkr-gold); background:#faf9f5; color:var(--dkkr-slate); font-size:.68rem; line-height:1.5; }
.kh-map-unavailable { display:grid; min-height:260px; place-items:center; padding:2rem; border:1px dashed rgba(20,37,31,.22); border-radius:.8rem; background:#faf9f5; color:var(--dkkr-slate); text-align:center; }
.kh-pipeline-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.kh-pipeline-card{display:grid;gap:.75rem;padding:1rem;border:1px solid rgba(20,37,31,.1);border-radius:.8rem;background:#fff}.kh-pipeline-card h3{margin:0;color:var(--dkkr-midnight);font-size:.9rem}.kh-pipeline-card small{color:var(--dkkr-slate);font-size:.66rem}
.kh-org-node { display:grid; gap:.45rem; padding:.85rem; border:1px solid rgba(20,37,31,.1); border-radius:.7rem; background:#fff; }.kh-org-node h3{margin:0;color:var(--dkkr-midnight);font-size:.88rem}.kh-org-node p{margin:0;color:var(--dkkr-slate);font-size:.68rem;line-height:1.45}
@media (max-width:1024px){.kh-brokerage-grid,.kh-pipeline-grid{grid-template-columns:1fr}.kh-snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.kh-review-steps{grid-template-columns:1fr 1fr}.kh-review-heading{align-items:flex-start;flex-direction:column}.kh-brokerage-summary{grid-template-columns:1fr 1fr}.kh-integrity-list>div{grid-template-columns:1fr}.kh-card-actions>*{width:100%;justify-content:center}.kh-allocation-row{grid-template-columns:1fr}.kh-payroll-payments>div{grid-template-columns:1fr}}
@media (max-width:520px){.kh-review-steps,.kh-snapshot-grid,.kh-brokerage-summary{grid-template-columns:1fr}.kh-mobile-tabs{position:sticky;top:4.25rem;z-index:20;padding:.5rem;background:rgba(247,244,237,.96);backdrop-filter:blur(8px)}}

/* ========================================================================
   RC14 unified application design system
   ======================================================================== */
:root {
    --kh-control-height: 48px;
    --kh-radius-sm: .65rem;
    --kh-radius-md: .85rem;
    --kh-radius-lg: 1rem;
    --kh-shadow-card: 0 14px 38px rgba(20, 37, 31, .055);
    --kh-focus: 0 0 0 3px rgba(200, 152, 69, .25);
}

/* Navigation: selected and hover states must be visually distinct. */
.fi-sidebar .fi-sidebar-item-button {
    min-height: 44px !important;
    padding-inline: .8rem !important;
    border-radius: .7rem !important;
}
.fi-sidebar .fi-sidebar-item-button:hover {
    background: #29463b !important;
    transform: translateX(2px);
}
.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-button:hover * {
    color: #fff !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] {
    background: #f8f4ea !important;
    box-shadow: inset 0 0 0 1px rgba(200, 152, 69, .5), 0 6px 18px rgba(0, 0, 0, .12) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button *,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] * {
    color: var(--dkkr-midnight) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: #a56f17 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"]::before {
    left: -.38rem;
    top: .5rem;
    bottom: .5rem;
    width: 4px;
}

/* Consistent page width, headings and section surfaces. */
.fi-main-ctn { min-width: 0; }
.fi-page { max-width: 1180px; margin-inline: auto; }
.kh-page-stack,
.kh-dashboard-shell { gap: 1.15rem; }
.kh-page-header,
.kh-page-intro,
.kh-dashboard-hero,
.kh-workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.65rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: var(--kh-radius-lg);
    background: linear-gradient(135deg, #fff 0 72%, rgba(200, 152, 69, .12));
    box-shadow: var(--kh-shadow-card);
}
.kh-page-header > div,
.kh-page-intro > div { min-width: 0; }
.kh-page-header h1,
.kh-page-header h2,
.kh-page-intro h1,
.kh-page-intro h2 {
    margin: .3rem 0 .35rem;
    color: var(--dkkr-midnight);
    font: 800 clamp(1.75rem, 3vw, 2.45rem)/1.08 Manrope, Inter, sans-serif;
    letter-spacing: -.04em;
}
.kh-page-header p,
.kh-page-intro p { margin: 0; font-size: .875rem; line-height: 1.6; }
.fi-section {
    overflow: hidden;
    border-radius: var(--kh-radius-lg) !important;
    background: #fff !important;
    box-shadow: var(--kh-shadow-card) !important;
}
.fi-section-header { padding: 1.1rem 1.25rem !important; }
.fi-section-content { padding: 1.25rem !important; }
.fi-section-header-heading { font-size: 1rem !important; font-weight: 800 !important; }
.fi-section-header-description { margin-top: .25rem !important; font-size: .8rem !important; line-height: 1.5 !important; }

/* Sitewide custom forms. This also repairs legacy raw controls without classes. */
.kh-page-stack form,
.kh-page-stack .kh-form-stack,
.kh-page-stack .kh-form-grid { min-width: 0; }
.kh-form-stack { display: grid; gap: 1rem; }
.kh-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 1rem;
    align-items: end;
}
.kh-form-grid > label,
.kh-form-stack > label,
.kh-field,
.kh-cancel-reason {
    display: grid;
    min-width: 0;
    gap: .5rem;
    color: #394842;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.35;
}
.kh-form-grid label > span,
.kh-form-stack label > span,
.kh-field > span,
.kh-cancel-reason > span { display: block; }
.kh-form-grid label small,
.kh-form-stack label small,
.kh-field small {
    color: var(--dkkr-slate);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.5;
}
.kh-page-stack input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.kh-page-stack select,
.kh-page-stack textarea,
.kh-input {
    width: 100%;
    min-width: 0;
    min-height: var(--kh-control-height);
    padding: .72rem .85rem;
    border: 1px solid #cfd5d1;
    border-radius: var(--kh-radius-sm);
    background: #fff;
    color: var(--dkkr-ink);
    font: 500 .875rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
    box-shadow: inset 0 1px 2px rgba(20, 37, 31, .025);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.kh-page-stack input::placeholder,
.kh-page-stack textarea::placeholder { color: #8a9691; opacity: 1; }
.kh-page-stack textarea,
.kh-input:is(textarea) {
    min-height: 112px;
    resize: vertical;
    line-height: 1.55;
}
.kh-page-stack input:hover,
.kh-page-stack select:hover,
.kh-page-stack textarea:hover { border-color: #aeb9b4; }
.kh-page-stack input:focus,
.kh-page-stack select:focus,
.kh-page-stack textarea:focus,
.kh-input:focus {
    outline: 0;
    border-color: var(--dkkr-gold);
    box-shadow: var(--kh-focus);
}
.kh-page-stack input:disabled,
.kh-page-stack select:disabled,
.kh-page-stack textarea:disabled { background: #f1f2ef; color: #727e79; cursor: not-allowed; }
.kh-page-stack input[type="file"],
.kh-file-input {
    padding: .32rem;
    color: var(--dkkr-slate);
    cursor: pointer;
}
.kh-page-stack input[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: .75rem;
    padding: .55rem .8rem;
    border: 0;
    border-radius: .5rem;
    background: #eef1ee;
    color: var(--dkkr-midnight);
    font: 750 .78rem/1 Inter, sans-serif;
    cursor: pointer;
}
.kh-page-stack input[type="file"]::file-selector-button:hover { background: #e2e8e4; }
.kh-check {
    display: flex !important;
    align-items: flex-start;
    gap: .65rem !important;
    padding: .7rem .8rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .65rem;
    background: #fafbf9;
}
.kh-check input { width: 18px; height: 18px; margin-top: .05rem; accent-color: var(--dkkr-midnight); }
.kh-span-2,
.kh-field-full { grid-column: 1 / -1; }
.kh-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    min-height: var(--kh-control-height);
}
.kh-form-error { margin: 0; font-size: .76rem; line-height: 1.45; }
.kh-error-summary { font-size: .8rem; line-height: 1.5; }
.kh-error-summary ul { margin: .45rem 0 0; padding-left: 1.2rem; }
.kh-guidance {
    display: grid;
    gap: .2rem;
    padding: .8rem .9rem;
    border-left: 3px solid var(--dkkr-information);
    border-radius: .55rem;
    background: #f0f7fb;
    font-size: .78rem;
}

/* Filament-native forms receive the same rhythm. */
.fi-fo-field-wrp { gap: .45rem !important; }
.fi-fo-field-wrp-label { font-size: .82rem !important; font-weight: 750 !important; }
.fi-input-wrp,
.fi-select-input,
.fi-fo-textarea { min-height: var(--kh-control-height) !important; border-radius: var(--kh-radius-sm) !important; }
.fi-input,
.fi-select-input,
.fi-fo-textarea { font-size: .875rem !important; }
.fi-fo-textarea { min-height: 112px !important; }
.fi-fo-component-ctn { gap: 1.1rem !important; }

/* Buttons and links. */
.kh-button-primary,
.kh-button-gold,
.kh-secondary-button,
.kh-button-secondary,
.kh-button-danger,
.kh-filter-button,
.kh-list-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .68rem .95rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    font: 800 .8rem/1 Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.kh-button-primary,
.kh-button-gold { background: var(--dkkr-midnight); color: #fff; box-shadow: 0 8px 20px rgba(20, 37, 31, .14); }
.kh-button-primary:hover,
.kh-button-gold:hover { background: var(--dkkr-midnight-soft); transform: translateY(-1px); }
.kh-secondary-button,
.kh-button-secondary,
.kh-list-button { border-color: #cfd5d1; background: #fff; color: var(--dkkr-midnight); }
.kh-secondary-button:hover,
.kh-button-secondary:hover,
.kh-list-button:hover { border-color: var(--dkkr-gold); background: #fffaf0; }
.kh-button-danger { border-color: #d95560; background: #fff; color: var(--dkkr-critical); }
.kh-button-danger:hover { background: #fff0f1; }
.kh-filter-button { min-height: 40px; border-color: #d2d8d4; background: #fff; color: #53615c; }
.kh-filter-button.is-active { border-color: var(--dkkr-midnight); background: var(--dkkr-midnight); color: #fff; }
.kh-page-stack button:focus-visible,
.kh-page-stack a:focus-visible { outline: 3px solid rgba(200, 152, 69, .5); outline-offset: 2px; }
.kh-text-link { font-size: .78rem; line-height: 1.3; }
.kh-text-danger { color: var(--dkkr-critical); }

/* Filter bars. */
.kh-filter-row,
.kh-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .85rem;
}
.kh-filter-row > label,
.kh-filter-bar > label {
    display: grid;
    min-width: 190px;
    flex: 1 1 220px;
    gap: .45rem;
    color: #394842;
    font-size: .8rem;
    font-weight: 750;
}
.kh-filter-row > .fi-btn,
.kh-filter-bar > .fi-btn,
.kh-filter-actions { flex: 0 0 auto; }
.kh-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* Cards, details and metrics. */
.kh-card-grid,
.kh-benefit-grid,
.kh-balance-grid,
.kh-org-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.kh-detail-card,
.kh-benefit-card,
.kh-balance-card,
.kh-manager-card,
.kh-candidate-card,
.kh-org-department,
.kh-org-team {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: var(--kh-radius-md);
    background: #fff;
    box-shadow: 0 10px 28px rgba(20, 37, 31, .045);
}
.kh-card-heading,
.kh-benefit-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.kh-card-heading strong,
.kh-benefit-card h3 { display: block; margin: 0; color: var(--dkkr-midnight); font-size: .95rem; font-weight: 800; }
.kh-card-heading small,
.kh-benefit-card header span:first-child { display: block; margin-top: .2rem; color: var(--dkkr-slate); font-size: .72rem; }
.kh-benefit-card { display: flex; flex-direction: column; gap: .75rem; }
.kh-benefit-card dl { display: grid; gap: .55rem; margin: 0; }
.kh-benefit-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid rgba(20, 37, 31, .08); }
.kh-benefit-card dt { color: var(--dkkr-slate); font-size: .76rem; }
.kh-benefit-card dd { margin: 0; color: var(--dkkr-midnight); font-size: .8rem; font-weight: 800; text-align: right; }
.kh-benefit-card p { flex: 1; margin: 0; color: var(--dkkr-slate); font-size: .76rem; line-height: 1.55; }
.kh-balance-card span { color: var(--dkkr-slate); font-size: .76rem; font-weight: 750; }
.kh-balance-card strong { display: block; margin: .4rem 0; color: var(--dkkr-midnight); font: 800 1.8rem/1 Manrope, Inter, sans-serif; }
.kh-balance-card small { color: var(--dkkr-slate); font-size: .72rem; line-height: 1.45; }
.kh-metric-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kh-three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kh-summary-list { display: grid; gap: 0; margin: 0; }
.kh-summary-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(20, 37, 31, .08); }
.kh-summary-list dt { color: var(--dkkr-slate); font-size: .8rem; }
.kh-summary-list dd { margin: 0; color: var(--dkkr-midnight); font-size: .82rem; font-weight: 800; text-align: right; }
.kh-muted { color: var(--dkkr-slate); font-size: .75rem; }
.kh-mt-6 { margin-top: 1.5rem; }

/* Profile readiness. */
.kh-profile-score { min-width: 140px; padding: .9rem 1rem; text-align: center; }
.kh-progress { position: relative; }
.kh-progress > span,
.kh-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--dkkr-gold); }

/* Tables and empty states. */
.kh-responsive-table table { font-size: .82rem; }
.kh-responsive-table th { padding: .8rem .9rem; font-size: .7rem; }
.kh-responsive-table td { padding: .9rem; line-height: 1.45; }
.kh-responsive-table td > strong { color: var(--dkkr-midnight); }
.kh-table-compact td { padding-block: .65rem; }
.kh-empty-state {
    min-height: 150px;
    gap: .4rem;
    padding: 1.5rem;
    border-radius: .75rem;
    background: #fafbf9;
    font-size: .8rem;
    line-height: 1.5;
}
.kh-empty-state strong { font-size: .9rem; }
.kh-table-actions { flex-wrap: wrap; }

/* Notification Centre. */
.kh-notification-list { display: grid; gap: .75rem; }
.kh-notification-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .9rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 37, 31, .035);
}
.kh-notification-item.is-unread { border-left: 4px solid var(--dkkr-gold); background: #fffdf8; }
.kh-notification-item.is-read { background: #f7f8f6; opacity: .78; }
.kh-notification-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #eef1ee;
    color: var(--dkkr-midnight);
    font-size: .85rem;
    font-weight: 850;
}
.is-unread .kh-notification-icon { background: #f6e9cd; color: #805b19; }
.kh-notification-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kh-notification-heading strong { color: var(--dkkr-midnight); font-size: .88rem; }
.kh-notification-heading time { color: var(--dkkr-slate); font-size: .72rem; white-space: nowrap; }
.kh-notification-item p { margin: .35rem 0; color: #4d5b56; font-size: .8rem; line-height: 1.55; }
.kh-notification-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.kh-notification-actions button.kh-text-link { padding: 0; border: 0; background: transparent; cursor: pointer; }

/* Performance page. */
.kh-page-intro .kh-filter-row { max-width: 520px; justify-content: flex-end; }
.kh-quarter-summary { display: grid; gap: .8rem; }
.kh-quarter-summary > strong { color: var(--dkkr-midnight); font-size: 1.1rem; }
.kh-quarter-summary > span { color: var(--dkkr-success); font-size: 1.5rem; font-weight: 850; }
.kh-quarter-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0; }
.kh-quarter-summary dl div { padding: .75rem; border-radius: .6rem; background: #faf9f5; }
.kh-quarter-summary dt { color: var(--dkkr-slate); font-size: .7rem; }
.kh-quarter-summary dd { margin: .3rem 0 0; color: var(--dkkr-midnight); font-size: .82rem; font-weight: 800; }

/* Calendar. */
.kh-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .65rem;
}
.kh-calendar-day {
    min-height: 128px;
    padding: .8rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 7px 18px rgba(20, 37, 31, .025);
}
.kh-calendar-day.is-weekend { background: #f6f4ed; }
.kh-calendar-day > header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .65rem; }
.kh-calendar-day > header strong { color: var(--dkkr-midnight); font-size: 1rem; }
.kh-calendar-day > header span { color: var(--dkkr-slate); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.kh-calendar-day small { display: block; margin-top: .35rem; padding: .32rem .4rem; border-radius: .35rem; background: #eef5f1; color: #245c43; font-size: .68rem; line-height: 1.35; }

/* Requests and miscellaneous shared structures. */
.kh-mobile-tab-hidden { display: none !important; }
.kh-cancel-reason { margin-bottom: 1rem; }
.kh-request-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.kh-readonly-rule,
.kh-callout {
    padding: .9rem 1rem;
    border-left: 4px solid var(--dkkr-information);
    border-radius: .6rem;
    background: #eef6fb;
    color: #40534b;
    font-size: .8rem;
    line-height: 1.55;
}
.kh-callout-warning { border-left-color: var(--dkkr-warning); background: #fff6e7; }
.kh-report-summary { display: flex; align-items: baseline; gap: .65rem; margin-bottom: 1rem; padding: .85rem 1rem; border-radius: .65rem; background: #f6f7f4; }
.kh-report-summary strong { color: var(--dkkr-midnight); font-size: 1.4rem; }
.kh-report-summary span { color: var(--dkkr-slate); font-size: .8rem; }
.kh-audit-context { max-width: 520px; max-height: 260px; overflow: auto; padding: .75rem; border-radius: .55rem; background: #15251f; color: #eaf1ed; font-size: .72rem; white-space: pre-wrap; }
.kh-status-neutral { color: #4d5a55; background: #eef0ed; }
.kh-warning-text { color: var(--dkkr-warning); font-size: .76rem; }

/* Organization, pipeline and allocation structures. */
.kh-pipeline { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 1rem; overflow-x: auto; }
.kh-pipeline-column { min-width: 240px; padding: .9rem; border-radius: .8rem; background: #f4f3ed; }
.kh-allocation-list,
.kh-timeline { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.kh-allocation-total { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem; border-radius: .55rem; background: #f6f4ed; font-weight: 800; }
.kh-person-row,
.kh-person-cell { display: flex; align-items: center; gap: .7rem; }
.kh-avatar-fallback,
.kh-popup-photo { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--dkkr-midnight); color: #fff; font-weight: 800; }
.kh-map-text { color: var(--dkkr-slate); font-size: .76rem; }

/* Topbar quick attendance access and profile completion ring. */
.kh-topbar-tools { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; gap: .65rem; }
.kh-topbar-clock {
    display: inline-flex;
    min-width: max-content;
    max-width: 100%;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem .72rem;
    border: 1px solid rgba(20, 37, 31, .14);
    border-radius: .65rem;
    background: #fff;
    color: var(--dkkr-midnight);
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(20, 37, 31, .05);
}
.kh-topbar-clock:hover { border-color: var(--dkkr-gold); background: #fffaf0; }
.kh-topbar-clock-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--dkkr-warning); box-shadow: 0 0 0 4px rgba(161, 92, 0, .1); }
.kh-topbar-clock-copy { display: inline-flex; min-width: max-content; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.05; }
.kh-topbar-clock-status,
.kh-topbar-clock-start { white-space: nowrap; }
.kh-topbar-clock-start { margin-top: .12rem; color: var(--dkkr-slate); font-size: .64rem; font-weight: 700; letter-spacing: .01em; }
.kh-topbar-clock.is-clocked-in .kh-topbar-clock-dot { background: var(--dkkr-success); box-shadow: 0 0 0 4px rgba(22, 121, 74, .1); }
.fi-user-menu-trigger.kh-user-menu-progress {
    --kh-profile-progress: 0deg;
    position: relative;
    padding: 3px !important;
    border-radius: 999px !important;
    background: conic-gradient(var(--dkkr-gold) var(--kh-profile-progress), #dfe4e1 0) !important;
}
.fi-user-menu-trigger.kh-user-menu-progress::after {
    content: attr(data-kh-completion);
    position: absolute;
    right: -7px;
    bottom: -7px;
    min-width: 27px;
    height: 18px;
    display: grid;
    place-items: center;
    padding-inline: .25rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--dkkr-midnight);
    color: #fff;
    font-size: .54rem;
    font-weight: 850;
    line-height: 1;
}

/* Application confirmation dialog replaces browser-native confirmation boxes. */
.kh-confirm-dialog {
    width: min(440px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: #fff;
    color: var(--dkkr-ink);
    box-shadow: 0 28px 90px rgba(20, 37, 31, .3);
}
.kh-confirm-dialog::backdrop { background: rgba(12, 24, 19, .58); backdrop-filter: blur(3px); }
.kh-confirm-dialog-inner { padding: 1.35rem; }
.kh-confirm-dialog-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: .85rem; border-radius: 50%; background: #fff3dc; color: var(--dkkr-warning); font-weight: 900; }
.kh-confirm-dialog h2 { margin: 0; color: var(--dkkr-midnight); font: 800 1.2rem/1.2 Manrope, Inter, sans-serif; }
.kh-confirm-dialog p { margin: .55rem 0 1.2rem; color: var(--dkkr-slate); font-size: .84rem; line-height: 1.55; }
.kh-confirm-dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; }
.kh-confirm-dialog-actions button { min-height: 42px; padding: .65rem .9rem; border-radius: .62rem; font-size: .78rem; font-weight: 800; cursor: pointer; }
.kh-confirm-cancel { border: 1px solid #ccd3cf; background: #fff; color: var(--dkkr-midnight); }
.kh-confirm-accept { border: 1px solid var(--dkkr-midnight); background: var(--dkkr-midnight); color: #fff; }

@media (max-width: 1050px) {
    .kh-card-grid,
    .kh-benefit-grid,
    .kh-balance-grid,
    .kh-org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-metric-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kh-calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .fi-page { width: 100%; }
    .kh-page-header,
    .kh-page-intro { align-items: flex-start; flex-direction: column; padding: 1.2rem; }
    .kh-form-grid,
    .kh-three-column { grid-template-columns: 1fr; }
    .kh-span-2,
    .kh-field-full { grid-column: auto; }
    .kh-page-intro .kh-filter-row { width: 100%; max-width: none; justify-content: flex-start; }
    .kh-card-grid,
    .kh-benefit-grid,
    .kh-balance-grid,
    .kh-org-grid,
    .kh-metric-grid-five { grid-template-columns: 1fr; }
    .kh-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-quarter-summary dl { grid-template-columns: 1fr; }
    .kh-notification-heading { flex-direction: column; gap: .25rem; }
    .kh-request-actions { justify-content: flex-start; }
    .kh-topbar-clock .kh-topbar-duration { display: none; }
    .kh-topbar-clock { width: auto; min-width: max-content; max-width: min(9.5rem, 42vw); padding: .38rem .52rem; justify-content: flex-start; gap: .38rem; }
    .kh-topbar-clock-copy { min-width: 0; }
    .kh-topbar-clock-status,
    .kh-topbar-clock-start { white-space: nowrap; }
}
@media (max-width: 480px) {
    .kh-calendar-grid { grid-template-columns: 1fr; }
    .kh-notification-item { grid-template-columns: 34px minmax(0, 1fr); padding: .9rem; }
    .kh-notification-icon { width: 32px; height: 32px; }
}
.kh-readiness-group { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(20, 37, 31, .08); }
.kh-readiness-group h3 { margin: 0 0 .45rem; color: var(--dkkr-midnight); font-size: .82rem; }
.kh-readiness-group ul { display: grid; gap: .3rem; margin: 0; padding-left: 1.1rem; color: var(--dkkr-slate); font-size: .76rem; }
.kh-route-integrity { display: grid; gap: .65rem; padding: .9rem; border: 1px solid rgba(20, 37, 31, .1); border-radius: .7rem; background: #fafbf9; }
.kh-popup-person { display: flex; align-items: center; gap: .65rem; }

/* RC14 final interaction and contrast corrections. These rules intentionally
   come last so Filament utility colours cannot make active navigation unreadable. */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"],
.fi-sidebar .fi-sidebar-item-button.fi-active {
    background: #f7f4ed !important;
    box-shadow: inset 0 0 0 1px rgba(200, 152, 69, .45) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button *,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] *,
.fi-sidebar .fi-sidebar-item-button.fi-active * {
    color: #14251f !important;
    opacity: 1 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: #a96f16 !important;
}
.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-button:focus-visible {
    background: #2b443a !important;
}
.fi-sidebar .fi-sidebar-item-button:hover *,
.fi-sidebar .fi-sidebar-item-button:focus-visible * {
    color: #ffffff !important;
    opacity: 1 !important;
}
.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-button:focus-visible .fi-sidebar-item-icon {
    color: #ead6ad !important;
}

.kh-person-cell { min-width: 210px; }
.kh-person-cell > img,
.kh-popup-person > img,
.kh-popup-photo {
    display: block !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.kh-performance-hero .kh-status { border: 1px solid rgba(255, 255, 255, .24); font-size: .72rem; }
.kh-performance-hero .kh-status-neutral,
.kh-performance-hero .kh-status-gray { color: #14251f !important; background: #f7f4ed !important; }
.kh-performance-hero .kh-status-danger { color: #7d1721 !important; background: #feecee !important; }
.kh-performance-hero .kh-status-warning { color: #744100 !important; background: #fff1d8 !important; }
.kh-performance-hero .kh-status-success { color: #0b5d36 !important; background: #e7f5ed !important; }
.kh-performance-hero .kh-status-info { color: #124f7d !important; background: #e8f2fa !important; }
.kh-performance-hero dd { color: #ffffff !important; }
.kh-performance-hero .kh-progress { background: rgba(255, 255, 255, .22); }
.kh-performance-hero .kh-progress i { background: #c89845; }

.kh-confirm-dialog {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}
.kh-info-success { border-left-color: var(--dkkr-success); background: #edf8f2; }
.kh-text-button { display:inline-flex; min-height:32px; align-items:center; padding:.25rem .35rem; border:0; background:transparent; color:#1769a6; font-size:.72rem; font-weight:750; text-decoration:underline; text-underline-offset:.18em; cursor:pointer; }
.kh-text-danger { color:#a11f2b; }
.kh-table-subtext { display:block; margin-top:.2rem; color:var(--dkkr-slate); font-size:.66rem; font-weight:500; }
.kh-clock-button:disabled { cursor:wait; opacity:.72; }

/* RC16 Filament 5 navigation selectors.
   Filament 5 renamed the clickable sidebar element from
   .fi-sidebar-item-button to .fi-sidebar-item-btn. Keep both forms so a host
   cannot regress during a rolling Filament asset upgrade. */
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) {
    min-height: 44px !important;
    padding-inline: .8rem !important;
    border-radius: .7rem !important;
    color: #f4f7f5 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) > .fi-sidebar-item-label {
    color: #f4f7f5 !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) > :is(.fi-icon, .fi-sidebar-item-icon) {
    color: #c5d0cb !important;
    opacity: 1 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"],
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active {
    background: #f7f4ed !important;
    color: #14251f !important;
    box-shadow: inset 0 0 0 1px rgba(200, 152, 69, .45), 0 6px 18px rgba(0, 0, 0, .1) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) > .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] > .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active > .fi-sidebar-item-label {
    color: #14251f !important;
    opacity: 1 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) > :is(.fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] > :is(.fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active > :is(.fi-icon, .fi-sidebar-item-icon) {
    color: #9a6413 !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible {
    background: #2b443a !important;
    color: #ffffff !important;
    transform: translateX(2px);
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover > .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible > .fi-sidebar-item-label {
    color: #ffffff !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover > :is(.fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible > :is(.fi-icon, .fi-sidebar-item-icon) {
    color: #f3dfb8 !important;
    opacity: 1 !important;
}

/* RC16 final specificity shield: match label/icon descendants even when a
   Filament patch inserts an extra wrapper inside the navigation button. */
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active .fi-sidebar-item-label {
    color: #14251f !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: #9a6413 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is(:hover, :focus-visible) .fi-sidebar-item-label {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is(:hover, :focus-visible) :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: #f3dfb8 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* RC16 organization, settings, recruitment and ranking refinements. */
.kh-organization-page,
.kh-recruitment-page,
.kh-settings-page {
    gap: 1rem;
}

.kh-settings-layout,
.kh-recruitment-controls,
.kh-ranking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.kh-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.kh-settings-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-setting-field {
    display: grid;
    grid-template-rows: auto 46px minmax(34px, auto) auto;
    gap: .35rem;
    min-width: 0;
    align-content: start;
}
.kh-setting-field > span {
    color: var(--dkkr-midnight);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.35;
}
.kh-setting-field > small,
.kh-setting-rule small {
    color: var(--dkkr-slate);
    font-size: .68rem;
    line-height: 1.45;
}
.kh-setting-field > em {
    color: var(--dkkr-critical);
    font-size: .68rem;
    font-style: normal;
    font-weight: 750;
}
.kh-setting-field > .kh-input,
.kh-input-with-unit { width: 100%; }
.kh-input-with-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    min-height: 46px;
    border: 1px solid rgba(20, 37, 31, .18);
    border-radius: .65rem;
    background: #fff;
}
.kh-input-with-unit:focus-within {
    border-color: var(--dkkr-gold);
    outline: 3px solid rgba(200, 152, 69, .22);
}
.kh-input-with-unit .kh-input {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
.kh-input-with-unit > span {
    padding: 0 .75rem;
    color: var(--dkkr-slate);
    font-size: .68rem;
    font-weight: 750;
    white-space: nowrap;
}
.kh-setting-rule {
    display: grid;
    grid-template-rows: auto auto minmax(34px, auto);
    gap: .35rem;
    min-height: 112px;
    padding: .8rem .9rem;
    border: 1px solid #c9dce8;
    border-radius: .65rem;
    background: #eef6fb;
}
.kh-setting-rule > span { color: #40534b; font-size: .75rem; font-weight: 800; }
.kh-setting-rule > strong { color: var(--dkkr-midnight); font-size: 1rem; }

.kh-org-filters { grid-template-columns: minmax(260px, 1fr) auto; }
.kh-org-department-card {
    overflow: hidden;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 34px rgba(20, 37, 31, .05);
}
.kh-org-department-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, #fff, #f8f5ed);
}
.kh-org-department-card > summary::-webkit-details-marker { display: none; }
.kh-org-department-card > summary::after {
    content: "⌄";
    color: var(--dkkr-slate);
    font-size: 1rem;
    transition: transform .18s ease;
}
.kh-org-department-card:not([open]) > summary::after { transform: rotate(-90deg); }
.kh-org-department-title { display: grid; gap: .15rem; }
.kh-org-department-title > strong { color: var(--dkkr-midnight); font-size: 1.05rem; }
.kh-org-department-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.kh-org-department-metrics > span:not(.kh-status) {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .38rem .55rem;
    border-radius: .5rem;
    background: rgba(20, 37, 31, .055);
    color: var(--dkkr-slate);
    font-size: .68rem;
}
.kh-org-department-metrics b { color: var(--dkkr-midnight); font-size: .8rem; }
.kh-org-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid rgba(20, 37, 31, .08);
}
.kh-org-team-card {
    display: grid;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .85rem;
    background: #fcfcfa;
}
.kh-org-team-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.kh-org-team-header h3 { margin: .1rem 0; color: var(--dkkr-midnight); font-size: .95rem; }
.kh-org-team-header small { color: var(--dkkr-slate); font-size: .68rem; }
.kh-org-manager {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid rgba(200, 152, 69, .26);
    border-radius: .7rem;
    background: #fffaf0;
}
.kh-org-manager.is-vacant { border-color: rgba(161, 92, 0, .28); background: #fff6e7; }
.kh-org-manager > div { display: grid; gap: .1rem; min-width: 0; }
.kh-org-manager small { color: var(--dkkr-slate); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.kh-org-manager strong { color: var(--dkkr-midnight); font-size: .78rem; }
.kh-org-manager div > span { color: var(--dkkr-slate); font-size: .67rem; }
.kh-org-members { display: grid; gap: .55rem; }
.kh-org-members-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kh-org-members-heading strong { color: var(--dkkr-midnight); font-size: .76rem; }
.kh-org-members-heading span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #eef1ee; color: var(--dkkr-midnight); font-size: .66rem; font-weight: 850; }
.kh-org-members ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.kh-org-members li:not(.kh-org-empty-member) {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    padding: .55rem 0;
    border-top: 1px solid rgba(20, 37, 31, .07);
}
.kh-org-members .kh-avatar { width: 34px; height: 34px; font-size: .66rem; }
.kh-org-members li > div:nth-child(2) { display: grid; gap: .05rem; min-width: 0; }
.kh-org-members li strong { overflow: hidden; color: var(--dkkr-midnight); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.kh-org-members li small,
.kh-org-members li div > span { color: var(--dkkr-slate); font-size: .63rem; line-height: 1.35; }
.kh-org-member-status { display: grid; justify-items: end; gap: .25rem; }
.kh-org-empty-member .kh-empty-state { min-height: 90px; padding: .75rem; }
.kh-org-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.kh-org-timeline li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: start;
    padding: .8rem 0;
    border-top: 1px solid rgba(20, 37, 31, .08);
}
.kh-org-timeline li:first-child { border-top: 0; }
.kh-org-timeline-marker { width: 10px; height: 10px; margin-top: .25rem; border: 2px solid #fff; border-radius: 50%; background: var(--dkkr-gold); box-shadow: 0 0 0 2px rgba(200, 152, 69, .25); }
.kh-org-timeline li > div { display: grid; gap: .15rem; }
.kh-org-timeline strong { color: var(--dkkr-midnight); font-size: .78rem; }
.kh-org-timeline div > span { color: #40534b; font-size: .72rem; font-weight: 750; }
.kh-org-timeline small { color: var(--dkkr-slate); font-size: .68rem; line-height: 1.45; }
.kh-org-timeline time { color: var(--dkkr-slate); font-size: .68rem; white-space: nowrap; }

.kh-recruitment-controls { grid-template-columns: minmax(280px, .85fr) minmax(460px, 1.4fr); }
.kh-pipeline-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.kh-pipeline-stage {
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .9rem;
    background: #f7f6f1;
    box-shadow: 0 10px 26px rgba(20, 37, 31, .035);
}
.kh-pipeline-stage > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(20, 37, 31, .08);
    background: #fff;
}
.kh-pipeline-stage h3 { margin: .1rem 0 0; color: var(--dkkr-midnight); font-size: .88rem; }
.kh-stage-count { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--dkkr-midnight); color: #fff; font-size: .72rem; font-weight: 850; }
.kh-pipeline-cards { display: grid; gap: .7rem; padding: .75rem; }
.kh-candidate-card { display: grid; gap: .75rem; padding: .85rem; }
.kh-candidate-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .65rem; align-items: center; }
.kh-candidate-heading > div { display: grid; gap: .08rem; min-width: 0; }
.kh-candidate-heading strong { color: var(--dkkr-midnight); font-size: .78rem; }
.kh-candidate-heading div > span { color: var(--dkkr-slate); font-size: .66rem; line-height: 1.4; }
.kh-candidate-meta { display: grid; gap: .4rem; margin: 0; }
.kh-candidate-meta > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: .5rem; }
.kh-candidate-meta dt { color: var(--dkkr-slate); font-size: .63rem; }
.kh-candidate-meta dd { overflow-wrap: anywhere; margin: 0; color: #33423c; font-size: .66rem; font-weight: 700; text-align: right; }
.kh-card-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .65rem; border-top: 1px solid rgba(20, 37, 31, .08); }
.kh-action-button { min-height: 34px; padding: .4rem .6rem; border: 1px solid rgba(20, 37, 31, .14); border-radius: .5rem; background: #fff; color: var(--dkkr-midnight); font-size: .66rem; font-weight: 800; cursor: pointer; }
.kh-action-button:hover { border-color: var(--dkkr-gold); background: #fffaf0; }
.kh-action-danger { border-color: rgba(180, 35, 47, .26); color: var(--dkkr-critical); }
.kh-pipeline-empty { display: grid; place-items: center; gap: .2rem; min-height: 120px; padding: 1rem; text-align: center; }
.kh-pipeline-empty strong { color: var(--dkkr-midnight); font-size: .76rem; }
.kh-pipeline-empty span { color: var(--dkkr-slate); font-size: .68rem; }

.kh-ranking-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.kh-leaderboard { gap: .55rem; }
.kh-leaderboard li {
    border: 1px solid rgba(20, 37, 31, .08);
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 7px 18px rgba(20, 37, 31, .025);
}
.kh-leaderboard-people li { grid-template-columns: 34px 44px minmax(0, 1fr) minmax(180px, auto); }
.kh-leaderboard-teams li { grid-template-columns: 34px minmax(0, 1fr) minmax(180px, auto); }
.kh-leader-avatar { width: 42px; height: 42px; overflow: hidden; }
.kh-leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kh-leader-person { display: grid; gap: .12rem; min-width: 0; }
.kh-leader-person > strong { color: var(--dkkr-midnight); font-size: .78rem; }
.kh-leader-person > span { color: #40534b; font-size: .68rem; font-weight: 700; }
.kh-leader-person > small { color: var(--dkkr-slate); font-size: .63rem; line-height: 1.4; }
.kh-leader-result { display: grid; justify-items: end; gap: .12rem; text-align: right; }
.kh-leader-result > strong { color: var(--dkkr-midnight); font-size: .8rem; }
.kh-leader-result > span { color: var(--dkkr-success); font-size: .68rem; font-weight: 800; }
.kh-leader-result > small { color: var(--dkkr-slate); font-size: .62rem; line-height: 1.35; }
.kh-mini-progress { overflow: hidden; width: 100%; max-width: 170px; height: 5px; border-radius: 999px; background: #e9e7df; }
.kh-mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--dkkr-gold); }

@media (max-width: 1180px) {
    .kh-org-team-grid,
    .kh-pipeline-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-settings-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-ranking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .kh-settings-layout,
    .kh-recruitment-controls,
    .kh-settings-grid,
    .kh-settings-grid-three,
    .kh-org-team-grid,
    .kh-pipeline-board { grid-template-columns: 1fr; }
    .kh-org-department-card > summary { align-items: flex-start; flex-direction: column; }
    .kh-org-department-metrics { justify-content: flex-start; margin-left: 0; }
    .kh-leaderboard-people li { grid-template-columns: 34px 42px minmax(0, 1fr); }
    .kh-leaderboard-teams li { grid-template-columns: 34px minmax(0, 1fr); }
    .kh-leader-result { grid-column: 3; justify-items: start; text-align: left; }
    .kh-leaderboard-teams .kh-leader-result { grid-column: 2; }
}
@media (max-width: 560px) {
    .kh-org-manager { grid-template-columns: 38px minmax(0, 1fr); }
    .kh-org-manager > .kh-status { grid-column: 2; justify-self: start; }
    .kh-org-members li:not(.kh-org-empty-member) { grid-template-columns: 34px minmax(0, 1fr); }
    .kh-org-member-status { grid-column: 2; justify-items: start; }
    .kh-org-timeline li { grid-template-columns: 14px minmax(0, 1fr); }
    .kh-org-timeline time { grid-column: 2; }
    .kh-leaderboard-people li { grid-template-columns: 30px 38px minmax(0, 1fr); }
    .kh-leader-result { grid-column: 2 / -1; }
}

/* RC16 corrective UX: bounded result sets and consistent resource forms. */
.kh-result-count {
    margin-left: auto;
    color: var(--dkkr-slate);
    font-size: .72rem;
    font-weight: 700;
}
.kh-load-more {
    display: flex;
    justify-content: center;
    padding: 1rem 0 .25rem;
}

.fi-resource-create-record-page :is(.fi-form, .fi-sc-form, form[wire\:submit]),
.fi-resource-create-record-page .fi-page-content > form,
.fi-resource-create-record-page .fi-page-content > div > form {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: 1rem;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(20, 37, 31, .045);
}

.fi-resource-create-record-page :is(.fi-form, .fi-sc-form, form[wire\:submit]) > :is(.fi-sc, .fi-sc-component),
.fi-resource-create-record-page .fi-page-content > form > :is(.fi-sc, .fi-sc-component) {
    background: transparent !important;
}

.fi-resource-create-record-page .fi-form-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(20, 37, 31, .08);
    background: transparent !important;
}

/* RC20: a newly accepted Live Location update stays highlighted for exactly
   five seconds. JavaScript removes only this class; row ordering remains based
   on the accepted timestamp and is therefore stable after the highlight ends. */
.kh-live-row-updated td {
    background: #fff4bf !important;
    transition: background-color .2s ease;
}
.kh-live-row-updated td:first-child {
    box-shadow: inset 4px 0 0 var(--dkkr-gold);
}
@media (prefers-reduced-motion: reduce) {
    .kh-live-row-updated td { transition: none; }
}

/* RC20 map refresh controls: one action fetches canonical page data and
   explicitly resets the viewport; background polling never touches the view. */
.kh-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(20, 37, 31, .1);
    border-radius: .75rem;
    background: #faf9f5;
}
.kh-map-toolbar > div {
    display: grid;
    gap: .18rem;
    min-width: 0;
}
.kh-map-toolbar strong {
    color: var(--dkkr-midnight);
    font-size: .78rem;
}
.kh-map-toolbar span {
    color: var(--dkkr-slate);
    font-size: .7rem;
    line-height: 1.45;
}
@media (max-width: 640px) {
    .kh-map-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .kh-map-toolbar .fi-btn {
        justify-content: center;
        width: 100%;
    }
}

/* RC22 administrator bulk attendance control and server-synchronised timers. */
.kh-bulk-clockout-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(180, 35, 47, .2);
    border-left: 4px solid var(--dkkr-danger, #b4232f);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20, 37, 31, .045);
}
.kh-bulk-clockout-panel h3 {
    margin: .15rem 0 .25rem;
    color: var(--dkkr-midnight);
    font-size: 1rem;
    font-weight: 800;
}
.kh-bulk-clockout-panel p:not(.kh-eyebrow) {
    max-width: 54rem;
    color: var(--dkkr-slate);
    font-size: .78rem;
    line-height: 1.5;
}
.kh-bulk-clockout-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .75rem;
}
.kh-active-session-count {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    white-space: nowrap;
    color: var(--dkkr-slate);
    font-size: .75rem;
}
.kh-active-session-count strong {
    color: var(--dkkr-midnight);
    font-size: 1.15rem;
}
.kh-bulk-clockout-summary {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
    padding: .7rem .8rem;
    border-radius: .75rem;
    background: #f7f4ed;
    color: var(--dkkr-slate);
    font-size: .75rem;
}
.kh-bulk-clockout-summary strong { color: var(--dkkr-midnight); }
.kh-bulk-clockout-summary .fi-btn { margin-left: auto; }
.kh-bulk-clockout-dialog { width: min(34rem, calc(100vw - 2rem)); }
.kh-bulk-clockout-dialog .kh-field { margin-top: .75rem; text-align: left; }
.kh-bulk-clockout-dialog .kh-input { min-height: 7rem; resize: vertical; }
.kh-field-error { color: #b4232f; font-size: .72rem; font-weight: 700; }
.kh-danger-button { background: #b4232f !important; color: #fff !important; }

.kh-clock-out-control {
    display: grid;
    justify-items: end;
    gap: .2rem;
}
.kh-clock-out-control > strong,
.kh-topbar-duration,
[data-kh-working-duration] {
    font-variant-numeric: tabular-nums;
}
.kh-clock-out-control > strong {
    color: #fff;
    font-size: 1.25rem;
    letter-spacing: .02em;
}
.kh-topbar-duration {
    min-width: 4.6rem;
    padding-left: .5rem;
    border-left: 1px solid rgba(20, 37, 31, .14);
    color: var(--dkkr-midnight);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.kh-topbar-duration[hidden] { display: none !important; }

@media (max-width: 760px) {
    .kh-bulk-clockout-panel,
    .kh-bulk-clockout-actions,
    .kh-bulk-clockout-summary {
        align-items: stretch;
        flex-direction: column;
    }
    .kh-bulk-clockout-actions .fi-btn,
    .kh-bulk-clockout-summary .fi-btn { width: 100%; margin-left: 0; }
    .kh-clock-out-control { justify-items: stretch; }
}
.kh-bulk-clockout-summary small {
    flex-basis: 100%;
    color: var(--dkkr-slate);
    line-height: 1.45;
}
.kh-bulk-clockout-failures {
    display: grid;
    flex-basis: 100%;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kh-bulk-clockout-failures li {
    display: grid;
    gap: .1rem;
    padding: .45rem .55rem;
    border-radius: .5rem;
    background: rgba(180, 35, 47, .07);
}
.kh-bulk-clockout-failures li strong { color: #8b1d27; }
.kh-bulk-clockout-failures li span { color: var(--dkkr-slate); }

/* RC23 renderless Live Location controls and durable bulk result presentation. */
.kh-primary-button,
.kh-warning-button,
.kh-bulk-clockout-trigger {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem .9rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}
.kh-primary-button {
    border-color: rgba(20, 37, 31, .16);
    background: var(--dkkr-midnight);
    color: #fff;
}
.kh-warning-button {
    border-color: rgba(173, 112, 19, .28);
    background: #fff6dc;
    color: #7c4d00;
}
.kh-bulk-clockout-trigger {
    border-color: #b4232f;
    background: #b4232f;
    color: #fff;
}
.kh-primary-button:hover:not(:disabled),
.kh-warning-button:hover:not(:disabled),
.kh-bulk-clockout-trigger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 37, 31, .12);
}
.kh-primary-button:disabled,
.kh-warning-button:disabled,
.kh-bulk-clockout-trigger:disabled {
    opacity: .52;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.kh-message {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(20, 37, 31, .12);
    border-left-width: 4px;
    border-radius: .75rem;
    background: #fff;
    font-size: .78rem;
}
.kh-message-success { border-left-color: #16845b; background: #eefaf5; color: #0b6041; }
.kh-message-warning { border-left-color: #b7791f; background: #fff9e8; color: #7a4c00; }
.kh-message-danger { border-left-color: #b4232f; background: #fff1f2; color: #8b1d27; }
.kh-bulk-clockout-summary {
    display: grid;
    align-items: stretch;
    gap: .75rem;
}
.kh-bulk-summary-heading,
.kh-bulk-summary-counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.kh-bulk-summary-heading > span {
    color: var(--dkkr-slate);
    font-size: .7rem;
}
.kh-bulk-summary-counts {
    justify-content: flex-start;
}
.kh-bulk-result-group {
    display: grid;
    gap: .45rem;
    padding: .65rem;
    border: 1px solid rgba(20, 37, 31, .08);
    border-radius: .65rem;
    background: #fff;
}
.kh-bulk-result-group > strong { font-size: .76rem; }
.kh-bulk-result-group ul {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kh-bulk-result-group li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem .45rem;
    border-radius: .45rem;
    background: #faf9f5;
    color: var(--dkkr-slate);
}
.kh-bulk-result-group li small {
    display: block;
    color: var(--dkkr-slate);
}
.kh-bulk-result-failed {
    border-color: rgba(180, 35, 47, .2);
    background: #fff8f8;
}
.kh-bulk-result-failed li { background: rgba(180, 35, 47, .06); }
.kh-bulk-result-failed .kh-warning-button { justify-self: start; }
@media (max-width: 640px) {
    .kh-primary-button,
    .kh-warning-button,
    .kh-bulk-clockout-trigger { width: 100%; }
    .kh-bulk-result-group li { flex-direction: column; }
}

/* Batch 5 performance achievement bands: exact plan thresholds. */
.kh-status-red { color:#8f1d2c; background:#fdebed; }
.kh-status-orange { color:#9a4300; background:#fff0df; }
.kh-status-amber { color:#785900; background:#fff6cf; }
.kh-status-green { color:#0f613a; background:#e7f5ed; }
.kh-status-dark-green { color:#08452a; background:#d8eee2; }
.kh-performance-band-red i { background:#b42336 !important; }
.kh-performance-band-orange i { background:#d45f06 !important; }
.kh-performance-band-amber i { background:#c48b00 !important; }
.kh-performance-band-green i { background:#248451 !important; }
.kh-performance-band-dark-green i { background:#0b5d36 !important; }

/* ========================================================================
   Kashavi Homes 2026 visual redesign
   ------------------------------------------------------------------------
   This final layer intentionally consolidates the established Filament and
   kh-/dkkr- component vocabulary onto the semantic tokens defined above.
   ======================================================================== */

/* Application canvas and typography */
html { background: var(--kh-app-bg); }
body,
.fi-body {
    color: var(--kh-text);
    background: var(--kh-app-bg) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    text-rendering: optimizeLegibility;
}
.fi-main,
.fi-main-ctn {
    min-width: 0;
    background: var(--kh-app-bg) !important;
}
.fi-page {
    width: 100%;
    max-width: 1560px !important;
    margin-inline: auto;
}
.fi-page > * { min-width: 0; }
.fi-header {
    gap: .35rem !important;
    margin-bottom: .15rem;
}
.fi-header-heading {
    color: var(--kh-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
    font-weight: 750 !important;
    letter-spacing: -.035em !important;
}
.fi-header-subheading,
.fi-section-header-description { color: var(--kh-text-secondary) !important; }

/* Light navigation shell: restrained, compact, and brand-specific. */
.fi-sidebar {
    background: var(--kh-sidebar) !important;
    border-right: 1px solid var(--kh-border) !important;
    box-shadow: none !important;
}
.fi-sidebar-header {
    min-height: 4rem;
    background: var(--kh-sidebar) !important;
    border-bottom: 1px solid var(--kh-border-muted) !important;
    box-shadow: none !important;
}
.fi-sidebar-header .fi-logo,
.fi-sidebar-header a {
    color: var(--kh-primary) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}
.fi-sidebar-nav { padding-block: .8rem 1rem !important; }
.fi-sidebar-group { gap: .2rem !important; }
.fi-sidebar-group-label {
    color: var(--kh-text-muted) !important;
    font-size: .625rem !important;
    font-weight: 800 !important;
    letter-spacing: .105em !important;
    text-transform: uppercase;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) {
    min-height: 40px !important;
    padding-inline: .72rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--kh-radius-sm) !important;
    color: var(--kh-text-secondary) !important;
    transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) .fi-sidebar-item-label {
    color: var(--kh-text-secondary) !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar .fi-sidebar-group-collapse-button {
    color: var(--kh-text-muted) !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible {
    transform: none !important;
    background: var(--kh-hover) !important;
    border-color: var(--kh-border-muted) !important;
    color: var(--kh-primary) !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is(:hover, :focus-visible) * { color: var(--kh-primary) !important; }
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] {
    position: relative;
    background: var(--kh-sidebar-active) !important;
    border-color: #d7e7df !important;
    box-shadow: none !important;
    color: var(--kh-primary) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)::before,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]::before {
    left: .18rem !important;
    top: .55rem !important;
    bottom: .55rem !important;
    width: 3px !important;
    border-radius: 99px !important;
    background: var(--kh-primary) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) *,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] * { color: var(--kh-primary) !important; }
.fi-sidebar .fi-sidebar-item.fi-active :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) { color: var(--kh-primary) !important; }

/* Topbar and account tools */
.fi-topbar {
    min-height: 4rem;
    background: var(--kh-topbar) !important;
    border-bottom: 1px solid var(--kh-border-muted) !important;
    box-shadow: var(--kh-shadow-sm) !important;
    backdrop-filter: blur(16px);
}
.fi-topbar .fi-icon-btn,
.fi-user-menu-trigger {
    border-radius: .7rem !important;
}
.fi-topbar .fi-icon-btn:hover,
.fi-user-menu-trigger:hover { background: var(--kh-hover) !important; }
.fi-avatar {
    border: 2px solid #fff;
    border-radius: .72rem !important;
    box-shadow: 0 0 0 1px var(--kh-border);
}
.kh-topbar-clock {
    min-height: 38px !important;
    border-color: var(--kh-border) !important;
    border-radius: .7rem !important;
    background: var(--kh-surface) !important;
    box-shadow: none !important;
    color: var(--kh-text-secondary) !important;
}
.kh-topbar-clock:hover {
    border-color: #bfd7cc !important;
    background: var(--kh-primary-soft) !important;
}
.kh-topbar-clock-dot { background: var(--kh-warning) !important; box-shadow: 0 0 0 4px var(--kh-warning-soft) !important; }
.kh-topbar-clock.is-clocked-in .kh-topbar-clock-dot { background: var(--kh-success) !important; box-shadow: 0 0 0 4px var(--kh-success-soft) !important; }
.kh-topbar-duration { color: var(--kh-text-secondary) !important; border-left-color: var(--kh-border) !important; }

/* Filament surfaces, tables, forms, actions, tabs, dialogs and notifications */
.fi-section,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel,
.fi-card {
    border: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    box-shadow: var(--kh-shadow-card) !important;
}
.fi-section { overflow: hidden; }
.fi-section-header {
    padding: 1rem 1.15rem !important;
    border-bottom-color: var(--kh-border-muted) !important;
}
.fi-section-content { padding: 1.15rem !important; }
.fi-section-header-heading,
.fi-modal-heading {
    color: var(--kh-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 750 !important;
    letter-spacing: -.02em !important;
}
.fi-ta-header,
.fi-ta-header-toolbar,
.fi-ta-footer { background: var(--kh-surface) !important; }
.fi-ta-header-cell { background: #f8faf9 !important; }
.fi-ta-header-cell-label {
    color: var(--kh-text-secondary) !important;
    font-size: .69rem !important;
    font-weight: 800 !important;
    letter-spacing: .035em;
}
.fi-ta-row { border-color: var(--kh-border-muted) !important; }
.fi-ta-row:hover { background: #fafcfb !important; }
.fi-ta-text-item-label { color: var(--kh-text) !important; }
.fi-ta-empty-state { min-height: 220px !important; background: #fbfcfb !important; }
.fi-ta-empty-state-heading { color: var(--kh-text) !important; }
.fi-ta-empty-state-description { color: var(--kh-text-secondary) !important; }
.fi-input-wrp,
.fi-select-input,
.fi-fo-textarea textarea,
.fi-input {
    border-color: var(--kh-border) !important;
    border-radius: .7rem !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(24, 57, 46, .02) !important;
}
.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-fo-textarea textarea:focus,
.fi-input:focus {
    border-color: #8ab7a6 !important;
    box-shadow: 0 0 0 3px var(--kh-focus-ring) !important;
}
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp-label span { color: var(--kh-text-secondary) !important; font-weight: 700 !important; }
.fi-btn {
    min-height: 40px !important;
    border-radius: .68rem !important;
    font-weight: 750 !important;
    letter-spacing: -.005em;
    box-shadow: none !important;
}
.fi-btn-color-primary {
    background: var(--kh-primary) !important;
    color: #fff !important;
}
.fi-btn-color-primary:hover { background: var(--kh-primary-strong) !important; }
.fi-btn-color-gray { border-color: var(--kh-border) !important; background: #fff !important; color: var(--kh-text) !important; }
.fi-btn-color-gray:hover { background: var(--kh-hover) !important; }
.fi-badge {
    min-height: 24px;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}
.fi-tabs {
    gap: .2rem !important;
    padding: .25rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: .78rem !important;
    background: #f8faf9 !important;
    box-shadow: none !important;
}
.fi-tabs-item { border-radius: .58rem !important; }
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] { background: #fff !important; box-shadow: var(--kh-shadow-sm) !important; }
.fi-pagination { color: var(--kh-text-secondary); }
.fi-pagination-item { border-radius: .55rem !important; }
.fi-dropdown-panel { box-shadow: var(--kh-shadow-float) !important; }
.fi-modal-window { box-shadow: var(--kh-shadow-float) !important; }
.fi-no-notification { border-radius: var(--kh-radius-md) !important; }

/* Shared custom-page primitives */
.kh-page-stack,
.kh-dashboard-shell { gap: 1rem !important; }
.kh-page-intro,
.kh-dashboard-hero,
.kh-workspace-hero,
.kh-page-header {
    padding: 1.15rem 1.25rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    box-shadow: var(--kh-shadow-card) !important;
    color: var(--kh-text) !important;
}
.kh-page-intro h1,
.kh-page-intro h2,
.kh-page-intro h3,
.kh-dashboard-hero h2,
.kh-workspace-hero h2,
.kh-page-header h1,
.kh-page-header h2 {
    margin: .15rem 0 .3rem !important;
    color: var(--kh-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em !important;
}
.kh-page-intro p,
.kh-dashboard-hero p,
.kh-workspace-hero p,
.kh-page-header p { color: var(--kh-text-secondary) !important; line-height: 1.55 !important; }
.kh-eyebrow {
    color: var(--kh-primary) !important;
    font-size: .625rem !important;
    font-weight: 850 !important;
    letter-spacing: .105em !important;
}
.kh-button-gold,
.kh-button-secondary,
.kh-primary-button,
.kh-warning-button,
.kh-bulk-clockout-trigger {
    min-height: 40px !important;
    border-radius: .68rem !important;
    font-weight: 780 !important;
    box-shadow: none !important;
}
.kh-button-gold,
.kh-primary-button {
    border: 1px solid var(--kh-primary) !important;
    background: var(--kh-primary) !important;
    color: #fff !important;
}
.kh-button-gold:hover,
.kh-primary-button:hover { background: var(--kh-primary-strong) !important; color: #fff !important; }
.kh-button-secondary { border-color: var(--kh-border) !important; background: #fff !important; color: var(--kh-text) !important; }
.kh-button-secondary:hover { background: var(--kh-hover) !important; border-color: #cfdad4 !important; }
.kh-button-icon { width: 1rem; height: 1rem; margin-right: .35rem; }
.kh-text-link { color: var(--kh-primary) !important; font-weight: 750 !important; }
.kh-text-link:hover { color: var(--kh-primary-strong) !important; text-decoration: underline; text-underline-offset: 3px; }
.kh-summary-chip,
.kh-status { border-radius: 999px !important; font-weight: 750 !important; }
.kh-status-success { color: #1c674d !important; background: var(--kh-success-soft) !important; }
.kh-status-warning { color: #8c5517 !important; background: var(--kh-warning-soft) !important; }
.kh-status-danger { color: #953442 !important; background: var(--kh-danger-soft) !important; }
.kh-status-info { color: #2f6194 !important; background: var(--kh-info-soft) !important; }
.kh-status-gray,
.kh-summary-chip { color: var(--kh-text-secondary) !important; background: var(--kh-neutral-soft) !important; }
.kh-input {
    min-height: 42px !important;
    border-color: var(--kh-border) !important;
    border-radius: .68rem !important;
    color: var(--kh-text) !important;
    box-shadow: none !important;
}
.kh-input:focus { border-color: #8ab7a6 !important; outline: 3px solid var(--kh-focus-ring) !important; }
.kh-responsive-table {
    border-color: var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    box-shadow: var(--kh-shadow-sm);
}
.kh-responsive-table th { color: var(--kh-text-secondary) !important; background: #f8faf9 !important; }
.kh-responsive-table td { border-color: var(--kh-border-muted) !important; }
.kh-responsive-table tr:hover td { background: #fafcfb !important; }
.kh-empty-state,
.dkkr-empty {
    min-height: 96px !important;
    padding: 1.15rem !important;
    border: 1px dashed #cfdad4 !important;
    border-radius: var(--kh-radius-md) !important;
    background: #fafcfb !important;
    color: var(--kh-text-secondary) !important;
}
.kh-empty-state::before,
.dkkr-empty::before {
    content: "—";
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    margin: 0 auto .35rem;
    border-radius: 50%;
    background: var(--kh-primary-soft);
    color: var(--kh-primary);
    font-weight: 800;
}

/* Role dashboard composition */
.fi-main:has(.kh-role-home-widget) .fi-header { display: none !important; }
.fi-main:has(.kh-role-home-widget) .fi-page { gap: 0 !important; }
.kh-role-home-widget { grid-column: 1 / -1 !important; }
.kh-role-dashboard { width: 100%; }
.kh-role-dashboard-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.25rem !important;
    min-height: 118px;
}
.kh-dashboard-hero-copy { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.kh-dashboard-mark {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid #d7e7df;
    border-radius: .9rem;
    background: var(--kh-primary-soft);
    color: var(--kh-primary);
}
.kh-dashboard-mark-icon { width: 23px; height: 23px; }
.kh-role-dashboard-hero h2 { font-size: clamp(1.5rem, 2.6vw, 2rem) !important; }
.kh-role-dashboard-hero p:not(.kh-eyebrow) { max-width: 720px; font-size: .82rem !important; }
.kh-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.kh-kpi-card {
    --kh-kpi-tone: var(--kh-primary);
    --kh-kpi-soft: var(--kh-primary-soft);
    position: relative;
    min-width: 0;
    min-height: 154px;
    padding: 1rem;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius-lg);
    background: var(--kh-surface);
    box-shadow: var(--kh-shadow-card);
}
.kh-kpi-card::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    height: 2px;
    border-radius: 99px 99px 0 0;
    background: var(--kh-kpi-tone);
    opacity: .8;
}
.kh-kpi-tone-primary { --kh-kpi-tone: var(--kh-primary); --kh-kpi-soft: var(--kh-primary-soft); }
.kh-kpi-tone-success { --kh-kpi-tone: var(--kh-success); --kh-kpi-soft: var(--kh-success-soft); }
.kh-kpi-tone-warning { --kh-kpi-tone: var(--kh-warning); --kh-kpi-soft: var(--kh-warning-soft); }
.kh-kpi-tone-info { --kh-kpi-tone: var(--kh-info); --kh-kpi-soft: var(--kh-info-soft); }
.kh-kpi-tone-neutral { --kh-kpi-tone: var(--kh-neutral); --kh-kpi-soft: var(--kh-neutral-soft); }
.kh-kpi-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--kh-text-secondary); font-size: .68rem; font-weight: 760; }
.kh-kpi-icon,
.kh-row-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: .7rem;
    background: var(--kh-kpi-soft, var(--kh-primary-soft));
    color: var(--kh-kpi-tone, var(--kh-primary));
}
.kh-kpi-icon svg,
.kh-row-icon svg { width: 17px; height: 17px; }
.kh-kpi-card > strong {
    display: block;
    overflow: hidden;
    margin: .7rem 0 .35rem;
    color: var(--kh-text);
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    font-weight: 780;
    line-height: 1.08;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
}
.kh-kpi-card > small { display: block; color: var(--kh-text-secondary); font-size: .68rem; line-height: 1.45; }
.kh-kpi-progress { overflow: hidden; height: 4px; margin-top: .8rem; border-radius: 99px; background: var(--kh-border-muted); }
.kh-kpi-progress i { display: block; height: 100%; border-radius: inherit; background: var(--kh-kpi-tone); }
.kh-dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: .85rem; }
.kh-dashboard-panel {
    min-width: 0;
    padding: 1.05rem;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius-lg);
    background: var(--kh-surface);
    box-shadow: var(--kh-shadow-card);
}
.kh-dashboard-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--kh-border-muted); }
.kh-dashboard-panel-heading h3 { margin: .12rem 0 0; color: var(--kh-text); font-size: 1rem; font-weight: 760; letter-spacing: -.02em; }
.kh-dashboard-stat-rows { display: grid; }
.kh-dashboard-stat-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    min-height: 70px;
    border-bottom: 1px solid var(--kh-border-muted);
}
.kh-dashboard-stat-row:last-child { border-bottom: 0; }
.kh-dashboard-stat-row strong,
.kh-dashboard-stat-row small { display: block; }
.kh-dashboard-stat-row strong { color: var(--kh-text); font-size: .75rem; font-weight: 760; }
.kh-dashboard-stat-row small { margin-top: .15rem; color: var(--kh-text-secondary); font-size: .65rem; line-height: 1.4; }
.kh-dashboard-stat-row > b { color: var(--kh-text); font-size: .9rem; font-variant-numeric: tabular-nums; }
.kh-row-icon-success { --kh-kpi-tone: var(--kh-success); --kh-kpi-soft: var(--kh-success-soft); }
.kh-row-icon-info { --kh-kpi-tone: var(--kh-info); --kh-kpi-soft: var(--kh-info-soft); }
.kh-row-icon-warning { --kh-kpi-tone: var(--kh-warning); --kh-kpi-soft: var(--kh-warning-soft); }
.kh-row-icon-primary { --kh-kpi-tone: var(--kh-primary); --kh-kpi-soft: var(--kh-primary-soft); }
.kh-dashboard-action-list { display: grid; gap: .35rem; margin-top: .55rem; }
.kh-dashboard-action-list a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-height: 58px;
    padding: .55rem .45rem;
    border-radius: .72rem;
    color: var(--kh-text);
    text-decoration: none;
    transition: background .14s ease;
}
.kh-dashboard-action-list a:hover { background: var(--kh-hover); }
.kh-dashboard-action-list strong,
.kh-dashboard-action-list small { display: block; }
.kh-dashboard-action-list strong { font-size: .72rem; font-weight: 760; }
.kh-dashboard-action-list small { margin-top: .1rem; color: var(--kh-text-secondary); font-size: .62rem; }
.kh-dashboard-action-list i { color: var(--kh-text-muted); font-style: normal; }
.kh-dashboard-update { min-height: 104px; }
.kh-dashboard-update h3 { font-size: 1rem !important; }

/* Admin / HR workforce dashboard */
.dkkr-workforce { --panel-shadow: var(--kh-shadow-card); color: var(--kh-text); }
.dkkr-dashboard-hero {
    min-height: 132px !important;
    align-items: center !important;
    padding: 1.2rem 1.3rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    box-shadow: var(--kh-shadow-card) !important;
    color: var(--kh-text) !important;
}
.dkkr-dashboard-hero::after { display: none !important; }
.dkkr-dashboard-hero h1 {
    margin: .18rem 0 .35rem !important;
    color: var(--kh-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.65rem, 2.8vw, 2.15rem) !important;
    font-weight: 780 !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
}
.dkkr-dashboard-hero p { color: var(--kh-text-secondary) !important; font-size: .82rem !important; line-height: 1.5 !important; }
.dkkr-kicker { color: var(--kh-primary) !important; font-size: .63rem !important; font-weight: 850 !important; letter-spacing: .105em !important; }
.dkkr-hero-actions { gap: .55rem !important; }
.dkkr-updated {
    min-height: 34px;
    padding: .42rem .65rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: 999px !important;
    background: #f8faf9 !important;
    color: var(--kh-text-secondary) !important;
}
.dkkr-live-dot { background: var(--kh-success) !important; box-shadow: 0 0 0 4px var(--kh-success-soft) !important; }
.dkkr-btn {
    min-height: 40px !important;
    padding: .6rem .8rem !important;
    border-radius: .68rem !important;
    box-shadow: none !important;
}
.dkkr-btn-primary { background: var(--kh-primary) !important; color: #fff !important; }
.dkkr-btn-primary:hover { background: var(--kh-primary-strong) !important; }
.dkkr-btn-secondary { border-color: var(--kh-border) !important; background: #fff !important; color: var(--kh-text) !important; }
.dkkr-metric-grid { gap: .85rem !important; margin-top: .85rem !important; }
.dkkr-metric {
    --dkkr-tone: var(--kh-primary);
    --dkkr-tone-soft: var(--kh-primary-soft);
    min-height: 150px !important;
    padding: 1rem !important;
    border: 1px solid var(--kh-border) !important;
    border-top: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    box-shadow: var(--kh-shadow-card) !important;
}
.dkkr-tone-midnight { --dkkr-tone: var(--kh-primary); --dkkr-tone-soft: var(--kh-primary-soft); }
.dkkr-tone-success { --dkkr-tone: var(--kh-success); --dkkr-tone-soft: var(--kh-success-soft); }
.dkkr-tone-warning { --dkkr-tone: var(--kh-warning); --dkkr-tone-soft: var(--kh-warning-soft); }
.dkkr-tone-information { --dkkr-tone: var(--kh-info); --dkkr-tone-soft: var(--kh-info-soft); }
.dkkr-metric-top { color: var(--kh-text-secondary) !important; font-size: .68rem !important; }
.dkkr-metric-icon {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center;
    border-radius: .7rem !important;
    background: var(--dkkr-tone-soft) !important;
    color: var(--dkkr-tone) !important;
}
.dkkr-metric-icon-svg { width: 17px; height: 17px; }
.dkkr-metric > strong { margin-top: .7rem !important; color: var(--kh-text) !important; font-size: 1.9rem !important; }
.dkkr-metric > small { color: var(--kh-text-secondary) !important; line-height: 1.45; }
.dkkr-workforce > .kh-metric-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: .65rem !important;
    margin-top: .85rem;
}
.dkkr-workforce > .kh-metric-grid .kh-metric-card {
    min-height: 92px;
    padding: .78rem .82rem !important;
    border: 1px solid var(--kh-border) !important;
    border-top: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-md) !important;
    background: #fbfcfb !important;
    box-shadow: none !important;
}
.dkkr-workforce > .kh-metric-grid .kh-metric-card > span { color: var(--kh-text-secondary) !important; font-size: .62rem !important; }
.dkkr-workforce > .kh-metric-grid .kh-metric-card > strong { margin: .38rem 0 0 !important; color: var(--kh-text) !important; font-size: 1.35rem !important; }
.dkkr-dashboard-grid { gap: .85rem !important; margin-top: .85rem !important; }
.dkkr-panel {
    min-width: 0;
    padding: 1.05rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    box-shadow: var(--kh-shadow-card) !important;
}
.dkkr-panel-attention,
.dkkr-panel-performance { grid-column: span 7 !important; }
.dkkr-panel-field,
.dkkr-panel-payroll { grid-column: span 5 !important; }
.dkkr-panel-leaderboard,
.dkkr-panel-teams,
.dkkr-panel-compliance,
.dkkr-panel-activity { grid-column: span 6 !important; }
.dkkr-panel-heading { padding-bottom: .75rem !important; border-bottom: 1px solid var(--kh-border-muted); }
.dkkr-section-index {
    display: inline-flex !important;
    min-height: 22px;
    align-items: center;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--kh-primary-soft);
    color: var(--kh-primary) !important;
    font-size: .58rem !important;
    font-weight: 850 !important;
    letter-spacing: .07em !important;
}
.dkkr-panel-heading h2 { margin: .35rem 0 .12rem !important; color: var(--kh-text) !important; font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: 1rem !important; font-weight: 760 !important; }
.dkkr-panel-heading p,
.dkkr-muted { color: var(--kh-text-secondary) !important; }
.dkkr-heading-count {
    min-width: 34px !important;
    height: 34px !important;
    border-radius: .7rem !important;
    background: var(--kh-warning-soft) !important;
    color: #8c5517 !important;
}
.dkkr-inline-link { color: var(--kh-primary) !important; }
.dkkr-inline-link:hover { color: var(--kh-primary-strong) !important; }
.dkkr-attention-list,
.dkkr-leader-list,
.dkkr-activity-list { border-top-color: transparent !important; }
.dkkr-attention-item,
.dkkr-leader,
.dkkr-activity { border-bottom-color: var(--kh-border-muted) !important; }
.dkkr-attention-item strong,
.dkkr-leader strong,
.dkkr-activity strong { color: var(--kh-text) !important; }
.dkkr-attention-item small,
.dkkr-leader small,
.dkkr-activity small { color: var(--kh-text-secondary) !important; }
.dkkr-panel-links a {
    border-color: var(--kh-border) !important;
    border-radius: .58rem !important;
    color: var(--kh-primary) !important;
    background: #fff;
}
.dkkr-panel-links a:hover { border-color: #bfd7cc !important; background: var(--kh-primary-soft) !important; }
.dkkr-field-summary > div,
.dkkr-money-grid div,
.dkkr-top-team,
.dkkr-brokerage-summary div,
.kh-summary-grid > div { border-color: var(--kh-border-muted) !important; background: #f8faf9 !important; }
.dkkr-field-summary strong,
.dkkr-distance strong,
.dkkr-money-grid strong,
.dkkr-top-team strong { color: var(--kh-text) !important; }
.dkkr-field-summary span,
.dkkr-distance span,
.dkkr-money-grid span,
.dkkr-top-team small { color: var(--kh-text-secondary) !important; }
.dkkr-team-row i,
.dkkr-progress > i { background: var(--kh-primary) !important; }
.dkkr-trend { border-top-color: var(--kh-border-muted) !important; }
.dkkr-trend-bars b { background: var(--kh-accent) !important; }
.dkkr-payroll-total {
    padding: 1rem !important;
    border: 1px solid #d7e7df;
    border-radius: var(--kh-radius-md) !important;
    background: var(--kh-primary-soft) !important;
    color: var(--kh-text) !important;
}
.dkkr-payroll-total span,
.dkkr-payroll-total strong { color: var(--kh-text) !important; }
.dkkr-payroll-total small { color: var(--kh-text-secondary) !important; }
.dkkr-payroll-breakdown div { border-bottom-color: var(--kh-border-muted) !important; }
.dkkr-payroll-breakdown span { color: var(--kh-text-secondary) !important; }
.dkkr-payroll-breakdown b { color: var(--kh-text) !important; }
.dkkr-block-link { background: var(--kh-accent-soft) !important; color: #745621 !important; }
.dkkr-avatar { border-radius: .7rem !important; background: var(--kh-primary-soft) !important; color: var(--kh-primary) !important; }
.dkkr-ring { background: conic-gradient(var(--kh-primary) calc(var(--value) * 1%), var(--kh-border-muted) 0) !important; }
.dkkr-ring > div { background: #fff !important; }
.dkkr-ring strong { color: var(--kh-text) !important; }
.dkkr-ring span { color: var(--kh-text-secondary) !important; }
.dkkr-compliance-details div,
.dkkr-document-progress { border-color: var(--kh-border-muted) !important; }
.dkkr-activity > span { background: var(--kh-info) !important; box-shadow: 0 0 0 4px var(--kh-info-soft) !important; }
.dkkr-quick-actions {
    margin-top: .85rem !important;
    padding: 1.05rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    box-shadow: var(--kh-shadow-card) !important;
    color: var(--kh-text) !important;
}
.dkkr-quick-actions h2 { color: var(--kh-text) !important; font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: 1rem !important; }
.dkkr-quick-grid { gap: .55rem !important; }
.dkkr-quick-grid a {
    min-height: 76px;
    padding: .75rem !important;
    border: 1px solid var(--kh-border) !important;
    border-radius: .75rem !important;
    background: #fbfcfb !important;
    color: var(--kh-text) !important;
}
.dkkr-quick-grid a:hover { border-color: #bfd7cc !important; background: var(--kh-primary-soft) !important; transform: none !important; }
.dkkr-quick-grid span { color: var(--kh-text-secondary) !important; }
.dkkr-quick-grid strong { color: var(--kh-text) !important; }
.dkkr-quick-grid i { color: var(--kh-primary) !important; }

/* Dashboard-like module cards: remove giant dark blocks while retaining meaning. */
.kh-performance-hero,
.kh-attendance-ready,
.kh-attendance-active {
    border: 1px solid var(--kh-border) !important;
    border-left: 4px solid var(--kh-primary) !important;
    border-radius: var(--kh-radius-lg) !important;
    background: var(--kh-surface) !important;
    color: var(--kh-text) !important;
    box-shadow: var(--kh-shadow-card) !important;
}
.kh-performance-hero span,
.kh-performance-hero dt,
.kh-attendance-ready p,
.kh-attendance-active span,
.kh-attendance-active small { color: var(--kh-text-secondary) !important; }
.kh-performance-hero > div > strong,
.kh-performance-hero dd,
.kh-attendance-ready h3,
.kh-attendance-active strong { color: var(--kh-text) !important; }
.kh-clock-button { border: 1px solid var(--kh-primary) !important; background: var(--kh-primary) !important; color: #fff !important; box-shadow: none !important; }
.kh-clock-out { border-color: var(--kh-border) !important; background: #fff !important; color: var(--kh-text) !important; }
.kh-report-card,
.kh-brokerage-card,
.kh-pipeline-card,
.kh-org-node,
.kh-payroll-period {
    border-color: var(--kh-border) !important;
    border-radius: var(--kh-radius-lg) !important;
    box-shadow: var(--kh-shadow-card) !important;
}
.kh-report-card > span,
.kh-brokerage-card header span:first-child { color: var(--kh-primary) !important; }
.kh-chart-wrap { min-height: 260px; height: 310px; }

/* Focus and interaction accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--kh-focus-ring) !important;
    outline-offset: 2px !important;
}

/* Responsive rhythm */
@media (max-width: 1280px) {
    .dkkr-workforce > .kh-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 1100px) {
    .kh-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-dashboard-lower-grid { grid-template-columns: 1fr; }
    .dkkr-panel-attention,
    .dkkr-panel-field,
    .dkkr-panel-performance,
    .dkkr-panel-payroll,
    .dkkr-panel-leaderboard,
    .dkkr-panel-teams,
    .dkkr-panel-compliance,
    .dkkr-panel-activity { grid-column: span 12 !important; }
}

@media (max-width: 768px) {
    body,
    .fi-body { font-size: 13.5px; }
    .fi-page { max-width: 100% !important; }
    .kh-page-intro,
    .kh-dashboard-hero,
    .kh-workspace-hero,
    .kh-page-header,
    .kh-role-dashboard-hero,
    .dkkr-dashboard-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .kh-dashboard-hero-copy { align-items: flex-start; }
    .kh-role-dashboard-hero > .kh-button-gold,
    .dkkr-hero-actions { width: 100%; }
    .dkkr-hero-actions { align-items: stretch !important; }
    .dkkr-hero-actions .dkkr-btn { flex: 1 1 auto; }
    .dkkr-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dkkr-workforce > .kh-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dkkr-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .kh-chart-wrap { height: 270px; }
}

@media (max-width: 520px) {
    .kh-kpi-grid,
    .dkkr-metric-grid,
    .dkkr-workforce > .kh-metric-grid,
    .dkkr-quick-grid { grid-template-columns: 1fr !important; }
    .kh-kpi-card,
    .dkkr-metric { min-height: auto !important; }
    .kh-dashboard-hero-copy { gap: .75rem; }
    .kh-dashboard-mark { width: 42px; height: 42px; flex-basis: 42px; }
    .kh-dashboard-stat-row { grid-template-columns: 34px minmax(0, 1fr); padding-block: .6rem; }
    .kh-dashboard-stat-row > b { grid-column: 2; justify-self: start; }
    .kh-dashboard-action-list a { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .dkkr-dashboard-hero { padding: 1rem !important; }
    .dkkr-hero-actions { flex-direction: column !important; }
    .dkkr-updated { align-self: flex-start; }
    .kh-page-intro,
    .kh-dashboard-hero,
    .kh-workspace-hero,
    .kh-page-header { padding: 1rem !important; }
    .fi-modal-window { max-width: calc(100vw - 1rem) !important; }
}

/* Final token authority for legacy RC token names declared earlier in this file. */
:root {
    --kh-control-height: 44px;
    --kh-radius-sm: .65rem;
    --kh-radius-md: .85rem;
    --kh-radius-lg: 1rem;
    --kh-shadow-card: 0 8px 26px rgba(24, 57, 46, .055);
    --kh-focus: 0 0 0 3px rgba(31, 90, 73, .22);
}

/* Dependency-free, server-rendered performance chart. */
.kh-native-chart {
    display: grid;
    gap: .85rem;
    min-height: 270px;
    margin-bottom: 1rem;
    padding: 1rem 1rem .75rem;
    border: 1px solid var(--kh-border-muted);
    border-radius: var(--kh-radius-md);
    background: #fbfcfb;
}
.kh-native-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .8rem;
    color: var(--kh-text-secondary);
    font-size: .65rem;
    font-weight: 700;
}
.kh-native-chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.kh-chart-swatch { width: 9px; height: 9px; border-radius: 3px; }
.kh-chart-target { background: #cfd8d3 !important; }
.kh-chart-achieved { background: var(--kh-primary) !important; }
.kh-native-chart-plot {
    display: grid;
    grid-auto-columns: minmax(46px, 1fr);
    grid-auto-flow: column;
    align-items: end;
    gap: .55rem;
    min-height: 210px;
    overflow-x: auto;
    padding: .35rem 0 .15rem;
    border-bottom: 1px solid var(--kh-border);
}
.kh-native-chart-column { display: grid; min-width: 46px; height: 200px; grid-template-rows: 1fr auto; gap: .45rem; align-items: end; }
.kh-native-chart-bars { display: flex; height: 172px; align-items: end; justify-content: center; gap: 5px; }
.kh-native-bar { display: block; width: min(14px, 34%); min-height: 3px; border-radius: 4px 4px 2px 2px; }
.kh-native-chart-column > span { overflow: hidden; color: var(--kh-text-muted); font-size: .58rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    .kh-native-chart { padding-inline: .75rem; }
    .kh-native-chart-plot { grid-auto-columns: 54px; }
}

/* ========================================================================
   Kashavi Homes 2026 visual correction wave
   ------------------------------------------------------------------------
   Client-acceptance layer: explicit interaction states, stronger semantic
   differentiation, neutral typography, expressive KPI/panel families, and
   normalized actions. Stable Filament sidebar hooks require !important to
   override Filament utility output plus earlier compatibility rules.
   ======================================================================== */

/* Primary content is neutral; brand/semantic hues are reserved for meaning. */
body,
.fi-body,
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.kh-page-intro h1,
.kh-page-intro h2,
.kh-page-intro h3,
.kh-page-header h1,
.kh-page-header h2,
.kh-workspace-hero h2,
.dkkr-dashboard-hero h1,
.dkkr-panel-heading h2,
.dkkr-quick-actions h2 {
    color: var(--kh-neutral-900) !important;
}
.fi-page { max-width: 1740px !important; }
.kh-eyebrow,
.dkkr-kicker { color: var(--kh-brand-600) !important; }

/* ------------------------------------------------------------------------
   Sidebar: six explicit states. Inactive rows are intentional neutral pills;
   active rows are solid Kashavi brand. No generic anchor hover rule is used.
   ------------------------------------------------------------------------ */
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) {
    min-height: 42px !important;
    margin-block: 2px !important;
    padding-inline: .72rem !important;
    border: 1px solid transparent !important;
    border-radius: .72rem !important;
    background: var(--kh-sidebar-item) !important;
    color: var(--kh-neutral-700) !important;
    box-shadow: inset 0 0 0 1px rgba(52, 66, 60, .018) !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) > .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) .fi-sidebar-item-label {
    color: var(--kh-neutral-700) !important;
    font-weight: 650 !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) > :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: var(--kh-neutral-500) !important;
    opacity: 1 !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover {
    background: var(--kh-sidebar-item-hover) !important;
    border-color: var(--kh-neutral-200) !important;
    color: var(--kh-neutral-900) !important;
    box-shadow: inset 3px 0 0 var(--kh-brand-500) !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover .fi-sidebar-item-label {
    color: var(--kh-neutral-900) !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: var(--kh-brand-600) !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible {
    background: var(--kh-sidebar-item-hover) !important;
    border-color: var(--kh-brand-500) !important;
    color: var(--kh-neutral-900) !important;
    outline: 3px solid var(--kh-action-focus) !important;
    outline-offset: 1px !important;
    box-shadow: inset 3px 0 0 var(--kh-brand-600) !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible .fi-sidebar-item-label {
    color: var(--kh-neutral-900) !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: var(--kh-brand-700) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"],
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active {
    background: var(--kh-sidebar-item-active) !important;
    border-color: var(--kh-sidebar-item-active) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(31, 90, 73, .16) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)::before,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]::before,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active::before {
    display: none !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active .fi-sidebar-item-label {
    color: #fff !important;
    font-weight: 750 !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: #fff !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:hover,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active:hover {
    background: var(--kh-sidebar-item-active-hover) !important;
    border-color: var(--kh-sidebar-item-active-hover) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(24, 73, 60, .2) !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):hover :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:hover .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:hover :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: #fff !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:focus-visible {
    background: var(--kh-sidebar-item-active-hover) !important;
    border-color: #fff !important;
    color: #fff !important;
    outline: 3px solid rgba(31, 90, 73, .28) !important;
    outline-offset: 2px !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):focus-visible :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon),
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:focus-visible .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:focus-visible :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: #fff !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is([aria-disabled="true"], :disabled) {
    pointer-events: none !important;
    background: var(--kh-neutral-50) !important;
    color: var(--kh-neutral-300) !important;
    opacity: .58 !important;
    box-shadow: none !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is([aria-disabled="true"], :disabled) .fi-sidebar-item-label,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is([aria-disabled="true"], :disabled) :is(svg.fi-icon, .fi-icon, .fi-sidebar-item-icon) {
    color: var(--kh-neutral-300) !important;
}
.fi-sidebar-group-label { color: #718078 !important; }

/* ------------------------------------------------------------------------
   Reusable action system. Custom actions and Filament buttons share sizing,
   radii, focus, pressed and disabled semantics.
   ------------------------------------------------------------------------ */
.kh-action,
.fi-btn,
.dkkr-btn,
.kh-primary-button,
.kh-secondary-button,
.kh-button-primary,
.kh-button-secondary,
.kh-button-gold,
.kh-warning-button,
.kh-danger-button,
.kh-button-danger {
    display: inline-flex;
    min-height: 40px !important;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .58rem .86rem !important;
    border: 1px solid transparent !important;
    border-radius: .72rem !important;
    font-size: .75rem !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease !important;
}
.kh-action-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.kh-action-primary,
.fi-btn-color-primary,
.dkkr-btn-primary,
.kh-primary-button,
.kh-button-primary,
.kh-button-gold {
    border-color: var(--kh-brand-600) !important;
    background: var(--kh-brand-600) !important;
    color: #fff !important;
}
.kh-action-primary:hover,
.fi-btn-color-primary:hover,
.dkkr-btn-primary:hover,
.kh-primary-button:hover,
.kh-button-primary:hover,
.kh-button-gold:hover {
    border-color: var(--kh-brand-700) !important;
    background: var(--kh-brand-700) !important;
    color: #fff !important;
}
.kh-action-secondary,
.fi-btn-color-gray,
.dkkr-btn-secondary,
.kh-secondary-button,
.kh-button-secondary {
    border-color: var(--kh-neutral-200) !important;
    background: #fff !important;
    color: var(--kh-neutral-900) !important;
}
.kh-action-secondary:hover,
.fi-btn-color-gray:hover,
.dkkr-btn-secondary:hover,
.kh-secondary-button:hover,
.kh-button-secondary:hover {
    border-color: var(--kh-neutral-300) !important;
    background: var(--kh-neutral-100) !important;
    color: var(--kh-neutral-900) !important;
}
.kh-action-tonal {
    border-color: transparent !important;
    background: var(--kh-brand-100) !important;
    color: var(--kh-brand-800) !important;
}
.kh-action-tonal:hover { background: var(--kh-brand-200) !important; color: var(--kh-brand-800) !important; }
.kh-action-gold { background: var(--kh-gold-100) !important; color: #72531d !important; }
.kh-action-gold:hover { background: #efddb9 !important; color: #5b4219 !important; }
.fi-btn-color-danger,
.kh-action-danger,
.kh-danger-button,
.kh-button-danger {
    border-color: var(--kh-danger-500) !important;
    background: var(--kh-danger-500) !important;
    color: #fff !important;
}
.fi-btn-color-danger:hover,
.kh-action-danger:hover,
.kh-danger-button:hover,
.kh-button-danger:hover { background: #ad3e52 !important; border-color: #ad3e52 !important; color: #fff !important; }
.kh-action:focus-visible,
.fi-btn:focus-visible,
.dkkr-btn:focus-visible,
.kh-primary-button:focus-visible,
.kh-secondary-button:focus-visible,
.kh-button-primary:focus-visible,
.kh-button-secondary:focus-visible,
.kh-button-gold:focus-visible,
.kh-warning-button:focus-visible,
.kh-danger-button:focus-visible,
.kh-button-danger:focus-visible {
    outline: 3px solid var(--kh-action-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #fff !important;
}
.kh-action:active,
.fi-btn:active,
.dkkr-btn:active,
.kh-primary-button:active,
.kh-secondary-button:active,
.kh-button-primary:active,
.kh-button-secondary:active,
.kh-button-gold:active,
.kh-warning-button:active,
.kh-danger-button:active,
.kh-button-danger:active {
    transform: translateY(1px) !important;
    filter: saturate(.95) brightness(.96);
}
.kh-action:is([aria-disabled="true"], :disabled),
.fi-btn:is([aria-disabled="true"], :disabled),
.dkkr-btn:is([aria-disabled="true"], :disabled) {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: .48 !important;
    filter: grayscale(.15);
}
.kh-action-inline,
.kh-text-link,
.dkkr-inline-link {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: .28rem;
    padding: .18rem .36rem;
    border-radius: .46rem;
    color: var(--kh-brand-700) !important;
    font-size: .7rem;
    font-weight: 760 !important;
    text-decoration: none !important;
}
.kh-action-inline:hover,
.kh-text-link:hover,
.dkkr-inline-link:hover { background: var(--kh-brand-50) !important; color: var(--kh-brand-800) !important; text-decoration: none !important; }
.kh-action-inline:focus-visible,
.kh-text-link:focus-visible,
.dkkr-inline-link:focus-visible { outline: 3px solid var(--kh-action-focus) !important; outline-offset: 1px !important; }
.kh-action-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: .3rem .58rem;
    border: 1px solid var(--kh-pill-border, var(--kh-neutral-200)) !important;
    border-radius: 999px !important;
    background: var(--kh-pill-soft, var(--kh-neutral-50)) !important;
    color: var(--kh-pill-tone, var(--kh-neutral-700)) !important;
    font-size: .66rem !important;
    font-weight: 760 !important;
}
.kh-action-pill:hover { filter: brightness(.97); box-shadow: inset 0 0 0 1px var(--kh-pill-tone); }
.kh-action-pill:focus-visible { outline: 3px solid var(--kh-action-focus) !important; outline-offset: 2px !important; }
.kh-action-pill-info { --kh-pill-tone: #226b86; --kh-pill-soft: var(--kh-info-100); --kh-pill-border: #b9dde8; }
.kh-action-pill-warning { --kh-pill-tone: #8d5a14; --kh-pill-soft: var(--kh-warning-100); --kh-pill-border: #edd29e; }
.kh-action-pill-violet { --kh-pill-tone: #6249aa; --kh-pill-soft: var(--kh-violet-100); --kh-pill-border: #d7cdf4; }

/* Tone utilities shared by cards, mini stats and dashboard panels. */
.kh-tone-blue,
.kh-kpi-tone-blue { --kh-tone: var(--kh-blue-500); --kh-tone-soft: var(--kh-blue-100); --kh-kpi-tone: var(--kh-blue-500); --kh-kpi-soft: var(--kh-blue-100); }
.kh-tone-cyan,
.kh-kpi-tone-cyan { --kh-tone: var(--kh-cyan-500); --kh-tone-soft: var(--kh-cyan-100); --kh-kpi-tone: var(--kh-cyan-500); --kh-kpi-soft: var(--kh-cyan-100); }
.kh-tone-success,
.kh-kpi-tone-success { --kh-tone: var(--kh-success-500); --kh-tone-soft: var(--kh-success-100); --kh-kpi-tone: var(--kh-success-500); --kh-kpi-soft: var(--kh-success-100); }
.kh-tone-warning,
.kh-kpi-tone-warning { --kh-tone: var(--kh-warning-500); --kh-tone-soft: var(--kh-warning-100); --kh-kpi-tone: var(--kh-warning-500); --kh-kpi-soft: var(--kh-warning-100); }
.kh-tone-danger,
.kh-tone-rose,
.kh-kpi-tone-danger { --kh-tone: var(--kh-danger-500); --kh-tone-soft: var(--kh-danger-100); --kh-kpi-tone: var(--kh-danger-500); --kh-kpi-soft: var(--kh-danger-100); }
.kh-tone-violet,
.kh-kpi-tone-violet { --kh-tone: var(--kh-violet-500); --kh-tone-soft: var(--kh-violet-100); --kh-kpi-tone: var(--kh-violet-500); --kh-kpi-soft: var(--kh-violet-100); }
.kh-tone-gold,
.kh-kpi-tone-gold { --kh-tone: var(--kh-gold-500); --kh-tone-soft: var(--kh-gold-100); --kh-kpi-tone: var(--kh-gold-500); --kh-kpi-soft: var(--kh-gold-100); }
.kh-tone-neutral,
.kh-kpi-tone-neutral { --kh-tone: var(--kh-neutral-500); --kh-tone-soft: var(--kh-neutral-100); --kh-kpi-tone: var(--kh-neutral-500); --kh-kpi-soft: var(--kh-neutral-100); }

/* Expressive KPI vocabulary: semantic tile + accent rail + soft corner field. */
.kh-kpi-card,
.dkkr-metric {
    overflow: hidden;
}
.kh-kpi-card-expressive,
.dkkr-metric {
    position: relative;
    border-top-width: 3px !important;
    border-top-color: var(--kh-kpi-tone, var(--dkkr-tone, var(--kh-brand-600))) !important;
}
.kh-kpi-card-expressive::before,
.dkkr-metric::before {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--kh-kpi-soft, var(--dkkr-tone-soft, var(--kh-brand-100)));
    opacity: .78;
    pointer-events: none;
}
.kh-kpi-card::after { height: 0 !important; }
.kh-kpi-icon,
.dkkr-metric-icon {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kh-kpi-tone, var(--dkkr-tone, var(--kh-brand-600))) 18%, transparent);
}
.kh-kpi-card > strong,
.dkkr-metric > strong { color: var(--kh-neutral-900) !important; }
.kh-kpi-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    margin-top: .68rem;
    padding: .24rem .48rem;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 760;
    line-height: 1.2;
}
.kh-chip-info { background: var(--kh-info-100); color: #226b86; }
.kh-chip-neutral { background: var(--kh-neutral-100); color: var(--kh-neutral-700); }
.kh-chip-warning { background: var(--kh-warning-100); color: #8d5a14; }
.kh-chip-success { background: var(--kh-success-100); color: #206d50; }
.kh-chip-danger { background: var(--kh-danger-100); color: #9e364a; }

/* Admin compact statistics: visually scannable without becoming large cards. */
.dkkr-workforce > .kh-readiness-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: .68rem !important;
}
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat {
    --kh-tone: var(--kh-blue-500);
    --kh-tone-soft: var(--kh-blue-100);
    position: relative;
    overflow: hidden;
    min-height: 96px !important;
    padding: .82rem .88rem .78rem 1rem !important;
    border: 1px solid var(--kh-neutral-200) !important;
    border-radius: .85rem !important;
    background: linear-gradient(135deg, #fff 0 76%, var(--kh-tone-soft) 76% 100%) !important;
    box-shadow: 0 5px 15px rgba(23, 32, 28, .035) !important;
}
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: var(--kh-tone);
}
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat > span { color: var(--kh-neutral-500) !important; }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat > strong { color: var(--kh-neutral-900) !important; }

/* Admin KPI colors: the backend's existing tone names are mapped to distinct ramps. */
.dkkr-tone-midnight { --dkkr-tone: var(--kh-blue-500); --dkkr-tone-soft: var(--kh-blue-100); }
.dkkr-tone-success { --dkkr-tone: var(--kh-success-500); --dkkr-tone-soft: var(--kh-success-100); }
.dkkr-tone-warning { --dkkr-tone: var(--kh-warning-500); --dkkr-tone-soft: var(--kh-warning-100); }
.dkkr-tone-information { --dkkr-tone: var(--kh-violet-500); --dkkr-tone-soft: var(--kh-violet-100); }
.dkkr-metric { box-shadow: 0 8px 24px rgba(23, 32, 28, .05) !important; }
.dkkr-metric-top { position: relative; z-index: 1; }
.dkkr-metric-icon { width: 38px !important; height: 38px !important; border-radius: .8rem !important; }

/* Distinct dashboard panel families. */
.dkkr-panel[class*="kh-panel-tone-"] {
    --kh-panel-tone: var(--kh-neutral-500);
    --kh-panel-soft: var(--kh-neutral-100);
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--kh-panel-tone) !important;
    box-shadow: 0 9px 26px rgba(23, 32, 28, .045) !important;
}
.kh-panel-tone-warning { --kh-panel-tone: var(--kh-warning-500) !important; --kh-panel-soft: var(--kh-warning-100) !important; }
.kh-panel-tone-info { --kh-panel-tone: var(--kh-info-500) !important; --kh-panel-soft: var(--kh-info-100) !important; }
.kh-panel-tone-violet { --kh-panel-tone: var(--kh-violet-500) !important; --kh-panel-soft: var(--kh-violet-100) !important; }
.kh-panel-tone-gold { --kh-panel-tone: var(--kh-gold-500) !important; --kh-panel-soft: var(--kh-gold-100) !important; }
.kh-panel-tone-blue { --kh-panel-tone: var(--kh-blue-500) !important; --kh-panel-soft: var(--kh-blue-100) !important; }
.kh-panel-tone-cyan { --kh-panel-tone: var(--kh-cyan-500) !important; --kh-panel-soft: var(--kh-cyan-100) !important; }
.kh-panel-tone-success { --kh-panel-tone: var(--kh-success-500) !important; --kh-panel-soft: var(--kh-success-100) !important; }
.kh-panel-tone-neutral { --kh-panel-tone: var(--kh-neutral-500) !important; --kh-panel-soft: var(--kh-neutral-100) !important; }
.dkkr-panel[class*="kh-panel-tone-"] .dkkr-section-index {
    background: var(--kh-panel-soft) !important;
    color: var(--kh-panel-tone) !important;
}
.dkkr-panel[class*="kh-panel-tone-"] .dkkr-panel-heading {
    margin: -1.05rem -1.05rem .15rem;
    padding: .95rem 1.05rem .8rem !important;
    background: linear-gradient(90deg, var(--kh-panel-soft), rgba(255,255,255,.9) 58%, #fff 100%);
}
.dkkr-panel[class*="kh-panel-tone-"] .dkkr-empty {
    background: color-mix(in srgb, var(--kh-panel-soft) 48%, #fff) !important;
    border-color: color-mix(in srgb, var(--kh-panel-tone) 24%, var(--kh-neutral-200)) !important;
}
.dkkr-panel[class*="kh-panel-tone-"] .dkkr-empty::before {
    background: var(--kh-panel-soft) !important;
    color: var(--kh-panel-tone) !important;
}
.dkkr-panel-performance .dkkr-trend-bars b { background: var(--kh-violet-500) !important; }
.dkkr-panel-performance .dkkr-money-grid div { background: #fbfaff !important; }
.dkkr-panel-payroll .dkkr-payroll-total {
    border-color: #ead4aa !important;
    background: linear-gradient(135deg, #fffaf1, var(--kh-gold-100)) !important;
}
.dkkr-panel-payroll .dkkr-payroll-total strong { color: #6d501d !important; }
.dkkr-panel-field .dkkr-field-summary > div { background: #f6fbfc !important; }
.dkkr-panel-compliance .dkkr-ring { background: conic-gradient(var(--kh-success-500) calc(var(--value) * 1%), var(--kh-neutral-100) 0) !important; }
.dkkr-panel-activity .dkkr-activity > span { background: var(--kh-blue-500) !important; box-shadow: 0 0 0 4px var(--kh-blue-100) !important; }

/* Quick access is navigation, not another list of white cards. */
.dkkr-quick-actions {
    background: linear-gradient(180deg, #fff, var(--kh-neutral-25)) !important;
}
.dkkr-quick-grid .kh-quick-card {
    --kh-quick-tone: var(--kh-blue-500);
    --kh-quick-soft: var(--kh-blue-100);
    position: relative;
    overflow: hidden;
    min-height: 86px;
    padding: .82rem .9rem .8rem 1rem !important;
    border: 1px solid var(--kh-neutral-200) !important;
    border-radius: .82rem !important;
    background: linear-gradient(135deg, #fff 0 78%, var(--kh-quick-soft) 78%) !important;
    box-shadow: 0 4px 12px rgba(23, 32, 28, .025) !important;
}
.dkkr-quick-grid .kh-quick-card::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: var(--kh-quick-tone);
}
.dkkr-quick-grid .kh-quick-card:hover {
    border-color: color-mix(in srgb, var(--kh-quick-tone) 38%, var(--kh-neutral-200)) !important;
    background: linear-gradient(135deg, #fff 0 68%, var(--kh-quick-soft) 68%) !important;
    box-shadow: 0 8px 20px rgba(23, 32, 28, .06) !important;
}
.dkkr-quick-grid .kh-quick-card:focus-visible { outline: 3px solid var(--kh-action-focus) !important; outline-offset: 2px !important; }
.dkkr-quick-grid .kh-quick-card > span { color: var(--kh-quick-tone) !important; }
.dkkr-quick-grid .kh-quick-card > i { color: var(--kh-quick-tone) !important; font-size: 1rem; }
.kh-quick-tone-blue { --kh-quick-tone: var(--kh-blue-500) !important; --kh-quick-soft: var(--kh-blue-100) !important; }
.kh-quick-tone-cyan { --kh-quick-tone: var(--kh-cyan-500) !important; --kh-quick-soft: var(--kh-cyan-100) !important; }
.kh-quick-tone-info { --kh-quick-tone: var(--kh-info-500) !important; --kh-quick-soft: var(--kh-info-100) !important; }
.kh-quick-tone-gold { --kh-quick-tone: var(--kh-gold-500) !important; --kh-quick-soft: var(--kh-gold-100) !important; }
.kh-quick-tone-violet { --kh-quick-tone: var(--kh-violet-500) !important; --kh-quick-soft: var(--kh-violet-100) !important; }
.kh-quick-tone-success { --kh-quick-tone: var(--kh-success-500) !important; --kh-quick-soft: var(--kh-success-100) !important; }

/* Employee My Workspace: each concept owns a distinct semantic tone. */
.kh-workspace-page { gap: 1rem !important; }
.kh-workspace-hero-corrected {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 3px solid var(--kh-brand-600) !important;
    background: linear-gradient(105deg, #fff 0 68%, var(--kh-brand-50) 68% 100%) !important;
}
.kh-workspace-hero-copy { display: flex; align-items: center; gap: .9rem; }
.kh-workspace-hero-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: .84rem;
    background: var(--kh-brand-100);
    color: var(--kh-brand-700);
}
.kh-workspace-hero-icon svg { width: 21px; height: 21px; }
.kh-workspace-kpis .kh-kpi-card { min-height: 160px; }
.kh-workspace-panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: .85rem; }
.kh-workspace-panel {
    --kh-panel-tone: var(--kh-blue-500);
    --kh-panel-soft: var(--kh-blue-100);
    overflow: hidden;
    border-top: 3px solid var(--kh-panel-tone) !important;
}
.kh-workspace-panel-attendance { --kh-panel-tone: var(--kh-info-500); --kh-panel-soft: var(--kh-info-100); }
.kh-workspace-panel-profile { --kh-panel-tone: var(--kh-success-500); --kh-panel-soft: var(--kh-success-100); }
.kh-workspace-panel .fi-section-header { background: linear-gradient(90deg, var(--kh-panel-soft), #fff 64%) !important; }
.kh-workspace-panel-lead {
    display: flex;
    align-items: center;
    gap: .72rem;
    margin-bottom: .75rem;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--kh-panel-tone) 20%, var(--kh-neutral-200));
    border-radius: .76rem;
    background: color-mix(in srgb, var(--kh-panel-soft) 56%, #fff);
}
.kh-workspace-panel-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: .7rem;
    background: var(--kh-panel-soft);
    color: var(--kh-panel-tone);
}
.kh-workspace-panel-icon svg { width: 18px; height: 18px; }
.kh-workspace-panel-lead strong,
.kh-workspace-panel-lead small { display: block; }
.kh-workspace-panel-lead strong { color: var(--kh-neutral-900); font-size: .78rem; }
.kh-workspace-panel-lead small { margin-top: .12rem; color: var(--kh-neutral-500); font-size: .66rem; }
.kh-detail-list-toned > div { padding-inline: .25rem; }
.kh-detail-list-toned dt { color: var(--kh-neutral-500) !important; }
.kh-detail-list-toned dd { color: var(--kh-neutral-900) !important; }
.kh-empty-state-profile {
    min-height: 160px !important;
    border-style: solid !important;
    border-color: #c6e3d5 !important;
    background: linear-gradient(145deg, #fbfffd, var(--kh-success-100)) !important;
}
.kh-empty-state-profile::before,
.kh-empty-state-calendar::before { display: none !important; }
.kh-empty-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin: 0 auto .4rem;
    border-radius: .78rem;
    background: var(--kh-success-100);
    color: var(--kh-success-500);
}
.kh-empty-icon svg { width: 20px; height: 20px; }

/* Team Leave Calendar: hierarchy, legend and explicit availability states. */
.kh-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 3px solid var(--kh-info-500) !important;
    background: linear-gradient(105deg, #fff 0 72%, var(--kh-info-100) 72% 100%) !important;
}
.kh-month-control { display: grid; min-width: 190px; gap: .28rem; color: var(--kh-neutral-700); font-size: .67rem; font-weight: 760; }
.kh-month-input-wrap {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-left: .68rem;
    border: 1px solid var(--kh-neutral-200);
    border-radius: .72rem;
    background: #fff;
}
.kh-month-input-wrap > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--kh-info-500); }
.kh-month-input-wrap .kh-input { min-width: 0; border: 0 !important; background: transparent !important; outline: 0 !important; }
.kh-month-input-wrap:focus-within { border-color: var(--kh-info-500); box-shadow: 0 0 0 3px rgba(37, 136, 167, .16); }
.kh-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .9rem;
    padding: .72rem .9rem;
    border: 1px solid var(--kh-neutral-200);
    border-radius: .8rem;
    background: #fff;
    color: var(--kh-neutral-500);
    font-size: .65rem;
    font-weight: 700;
}
.kh-calendar-legend > span { display: inline-flex; align-items: center; gap: .34rem; }
.kh-calendar-legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.kh-calendar-legend-dot.is-available { background: var(--kh-success-500); }
.kh-calendar-legend-dot.is-leave { background: var(--kh-violet-500); }
.kh-calendar-legend-dot.is-weekend { background: var(--kh-gold-500); }
.kh-calendar-legend-dot.is-today { background: var(--kh-info-500); box-shadow: 0 0 0 2px var(--kh-info-100); }
.kh-calendar-grid-corrected { gap: .62rem !important; }
.kh-calendar-grid-corrected .kh-calendar-day {
    position: relative;
    min-height: 118px;
    padding: .8rem !important;
    border: 1px solid var(--kh-neutral-200) !important;
    border-radius: .86rem !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(23, 32, 28, .025);
    transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease, background-color .14s ease;
}
.kh-calendar-grid-corrected .kh-calendar-day:hover {
    border-color: #b9d2c7 !important;
    box-shadow: 0 8px 20px rgba(23, 32, 28, .07);
    transform: translateY(-1px);
}
.kh-calendar-grid-corrected .kh-calendar-day:focus-visible {
    border-color: var(--kh-brand-500) !important;
    outline: 3px solid var(--kh-action-focus) !important;
    outline-offset: 1px !important;
}
.kh-calendar-grid-corrected .kh-calendar-day.is-weekend {
    background: linear-gradient(145deg, #fff, #fbf7ef) !important;
    border-color: #eadfc9 !important;
}
.kh-calendar-grid-corrected .kh-calendar-day.is-today {
    border: 2px solid var(--kh-info-500) !important;
    background: linear-gradient(145deg, #fff, var(--kh-info-100)) !important;
    box-shadow: 0 8px 20px rgba(37, 136, 167, .1);
}
.kh-calendar-grid-corrected .kh-calendar-day.has-leave {
    border-color: #d7cdf4 !important;
    background: linear-gradient(145deg, #fff 0 62%, #faf8ff 62% 100%) !important;
}
.kh-calendar-grid-corrected .kh-calendar-day.has-leave::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: .86rem 0 0 .86rem;
    background: var(--kh-violet-500);
}
.kh-calendar-grid-corrected .kh-calendar-day > header strong { color: var(--kh-neutral-900) !important; }
.kh-calendar-grid-corrected .kh-calendar-day > header span { color: var(--kh-neutral-500) !important; }
.kh-calendar-grid-corrected .kh-calendar-day.is-today > header strong { color: #16647b !important; }
.kh-calendar-available {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    margin-top: .45rem;
    color: var(--kh-neutral-500);
    font-size: .65rem;
    font-weight: 650;
}
.kh-calendar-available > i { width: 7px; height: 7px; border-radius: 50%; background: var(--kh-success-500); box-shadow: 0 0 0 3px var(--kh-success-100); }
.kh-calendar-person {
    display: flex !important;
    align-items: center;
    gap: .35rem;
    margin-top: .38rem !important;
    padding: .34rem .45rem !important;
    border: 1px solid #ddd4f5;
    border-radius: .55rem !important;
    background: var(--kh-violet-100) !important;
    color: #5e47a0 !important;
    font-size: .64rem !important;
    font-weight: 700;
}
.kh-calendar-person > span { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--kh-violet-500); }
.kh-calendar-requests {
    overflow: hidden;
    border-top: 3px solid var(--kh-violet-500) !important;
}
.kh-calendar-requests .fi-section-header { background: linear-gradient(90deg, var(--kh-violet-100), #fff 62%) !important; }
.kh-empty-state-calendar {
    min-height: 140px !important;
    border-style: solid !important;
    border-color: #dcd4f3 !important;
    background: linear-gradient(145deg, #fff, var(--kh-violet-100)) !important;
}
.kh-empty-state-calendar .kh-empty-icon { background: var(--kh-violet-100); color: var(--kh-violet-500); }

/* Resource surfaces keep Filament semantics but no longer look like untouched defaults. */
.fi-section { border-top-width: 2px !important; }
.fi-section-header { background: linear-gradient(180deg, #fff, var(--kh-neutral-25)) !important; }
.fi-ta-header { border-bottom: 1px solid var(--kh-neutral-100); }
.fi-ta-header-cell { background: var(--kh-neutral-50) !important; }
.fi-input-wrp:focus-within,
.fi-select-input:focus,
.fi-fo-textarea textarea:focus,
.fi-input:focus { border-color: var(--kh-brand-500) !important; box-shadow: 0 0 0 3px var(--kh-action-focus) !important; }
.fi-badge { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.fi-modal-window { border-top: 3px solid var(--kh-brand-600) !important; }

/* Responsive correction-wave composition. */
@media (max-width: 1280px) {
    .dkkr-workforce > .kh-readiness-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
    .kh-workspace-panels { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .kh-workspace-hero-corrected,
    .kh-calendar-header { align-items: flex-start; flex-direction: column; }
    .kh-workspace-hero-corrected > .kh-action,
    .kh-month-control { width: 100%; }
    .kh-month-control { min-width: 0; }
    .dkkr-workforce > .kh-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
    .kh-workspace-hero-copy { align-items: flex-start; }
    .kh-workspace-kpis,
    .dkkr-workforce > .kh-readiness-grid { grid-template-columns: 1fr !important; }
    .kh-calendar-legend { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Final correction-wave density/tone authority. */
:root { --sidebar-width: 17rem; }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-blue { --kh-tone: var(--kh-blue-500); --kh-tone-soft: var(--kh-blue-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-cyan { --kh-tone: var(--kh-cyan-500); --kh-tone-soft: var(--kh-cyan-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-success { --kh-tone: var(--kh-success-500); --kh-tone-soft: var(--kh-success-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-warning { --kh-tone: var(--kh-warning-500); --kh-tone-soft: var(--kh-warning-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-danger,
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-rose { --kh-tone: var(--kh-danger-500); --kh-tone-soft: var(--kh-danger-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-violet { --kh-tone: var(--kh-violet-500); --kh-tone-soft: var(--kh-violet-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-gold { --kh-tone: var(--kh-gold-500); --kh-tone-soft: var(--kh-gold-100); }
.dkkr-workforce > .kh-readiness-grid .kh-compact-stat.kh-tone-neutral { --kh-tone: var(--kh-neutral-500); --kh-tone-soft: var(--kh-neutral-100); }

/* Role dashboard cards share the expressive KPI language and distinct panel roles. */
.kh-kpi-card {
    border-top: 3px solid var(--kh-kpi-tone, var(--kh-brand-600)) !important;
}
.kh-kpi-card::before {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--kh-kpi-soft, var(--kh-brand-100));
    opacity: .72;
    pointer-events: none;
}
.kh-dashboard-panel-cyan,
.kh-dashboard-panel-blue,
.kh-dashboard-panel-violet,
.kh-dashboard-panel-gold {
    position: relative;
    overflow: hidden;
    border-top-width: 3px !important;
}
.kh-dashboard-panel-cyan { border-top-color: var(--kh-cyan-500) !important; }
.kh-dashboard-panel-blue { border-top-color: var(--kh-blue-500) !important; }
.kh-dashboard-panel-violet { border-top-color: var(--kh-violet-500) !important; }
.kh-dashboard-panel-gold { border-top-color: var(--kh-gold-500) !important; }
.kh-dashboard-panel-cyan .kh-dashboard-panel-heading { background: linear-gradient(90deg, var(--kh-cyan-100), #fff 62%); margin: -1.05rem -1.05rem 0; padding: .95rem 1.05rem .8rem; }
.kh-dashboard-panel-blue .kh-dashboard-panel-heading { background: linear-gradient(90deg, var(--kh-blue-100), #fff 62%); margin: -1.05rem -1.05rem 0; padding: .95rem 1.05rem .8rem; }
.kh-dashboard-panel-violet .kh-dashboard-panel-heading { background: linear-gradient(90deg, var(--kh-violet-100), #fff 62%); margin: -1.05rem -1.05rem 0; padding: .95rem 1.05rem .8rem; }
.kh-dashboard-update.kh-dashboard-panel-gold { border-top: 3px solid var(--kh-gold-500) !important; background: linear-gradient(105deg, #fff 0 72%, var(--kh-gold-100) 72%) !important; }
.kh-dashboard-action-list a:nth-child(1) .kh-row-icon { --kh-kpi-tone: var(--kh-blue-500); --kh-kpi-soft: var(--kh-blue-100); }
.kh-dashboard-action-list a:nth-child(2) .kh-row-icon { --kh-kpi-tone: var(--kh-warning-500); --kh-kpi-soft: var(--kh-warning-100); }
.kh-dashboard-action-list a:nth-child(3) .kh-row-icon { --kh-kpi-tone: var(--kh-violet-500); --kh-kpi-soft: var(--kh-violet-100); }
.kh-dashboard-action-list a:hover { background: var(--kh-neutral-50); box-shadow: inset 3px 0 0 var(--kh-brand-500); }
.kh-dashboard-action-list a:focus-visible { outline: 3px solid var(--kh-action-focus) !important; outline-offset: 1px !important; }
html.fi,
body.fi-body { --sidebar-width: 17rem !important; }

/* Action variants completed for resource/page parity. */
.kh-action-soft { border-color: transparent !important; background: var(--kh-brand-100) !important; color: var(--kh-brand-800) !important; }
.kh-action-soft:hover { background: var(--kh-brand-200) !important; color: var(--kh-brand-800) !important; }
.kh-action-outline { border-color: var(--kh-brand-200) !important; background: transparent !important; color: var(--kh-brand-700) !important; }
.kh-action-outline:hover { border-color: var(--kh-brand-500) !important; background: var(--kh-brand-50) !important; color: var(--kh-brand-800) !important; }
.fi-icon-btn,
.kh-action-icon-only {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid var(--kh-neutral-200) !important;
    border-radius: .72rem !important;
    background: #fff !important;
    color: var(--kh-neutral-700) !important;
    box-shadow: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease !important;
}
.kh-action-icon-only { display: inline-grid !important; }
.fi-icon-btn:hover,
.kh-action-icon-only:hover { border-color: var(--kh-brand-200) !important; background: var(--kh-brand-50) !important; color: var(--kh-brand-700) !important; }
.fi-icon-btn:focus-visible,
.kh-action-icon-only:focus-visible { outline: 3px solid var(--kh-action-focus) !important; outline-offset: 2px !important; }
.fi-icon-btn:active,
.kh-action-icon-only:active { transform: translateY(1px) !important; background: var(--kh-brand-100) !important; }
.fi-icon-btn:is([aria-disabled="true"], :disabled),
.kh-action-icon-only:is([aria-disabled="true"], :disabled) { pointer-events: none !important; opacity: .46 !important; }

/* ========================================================================
   Global monthly target status + active sidebar icon visibility correction.
   These rules deliberately sit at the end of the package theme so Filament's
   generated icon utilities cannot override the six explicit sidebar states.
   ======================================================================== */

/* Active nav icons: keep the SVG's own fill mode, but force currentColor for
   outline/fill Heroicons and give the glyph a visible translucent capsule. */
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) svg.fi-sidebar-item-icon,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] svg.fi-sidebar-item-icon,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active svg.fi-sidebar-item-icon {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    flex: 0 0 28px !important;
    border-radius: .55rem !important;
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) svg.fi-sidebar-item-icon[stroke],
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] svg.fi-sidebar-item-icon[stroke],
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active svg.fi-sidebar-item-icon[stroke] {
    stroke: currentColor !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button) svg.fi-sidebar-item-icon[fill="currentColor"],
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"] svg.fi-sidebar-item-icon[fill="currentColor"],
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button).fi-active svg.fi-sidebar-item-icon[fill="currentColor"] {
    fill: currentColor !important;
}
.fi-sidebar .fi-sidebar-item.fi-active > :is(.fi-sidebar-item-btn, .fi-sidebar-item-button):is(:hover, :focus-visible) svg.fi-sidebar-item-icon,
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-item-button)[aria-current="page"]:is(:hover, :focus-visible) svg.fi-sidebar-item-icon {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.kh-target-status-shell {
    position: sticky;
    top: var(--topbar-height, 4rem);
    z-index: 24;
    width: 100%;
    padding: .3rem 1rem;
    background: color-mix(in srgb, var(--kh-app-bg) 94%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--kh-border) 76%, transparent);
    backdrop-filter: blur(10px);
}
.kh-target-status {
    --kh-target-tone: var(--kh-info-500);
    --kh-target-soft: var(--kh-info-100);
    --kh-target-track: color-mix(in srgb, var(--kh-target-tone) 17%, var(--kh-neutral-100));
    display: grid;
    grid-template-columns: minmax(230px, auto) minmax(210px, 1fr) auto auto;
    grid-template-areas:
        "heading amount percent context"
        "progress progress progress progress";
    align-items: center;
    gap: .18rem .9rem;
    max-width: 1740px;
    min-height: 44px;
    margin: 0 auto;
    padding: .38rem .72rem .34rem;
    border: 1px solid color-mix(in srgb, var(--kh-target-tone) 24%, var(--kh-border));
    border-radius: .9rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--kh-target-soft) 78%, white) 0, rgba(255, 255, 255, .98) 38%, rgba(255, 255, 255, .98) 100%);
    box-shadow: 0 5px 16px rgba(24, 57, 46, .055);
    color: var(--kh-neutral-900);
}
.kh-target-status-neutral { --kh-target-tone: var(--kh-neutral-500); --kh-target-soft: var(--kh-neutral-100); }
.kh-target-status-red { --kh-target-tone: var(--kh-danger-500); --kh-target-soft: var(--kh-danger-100); }
.kh-target-status-orange { --kh-target-tone: var(--kh-warning-500); --kh-target-soft: var(--kh-warning-100); }
.kh-target-status-amber { --kh-target-tone: var(--kh-gold-500); --kh-target-soft: var(--kh-gold-100); }
.kh-target-status-green { --kh-target-tone: var(--kh-success-500); --kh-target-soft: var(--kh-success-100); }
.kh-target-status-dark-green { --kh-target-tone: var(--kh-brand-700); --kh-target-soft: var(--kh-brand-100); }
.kh-target-status-heading {
    grid-area: heading;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .55rem;
}
.kh-target-status-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: .7rem;
    background: var(--kh-target-soft);
    color: var(--kh-target-tone);
}
.kh-target-status-icon svg { width: 18px; height: 18px; }
.kh-target-status-title {
    display: grid;
    min-width: 0;
    line-height: 1.08;
}
.kh-target-status-title strong {
    color: var(--kh-neutral-900);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .005em;
    white-space: nowrap;
}
.kh-target-status-title small {
    margin-top: .18rem;
    color: var(--kh-neutral-500);
    font-size: .67rem;
    font-weight: 650;
    white-space: nowrap;
}
.kh-target-status-chip {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    margin-left: .12rem;
    padding: .22rem .48rem;
    border-radius: 999px;
    background: var(--kh-target-soft);
    color: color-mix(in srgb, var(--kh-target-tone) 84%, #111);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}
.kh-target-status-amount {
    grid-area: amount;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}
.kh-target-status-amount strong {
    color: var(--kh-neutral-900);
    font-size: .86rem;
    font-weight: 850;
}
.kh-target-status-amount span {
    color: var(--kh-neutral-500);
    font-size: .75rem;
    font-weight: 650;
}
.kh-target-status-percentage {
    grid-area: percent;
    min-width: 62px;
    color: var(--kh-target-tone);
    font-size: .92rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}
.kh-target-status-progress {
    grid-area: progress;
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--kh-target-track);
}
.kh-target-status-progress > i {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--kh-target-tone);
    transition: width .24s ease;
}
.kh-target-status-context {
    grid-area: context;
    justify-self: end;
    color: var(--kh-neutral-500);
    font-size: .67rem;
    font-weight: 650;
    white-space: nowrap;
}
.kh-target-status-context strong { color: var(--kh-neutral-700); font-weight: 800; }
.kh-target-status-message {
    grid-area: amount / amount / context / context;
    color: var(--kh-neutral-600, #55635d);
    font-size: .74rem;
    font-weight: 650;
    text-align: right;
}

@media (min-width: 768px) {
    .kh-target-status-shell { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
    .kh-target-status-shell { padding-inline: 2rem; }
}
@media (max-width: 767px) {
    .kh-target-status-shell {
        padding: .3rem .75rem;
    }
    .kh-target-status {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading percent"
            "amount context"
            "progress progress";
        gap: .28rem .65rem;
        padding: .48rem .62rem;
        border-radius: .78rem;
    }
    .kh-target-status-heading { gap: .42rem; }
    .kh-target-status-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: .6rem; }
    .kh-target-status-icon svg { width: 16px; height: 16px; }
    .kh-target-status-chip { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
    .kh-target-status-amount { text-align: left; overflow: hidden; text-overflow: ellipsis; }
    .kh-target-status-context { overflow: hidden; max-width: 150px; text-overflow: ellipsis; }
    .kh-target-status-message { grid-area: amount / amount / progress / progress; text-align: left; }
}
@media (max-width: 440px) {
    .kh-target-status-shell { padding-inline: .5rem; }
    .kh-target-status {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .24rem .45rem;
    }
    .kh-target-status-title small { display: none; }
    .kh-target-status-chip { display: none; }
    .kh-target-status-amount strong { font-size: .8rem; }
    .kh-target-status-amount span { font-size: .7rem; }
    .kh-target-status-context { max-width: 125px; font-size: .64rem; }
    .kh-target-status-percentage { min-width: 54px; font-size: .86rem; }
}

@media (max-width: 440px) {
    .kh-target-context-suffix { display: none; }
}

/* 2026-09 UI enhancement wave: A1-A11 shared contracts. */
.kh-context-header {
    min-height: 0 !important;
    padding-block: .95rem !important;
}
.kh-context-header h2 { font-size: clamp(1.45rem, 2.25vw, 2rem) !important; }
.kh-context-header .kh-summary-chip { flex: 0 0 auto; }

/* A2 — compact table/status/numeric/action contract. */
.kh-responsive-table table,
.fi-ta-table { font-variant-numeric: tabular-nums; }
.kh-responsive-table th,
.kh-responsive-table td { vertical-align: middle; }
.kh-responsive-table td { min-height: 44px; }
.kh-responsive-table .kh-cell-numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kh-responsive-table .kh-cell-status { white-space: nowrap; }
.kh-table-actions { min-width: max-content; white-space: nowrap; }
.kh-responsive-table .kh-status { display: inline-flex; align-items: center; min-height: 26px; }

/* A3 — removable active-filter vocabulary. */
.kh-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1rem; }
.kh-filter-chip,
.kh-clear-filters {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--kh-border);
    border-radius: 999px;
    background: #fff;
    color: var(--kh-text-secondary);
    font-size: .72rem;
    font-weight: 750;
}
button.kh-filter-chip:hover,
.kh-clear-filters:hover { border-color: #9fc2b4; background: var(--kh-primary-soft); color: var(--kh-primary-strong); }
.kh-filter-chip-static { background: var(--kh-neutral-soft); }
.kh-clear-filters { border-color: transparent; color: var(--kh-primary); }

/* A4 / A6 — sticky form actions, dirty state and settings navigation. */
.kh-sticky-form-actions {
    position: sticky;
    bottom: .75rem;
    z-index: 18;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--kh-border);
    border-radius: .9rem;
    background: color-mix(in srgb, #fff 94%, transparent);
    box-shadow: var(--kh-shadow-float);
    backdrop-filter: blur(10px);
}
.kh-dirty-state { margin-right: auto; color: #8c5517; font-size: .75rem; font-weight: 800; }
[data-kh-dirty-guard][data-kh-dirty="true"] .kh-sticky-form-actions { border-color: #e5bc82; }
.kh-settings-navigator {
    position: sticky;
    top: calc(var(--topbar-height, 4rem) + 4.6rem);
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: .75rem;
    padding: .8rem;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius-lg);
    background: color-mix(in srgb, #fff 95%, transparent);
    box-shadow: var(--kh-shadow-sm);
    backdrop-filter: blur(10px);
}
.kh-settings-search { display: grid; gap: .35rem; color: var(--kh-text-secondary); font-size: .7rem; font-weight: 800; }
.kh-settings-section-links { display: flex; overflow-x: auto; align-items: center; gap: .4rem; padding-bottom: .15rem; }
.kh-settings-section-links a { flex: 0 0 auto; padding: .45rem .65rem; border-radius: .6rem; color: var(--kh-text-secondary); font-size: .72rem; font-weight: 750; }
.kh-settings-section-links a:hover,
.kh-settings-section-links a:focus-visible { background: var(--kh-primary-soft); color: var(--kh-primary-strong); }
.kh-settings-empty { padding: 1rem; border: 1px dashed var(--kh-border); border-radius: var(--kh-radius-md); color: var(--kh-text-secondary); text-align: center; }

/* A5 — selected KPI cards are real, authorized drill-down controls. */
a.kh-kpi-drilldown { color: inherit; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.kh-kpi-drilldown:hover { transform: translateY(-1px); border-color: #9fc2b4 !important; box-shadow: var(--kh-shadow-card) !important; }
a.kh-kpi-drilldown:focus-visible { outline: 3px solid var(--kh-focus-ring); outline-offset: 2px; }

/* A7 — secure document review drawer. */
.kh-document-review-list { display: grid; gap: .75rem; }
.kh-document-drawer { overflow: hidden; border: 1px solid var(--kh-border); border-radius: var(--kh-radius-md); background: #fff; }
.kh-document-drawer > summary { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; list-style: none; }
.kh-document-drawer > summary::-webkit-details-marker { display: none; }
.kh-document-drawer > summary:hover { background: #fafcfb; }
.kh-document-drawer > summary strong,
.kh-document-drawer > summary small { display: block; }
.kh-document-drawer > summary small { margin-top: .15rem; color: var(--kh-text-secondary); font-size: .72rem; }
.kh-document-summary-meta { display: flex; align-items: center; gap: .65rem; color: var(--kh-text-secondary); font-size: .72rem; }
.kh-document-drawer-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 1rem; padding: 1rem; border-top: 1px solid var(--kh-border-muted); background: #fafcfb; }
.kh-document-preview-panel,
.kh-document-history-panel { padding: 1rem; border: 1px solid var(--kh-border); border-radius: .85rem; background: #fff; }
.kh-document-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .85rem 0; }
.kh-document-meta dt { color: var(--kh-text-secondary); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.kh-document-meta dd { margin: .15rem 0 0; color: var(--kh-text); font-size: .8rem; overflow-wrap: anywhere; }
.kh-document-history-panel h4 { margin: 0 0 .65rem; font-size: .9rem; }
.kh-document-history { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kh-document-history li { display: flex; justify-content: space-between; gap: .75rem; padding-bottom: .45rem; border-bottom: 1px solid var(--kh-border-muted); font-size: .72rem; }
.kh-document-history li span { color: var(--kh-text-secondary); }
.kh-document-decision-drawer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.kh-document-decision-drawer .kh-form-error { flex-basis: 100%; }

/* A8 — payroll state stepper. */
.kh-state-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin: .9rem 0 1rem; padding: 0; list-style: none; }
.kh-state-stepper li { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: .35rem; min-width: 0; color: var(--kh-text-secondary); font-size: .66rem; }
.kh-state-stepper li::after { content: ""; position: absolute; z-index: 0; top: 12px; left: 25px; right: -.35rem; height: 2px; background: var(--kh-border); }
.kh-state-stepper li:last-child::after { display: none; }
.kh-state-stepper li > span { z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--kh-border); border-radius: 50%; background: #fff; font-size: .65rem; font-weight: 850; }
.kh-state-stepper li.is-complete > span,
.kh-state-stepper li.is-current > span { border-color: var(--kh-primary); background: var(--kh-primary); color: #fff; }
.kh-state-stepper li.is-complete::after { background: var(--kh-primary); }
.kh-state-stepper li.is-current strong { color: var(--kh-primary-strong); }

/* A9 — board-first recruitment with secondary controlled tools. */
.kh-recruitment-tools { border: 1px solid var(--kh-border); border-radius: var(--kh-radius-lg); background: #fff; box-shadow: var(--kh-shadow-sm); }
.kh-recruitment-tools > summary { cursor: pointer; padding: .9rem 1rem; color: var(--kh-primary-strong); font-size: .82rem; font-weight: 800; }
.kh-recruitment-tools[open] > summary { border-bottom: 1px solid var(--kh-border-muted); }
.kh-recruitment-tools .kh-recruitment-controls { padding: 1rem; }

/* A10 — workflow age cues derived only from existing submission timestamps. */
.kh-age-cue { display: inline-flex; min-height: 26px; align-items: center; padding: .2rem .5rem; border-radius: 999px; background: var(--kh-warning-soft); color: #8c5517; font-size: .68rem; font-weight: 800; white-space: nowrap; }

/* A11 — icon-only accessibility and touch-target baseline. */
.fi-icon-btn,
[data-kh-icon-action],
button:has(> svg:only-child),
a:has(> svg:only-child) { min-width: 44px; min-height: 44px; }
.fi-icon-btn:focus-visible,
[data-kh-icon-action]:focus-visible { outline: 3px solid var(--kh-focus-ring); outline-offset: 2px; }

@media (max-width: 900px) {
    .kh-settings-navigator { position: static; grid-template-columns: 1fr; }
    .kh-document-drawer-body { grid-template-columns: 1fr; }
    .kh-state-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .75rem; }
    .kh-state-stepper li:nth-child(3)::after { display: none; }
}
@media (max-width: 640px) {
    .kh-sticky-form-actions { bottom: .4rem; flex-wrap: wrap; }
    .kh-dirty-state { flex-basis: 100%; }
    .kh-document-drawer > summary,
    .kh-document-summary-meta { align-items: flex-start; flex-direction: column; }
    .kh-document-meta { grid-template-columns: 1fr; }
    .kh-state-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-state-stepper li:nth-child(2n)::after { display: none; }
}

/* 2026-09 UI enhancement wave completion: shared Filament table/filter contracts. */
.fi-ta-table .fi-ta-cell { vertical-align: middle; }
.fi-ta-table .fi-ta-actions { gap: .35rem; }
.fi-ta-table .fi-badge { min-height: 26px; align-items: center; }
.fi-ta-table .fi-align-end { font-variant-numeric: tabular-nums; }
.fi-ta-filter-indicators {
    align-items: center;
    border-color: var(--kh-border-muted) !important;
    background: var(--kh-neutral-soft) !important;
}
.fi-ta-filter-indicators-label { color: var(--kh-text-secondary) !important; font-size: .72rem !important; font-weight: 800 !important; }
.fi-ta-filter-indicators-badges-ctn .fi-badge { min-height: 34px; border: 1px solid var(--kh-border); border-radius: 999px; background: #fff; }
.fi-ta-filter-indicators > :nth-child(2) { min-width: 44px; min-height: 44px; }
.kh-context-header-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .55rem; }
@media (max-width: 768px) { .kh-context-header-actions { width: 100%; justify-content: flex-start; } }