/* ==========================================================================
   Keyora Access - Product Experience v3 (Keyora product family)

   Presentation layer only. Structure:
     1. Tokens              aligned with the Keyora Research & Operations reference
     2. Base                body.kx-app
     3. Shell               .kx-shell / .kx-sidebar / .kx-topbar / .kx-main
     4. Primitives          page head, strip, surface, table, tabs, drawer,
                            badge, button, form, empty state
     5. Legacy bridge       maps existing Access components onto the primitives
     6. Responsive / print
     7. Authentication      login and activation pages

   Every product rule is scoped to body.kx-app (customer shell). The operator
   shell and the older app.css generations keep their own scope; kx selectors
   are consistently more specific, so no per-component override chains exist.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --kx-navy-950: #0a1426;
    --kx-navy-900: #0f1b31;
    --kx-navy-800: #16243e;
    --kx-navy-700: #22324f;
    --kx-nav-text: #aebbd0;
    --kx-nav-muted: #6f7f9a;
    --kx-blue: #1a6ad4;
    --kx-blue-strong: #0f58b8;
    --kx-blue-soft: #eef5ff;
    --kx-blue-line: #cfe0f6;
    --kx-canvas: #f7f8fb;
    --kx-surface: #ffffff;
    --kx-surface-sub: #f9fafc;
    --kx-hover: #f5f8fc;
    --kx-line: #e6eaf0;
    --kx-line-soft: #eff2f6;
    --kx-line-strong: #d3dbe6;
    --kx-ink: #121c2d;
    --kx-text: #334155;
    --kx-muted: #66748a;
    --kx-quiet: #8e9aad;
    --kx-success: #177245;
    --kx-success-soft: #effaf4;
    --kx-success-line: #cdeadb;
    --kx-warning: #93570a;
    --kx-warning-soft: #fff8ec;
    --kx-warning-line: #f3e0bd;
    --kx-danger: #b3263a;
    --kx-danger-soft: #fff3f4;
    --kx-danger-line: #f4d0d5;
    /* chart marks (validated: adjacent CVD separation, labelled legends) */
    --kx-chart-available: #5598e7;
    --kx-chart-issued: #1c5cab;
    --kx-chart-restricted: #eda100;
    --kx-chart-lost: #d03b3b;
    --kx-chart-neutral: #cbd3de;
    --kx-chart-movement-issued: #2a78d6;
    --kx-chart-movement-returned: #eb6834;
    --kx-radius: 8px;
    --kx-radius-sm: 6px;
    --kx-shadow: 0 1px 2px rgba(16, 43, 83, .04);
    --kx-shadow-pop: 0 12px 32px rgba(15, 27, 49, .14), 0 2px 6px rgba(15, 27, 49, .06);
    --kx-font: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --kx-weight-regular: 400;
    --kx-weight-medium: 500;
    --kx-weight-strong: 580;
    --kx-sidebar-width: 236px;
    --kx-rail-width: 60px;
    --kx-topbar-height: 52px;
    --kx-row-height: 42px;
    --kx-ease: cubic-bezier(.2, .7, .2, 1);
    /* aliases used by the authentication pages */
    --kx-blue-600: var(--kx-blue);
    --kx-blue-500: #2582eb;
}
.kx-density-compact { --kx-row-height: 32px; }

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Base ------------------------------------------------------------------ */
body.kx-app {
    margin: 0;
    background: var(--kx-canvas);
    color: var(--kx-text);
    font-family: var(--kx-font);
    font-size: 13.5px;
    font-weight: var(--kx-weight-regular);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.kx-app a { color: var(--kx-blue); }
body.kx-app h1, body.kx-app h2, body.kx-app h3 { color: var(--kx-ink); font-family: var(--kx-font); font-weight: var(--kx-weight-strong); }
body.kx-app :is(strong, b) { font-weight: var(--kx-weight-strong); }
body.kx-app .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.kx-app :focus-visible { outline: 2px solid rgba(26, 106, 212, .45); outline-offset: 2px; }

/* cross-document navigation: shell stays put, only the workspace settles in */
@view-transition { navigation: auto; }
.kx-app .kx-sidebar { view-transition-name: kx-sidebar; }
.kx-app .kx-topbar { view-transition-name: kx-topbar; }
::view-transition-old(root) { animation: 90ms ease-out both kx-fade-out; }
::view-transition-new(root) { animation: 160ms var(--kx-ease) both kx-fade-in; }
@keyframes kx-fade-out { to { opacity: 0; } }
@keyframes kx-fade-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* 3. Shell ----------------------------------------------------------------- */
.kx-app .kx-shell { display: grid; grid-template-columns: var(--kx-sidebar-width) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s var(--kx-ease); }

.kx-app .kx-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--kx-navy-900);
    color: var(--kx-nav-text);
}
.kx-app .kx-icon { flex: 0 0 auto; width: 17px; height: 17px; }
.kx-app .kx-brand-row { display: flex; align-items: center; min-height: var(--kx-topbar-height); padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.kx-app .kx-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: #f5f8fd; text-decoration: none; }
.kx-app .kx-brand img { flex: 0 0 auto; width: 26px; height: 26px; padding: 2px; border-radius: 6px; background: #fff; object-fit: contain; box-sizing: border-box; }
.kx-app .kx-brand span { display: flex; align-items: baseline; gap: 6px; line-height: 1; white-space: nowrap; }
.kx-app .kx-brand strong { color: #f5f8fd; font-size: 14.5px; font-weight: var(--kx-weight-strong); letter-spacing: -.01em; }
.kx-app .kx-brand small { color: var(--kx-nav-muted); font-size: 13px; font-weight: var(--kx-weight-regular); }

.kx-app .kx-nav { flex: 1 1 auto; display: grid; align-content: start; gap: 2px; overflow-y: auto; padding: 10px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--kx-navy-700) transparent; }
.kx-app .kx-nav-group { display: grid; }
.kx-app .kx-nav-group + .kx-nav-group { margin-top: 4px; }
.kx-app .kx-sidebar button.kx-nav-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 0 8px 0 10px;
    border: 0;
    border-radius: var(--kx-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--kx-nav-muted);
    font: var(--kx-weight-medium) 11.5px/1 var(--kx-font);
    letter-spacing: .01em;
    text-transform: none;
    cursor: pointer;
}
.kx-app .kx-sidebar button.kx-nav-heading:hover { background: rgba(255, 255, 255, .03); color: var(--kx-nav-text); }
.kx-app .kx-nav-heading .kx-icon { width: 13px; height: 13px; opacity: .7; transform: rotate(0deg); transition: transform .16s var(--kx-ease); }
.kx-app .kx-nav-group.is-open .kx-nav-heading .kx-icon { transform: rotate(90deg); }
.kx-app .kx-nav-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s var(--kx-ease); }
.kx-app .kx-nav-group.is-open .kx-nav-items { grid-template-rows: 1fr; }
.kx-app .kx-nav-items-inner { display: grid; gap: 1px; min-height: 0; overflow: hidden; padding-top: 1px; }
.kx-app .kx-nav-group:not(.is-open) .kx-nav-items-inner { visibility: hidden; }
.kx-app .kx-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--kx-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--kx-nav-text);
    font-size: 13px;
    font-weight: var(--kx-weight-regular);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.kx-app .kx-nav-link .kx-icon { color: var(--kx-nav-muted); transition: color .12s ease; }
.kx-app .kx-nav-link:hover { background: rgba(255, 255, 255, .045); color: #fff; }
.kx-app .kx-nav-link:hover .kx-icon { color: var(--kx-nav-text); }
.kx-app .kx-nav-link.is-active { background: rgba(62, 132, 232, .16); box-shadow: none; color: #fff; font-weight: var(--kx-weight-medium); }
.kx-app .kx-nav-link.is-active .kx-icon { color: #7fb2f5; }
.kx-app .kx-nav-link.is-active::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: -8px; width: 2px; border-radius: 0 2px 2px 0; background: #5b9cf0; }
.kx-app .kx-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kx-app .kx-sidebar-foot { display: grid; gap: 1px; padding: 8px 8px 10px; border-top: 1px solid rgba(255, 255, 255, .05); }
.kx-app .kx-sidebar button.kx-rail-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--kx-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--kx-nav-muted);
    font: var(--kx-weight-regular) 13px/1 var(--kx-font);
    white-space: nowrap;
    cursor: pointer;
}
.kx-app .kx-sidebar button.kx-rail-toggle:hover { background: rgba(255, 255, 255, .045); color: #fff; }

/* narrow rail: icons only, every destination one click away */
@media (min-width: 901px) {
    .kx-rail .kx-app .kx-shell { grid-template-columns: var(--kx-rail-width) minmax(0, 1fr); }
    .kx-rail .kx-app .kx-brand span,
    .kx-rail .kx-app .kx-nav-label,
    .kx-rail .kx-app .kx-nav-heading span,
    .kx-rail .kx-app .kx-nav-heading .kx-icon { display: none; }
    .kx-rail .kx-app .kx-brand-row { justify-content: center; padding: 0; }
    .kx-rail .kx-app .kx-nav { padding: 10px 10px 12px; }
    .kx-rail .kx-app .kx-sidebar button.kx-nav-heading { min-height: 9px; padding: 0; pointer-events: none; }
    .kx-rail .kx-app .kx-sidebar button.kx-nav-heading::after { content: ""; flex: 1; height: 1px; margin: 0 6px; background: rgba(255, 255, 255, .07); }
    .kx-rail .kx-app .kx-sidebar .kx-nav-group:first-child button.kx-nav-heading { display: none; }
    .kx-rail .kx-app .kx-nav-items { grid-template-rows: 1fr; }
    .kx-rail .kx-app .kx-nav-group:not(.is-open) .kx-nav-items-inner { visibility: visible; }
    .kx-rail .kx-app .kx-sidebar :is(.kx-nav-link, button.kx-rail-toggle) { justify-content: center; gap: 0; min-height: 36px; padding: 0; }
    .kx-rail .kx-app .kx-nav-link.is-active::before { left: -10px; }
    .kx-rail .kx-app .kx-sidebar-foot { padding: 8px 10px 10px; }
    .kx-rail .kx-app .kx-sidebar button.kx-rail-toggle .kx-icon { transform: scaleX(-1); }
}

.kx-tooltip {
    position: fixed;
    z-index: 200;
    max-width: 280px;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--kx-navy-950);
    box-shadow: 0 6px 18px rgba(10, 20, 38, .22);
    color: #eef3fb;
    font: var(--kx-weight-regular) 12px/1.35 var(--kx-font);
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity .1s ease, transform .1s ease;
}
.kx-tooltip.is-visible { opacity: 1; transform: none; }

.kx-app .kx-frame { display: flex; flex-direction: column; min-width: 0; }
.kx-app .kx-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--kx-topbar-height);
    padding: 0 28px;
    border-bottom: 1px solid var(--kx-line);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(14px);
}
.kx-app .kx-menu-toggle { display: none; }
.kx-app .kx-topbar .kx-search { display: block; flex: 0 1 440px; width: 440px; max-width: 42vw; margin: 0; padding: 0; }
.kx-app .kx-search-frame { position: relative; display: block; width: 100%; }
.kx-app .kx-search-frame > .kx-icon { position: absolute; z-index: 1; top: 50%; left: 11px; width: 15px; height: 15px; color: var(--kx-quiet); transform: translateY(-50%); pointer-events: none; }
.kx-app .kx-search input {
    width: 100%;
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 0 60px 0 34px;
    border: 1px solid transparent;
    border-radius: var(--kx-radius);
    background: #f1f4f8;
    color: var(--kx-ink);
    font: var(--kx-weight-regular) 13px/1 var(--kx-font);
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.kx-app .kx-search input::placeholder { color: var(--kx-quiet); }
.kx-app .kx-search input:hover { background: #edf1f6; }
.kx-app .kx-search input:focus { border-color: var(--kx-blue); background: #fff; box-shadow: 0 0 0 3px rgba(26, 106, 212, .12); outline: none; }
.kx-app .kx-search kbd { position: absolute; top: 50%; right: 8px; padding: 1px 6px; border: 1px solid var(--kx-line); border-radius: 5px; background: #fff; color: var(--kx-quiet); font: var(--kx-weight-regular) 10.5px/1.4 var(--kx-font); transform: translateY(-50%); }
.kx-app .kx-context { display: flex; align-items: center; gap: 14px; margin-left: auto; min-width: 0; }
.kx-app .kx-scope { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 360px; height: 28px; padding: 0 10px; border: 1px solid var(--kx-line); border-radius: 999px; background: #fff; color: var(--kx-text); font-size: 12.5px; white-space: nowrap; }
.kx-app .kx-scope-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--kx-blue); }
.kx-app .kx-scope-company { overflow: hidden; color: var(--kx-ink); font-weight: var(--kx-weight-medium); text-overflow: ellipsis; }
.kx-app .kx-scope-sep { color: var(--kx-line-strong); }
.kx-app .kx-scope-tenant { color: var(--kx-muted); }
.kx-app .kx-profile-menu { position: relative; }
.kx-app .kx-profile { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: 999px; color: var(--kx-ink); cursor: pointer; list-style: none; }
.kx-app .kx-profile::-webkit-details-marker { display: none; }
.kx-app .kx-profile:hover, .kx-app .kx-profile-menu[open] .kx-profile { border-color: var(--kx-line); background: #fff; }
.kx-app .kx-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #22324f, #0f1b31); color: #fff; font-size: 11px; font-weight: var(--kx-weight-medium); letter-spacing: .02em; }
.kx-app .kx-profile-text { display: grid; line-height: 1.2; }
.kx-app .kx-profile-text strong { font-size: 12.5px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-profile-text small { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; min-width: 230px; padding: 6px; border: 1px solid var(--kx-line); border-radius: 10px; background: #fff; box-shadow: var(--kx-shadow-pop); animation: kx-pop .14s var(--kx-ease); }
@keyframes kx-pop { from { opacity: 0; transform: translateY(-4px); } }
.kx-app .kx-menu-who { display: grid; gap: 1px; margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-menu-who strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-menu-who small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-menu-panel > a,
.kx-app .kx-menu-panel .kx-logout button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; height: auto; padding: 0 10px; border: 0; border-radius: var(--kx-radius-sm); background: transparent; box-shadow: none; color: var(--kx-text); font: var(--kx-weight-regular) 13px/1 var(--kx-font); text-align: left; text-decoration: none; cursor: pointer; }
.kx-app .kx-menu-panel > a:hover,
.kx-app .kx-menu-panel .kx-logout button:hover { background: var(--kx-hover); color: var(--kx-ink); }
.kx-app .kx-menu-panel .kx-logout { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--kx-line-soft); }
.kx-app .kx-menu-panel .kx-logout .kx-icon { width: 15px; height: 15px; color: var(--kx-quiet); }

.kx-app .kx-main { width: 100%; max-width: 1680px; box-sizing: border-box; padding: 22px 32px 56px; }
.kx-app .kx-content { --today-width: 100%; display: grid; gap: 16px; min-width: 0; }
/* every content block spans the content column; legacy per-page widths do not apply in this shell */
.kx-app .kx-content > :is(section, nav, div, details, form, article, aside, header, table, p) { width: auto; max-width: none; margin: 0; justify-self: stretch; }
.kx-app .kx-menu-backdrop { display: none; }

/* 4. Primitives ------------------------------------------------------------ */
.kx-app .kx-eyebrow { margin: 0 0 3px; color: var(--kx-quiet); font-size: 12px; font-weight: var(--kx-weight-regular); letter-spacing: 0; text-transform: none; }

/* page title rendered by the shell; hidden when the content brings its own head */
.kx-app .kx-page-title { margin: 0 0 14px; }
.kx-app .kx-page-title h1 { margin: 0; font-size: 21px; font-weight: var(--kx-weight-strong); letter-spacing: -.018em; line-height: 1.2; }
.kx-app .kx-main:has(.kx-content > .kx-page-head, .kx-content > .calm-page-head, .kx-content > .calm-object-head, .kx-content > .dashboard-hero, .kx-content > .workflow-hero, .kx-content > .migration-hero, .kx-content > .setup-hero) .kx-page-title { display: none; }

.kx-app .kx-page-head,
.kx-app .kx-content > .calm-page-head,
.kx-app .kx-content > .calm-object-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.kx-app .kx-page-head > div:first-child,
.kx-app .kx-content > .calm-page-head > div:first-child,
.kx-app .kx-content > .calm-object-head > div:first-child { min-width: 0; max-width: 860px; }
.kx-app .kx-page-head h1,
.kx-app .kx-content > .calm-page-head h2,
.kx-app .kx-content > .calm-object-head h2 { margin: 0 0 3px; color: var(--kx-ink); font-size: 21px; font-weight: var(--kx-weight-strong); letter-spacing: -.018em; line-height: 1.2; }
.kx-app .kx-page-head p:not(.kx-eyebrow),
.kx-app .kx-content > .calm-page-head p:not(.eyebrow),
.kx-app .kx-content > .calm-object-head p:not(.eyebrow) { margin: 0; max-width: 72ch; color: var(--kx-muted); font-size: 13px; line-height: 1.5; }
.kx-app .kx-content > .calm-page-head .eyebrow,
.kx-app .kx-content > .calm-object-head .eyebrow { margin: 0 0 3px; color: var(--kx-quiet); font-size: 12px; font-weight: var(--kx-weight-regular); letter-spacing: 0; text-transform: none; }
.kx-app .kx-actions,
.kx-app .kx-content > .calm-page-head .calm-actionbar,
.kx-app .kx-content > .calm-object-head .calm-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* horizontal status strip */
.kx-app .kx-strip,
.kx-app .kx-content > .calm-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--kx-line);
    border-radius: var(--kx-radius);
    background: var(--kx-surface);
    box-shadow: none;
}
.kx-app .kx-strip-cell,
.kx-app .kx-content > .calm-overview-grid > div {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    padding: 11px 16px 12px;
    border: 0;
    border-right: 1px solid var(--kx-line-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
}
.kx-app .kx-strip-cell:last-child,
.kx-app .kx-content > .calm-overview-grid > div:last-child { border-right: 0; }
.kx-app a.kx-strip-cell { transition: background-color .12s ease; }
.kx-app a.kx-strip-cell:hover { background: var(--kx-hover); }
.kx-app .kx-strip-cell span,
.kx-app .kx-content > .calm-overview-grid > div > span { color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-regular); letter-spacing: 0; text-transform: none; }
.kx-app .kx-strip-cell strong { color: var(--kx-ink); font-size: 20px; font-weight: 520; letter-spacing: -.02em; line-height: 1.25; }
.kx-app .kx-content > .calm-overview-grid > div > strong { overflow: hidden; color: var(--kx-ink); font-size: 14px; font-weight: var(--kx-weight-medium); text-overflow: ellipsis; }
.kx-app .kx-strip-cell small { color: var(--kx-quiet); font-size: 11.5px; }
.kx-app .kx-strip-cell.is-zero strong { color: var(--kx-quiet); }
.kx-app .kx-strip-cell.is-warn strong { color: var(--kx-warning); }
.kx-app .kx-strip-cell.is-bad strong { color: var(--kx-danger); }

/* work surface */
.kx-app .kx-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.kx-app .kx-side { display: grid; gap: 16px; }
.kx-app .kx-surface { overflow: hidden; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-surface-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 10px 16px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-surface-head h2 { margin: 0; font-size: 14px; font-weight: var(--kx-weight-strong); letter-spacing: -.01em; }
.kx-app .kx-surface-head .kx-eyebrow { margin: 0 0 1px; font-size: 11.5px; }
.kx-app .kx-link { font-size: 12px; font-weight: var(--kx-weight-medium); text-decoration: none; }

/* tables: one grid language for every inventory surface */
.kx-app .kx-table-wrap { overflow-x: auto; }
.kx-app .kx-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--kx-surface); font-size: 13px; }
.kx-app .kx-content .kx-table th {
    height: 34px;
    border-radius: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--kx-line);
    background: var(--kx-surface-sub);
    color: var(--kx-muted);
    font-size: 12px;
    font-weight: var(--kx-weight-medium);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
}
.kx-app .kx-table td { height: var(--kx-row-height); padding: 6px 14px; border-bottom: 1px solid var(--kx-line-soft); color: var(--kx-text); vertical-align: middle; font-variant-numeric: tabular-nums; transition: background-color .1s ease; }
.kx-app .kx-table tbody tr:last-child td { border-bottom: 0; }
.kx-app .kx-table tbody tr:hover td { background: var(--kx-hover); }
.kx-app .kx-table td strong { color: var(--kx-ink); font-weight: var(--kx-weight-medium); }
.kx-app .kx-table td small { display: block; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-cell-main { display: block; color: var(--kx-ink); font-weight: var(--kx-weight-regular); }
.kx-app .kx-cell-action { width: 1%; text-align: right; white-space: nowrap; }
.kx-app .kx-cell-action a { font-size: 12.5px; font-weight: var(--kx-weight-medium); text-decoration: none; }
.kx-app .kx-work-table { table-layout: fixed; }
.kx-app .kx-work-table .kx-col-topic { width: 22%; }
.kx-app .kx-work-table .kx-col-context { width: 34%; }
.kx-app .kx-work-table .kx-col-status { width: 17%; }
.kx-app .kx-work-table .kx-col-owner { width: 27%; }
.kx-app .kx-work-table .kx-col-action { width: 118px; }
.kx-app .kx-work-table td { overflow-wrap: anywhere; }
.kx-app .kx-work-table td[data-label="Status"] small { margin-top: 3px; font-size: 11.5px; }

/* interactive rows: hover, keyboard selection (j/k, arrows, Enter), quiet actions */
.kx-app .kx-content :is(.calm-list-row, .compact-edit-list > .edit-panel, .loss-report-list > .edit-panel, table tr).is-selected,
.kx-app .kx-content table tr.is-selected > td { background: var(--kx-blue-soft); }
.kx-app .kx-content :is(.calm-list-row, .compact-edit-list > .edit-panel, .loss-report-list > .edit-panel).is-selected { box-shadow: inset 2px 0 0 var(--kx-blue); }
.kx-app .kx-content table tr.is-selected > td:first-child { box-shadow: inset 2px 0 0 var(--kx-blue); }
@media (hover: hover) {
    .kx-app .kx-content .calm-row-action,
    .kx-app .kx-content .kx-cell-action a,
    .kx-app .kx-content .compact-edit-list .edit-panel > summary > .text-link { opacity: .72; transition: opacity .12s ease, color .12s ease; }
    .kx-app .kx-content :is(.calm-list-row, tr, .edit-panel):is(:hover, :focus-within, .is-selected) :is(.calm-row-action, .kx-cell-action a, summary > .text-link) { opacity: 1; }
}

/* density switch in list heads */
.kx-app .kx-density { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; padding: 2px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-surface-sub); }
.kx-app .kx-density button.ghost { width: 26px; min-width: 0; min-height: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--kx-quiet); }
.kx-app .kx-density button.ghost:hover { background: transparent; color: var(--kx-ink); }
.kx-app .kx-density button.ghost[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 49, .1); color: var(--kx-ink); }
.kx-app .kx-density svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.kx-app .kx-content .is-refreshing { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

/* overview charts: orientation, not decoration */
.kx-app .kx-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-insight { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; min-width: 0; padding: 14px 18px 14px; border-right: 1px solid var(--kx-line-soft); }
.kx-app .kx-insight:last-child { border-right: 0; }
.kx-app .kx-insight header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-insight-figure { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.kx-app .kx-insight-figure strong { color: var(--kx-ink); font-size: 22px; font-weight: 520; letter-spacing: -.02em; line-height: 1.1; }
.kx-app .kx-insight-figure small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-stack { display: flex; gap: 2px; align-self: center; height: 10px; overflow: hidden; border-radius: 4px; background: var(--kx-line-soft); }
.kx-app .kx-stack-seg { flex: 1 1 0; min-width: 3px; background: var(--kx-chart-neutral); transition: filter .12s ease; }
.kx-app .kx-stack-seg:hover, .kx-app .kx-stack-seg:focus-visible { filter: brightness(.9); outline: none; }
.kx-app :is(.kx-stack-seg, .kx-swatch).is-available { background: var(--kx-chart-available); }
.kx-app :is(.kx-stack-seg, .kx-swatch):is(.is-issued, .is-planned) { background: var(--kx-chart-issued); }
.kx-app :is(.kx-stack-seg, .kx-swatch):is(.is-restricted, .is-today) { background: var(--kx-chart-restricted); }
.kx-app :is(.kx-stack-seg, .kx-swatch):is(.is-lost, .is-overdue) { background: var(--kx-chart-lost); }
.kx-app :is(.kx-stack-seg, .kx-swatch):is(.is-archived, .is-undated) { background: var(--kx-chart-neutral); }
.kx-app .kx-swatch.is-movement-issued { background: var(--kx-chart-movement-issued); }
.kx-app .kx-swatch.is-movement-returned { background: var(--kx-chart-movement-returned); }
.kx-app .kx-stack-empty { flex: 1; }
.kx-app .kx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.kx-app .kx-legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--kx-muted); font-size: 12px; white-space: nowrap; }
.kx-app .kx-legend li strong { color: var(--kx-ink); font-weight: var(--kx-weight-medium); font-variant-numeric: tabular-nums; }
.kx-app .kx-legend li.is-zero { opacity: .55; }
.kx-app .kx-legend-note { margin-left: auto; color: var(--kx-quiet); }
.kx-app .kx-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.kx-app .kx-columns { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; height: 64px; padding-top: 4px; border-bottom: 1px solid var(--kx-line-strong); }
.kx-app .kx-columns::before { content: ""; position: absolute; top: 4px; right: 0; left: 0; border-top: 1px solid var(--kx-line-soft); }
.kx-app .kx-columns-max { position: absolute; top: -5px; right: 0; padding-left: 4px; background: var(--kx-surface); color: var(--kx-quiet); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.kx-app .kx-column-group { position: relative; display: grid; height: 100%; outline: none; }
.kx-app .kx-column-bars { display: flex; align-items: end; justify-content: center; gap: 2px; height: 100%; border-radius: 4px; }
.kx-app .kx-column-bars i { width: min(9px, 40%); height: calc(var(--kx-v) / var(--kx-max) * 100%); min-height: 0; border-radius: 3px 3px 0 0; }
.kx-app .kx-column-bars i.is-issued { background: var(--kx-chart-movement-issued); }
.kx-app .kx-column-bars i.is-returned { background: var(--kx-chart-movement-returned); }
.kx-app .kx-column-group:is(:hover, :focus-visible) .kx-column-bars { background: var(--kx-hover); }
.kx-app .kx-column-group small { position: absolute; top: calc(100% + 3px); right: 0; left: 0; color: var(--kx-quiet); font-size: 10.5px; text-align: center; font-variant-numeric: tabular-nums; }
.kx-app .kx-insight-movement .kx-legend { margin-top: 16px; }

/* sortable column heads */
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort] a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort] a:hover { color: var(--kx-ink); }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort] i { width: 0; height: 0; border-right: 3.5px solid transparent; border-left: 3.5px solid transparent; opacity: 0; }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort="none"] a:hover i { border-bottom: 4px solid currentColor; opacity: .45; }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort="ascending"] { color: var(--kx-ink); }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort="ascending"] i { border-bottom: 4px solid currentColor; opacity: 1; }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort="descending"] { color: var(--kx-ink); }
.kx-app .kx-content .kx-list .kx-list-columns [data-kx-sort="descending"] i { border-top: 4px solid currentColor; opacity: 1; }

/* tabs */
.kx-app .kx-tabs,
.kx-app .kx-subnav { display: flex; gap: 22px; overflow-x: auto; margin: 0; padding: 0 2px; border-bottom: 1px solid var(--kx-line); scrollbar-width: none; }
.kx-app .kx-subnav { margin: -4px 0 16px; }
.kx-app .kx-tabs button[data-kx-tab-target][type],
.kx-app .kx-subnav a {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    margin: 0 0 -1px;
    padding: 8px 0 9px;
    border: 0;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--kx-muted);
    font: var(--kx-weight-medium) 13px/1.2 var(--kx-font);
    text-decoration: none;
    cursor: pointer;
}
.kx-app .kx-tabs button[data-kx-tab-target][type]:hover,
.kx-app .kx-subnav a:hover { background: transparent; color: var(--kx-ink); }
.kx-app .kx-tabs button[data-kx-tab-target][type].is-active,
.kx-app .kx-subnav a.is-active { border-bottom-color: var(--kx-blue); background: transparent; color: var(--kx-ink); }
.kx-app [data-kx-tab][hidden] { display: none !important; }
.kx-app .kx-tabs button[data-kx-tab-target][type] { width: auto; min-width: 0; }

/* lists with column heads (row-based tables) */
.kx-app .kx-list-columns { display: none; }

/* flow / quick start / empty */
.kx-app .kx-quick { display: grid; }
.kx-app .kx-quick a { display: grid; gap: 1px; padding: 10px 16px; border-bottom: 1px solid var(--kx-line-soft); color: var(--kx-ink); text-decoration: none; }
.kx-app .kx-quick a:last-child { border-bottom: 0; }
.kx-app .kx-quick a:hover { background: var(--kx-surface-sub); }
.kx-app .kx-quick strong { color: var(--kx-blue); font-size: 13px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-quick small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-flow { display: grid; margin: 0; padding: 4px 0; list-style: none; }
.kx-app .kx-flow li { position: relative; padding: 8px 16px 8px 30px; }
.kx-app .kx-flow li::before { content: ""; position: absolute; top: 14px; left: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--kx-blue-line); }
.kx-app .kx-flow p { margin: 0; color: var(--kx-text); font-size: 12.5px; line-height: 1.4; }
.kx-app .kx-flow small { color: var(--kx-quiet); font-size: 11px; }
.kx-app .kx-empty { display: grid; gap: 2px; margin: 12px 16px; padding: 14px 16px; border: 1px dashed var(--kx-line-strong); border-radius: var(--kx-radius); background: var(--kx-surface-sub); color: var(--kx-muted); font-size: 13px; }
.kx-app .kx-empty strong { color: var(--kx-ink); font-weight: var(--kx-weight-medium); }

/* badges: few, semantic colours; green only for positive states */
.kx-app .badge,
.kx-app .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #f1f4f8;
    color: var(--kx-text);
    font: var(--kx-weight-medium) 11.5px/1.6 var(--kx-font);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.kx-app .badge.warn, .kx-app .badge.warning, .kx-app .is-warning { border-color: transparent; background: var(--kx-warning-soft); color: var(--kx-warning); }
.kx-app .badge.bad, .kx-app .badge.danger { border-color: transparent; background: var(--kx-danger-soft); color: var(--kx-danger); }
.kx-app .badge.success, .kx-app .is-success { border-color: transparent; background: var(--kx-success-soft); color: var(--kx-success); }
.kx-app .badge.muted { border-color: transparent; background: var(--kx-surface-sub); color: var(--kx-quiet); }
/* status reads as a small signal dot plus words, never as a loud pill */
.kx-app .badge:is(.warn, .warning, .bad, .danger, .success) { padding-left: 16px; background-image: radial-gradient(circle at 8px 50%, currentColor 2.6px, transparent 3.2px); }

/* buttons */
.kx-app .button:not(.ghost):not(.secondary):not(.danger),
.kx-app button:not(.ghost):not(.secondary):not(.danger):not(.kx-menu-toggle):not(.kx-menu-backdrop):not(.nav-subtoggle):not([data-kx-tab-target]):not(.kx-nav-heading):not(.kx-rail-toggle):not(.kx-drawer-backdrop) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    height: auto;
    padding: 0 13px;
    border: 1px solid var(--kx-blue);
    border-radius: var(--kx-radius-sm);
    background: var(--kx-blue);
    box-shadow: none;
    color: #fff;
    font: var(--kx-weight-medium) 13px/1.2 var(--kx-font);
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
}
.kx-app .button:not(.ghost):not(.secondary):not(.danger):hover,
.kx-app button:not(.ghost):not(.secondary):not(.danger):not(.kx-menu-toggle):not(.kx-menu-backdrop):not(.nav-subtoggle):not([data-kx-tab-target]):not(.kx-nav-heading):not(.kx-rail-toggle):not(.kx-drawer-backdrop):hover { border-color: var(--kx-blue-strong); background: var(--kx-blue-strong); color: #fff; }
.kx-app .button.big { min-height: 34px; padding: 0 15px; }
.kx-app .button.ghost,
.kx-app button.ghost,
.kx-app .secondary,
.kx-app .kx-content button.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 13px; border: 1px solid var(--kx-line-strong); border-radius: var(--kx-radius-sm); background: #fff; box-shadow: none; color: var(--kx-ink); font: var(--kx-weight-medium) 13px/1.2 var(--kx-font); text-decoration: none; cursor: pointer; }
.kx-app .button.ghost:hover,
.kx-app button.ghost:hover,
.kx-app .kx-content button.secondary:hover { border-color: #bccadb; background: var(--kx-hover); color: var(--kx-ink); }
.kx-app .button.danger, .kx-app button.danger { border-color: var(--kx-danger); background: var(--kx-danger); color: #fff; }

/* forms */
.kx-app .kx-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.kx-app .kx-content select,
.kx-app .kx-content textarea {
    min-height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--kx-line-strong);
    border-radius: var(--kx-radius-sm);
    background: #fff;
    color: var(--kx-ink);
    font: 13px/1.35 var(--kx-font);
    box-shadow: none;
}
.kx-app .kx-content input:focus,
.kx-app .kx-content select:focus,
.kx-app .kx-content textarea:focus { border-color: var(--kx-blue); box-shadow: 0 0 0 3px rgba(23, 105, 209, .12); outline: none; }
.kx-app .kx-content label { color: var(--kx-muted); font-size: 12.5px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content label:has(> .field-help) { position: relative; }
/* required marker stays on the label line; the control takes the next line */
.kx-app .kx-content label:has(> span[aria-hidden="true"]) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; row-gap: 6px; }
.kx-app .kx-content label:has(> span[aria-hidden="true"]) > :is(select, input, textarea, small, div, .field-hint) { flex: 1 0 100%; }
.kx-app .kx-content label:has(> span[aria-hidden="true"]) > span[aria-hidden="true"] { color: var(--kx-danger); }
/* checkbox options read as one line */
.kx-app .kx-content label.inline,
.kx-app .kx-content label.permanent-option { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.kx-app .kx-content label.inline > input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.kx-app .kx-content label > .field-help { position: absolute; top: 0; right: 0; width: 16px; height: 16px; margin: 0; border-color: var(--kx-line); background: var(--kx-surface-sub); color: var(--kx-muted); font-size: 10px; }
.kx-app .kx-content label > .field-help::after,
.kx-app .kx-content label > .field-help:hover::after,
.kx-app .kx-content label > .field-help:focus::after { left: auto; right: -4px; transform: none; }
.kx-app .kx-content label > .field-help::before,
.kx-app .kx-content label > .field-help:hover::before,
.kx-app .kx-content label > .field-help:focus::before { left: auto; right: 3px; transform: rotate(45deg); }

/* 5. Legacy bridge: existing Access components rendered as primitives ------ */
/* surfaces */
.kx-app .kx-content .panel,
.kx-app .kx-content .operator-panel,
.kx-app .kx-content .dashboard-hero,
.kx-app .kx-content .workflow-hero,
.kx-app .kx-content .key-detail-hero,
.kx-app .kx-content .setup-hero,
.kx-app .kx-content .migration-hero,
.kx-app .kx-content .migration-panel {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--kx-line);
    border-radius: var(--kx-radius);
    background: var(--kx-surface);
    box-shadow: var(--kx-shadow);
}
.kx-app .kx-content .panel::before,
.kx-app .kx-content .panel::after { display: none; content: none; }
.kx-app .kx-content .panel:has(> form),
.kx-app .kx-content .panel:has(> .list-toolbar),
.kx-app .kx-content .panel:has(> .record-list),
.kx-app .kx-content .panel:has(> table) { background: var(--kx-surface); }
.kx-app .kx-content .dashboard-hero h2,
.kx-app .kx-content .workflow-hero h2,
.kx-app .kx-content .setup-hero h2,
.kx-app .kx-content .migration-hero h2 { margin: 0 0 4px; font-size: 20px; font-weight: var(--kx-weight-strong); letter-spacing: -.015em; line-height: 1.2; }
.kx-app .kx-content .dashboard-hero p,
.kx-app .kx-content .workflow-hero p { color: var(--kx-muted); font-size: 13px; }

/* surface heads */
.kx-app .kx-content .panel > .toolbar:first-child,
.kx-app .kx-content .panel > h2:first-child {
    min-height: 0;
    margin: -16px -16px 14px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--kx-line-soft);
    border-radius: 0;
    background: transparent;
}
.kx-app .kx-content .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
.kx-app .kx-content .panel h2,
.kx-app .kx-content .toolbar h2,
.kx-app .kx-content .calm-list-head h2 { margin: 0; color: var(--kx-ink); font-size: 15px; font-weight: var(--kx-weight-strong); letter-spacing: -.01em; line-height: 1.3; }
.kx-app .kx-content .panel h3 { font-size: 14px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-content .page-intro,
.kx-app .kx-content .subline { color: var(--kx-muted); font-size: 13px; line-height: 1.5; }
.kx-app .kx-content .eyebrow { color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-medium); letter-spacing: 0; text-transform: none; }

/* legacy tables */
.kx-app .kx-content table:not(.kx-table) { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--kx-surface); font-size: 13px; }
.kx-app .kx-content table:not(.kx-table) th { height: 34px; padding: 0 12px; border-bottom: 1px solid var(--kx-line); background: var(--kx-surface-sub); color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-medium); letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap; }
.kx-app .kx-content table:not(.kx-table) td { height: var(--kx-row-height); padding: 5px 12px; border-bottom: 1px solid var(--kx-line-soft); color: var(--kx-text); font-variant-numeric: tabular-nums; transition: background-color .1s ease; }
.kx-app .kx-content table:not(.kx-table) tr:hover td { background: var(--kx-hover); }
/* rows are table rows, never cards: one hairline between rows, no side frames */
.kx-app .kx-content table tr { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content table :is(td, th) { border-top: 0; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
/* a list table that fills its surface runs edge to edge instead of sitting in a second frame */
.kx-app .kx-content .panel:not(.calm-work-list):has(> .toolbar:first-child) > :is(.table-wrap, table) { margin-right: -16px; margin-left: -16px; width: calc(100% + 32px); max-width: none; border: 0; border-radius: 0; }
.kx-app .kx-content .panel:not(.calm-work-list):has(> .toolbar:first-child) > :is(.table-wrap, table):last-child { margin-bottom: -16px; }
.kx-app .kx-content .panel:not(.calm-work-list):has(> .toolbar:first-child) > :is(.table-wrap, table) :is(td, th):first-child { padding-left: 16px; }
.kx-app .kx-content .panel:not(.calm-work-list):has(> .toolbar:first-child) > :is(.table-wrap, table) :is(td, th):last-child { padding-right: 16px; }

/* row lists as tables */
.kx-app .kx-content .calm-work-list { display: grid; gap: 0; overflow: clip; margin: 0; padding: 0; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-content .calm-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; box-sizing: border-box; margin: 0; padding: 7px 12px 7px 16px; border-bottom: 1px solid var(--kx-line-soft); background: transparent; }
.kx-app .kx-content .calm-list-head > div:first-child { margin-right: auto; }
.kx-app .kx-content .calm-list-head p { margin: 2px 0 0; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content .calm-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; border: 0; border-bottom: 1px solid var(--kx-line-soft); border-radius: 0; background: var(--kx-surface); box-shadow: none; transform: none; transition: background-color .1s ease; }
.kx-app .kx-content .calm-list-row:last-child { border-bottom: 0; }
.kx-app .kx-content .calm-list-row:hover,
.kx-app .kx-content .calm-list-row:focus-within { border-color: var(--kx-line-soft); background: var(--kx-hover); box-shadow: none; transform: none; }
.kx-app .kx-content .kx-list .calm-list-row { grid-template-columns: minmax(0, 1fr) 72px; }
.kx-app .kx-content .calm-row-link { grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .9fr) 170px; gap: 16px; align-items: center; min-height: var(--kx-row-height); box-sizing: border-box; padding: 4px 12px 4px 16px; color: inherit; text-decoration: none; }
.kx-app .kx-content .calm-row-main { gap: 0; }
.kx-app .kx-content .calm-row-main strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); letter-spacing: 0; }
.kx-density-compact .kx-app .kx-content .calm-row-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.kx-density-compact .kx-app .kx-content .calm-row-main :is(strong, small) { overflow: hidden; text-overflow: ellipsis; }
.kx-density-compact .kx-app .kx-content .calm-row-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-content .calm-row-main small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content .calm-row-meta { gap: 0; }
.kx-app .kx-content .calm-row-meta small { color: var(--kx-quiet); font-size: 12px; font-weight: var(--kx-weight-medium); letter-spacing: 0; text-transform: none; }
.kx-app .kx-content .calm-row-meta strong { color: var(--kx-text); font-size: 13px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-content .calm-row-action { justify-self: end; color: var(--kx-blue); font-size: 12px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .calm-row-action::after { content: " \203A"; }
.kx-app .kx-content .calm-row-menu { align-self: center; margin-right: 10px; }
.kx-app .kx-content .calm-row-menu > summary,
.kx-app .kx-content .calm-more-menu > summary { min-height: 26px; padding: 3px 9px; border: 1px solid transparent; border-radius: var(--kx-radius-sm); background: transparent; color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-medium); cursor: pointer; list-style: none; }
.kx-app .kx-content .calm-row-menu > summary:hover,
.kx-app .kx-content .calm-more-menu > summary:hover,
.kx-app .kx-content .calm-row-menu[open] > summary { border-color: var(--kx-line); background: #fff; color: var(--kx-ink); }
.kx-app .kx-content .kx-list .kx-list-columns {
    display: grid;
    /* same tracks as .calm-row-link; the last track is the 72px menu column minus one gap */
    grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .9fr) 170px 56px;
    gap: 16px;
    position: sticky;
    top: var(--kx-topbar-height);
    z-index: 5;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--kx-line);
    background: rgba(249, 250, 252, .96);
    backdrop-filter: blur(8px);
}
.kx-app .kx-content .kx-list .kx-list-columns > span { display: flex; align-items: center; height: 32px; color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-medium); letter-spacing: 0; text-transform: none; }
.kx-app .kx-content .kx-list .calm-row-meta small { display: none; }

/* list toolbar: search, filter and sort in ONE row; quick filters ride along as a segmented control */
.kx-app .kx-content .calm-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .calm-filterbar form { position: relative; display: flex; flex: 1 1 560px; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.kx-app .kx-content :is(.calm-filterbar form, .list-toolbar) input[name="q"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { flex: 1 1 280px; min-width: 200px; max-width: 520px; padding-left: 32px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9aad' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px 50%; background-size: 15px 15px; }
.kx-app .kx-content .calm-filterbar form select { flex: 0 0 auto; width: auto; min-width: 140px; max-width: 200px; }
.kx-app .kx-content .calm-filterbar form a.button { flex: 0 0 auto; }
/* results refresh while typing; the submit button stays for keyboard and no-script use only */
.kx-app .kx-content :is(.calm-filterbar form, .list-toolbar) > button:not(.ghost) { position: absolute; width: 1px; min-height: 0; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.kx-app .kx-content .calm-filterbar form .key-live-search-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kx-app .kx-content :is(.calm-filterbar, .list-toolbar) :is(input, select) { min-height: 34px; border-radius: var(--kx-radius-sm); }
.kx-app .kx-content .calm-filterbar .calm-filterchips { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-surface-sub); }
.kx-app .kx-content .calm-filterchips a { display: inline-flex; align-items: center; min-height: 26px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--kx-muted); font-size: 12.5px; font-weight: var(--kx-weight-regular); text-decoration: none; white-space: nowrap; transition: background-color .12s ease, color .12s ease; }
.kx-app .kx-content .calm-filterchips a:hover { color: var(--kx-ink); }
.kx-app .kx-content .calm-filterchips a.is-active { background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 49, .1); color: var(--kx-ink); font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .list-toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .list-toolbar select { flex: 0 0 auto; min-width: 160px; }
.kx-app .kx-content .list-toolbar a.button.ghost { min-height: 30px; border-color: transparent; color: var(--kx-muted); }
.kx-app .kx-content .panel .list-toolbar { margin: 0 0 12px; padding: 0; background: transparent; }

/* list surfaces inside a panel: head, toolbar and rows form one plane */
.kx-app .kx-content .panel:not(.calm-work-list):has(> .record-list, > .table-wrap, > table) > .toolbar:first-child { min-height: 48px; box-sizing: border-box; margin: -16px -16px 12px; padding: 7px 12px 7px 16px; }
.kx-app .kx-content :is(.panel > .toolbar, .calm-list-head) :is(.pagination, .list-count) { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 auto; color: var(--kx-muted); font-size: 12.5px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-content :is(.panel > .toolbar, .calm-list-head) .pagination > span { margin-right: 6px; font-variant-numeric: tabular-nums; }
.kx-app .kx-content :is(.panel > .toolbar, .calm-list-head) .pagination .button.ghost { min-height: 28px; padding: 0 10px; border-color: var(--kx-line); font-size: 12.5px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-content .panel:not(.calm-work-list):has(> .toolbar:first-child) > .record-list:is(.compact-edit-list, .loss-report-list) { margin: 0 -16px -16px; }
/* pick lists (returns, issues): a titled surface with plain selectable rows */
.kx-app .kx-content .panel.calm-work-list > h2:first-child { margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-content .panel.calm-work-list > .record-list { display: grid; gap: 0; margin: 0; padding: 0; border: 0; }
.kx-app .kx-content .record-list > .calm-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; min-height: var(--kx-row-height); box-sizing: border-box; margin: 0; padding: 6px 16px; border: 0; border-bottom: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; color: var(--kx-text); text-decoration: none; transform: none; transition: background-color .1s ease; }
.kx-app .kx-content .record-list > .calm-pick-row:last-child { border-bottom: 0; }
.kx-app .kx-content .record-list > .calm-pick-row:hover { background: var(--kx-hover); transform: none; box-shadow: none; }
.kx-app .kx-content .record-list > .calm-pick-row > strong { grid-column: 1; color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .record-list > .calm-pick-row > span { grid-column: 2; grid-row: 1 / span 2; color: var(--kx-text); font-size: 13px; }
.kx-app .kx-content .record-list > .calm-pick-row > small { grid-column: 1; color: var(--kx-muted); font-size: 12px; }

/* edit lists (people, users, depots, doors): rows with a disclosure editor */
.kx-app .kx-content .record-list.compact-edit-list { display: grid; gap: 0; overflow: clip; border: 0; border-top: 1px solid var(--kx-line); border-radius: 0 0 var(--kx-radius) var(--kx-radius); }
.kx-app .kx-content .compact-edit-list .edit-panel { margin: 0; border: 0; border-bottom: 1px solid var(--kx-line-soft); border-radius: 0; background: var(--kx-surface); box-shadow: none; transition: background-color .1s ease; }
.kx-app .kx-content .compact-edit-list .edit-panel:last-child { border-bottom: 0; }
.kx-app .kx-content .compact-edit-list .edit-panel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; min-height: var(--kx-row-height); box-sizing: border-box; padding: 4px 16px; cursor: pointer; list-style: none; }
.kx-app .kx-content .compact-edit-list .edit-panel > summary::-webkit-details-marker { display: none; }
.kx-app .kx-content .compact-edit-list .edit-panel:hover { background: var(--kx-hover); }
.kx-app .kx-content .compact-edit-list .edit-panel > summary > span:first-child { flex: 1 1 280px; min-width: 0; }
.kx-app .kx-content .compact-edit-list .edit-panel > summary > span:not(:first-child) { flex: 0 1 auto; }
.kx-app .kx-content .compact-edit-list .edit-panel > summary > span > strong,
.kx-app .kx-content .compact-edit-list .edit-panel > summary > span > small { display: block; }
.kx-density-compact .kx-app .kx-content .compact-edit-list .edit-panel > summary > span:first-of-type { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.kx-density-compact .kx-app .kx-content .compact-edit-list .edit-panel > summary > span:first-of-type > :is(strong, small) { overflow: hidden; text-overflow: ellipsis; }
.kx-density-compact .kx-app .kx-content .kx-people-list .edit-panel > summary > .kx-people-keys { display: flex; gap: 4px; }
.kx-app .kx-content .compact-edit-list .edit-panel > summary strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .compact-edit-list .edit-panel > summary small { color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-content .compact-edit-list .edit-panel > summary > .badge { flex: 0 0 auto; }
.kx-app .kx-content .compact-edit-list .edit-panel > summary > .badge:last-child { border: 1px solid var(--kx-line); background: #fff; color: var(--kx-text); font-weight: var(--kx-weight-regular); }
.kx-app .kx-content .compact-edit-list .edit-panel:hover > summary > .badge:last-child { border-color: var(--kx-line-strong); color: var(--kx-ink); }
.kx-app .kx-content .compact-edit-list .edit-panel > summary > .text-link { flex: 0 0 auto; font-size: 12.5px; font-weight: var(--kx-weight-medium); text-decoration: none; }
.kx-app .kx-content .user-list .edit-panel > summary > span:nth-child(2),
.kx-app .kx-content .user-list .edit-panel > summary > span:nth-child(3) { flex: 0 1 190px; min-width: 0; }
.kx-app .kx-content .compact-edit-list .edit-panel[open] { background: var(--kx-surface-sub); }
.kx-app .kx-content .compact-edit-list .edit-panel[open] > summary { border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-content .compact-edit-list .edit-panel[open] > summary > .badge:last-child { border-color: var(--kx-blue-line); color: var(--kx-blue); }

/* drawers */
.kx-app .kx-content details.calm-drawer,
.kx-app .kx-content details.expert-panel { width: auto; margin: 0; padding: 0; }
.kx-app .kx-content details.calm-drawer > summary,
.kx-app .kx-content details.expert-panel > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; color: var(--kx-ink); cursor: pointer; list-style: none; }
.kx-app .kx-content details.calm-drawer > summary::-webkit-details-marker,
.kx-app .kx-content details.expert-panel > summary::-webkit-details-marker { display: none; }
.kx-app .kx-content details.calm-drawer > summary strong { display: block; font-size: 14px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-content details.calm-drawer > summary small { display: block; color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-content details.expert-panel > summary { font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content details.calm-drawer[open] > summary,
.kx-app .kx-content details.expert-panel[open] > summary { border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-content .calm-drawer-body { padding: 14px 16px 16px; }
.kx-app .kx-content details.expert-panel[open] { padding: 0 16px 16px; }
.kx-app .kx-content details.expert-panel[open] > summary { margin: 0 -16px 12px; }
.kx-app .kx-content details.expert-panel:not([open]) > summary { margin: 0; }
.kx-app .kx-content details.expert-panel > summary::after { content: "\203A"; margin-left: auto; color: var(--kx-quiet); font-size: 16px; }

/* guided workflows: step indicator, context note, help link */
.kx-app .kx-content .calm-stepper { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); overflow: hidden; }
.kx-app .kx-content .calm-stepper > span { flex: 1 1 0; min-width: max-content; margin: 0; padding: 8px 14px; border: 0; border-right: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .calm-stepper > span:last-child { border-right: 0; }
.kx-app .kx-content .calm-stepper > span.is-active { background: var(--kx-blue-soft); box-shadow: inset 0 -2px 0 var(--kx-blue); color: var(--kx-blue-strong); }
.kx-app .kx-content .calm-summary { display: grid; gap: 2px; margin: 0 0 14px; padding: 10px 14px; border: 0; border-left: 3px solid var(--kx-blue); border-radius: 0 var(--kx-radius-sm) var(--kx-radius-sm) 0; background: var(--kx-blue-soft); box-shadow: none; }
.kx-app .kx-content .calm-summary strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-content .calm-summary span { color: var(--kx-text); font-size: 12px; }
.kx-app .kx-content .context-help-link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--kx-blue); font-size: 13px; font-weight: var(--kx-weight-medium); text-decoration: none; }
.kx-app .kx-content .context-help-link:hover { text-decoration: underline; }

/* inventory counters use the status strip pattern */
.kx-app .kx-content .inventory-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 0 0 12px; overflow: hidden; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); }
.kx-app .kx-content .inventory-summary > div { display: grid; gap: 2px; margin: 0; padding: 10px 16px; border: 0; border-right: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .inventory-summary > div:last-child { border-right: 0; }
.kx-app .kx-content .inventory-summary span { color: var(--kx-muted); font-size: 11px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .inventory-summary strong { color: var(--kx-ink); font-size: 20px; font-weight: var(--kx-weight-strong); line-height: 1.2; }
.kx-app .kx-content .inventory-items-wrap { border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: none; }

/* loss reports list */
.kx-app .kx-content .record-list.loss-report-list { display: grid; gap: 0; overflow: clip; border: 0; border-top: 1px solid var(--kx-line); border-radius: 0 0 var(--kx-radius) var(--kx-radius); }
.kx-app .kx-content .loss-report-list .edit-panel { margin: 0; border: 0; border-bottom: 1px solid var(--kx-line-soft); border-radius: 0; background: var(--kx-surface); box-shadow: none; }
.kx-app .kx-content .loss-report-list .edit-panel:last-child { border-bottom: 0; }
.kx-app .kx-content .loss-report-list .edit-panel > summary { min-height: 44px; padding: 8px 16px; cursor: pointer; }
.kx-app .kx-content .loss-report-list .edit-panel > summary:hover { background: var(--kx-surface-sub); }
.kx-app .kx-content .loss-report-list .loss-report-summary-main strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .loss-report-list .loss-report-summary-main small { color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-regular); }

/* facts, cards, timelines */
.kx-app .kx-content .panel .grid { gap: 0; overflow: hidden; border: 1px solid var(--kx-line-soft); border-radius: var(--kx-radius); }
.kx-app .kx-content .panel .grid .card { padding: 10px 14px; border: 0; border-right: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .panel .grid .card:last-child { border-right: 0; }
.kx-app .kx-content .panel .grid .card span { color: var(--kx-muted); font-size: 11px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-content .panel .grid .card strong { color: var(--kx-ink); font-size: 16px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-content .key-timeline li { padding-top: 8px; padding-bottom: 8px; }
.kx-app .kx-content .key-timeline time { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content .key-timeline strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .key-timeline p { color: var(--kx-text); font-size: 13px; }

/* empty states */
.kx-app .kx-content .empty,
.kx-app .kx-content .calm-empty,
.kx-app .kx-content .operator-empty { padding: 14px 16px; border: 1px dashed var(--kx-line-strong); border-radius: var(--kx-radius); background: var(--kx-surface-sub); color: var(--kx-muted); font-size: 13px; }

/* list experience: expert/import stays a secondary affordance, never a dominant box */
.kx-app .kx-content details.expert-panel { margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content details.expert-panel > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--kx-muted); font-size: 12.5px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content details.expert-panel:not([open]) > summary { margin: 0; }
.kx-app .kx-content details.expert-panel > summary:hover { color: var(--kx-blue); }
.kx-app .kx-content details.expert-panel[open] { margin: 4px 0 0; padding: 14px 16px 16px; border: 1px solid var(--kx-line); border-radius: 10px; background: var(--kx-surface); }
.kx-app .kx-content details.expert-panel[open] > summary { margin: 0 0 12px; color: var(--kx-ink); }
.kx-app .kx-content details.expert-panel > summary::after { content: "\203A"; margin-left: 4px; color: var(--kx-quiet); font-size: 15px; }

/* list tables: premium hover on the large contiguous table surface */
.kx-app .kx-content .panel table:not(.kx-table) tbody tr { transition: background-color .12s ease; }
.kx-app .kx-content .panel table:not(.kx-table) tbody tr:hover td { background: var(--kx-surface-sub); }

/* 5b. Workspace components: explorer tabs, drawer, heatmap, matrix, rails -- */
.kx-app .kx-tabs.kx-explorer-tabs { gap: 20px; }
.kx-app nav.kx-tabs > a,
.kx-app nav.kx-subnav > a { flex: 0 0 auto; min-height: 0; margin: 0 0 -1px; padding: 8px 0 9px; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--kx-muted); font: var(--kx-weight-medium) 13px/1.2 var(--kx-font); text-decoration: none; }
.kx-app nav.kx-tabs > a:hover,
.kx-app nav.kx-subnav > a:hover { background: transparent; color: var(--kx-ink); }
.kx-app nav.kx-tabs > a.is-active,
.kx-app nav.kx-subnav > a.is-active { border-bottom-color: var(--kx-blue); background: transparent; box-shadow: none; color: var(--kx-ink); }
.kx-app .kx-quiet { color: var(--kx-quiet); }
.kx-app .kx-table :is(th, td).is-num { text-align: right; font-variant-numeric: tabular-nums; }
.kx-app .kx-table td small { font-size: 11.5px; }
.kx-app .kx-table td a { text-decoration: none; }
.kx-app .kx-table td a strong { color: var(--kx-ink); }
.kx-app .kx-table td a:hover strong { color: var(--kx-blue); }
.kx-app [data-kx-drawer-href] { cursor: pointer; }

.kx-app .kx-workspace.kx-explorer { grid-template-columns: minmax(0, 1fr) 300px; }
.kx-app .kx-explorer-main { display: grid; gap: 16px; min-width: 0; }
.kx-app .kx-explorer-list .kx-table-wrap { overflow: visible; border-top: 0; }
html:has(body.kx-app) { scroll-padding-top: calc(var(--kx-topbar-height) + 48px); }
.kx-app .kx-content table.kx-explorer-table { overflow: visible; }
.kx-app .kx-explorer-table thead th { position: sticky; top: var(--kx-topbar-height); z-index: 4; background: rgba(249, 250, 252, .97); }
.kx-app .kx-bar-cell { position: relative; display: inline-flex; justify-content: flex-end; min-width: 64px; padding-right: 2px; }
.kx-app .kx-bar-cell::before { content: ""; position: absolute; top: 50%; right: 30px; width: calc(var(--kx-v, 0) * 46px); min-width: 2px; height: 6px; border-radius: 3px; background: var(--kx-chart-available); opacity: .55; transform: translateY(-50%); }

/* rail */
.kx-app .kx-explorer-rail { position: sticky; top: calc(var(--kx-topbar-height) + 16px); align-self: start; }
.kx-app .kx-rail-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.kx-app .kx-rail-figures > div { display: grid; gap: 1px; padding: 10px 16px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-rail-figures > div:nth-child(odd) { border-right: 1px solid var(--kx-line-soft); }
.kx-app .kx-rail-figures span { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-rail-figures strong { color: var(--kx-ink); font-size: 19px; font-weight: 520; letter-spacing: -.02em; }
.kx-app .kx-meter { height: 6px; margin: 12px 16px 0; overflow: hidden; border-radius: 3px; background: var(--kx-line-soft); }
.kx-app .kx-meter i { display: block; height: 100%; border-radius: 3px; background: var(--kx-chart-issued); }
.kx-app .kx-rail-note { margin: 6px 16px 14px; color: var(--kx-quiet); font-size: 11.5px; line-height: 1.4; }
.kx-app .kx-findings { display: grid; margin: 0; padding: 4px 0; list-style: none; }
.kx-app .kx-findings a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; color: var(--kx-text); font-size: 13px; text-decoration: none; transition: background-color .1s ease; }
.kx-app .kx-findings a:hover { background: var(--kx-hover); }
.kx-app .kx-findings strong { min-width: 28px; padding: 1px 7px; border-radius: 5px; background: var(--kx-surface-sub); color: var(--kx-ink); font-size: 12px; font-weight: var(--kx-weight-medium); text-align: center; font-variant-numeric: tabular-nums; }
.kx-app .kx-findings .is-bad strong { background: var(--kx-danger-soft); color: var(--kx-danger); }
.kx-app .kx-findings .is-warn strong { background: var(--kx-warning-soft); color: var(--kx-warning); }
.kx-app .kx-findings .is-zero a { color: var(--kx-quiet); }
.kx-app .kx-findings .is-zero strong { color: var(--kx-quiet); }

/* heatmap: sequential blue, value always printed in the cell */
.kx-app .kx-heatmap td, .kx-app .kx-heatmap th { text-align: left; }
.kx-app .kx-heatmap td.kx-heat-cell { width: 20%; padding: 4px; }
.kx-app .kx-heat-cell a { position: relative; display: grid; gap: 1px; min-height: 52px; box-sizing: border-box; padding: 8px 10px; overflow: hidden; border-radius: 6px; color: var(--kx-ink); text-decoration: none; isolation: isolate; }
.kx-app .kx-heat-cell a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #2a78d6; opacity: calc(var(--kx-heat) * .55); transition: opacity .12s ease; }
.kx-app .kx-heat-cell a:hover::before { opacity: calc(var(--kx-heat) * .55 + .1); }
.kx-app .kx-heat-cell strong { font-size: 16px; font-weight: 560; }
.kx-app .kx-heat-cell small { color: var(--kx-text); font-size: 11.5px; }
.kx-app .kx-heat-legend { display: inline-flex; align-items: center; gap: 3px; }
.kx-app .kx-heat-legend small { margin: 0 4px; color: var(--kx-quiet); font-size: 11px; }
.kx-app .kx-heat-legend i { position: relative; width: 16px; height: 10px; overflow: hidden; border-radius: 2px; }
.kx-app .kx-heat-legend i::before { content: ""; position: absolute; inset: 0; background: #2a78d6; opacity: calc(var(--kx-heat) * .55); }

/* matrix: sticky key column and door header, dots instead of words */
.kx-app .kx-matrix-surface .calm-list-head p { margin: 2px 0 0; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-column-pager { margin-left: auto; }
.kx-app .kx-matrix-scroll { max-height: calc(100vh - 260px); overflow: auto; overscroll-behavior: contain; contain: paint; }
.kx-app .kx-content .matrix-grid.kx-matrix { display: grid; grid-template-columns: minmax(220px, 260px) repeat(var(--matrix-cols), minmax(58px, 1fr)) auto; min-width: max-content; margin: 0; padding: 0; border: 0; background: transparent; }
.kx-app .kx-matrix-row { display: contents; }
.kx-app .kx-matrix-row > * { box-sizing: border-box; border-bottom: 1px solid var(--kx-line-soft); background: var(--kx-surface); }
.kx-app .kx-matrix-row:hover > * { background: var(--kx-hover); }
.kx-app .kx-matrix-key { grid-column: 1; position: sticky; left: 0; z-index: 2; display: grid; align-content: center; min-height: 40px; padding: 4px 14px 4px 16px; border-right: 1px solid var(--kx-line); }
.kx-app .kx-matrix-key a { color: var(--kx-ink); text-decoration: none; }
.kx-app .kx-matrix-key strong { font-size: 12.5px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-matrix-key small { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-matrix-head > * { position: sticky; top: 0; z-index: 3; align-content: end; min-height: 64px; padding: 6px 6px 8px; border-bottom: 1px solid var(--kx-line); background: rgba(249, 250, 252, .98); }
.kx-app .kx-matrix-head > .kx-matrix-key { z-index: 4; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-matrix-col { display: grid; gap: 1px; }
.kx-app .kx-matrix-col small { overflow: hidden; color: var(--kx-quiet); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-matrix-col strong { overflow: hidden; color: var(--kx-text); font-size: 11.5px; font-weight: var(--kx-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-matrix-col.is-critical { box-shadow: inset 0 2px 0 var(--kx-chart-lost); }
.kx-app .kx-matrix-col.is-high { box-shadow: inset 0 2px 0 var(--kx-chart-restricted); }
.kx-app .kx-matrix-cell { display: grid; place-items: center; min-height: 40px; }
.kx-app .kx-matrix-cell i { width: 8px; height: 8px; border-radius: 50%; background: var(--kx-line); }
.kx-app .kx-matrix-cell.is-open i { width: 12px; height: 12px; background: var(--kx-chart-issued); box-shadow: 0 0 0 2px var(--kx-surface); }
.kx-app .kx-matrix-cell.is-editable { cursor: pointer; }
.kx-app .kx-matrix-cell.is-editable input { position: absolute; opacity: 0; pointer-events: none; }
.kx-app .kx-matrix-cell.is-editable:hover i { box-shadow: 0 0 0 3px var(--kx-blue-soft); }
.kx-app .kx-matrix-cell.is-editable:has(input:checked) i { width: 12px; height: 12px; background: var(--kx-chart-issued); }
.kx-app .kx-matrix-cell.is-editable:has(input:focus-visible) i { outline: 2px solid var(--kx-blue); outline-offset: 2px; }
.kx-app .kx-matrix-action { display: grid; place-items: center; padding: 0 10px; }
.kx-app .kx-matrix-action button.ghost { min-height: 26px; padding: 0 10px; font-size: 12px; }

/* access tree inside person drawer */
.kx-app .kx-access-tree { display: grid; }
.kx-app .kx-access-tree details { border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-access-tree summary { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 16px; cursor: pointer; list-style: none; }
.kx-app .kx-access-tree summary small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-access-tree ul { display: grid; margin: 0; padding: 0 16px 10px; list-style: none; }
.kx-app .kx-access-tree li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.kx-app .kx-access-tree li small { margin-left: auto; color: var(--kx-quiet); font-size: 11.5px; }
.kx-app .kx-access-tree li a { color: var(--kx-text); text-decoration: none; }
.kx-app .kx-access-tree li a:hover { color: var(--kx-blue); }

/* drawer */
.kx-drawer-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.kx-app .kx-drawer-layer button.kx-drawer-backdrop,
.kx-app .kx-drawer-layer button.kx-drawer-backdrop:hover { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(10, 20, 38, .22); opacity: 0; transition: opacity .18s ease; }
.kx-drawer-layer .kx-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(720px, 100vw); background: var(--kx-canvas); box-shadow: -24px 0 60px rgba(10, 20, 38, .16); transform: translateX(24px); opacity: 0; transition: transform .22s var(--kx-ease), opacity .18s ease; }
.kx-drawer-layer.is-open { pointer-events: auto; }
.kx-drawer-layer.is-open .kx-drawer-backdrop { opacity: 1; }
.kx-drawer-layer.is-open .kx-drawer { transform: none; opacity: 1; }
.kx-app .kx-drawer-head { display: flex; align-items: center; gap: 10px; min-height: var(--kx-topbar-height); box-sizing: border-box; padding: 8px 14px 8px 20px; border-bottom: 1px solid var(--kx-line); background: #fff; }
.kx-app .kx-drawer-head > div { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.kx-app .kx-drawer-head strong { overflow: hidden; color: var(--kx-ink); font-size: 15px; font-weight: var(--kx-weight-strong); text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-drawer-eyebrow { color: var(--kx-quiet); font-size: 11.5px; }
.kx-app .kx-drawer-head button.ghost { min-width: 32px; min-height: 30px; padding: 0 8px; border-color: transparent; color: var(--kx-muted); }
.kx-app .kx-drawer-head .button.ghost.kx-drawer-full { min-height: 30px; font-size: 12.5px; }
.kx-app .kx-drawer-body { display: grid; align-content: start; grid-auto-rows: max-content; gap: 14px; flex: 1; overflow-y: auto; padding: 16px 20px 32px; --today-width: 100%; }
.kx-app .kx-drawer-body.is-loading { opacity: .5; }
.kx-app .kx-drawer-body > .kx-page-head { align-items: center; }
.kx-app .kx-drawer-body > .kx-page-head p { font-size: 13px; }
.kx-app .kx-drawer-body .kx-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
html.kx-drawer-open { overflow: hidden; }
.kx-app [hidden] { display: none !important; }

/* views, distribution, selection and bulk actions (shared list foundation) */
.kx-app .kx-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kx-app .kx-content nav.kx-views { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-surface-sub); }
.kx-app .kx-content nav.kx-views > a { min-height: 26px; box-sizing: border-box; margin: 0; padding: 4px 11px; border: 0; border-radius: 4px; background: transparent; box-shadow: none; color: var(--kx-muted); font: var(--kx-weight-regular) 12.5px/18px var(--kx-font); text-decoration: none; white-space: nowrap; }
.kx-app .kx-content nav.kx-views > a:hover { background: transparent; color: var(--kx-ink); }
.kx-app .kx-content nav.kx-views > a.is-active { background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 49, .1); color: var(--kx-ink); font-weight: var(--kx-weight-medium); }
.kx-app .kx-views-menu { position: relative; }
.kx-app .kx-views-menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--kx-radius-sm); color: var(--kx-muted); font-size: 12.5px; cursor: pointer; list-style: none; }
.kx-app .kx-views-menu > summary::-webkit-details-marker { display: none; }
.kx-app .kx-views-menu > summary:hover, .kx-app .kx-views-menu[open] > summary { border-color: var(--kx-line); background: #fff; color: var(--kx-ink); }
.kx-app .kx-views-menu > summary span { padding: 0 6px; border-radius: 9px; background: var(--kx-blue-soft); color: var(--kx-blue-strong); font-size: 11px; }
.kx-app .kx-views-menu .kx-menu-panel { left: 0; right: auto; min-width: 260px; }
.kx-app .kx-views-item { display: flex; align-items: center; gap: 6px; border-radius: var(--kx-radius-sm); }
.kx-app .kx-views-item:hover, .kx-app .kx-views-item.is-active { background: var(--kx-hover); }
.kx-app .kx-views-item > a { flex: 1; padding: 7px 10px; color: var(--kx-text); font-size: 13px; text-decoration: none; }
.kx-app .kx-views-item > a small { color: var(--kx-quiet); font-size: 11px; }
.kx-app .kx-views-item button.ghost { min-width: 26px; min-height: 26px; padding: 0; border-color: transparent; background: transparent; color: var(--kx-quiet); }
.kx-app .kx-views-save form.kx-menu-panel { display: grid; gap: 10px; padding: 12px; }
.kx-app .kx-views-save form.kx-menu-panel label { display: grid; gap: 5px; }
.kx-app .kx-views-save form.kx-menu-panel label.inline { display: flex; }
.kx-app .kx-views-save form.kx-menu-panel button { justify-self: start; }

.kx-app .kx-distribution { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 16px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-distribution-caption { color: var(--kx-muted); font-size: 12px; white-space: nowrap; }
.kx-app .kx-distribution .kx-stack { height: 8px; }
.kx-app .kx-distribution .kx-legend li a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.kx-app .kx-distribution .kx-legend li a:hover span { color: var(--kx-ink); }

.kx-app .kx-content .kx-row-check { display: flex; align-items: center; justify-content: center; align-self: stretch; margin: 0; padding: 0; cursor: pointer; }
.kx-app .kx-content .kx-row-check input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--kx-blue); cursor: pointer; }
.kx-app .kx-content .kx-list .calm-list-row.has-select { grid-template-columns: 36px minmax(0, 1fr) 72px; }
.kx-app .kx-content .kx-list .calm-list-row.has-select > .kx-row-check { padding-left: 12px; }
.kx-app .kx-content .kx-list .calm-list-row.has-select > .calm-row-link { padding-left: 8px; }
.kx-app .kx-content .kx-list .kx-list-columns.has-select { grid-template-columns: 20px minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .9fr) 170px 56px; padding-left: 16px; }
.kx-app .kx-content :is(.calm-list-row, .edit-panel).is-checked { background: var(--kx-blue-soft); }

.kx-app .kx-bulkbar { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; padding: 10px 12px 10px 18px; border: 1px solid var(--kx-navy-700); border-radius: 10px; background: var(--kx-navy-900); box-shadow: var(--kx-shadow-pop); color: #dfe7f3; animation: kx-pop .16s var(--kx-ease); }
.kx-app .kx-bulk-count { font-size: 13px; white-space: nowrap; }
.kx-app .kx-bulk-count strong { color: #fff; font-weight: var(--kx-weight-strong); }
.kx-app .kx-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.kx-app .kx-content .kx-bulkbar :is(select, button, .button) { flex: 0 0 auto; width: auto; }
.kx-app .kx-content .kx-bulkbar select { min-width: 190px; max-width: 260px; min-height: 32px; border-color: var(--kx-navy-700); background-color: var(--kx-navy-800); color: #fff; }
.kx-app .kx-content .kx-bulkbar .button.ghost, .kx-app .kx-content .kx-bulkbar button.ghost { border-color: var(--kx-navy-700); background: transparent; color: #dfe7f3; }
.kx-app .kx-content .kx-bulkbar .button.ghost:hover, .kx-app .kx-content .kx-bulkbar button.ghost:hover { background: var(--kx-navy-800); color: #fff; }

/* people list as columns */
.kx-app .kx-content .kx-people-columns { display: grid; grid-template-columns: 20px minmax(0, 2fr) minmax(0, 1.3fr) 118px 76px 92px 88px; gap: 14px; align-items: center; margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--kx-line); border-bottom: 1px solid var(--kx-line); background: var(--kx-surface-sub); }
.kx-app .kx-content .kx-people-columns > span { display: flex; align-items: center; height: 32px; color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .kx-people-list.record-list { border-top: 0; }
.kx-app .kx-content .kx-people-list .edit-panel > summary { display: grid; grid-template-columns: 20px minmax(0, 2fr) minmax(0, 1.3fr) 118px 76px 92px 88px; gap: 14px; align-items: center; }
.kx-app .kx-content .kx-people-list .edit-panel > summary > span { min-width: 0; }
.kx-app .kx-content .kx-people-list .edit-panel > summary > span:first-of-type strong { display: flex; align-items: center; gap: 6px; }
.kx-app .kx-content .kx-people-list .edit-panel > summary > .kx-people-groups { overflow: hidden; color: var(--kx-muted); font-size: 12.5px; font-weight: var(--kx-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-content .kx-people-list .edit-panel > summary > span > .badge { justify-self: start; }
.kx-app .kx-content .kx-people-list .edit-panel > summary > .kx-people-keys { display: block; white-space: nowrap; }
.kx-app .kx-content .kx-people-list .kx-people-keys { color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-content .kx-people-list .kx-people-keys strong { font-size: 13px; }
.kx-app .kx-content .kx-people-list .edit-panel > summary > .badge:last-child { justify-self: end; }
.kx-app .kx-content .panel.kx-people-surface > .list-toolbar select { min-width: 0; max-width: 190px; }

/* impact cockpit */
.kx-app .kx-impact-top { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.kx-app .kx-impact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: stretch; }
.kx-app .kx-impact-strip .kx-strip-cell { border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-impact-strip .kx-strip-cell:nth-child(3n) { border-right: 0; }
.kx-app .kx-impact-strip .kx-strip-cell:nth-last-child(-n+3) { border-bottom: 0; }
.kx-app .kx-risk-card .kx-surface-head h2 { font-size: 20px; }
.kx-app .kx-risk-card.is-critical .kx-surface-head h2 { color: var(--kx-danger); }
.kx-app .kx-risk-card.is-high .kx-surface-head h2 { color: #b4461b; }
.kx-app .kx-risk-card.is-elevated .kx-surface-head h2 { color: var(--kx-warning); }
.kx-app .kx-risk-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 14px 16px 0; padding: 0; list-style: none; }
.kx-app .kx-risk-scale li { display: grid; gap: 6px; color: var(--kx-quiet); font-size: 11.5px; }
.kx-app .kx-risk-scale li::before { content: ""; height: 6px; border-radius: 3px; background: var(--kx-line-soft); }
.kx-app .kx-risk-scale li.is-low::before { background: #b7d3f6; }
.kx-app .kx-risk-scale li.is-elevated::before { background: #f5d38a; }
.kx-app .kx-risk-scale li.is-high::before { background: #f1a57f; }
.kx-app .kx-risk-scale li.is-critical::before { background: #e79a9a; }
.kx-app .kx-risk-scale li.is-current { color: var(--kx-ink); font-weight: var(--kx-weight-medium); }
.kx-app .kx-risk-scale li.is-current.is-low::before { background: var(--kx-chart-available); }
.kx-app .kx-risk-scale li.is-current.is-elevated::before { background: var(--kx-chart-restricted); }
.kx-app .kx-risk-scale li.is-current.is-high::before { background: var(--kx-chart-movement-returned); }
.kx-app .kx-risk-scale li.is-current.is-critical::before { background: var(--kx-chart-lost); }
.kx-app .kx-risk-scale li:not(.is-current)::before { opacity: .55; }
.kx-app .kx-risk-signals { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 16px 16px; }
.kx-app .kx-risk-card .kx-rail-note { margin-top: -6px; }

.kx-app .kx-flowmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 18px 16px 20px; list-style: none; counter-reset: none; }
.kx-app .kx-flow-node { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; margin: 0 14px 0 0; padding: 12px 14px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface-sub); }
.kx-app .kx-flow-node:last-child { margin-right: 0; }
.kx-app .kx-flow-node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -15px; width: 15px; height: 1px; background: var(--kx-line-strong); }
.kx-app .kx-flow-node:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 3px); right: -15px; z-index: 1; width: 0; height: 0; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 5px solid var(--kx-line-strong); }
.kx-app .kx-flow-node > span { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-flow-node > strong { overflow: hidden; color: var(--kx-ink); font-size: 18px; font-weight: 540; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-flow-node > small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--kx-muted); font-size: 11.5px; line-height: 1.4; }
.kx-app .kx-flow-node.is-origin { border-color: var(--kx-danger-line); background: var(--kx-danger-soft); }
.kx-app .kx-flow-node.is-origin > strong { font-size: 15px; }
.kx-app .kx-flow-node.is-gap { border-style: dashed; border-color: var(--kx-warning-line); background: var(--kx-warning-soft); }
.kx-app .kx-flow-node.is-warn > strong { color: var(--kx-warning); }
.kx-app .kx-flow-node ul { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.kx-app .kx-flow-node li { display: grid; line-height: 1.25; }
.kx-app .kx-flow-node li strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-flow-node li small { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.kx-app .kx-dot.is-lost { background: var(--kx-chart-lost); }
.kx-app .kx-dot.is-restricted { background: var(--kx-chart-restricted); }

.kx-app .kx-hbars { display: grid; gap: 10px; padding: 16px; }
.kx-app .kx-hbar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.kx-app .kx-hbar-label { overflow: hidden; color: var(--kx-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-hbar { display: flex; gap: 2px; height: 14px; min-width: 6px; }
.kx-app .kx-hbar i { min-width: 3px; height: 100%; background: var(--kx-chart-issued); }
.kx-app .kx-hbar i:last-child { border-radius: 0 4px 4px 0; }
.kx-app .kx-hbar i.is-lost { background: var(--kx-chart-lost); }
.kx-app .kx-hbar i.is-restricted { background: var(--kx-chart-restricted); }
.kx-app .kx-hbar i.is-issued { background: var(--kx-chart-issued); }
.kx-app .kx-hbar-value { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); text-align: right; font-variant-numeric: tabular-nums; }

.kx-app .kx-meter.kx-meter-inline { width: 160px; margin: 0; }
.kx-app .kx-measures { display: grid; margin: 0; padding: 0; list-style: none; }
.kx-app .kx-measures > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-measures > li:last-child { border-bottom: 0; }
.kx-app .kx-measures > li::before { content: ""; grid-row: 1; grid-column: 1; justify-self: start; align-self: start; width: 14px; height: 14px; margin: 2px 0 0; border: 1.5px solid var(--kx-line-strong); border-radius: 50%; box-sizing: border-box; }
.kx-app .kx-measures > li { grid-template-columns: 14px minmax(0, 1fr) auto; }
.kx-app .kx-measures > li.is-in_progress::before { border-color: var(--kx-chart-restricted); background: radial-gradient(circle, var(--kx-chart-restricted) 0 3px, transparent 3.5px); }
.kx-app .kx-measures > li:is(.is-done, .is-not_needed)::before { border-color: var(--kx-success); background: var(--kx-success); box-shadow: inset 0 0 0 2px #fff; }
.kx-app .kx-measures.is-preview > li::before { border-style: dashed; }
.kx-app .kx-measure-text { display: grid; gap: 2px; min-width: 0; }
.kx-app .kx-measure-text strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-measures > li:is(.is-done, .is-not_needed) .kx-measure-text strong { color: var(--kx-muted); text-decoration: line-through; text-decoration-color: var(--kx-line-strong); }
.kx-app .kx-measure-text small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content form.kx-measure-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; }
.kx-app .kx-content form.kx-measure-form :is(select, input) { width: auto; min-height: 30px; font-size: 12.5px; }
.kx-app .kx-content form.kx-measure-form select { width: 112px; }
.kx-app .kx-content form.kx-measure-form input[name="responsible"] { width: 140px; }
.kx-app .kx-content form.kx-measure-form input[type="date"] { width: 132px; }
.kx-app .kx-content form.kx-measure-form button.ghost { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.kx-app .kx-content form.kx-measure-init { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--kx-line-soft); }
.kx-app .kx-content form.kx-measure-init small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-facts { display: grid; margin: 0; padding: 6px 0; }
.kx-app .kx-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 16px; }
.kx-app .kx-facts dt { color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-facts dd { margin: 0; color: var(--kx-ink); font-size: 13px; }
.kx-app .kx-content form.kx-close-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; }
.kx-app .kx-content form.kx-close-form label { display: grid; gap: 5px; }
.kx-app .kx-content form.kx-close-form textarea { min-height: 72px; }
.kx-app .kx-content form.kx-close-form .form-actions { grid-column: 1 / -1; }
.kx-app .kx-impact-workspace { grid-template-columns: minmax(0, 1fr) 320px; }

/* reporting & export center */
.kx-app .kx-insight .kx-distribution { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-insight .kx-distribution .kx-stack { height: 10px; }
.kx-app .kx-insight .kx-distribution .kx-legend { gap: 6px 14px; }
.kx-app .kx-report-insights .kx-insight { grid-template-rows: auto 1fr; }
.kx-app .kx-surface .kx-explorer-table thead th { position: static; }
.kx-app .kx-content .report-value-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.kx-app .kx-content .report-case-list { grid-template-columns: minmax(0, 1fr); }
.kx-app .kx-content .report-case-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr) auto; min-width: 0; }
.kx-app .kx-content .report-case-row > * { min-width: 0; overflow-wrap: anywhere; }
.kx-app .kx-content .reports-command.report-value-command { display: grid; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-content .report-value-command .report-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.kx-app .kx-content .report-value-command .report-kpi-grid > article { display: grid; gap: 2px; min-height: 0; margin: 0; padding: 11px 16px 12px; border: 0; border-right: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .report-value-command .report-kpi-grid > article:last-child { border-right: 0; }
.kx-app .kx-content .report-value-command .report-kpi-grid span { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content .report-value-command .report-kpi-grid strong { color: var(--kx-ink); font-size: 20px; font-weight: 520; line-height: 1.25; }
.kx-app .kx-content .report-value-command .report-kpi-grid small { color: var(--kx-quiet); font-size: 11.5px; }
.kx-app .kx-content .report-value-command > :not(.report-kpi-grid) { margin: 0; padding: 10px 16px; border: 0; border-top: 1px solid var(--kx-line-soft); border-radius: 0; background: var(--kx-surface-sub); box-shadow: none; font-size: 13px; }
.kx-app .kx-inline-meter { display: inline-block; width: 64px; height: 6px; margin-right: 6px; overflow: hidden; border-radius: 3px; background: var(--kx-line-soft); vertical-align: middle; }
.kx-app .kx-inline-meter i { display: block; height: 100%; border-radius: 3px; background: var(--kx-chart-issued); }
.kx-app .kx-inline-meter.is-coverage i { background: var(--kx-chart-available); }
.kx-app .kx-content nav.kx-dataset-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-content nav.kx-dataset-picker > a { display: grid; align-content: start; gap: 3px; min-height: 0; margin: 0; padding: 12px 14px; border: 0; border-right: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; color: inherit; text-decoration: none; transition: background-color .12s ease; }
.kx-app .kx-content nav.kx-dataset-picker > a:last-child { border-right: 0; }
.kx-app .kx-content nav.kx-dataset-picker > a:hover { background: var(--kx-hover); }
.kx-app .kx-content nav.kx-dataset-picker > a.is-active { background: var(--kx-blue-soft); box-shadow: inset 0 -2px 0 var(--kx-blue); }
.kx-app .kx-content nav.kx-dataset-picker strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content nav.kx-dataset-picker small { color: var(--kx-muted); font-size: 11.5px; line-height: 1.35; }
.kx-app .kx-export-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
.kx-app .kx-content form.kx-export-form { display: grid; gap: 12px; margin: 0; padding: 14px 16px 16px; }
.kx-app .kx-export-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.kx-app .kx-content label.kx-field { display: grid; gap: 4px; margin: 0; color: var(--kx-muted); font-size: 12px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-content label.kx-field > span { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content label.kx-field :is(input, select) { width: 100%; min-height: 34px; }
.kx-app .kx-export-columns > summary { display: inline-flex; align-items: center; gap: 8px; color: var(--kx-text); font-size: 13px; cursor: pointer; }
.kx-app .kx-export-columns > summary span { color: var(--kx-quiet); font-size: 12px; }
.kx-app .kx-export-columns > div { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.kx-app .kx-content .kx-export-columns label.inline { color: var(--kx-text); font-size: 12.5px; font-weight: var(--kx-weight-regular); }
.kx-app .kx-export-apply { display: flex; align-items: center; gap: 8px; }
.kx-app .kx-export-downloads { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.kx-app .kx-export-workspace .kx-explorer-list .kx-table-wrap { overflow-x: auto; }
.kx-app .kx-export-workspace .kx-explorer-table thead th { position: static; }
.kx-app .kx-export-preview td { white-space: nowrap; }
.kx-app .kx-profiles li { display: flex; align-items: center; }
.kx-app .kx-profiles li > a { flex: 1; }
.kx-app .kx-profiles li > a span { display: grid; }
.kx-app .kx-profiles li small { color: var(--kx-quiet); font-size: 11.5px; }
.kx-app .kx-profiles li button.ghost { min-width: 28px; min-height: 28px; margin-right: 10px; padding: 0; border-color: transparent; color: var(--kx-quiet); }
.kx-app .kx-content form.kx-profile-save { display: grid; gap: 10px; margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--kx-line-soft); }
.kx-app .kx-content form.kx-profile-save button { justify-self: start; }

/* guided setup workspace */
.kx-app .kx-setup-workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.kx-app .kx-setup-steps { position: sticky; top: calc(var(--kx-topbar-height) + 16px); display: grid; gap: 6px; padding: 12px 8px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-setup-steps > .kx-eyebrow { margin: 0 8px 2px; }
.kx-app .kx-setup-steps ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.kx-app .kx-setup-steps li a { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: var(--kx-radius-sm); color: inherit; text-decoration: none; }
.kx-app .kx-setup-steps li a:hover { background: var(--kx-hover); }
.kx-app .kx-setup-steps li.is-current a { background: var(--kx-blue-soft); }
.kx-app .kx-setup-steps li a i { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--kx-line-strong); border-radius: 50%; color: var(--kx-muted); font: var(--kx-weight-medium) 10.5px/1 var(--kx-font); font-style: normal; box-sizing: border-box; }
.kx-app .kx-setup-steps li.is-done a i { border-color: var(--kx-success); background: var(--kx-success); color: #fff; }
.kx-app .kx-setup-steps li.is-current a i { border-color: var(--kx-blue); color: var(--kx-blue); }
.kx-app .kx-setup-steps li a span { display: grid; gap: 1px; min-width: 0; }
.kx-app .kx-setup-steps li a strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-setup-steps li.is-done a strong { color: var(--kx-text); }
.kx-app .kx-setup-steps li a small { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-setup-steps .kx-setup-all { margin: 4px 8px 0; font-size: 12px; }
.kx-app .kx-setup-main { display: grid; gap: 16px; min-width: 0; }
.kx-app .kx-setup-rail { display: grid; gap: 16px; position: sticky; top: calc(var(--kx-topbar-height) + 16px); }
.kx-app .kx-content .kx-setup-main .setup-hero.kx-setup-status { display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .kx-setup-status .setup-score-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; margin: 0; padding: 12px 16px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-content .kx-setup-status .setup-score-card span { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content .kx-setup-status .setup-score-card strong { color: var(--kx-ink); font-size: 14px; font-weight: var(--kx-weight-medium); line-height: 1.3; }
.kx-app .kx-content .kx-setup-status .setup-score-card p { grid-column: 1 / 3; margin: 0; color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-content .kx-setup-status .setup-score-card a { grid-column: 3; grid-row: 1 / 3; color: var(--kx-blue); font-size: 12.5px; font-weight: var(--kx-weight-medium); text-decoration: none; }
.kx-app .kx-setup-workspace.is-focused .kx-setup-main > :not(#setup-assistant):not(.kx-setup-status) { display: none; }
.kx-app .kx-setup-workspace.is-focused #setup-assistant > .setup-section-head { display: none; }
.kx-app .kx-setup-workspace.is-focused .setup-assistant-grid { grid-template-columns: minmax(0, 1fr); }
.kx-app .kx-setup-workspace.is-focused .setup-assistant-grid > article:not(.is-focus) { display: none; }
.kx-app .kx-content .kx-setup-main .setup-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; overflow: hidden; margin: 0; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); }
.kx-app .kx-content .kx-setup-main .setup-metrics article { margin: 0; padding: 10px 14px; border: 0; border-right: 1px solid var(--kx-line-soft); border-radius: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content .kx-setup-main .setup-metrics strong { font-size: 18px; font-weight: 520; }
.kx-app .kx-completeness { display: grid; gap: 10px; margin: 0; padding: 12px 16px 16px; list-style: none; }
.kx-app .kx-completeness li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; font-size: 12.5px; }
.kx-app .kx-completeness li span { color: var(--kx-text); }
.kx-app .kx-completeness li strong { color: var(--kx-ink); font-weight: var(--kx-weight-medium); font-variant-numeric: tabular-nums; }
.kx-app .kx-completeness .kx-meter { grid-column: 1 / -1; display: block; margin: 0; }
.kx-app .kx-completeness .kx-meter b { display: block; height: 100%; border-radius: 3px; background: var(--kx-chart-issued); }

/* import hub */
.kx-app .kx-import-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-import-tile { display: grid; gap: 2px; padding: 12px 14px; border-right: 1px solid var(--kx-line-soft); border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-import-tile.is-disabled { opacity: .55; }
.kx-app .kx-import-group { color: var(--kx-quiet); font-size: 11px; }
.kx-app .kx-import-tile strong { color: var(--kx-ink); font-size: 14px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-import-tile small { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-import-actions { display: flex; gap: 12px; margin-top: 6px; }
.kx-app .kx-link.is-quiet { color: var(--kx-muted); font-weight: var(--kx-weight-regular); }
.kx-app .kx-content form.kx-import-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0; padding: 16px; }
.kx-app .kx-import-help { padding: 0 16px 16px; color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-import-help p { margin: 0 0 4px; }
.kx-app .kx-content .migration-panel.migration-overview { display: none; }

/* legacy setup and migration surfaces inside the workspace */
.kx-app .kx-content :is(.setup-section, .migration-panel) { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: var(--kx-shadow); }
.kx-app .kx-content :is(.setup-section-head, .migration-section-head) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-content :is(.setup-section-head, .migration-section-head) > div { max-width: 72ch; }
.kx-app .kx-content :is(.setup-section-head, .migration-section-head) h2 { margin: 0 0 2px; font-size: 15px; font-weight: var(--kx-weight-strong); letter-spacing: -.01em; line-height: 1.3; }
.kx-app .kx-content :is(.setup-section-head, .migration-section-head) p:not(.eyebrow) { margin: 0; color: var(--kx-muted); font-size: 12.5px; line-height: 1.45; }
.kx-app .kx-content :is(.setup-section-head, .migration-section-head) .eyebrow { margin: 0 0 2px; font-size: 11.5px; font-weight: var(--kx-weight-regular); color: var(--kx-quiet); letter-spacing: 0; text-transform: none; }
.kx-app .kx-content :is(.setup-section, .migration-panel) > :not(.setup-section-head):not(.migration-section-head) { margin-right: 16px; margin-left: 16px; }
.kx-app .kx-content :is(.setup-section, .migration-panel) > :last-child:not(.setup-section-head):not(.migration-section-head) { margin-bottom: 16px; }
.kx-app .kx-content :is(.setup-section, .migration-panel) > :nth-child(2) { margin-top: 12px; }
.kx-app .kx-content .setup-import-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.kx-app .kx-content .setup-import-callout > * { margin: 0 !important; }
.kx-app .kx-content .setup-import-callout h2 { margin: 0 0 2px; font-size: 15px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-content .setup-import-callout p { margin: 0; color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-content .setup-import-callout .eyebrow { font-size: 11.5px; font-weight: var(--kx-weight-regular); letter-spacing: 0; text-transform: none; }
.kx-app .kx-content .migration-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.kx-app .kx-content .migration-start-card { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-surface-sub); box-shadow: none; text-decoration: none; transform: none; }
.kx-app .kx-content .migration-start-card:hover { border-color: var(--kx-blue-line); background: var(--kx-blue-soft); transform: none; }
.kx-app .kx-content .migration-start-card strong { color: var(--kx-ink); font-size: 14px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content .migration-start-card span { color: var(--kx-muted); font-size: 12.5px; line-height: 1.45; }
.kx-app .kx-content .setup-step-panel { padding: 14px 16px; border: 1px solid var(--kx-line-soft); border-radius: var(--kx-radius); background: var(--kx-surface); box-shadow: none; }
.kx-app .kx-content .setup-step-panel h3 { font-size: 15px; font-weight: var(--kx-weight-strong); }
.kx-app .kx-setup-workspace.is-focused .setup-step-panel { border: 0; padding: 0; }

/* in-app navigation state */
.kx-nav-progress { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px; background: var(--kx-blue, #1a6ad4); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
html.kx-navigating .kx-nav-progress { opacity: 1; animation: kx-nav-progress 1.6s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes kx-nav-progress { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
html.kx-navigating .kx-app .kx-main { opacity: .72; transition: opacity .2s ease .15s; }
.kx-app .kx-main:focus { outline: none; }

/* combobox primitive */
.kx-app .kx-content .report-filter-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: end; }
.kx-app .kx-content .report-filter-grid > label.report-filter-wide { grid-column: span 2; }
.kx-app .kx-content .report-filter-grid > label { align-self: end; }
.kx-app .kx-combobox-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.kx-app .kx-combobox { position: relative; min-width: 0; }
.kx-app .kx-combobox-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 3px 28px 3px 8px; border: 1px solid var(--kx-line-strong); border-radius: var(--kx-radius-sm); background: #fff; cursor: text; }
.kx-app .kx-combobox.is-invalid .kx-combobox-field { border-color: var(--kx-danger); }
.kx-app .kx-combobox-field:focus-within { border-color: var(--kx-blue); box-shadow: 0 0 0 3px rgba(26, 106, 212, .12); }
.kx-app .kx-combobox-chips { display: contents; }
.kx-app .kx-content input.kx-combobox-input,
.kx-app input.kx-combobox-input { flex: 1 1 80px; min-width: 80px; width: auto; min-height: 26px; height: 26px; margin: 0; padding: 0 2px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--kx-ink); font: var(--kx-weight-regular) 13px/1 var(--kx-font); outline: none; }
.kx-app .kx-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; height: 24px; padding: 0 4px 0 8px; border-radius: 5px; background: var(--kx-blue-soft); color: var(--kx-blue-strong); font-size: 12px; white-space: nowrap; }
.kx-app .kx-chip { overflow: hidden; text-overflow: ellipsis; }
.kx-app .kx-combobox .kx-chip button.ghost { display: grid; place-items: center; width: 16px; min-width: 0; height: 16px; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font-size: 10px; cursor: pointer; }
.kx-app .kx-combobox .kx-chip button.ghost:hover { background: rgba(15, 88, 184, .14); color: var(--kx-blue-strong); }
.kx-app .kx-combobox button.ghost.kx-combobox-clear { position: absolute; top: 50%; right: 6px; display: none; width: 18px; min-width: 0; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--kx-quiet); font-size: 10px; transform: translateY(-50%); cursor: pointer; }
.kx-app .kx-combobox.has-value button.ghost.kx-combobox-clear { display: grid; place-items: center; }
.kx-app .kx-combobox button.ghost.kx-combobox-clear:hover { background: var(--kx-hover); color: var(--kx-ink); }
.kx-app .kx-combobox-list { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 45; max-height: 300px; min-width: 240px; margin: 0; padding: 4px; overflow-y: auto; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: #fff; box-shadow: var(--kx-shadow-pop); list-style: none; }
.kx-app .kx-combobox-list li[role="option"] { display: grid; gap: 1px; padding: 6px 8px 6px 26px; border-radius: 5px; color: var(--kx-text); font-size: 13px; cursor: pointer; position: relative; }
.kx-app .kx-combobox-list li[role="option"] small { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-combobox-list li.is-active { background: var(--kx-hover); color: var(--kx-ink); }
.kx-app .kx-combobox-list li.is-selected::before { content: "✓"; position: absolute; top: 6px; left: 9px; color: var(--kx-blue); font-size: 12px; }
.kx-app .kx-combobox-list .kx-combobox-note { padding: 8px 10px; color: var(--kx-muted); font-size: 12.5px; }

/* saved views manager */
.kx-app .kx-viewbar { justify-content: flex-start; }
.kx-app .kx-viewbar .kx-views-save { margin-left: auto; }
.kx-app .kx-views-menu > summary.kx-views-save-trigger { border-color: var(--kx-line-strong); background: #fff; color: var(--kx-ink); font-weight: var(--kx-weight-medium); }
.kx-app .kx-views-menu > summary.kx-views-save-trigger::before { content: "+"; margin-right: 2px; color: var(--kx-blue); font-weight: 600; }
.kx-app .kx-views-save .kx-menu-panel { right: 0; left: auto; width: 300px; }
.kx-app .kx-views-current { max-width: 200px; overflow: hidden; color: var(--kx-ink); font-weight: var(--kx-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-views-panel { min-width: 320px; max-height: 380px; overflow-y: auto; }
.kx-app .kx-views-item { position: relative; align-items: flex-start; }
.kx-app .kx-views-item > a { display: grid; gap: 1px; }
.kx-app .kx-views-item > a strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-views-item > a small { color: var(--kx-muted); font-size: 11.5px; }
.kx-app .kx-views-actions > summary { display: grid; place-items: center; width: 28px; height: 28px; margin: 4px 4px 0 0; border-radius: 5px; color: var(--kx-muted); cursor: pointer; list-style: none; }
.kx-app .kx-views-actions > summary::-webkit-details-marker { display: none; }
.kx-app .kx-views-actions > summary:hover, .kx-app .kx-views-actions[open] > summary { background: #fff; color: var(--kx-ink); }
.kx-app .kx-views-actions > div { position: absolute; top: 34px; right: 4px; z-index: 5; display: grid; gap: 4px; width: 250px; padding: 8px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius); background: #fff; box-shadow: var(--kx-shadow-pop); }
.kx-app .kx-content form.kx-views-rename { display: flex; gap: 6px; margin: 0; }
.kx-app .kx-content form.kx-views-rename input { flex: 1; min-width: 0; min-height: 30px; }
.kx-app .kx-views-actions button.ghost { justify-content: flex-start; width: 100%; min-height: 30px; border-color: transparent; font-weight: var(--kx-weight-regular); }
.kx-app .kx-views-actions form.kx-views-rename button.ghost { width: auto; border-color: var(--kx-line); }
.kx-app .kx-views-actions button.ghost.kx-danger-text { color: var(--kx-danger); }
.kx-app .kx-views-empty { margin: 0; padding: 10px; color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-views-save-summary { margin: 0; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-views-visibility { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; border: 0; }
.kx-app .kx-views-visibility legend { width: 100%; margin-bottom: 4px; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-views-save-actions { display: flex; justify-content: flex-end; }

/* guided setup: single step */
.kx-app .kx-setup-steps li.is-done.is-current a i { border-color: var(--kx-success); background: var(--kx-success); color: #fff; box-shadow: 0 0 0 3px var(--kx-blue-line); }
.kx-app .kx-setup-workspace.is-focused .kx-setup-main > .kx-setup-status { display: none; }
.kx-app .kx-setup-workspace.is-focused .setup-step-number { display: none; }
.kx-app .kx-setup-workspace.is-focused #setup-assistant { padding: 0; }
.kx-app .kx-setup-workspace.is-overview #setup-assistant { display: none; }
.kx-app .kx-setup-workspace.is-overview .kx-setup-main > * { display: revert; }
.kx-app .kx-setup-workspace:not(.is-focused):not(.is-overview) .kx-setup-stepline,
.kx-app .kx-setup-workspace:not(.is-focused) .kx-setup-footer { display: none; }
.kx-app .kx-content .kx-setup-stepline { display: grid; gap: 2px; margin: 0 !important; padding: 14px 16px 12px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-app .kx-setup-stepline span { color: var(--kx-quiet); font-size: 12px; }
.kx-app .kx-setup-stepline strong { color: var(--kx-ink); font-size: 17px; font-weight: var(--kx-weight-strong); letter-spacing: -.01em; }
.kx-app .kx-setup-stepline small { color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-setup-workspace.is-focused .setup-assistant-grid { gap: 0; }
.kx-app .kx-setup-workspace.is-focused .setup-assistant-grid > article.is-focus { padding: 16px; border: 0; border-bottom: 1px solid var(--kx-line-soft); border-radius: 0; }
.kx-app .kx-setup-workspace.is-focused .setup-assistant-grid > article.is-focus:last-of-type { border-bottom: 0; }
.kx-app .kx-content .kx-setup-footer { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 16px; border-top: 1px solid var(--kx-line); background: var(--kx-surface-sub); }
.kx-app .kx-content .kx-setup-footer [data-kx-setup-next] { margin-left: auto; }
.kx-app .kx-content .kx-setup-footer button:disabled { opacity: .45; cursor: default; }
.kx-app .kx-setup-found { display: grid; gap: 2px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-surface-sub); }
.kx-app .kx-setup-found.is-found { border-color: var(--kx-success-line); background: var(--kx-success-soft); }
.kx-app .kx-setup-found strong { color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.kx-app .kx-setup-found span { color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-setup-workspace:not(.is-focused):not(.is-overview) .kx-setup-extra { display: none; }
.kx-app .kx-setup-steps li.is-partial a i { border-color: var(--kx-warning); background: var(--kx-warning-soft); color: var(--kx-warning); }
.kx-app .kx-setup-steps li.is-partial a small { color: var(--kx-warning); }
.kx-app .kx-setup-rail .kx-setup-progress-note { margin: 2px 0 0; color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-content button.kx-setup-steps-toggle { display: none; }

/* 6. Responsive / print ---------------------------------------------------- */
@media (max-width: 1400px) {
    .kx-app .kx-profile-text { display: none; }
}
@media (max-width: 1280px) {
    .kx-app .kx-scope-tenant, .kx-app .kx-scope-sep { display: none; }
    .kx-app .kx-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kx-app .kx-insight:nth-child(2) { border-right: 0; }
    .kx-app .kx-insight-movement { grid-column: 1 / -1; border-top: 1px solid var(--kx-line-soft); }
}
@media (max-width: 1180px) {
    .kx-app .kx-workspace, .kx-app .kx-workspace.kx-explorer, .kx-app .kx-impact-workspace, .kx-app .kx-impact-top, .kx-app .kx-export-workspace { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-setup-workspace { grid-template-columns: 230px minmax(0, 1fr); }
    .kx-app .kx-setup-rail { position: static; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .kx-app .kx-flowmap { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .kx-app .kx-flow-node:nth-child(3n)::after, .kx-app .kx-flow-node:nth-child(3n)::before { display: none; }
    .kx-app .kx-measures > li { grid-template-columns: 14px minmax(0, 1fr); }
    .kx-app .kx-measures > li > :is(form, .badge) { grid-column: 2; }
    .kx-app .kx-explorer-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
    .kx-app .kx-shell { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-100%); transition: transform .18s ease; }
    body.kx-app.navigation-open .kx-sidebar { transform: none; box-shadow: 0 20px 60px rgba(8, 20, 40, .35); }
    body.kx-app.navigation-open .kx-menu-backdrop { position: fixed; z-index: 50; inset: 0; display: block; padding: 0; border: 0; background: rgba(8, 20, 40, .35); }
    .kx-app .kx-topbar button.kx-menu-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid var(--kx-line-strong); border-radius: var(--kx-radius-sm); background: #fff; color: var(--kx-ink); font-size: 16px; line-height: 1; }
    .kx-app .kx-topbar { gap: 10px; padding: 0 14px; }
    .kx-app .kx-topbar .kx-search { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
    .kx-app .kx-topbar .kx-search input { padding-right: 12px; }
    .kx-app .kx-context { margin-left: 0; }
    .kx-app .kx-scope, .kx-app .kx-sidebar button.kx-rail-toggle { display: none; }
    .kx-app .kx-nav-link { min-height: 36px; }
    .kx-app .kx-insights { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-insight { border-right: 0; border-bottom: 1px solid var(--kx-line-soft); }
    .kx-app .kx-insight:last-child { border-bottom: 0; }
    .kx-app .kx-insight-movement { border-top: 0; }
    .kx-app .kx-content .calm-filterbar form { flex-basis: 100%; }
    .kx-app .kx-content .calm-filterbar form select { flex: 1 1 140px; max-width: none; }
    .kx-app .kx-content .calm-filterbar .calm-filterchips { flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
    .kx-app .kx-content .calm-filterbar, .kx-app .kx-content .calm-filterbar form { min-width: 0; max-width: 100%; }
    .kx-app .kx-content .calm-filterbar form input[name="q"] { min-width: 0; }
    .kx-app .kx-density { display: none; }
    .kx-app .kx-setup-workspace { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-setup-steps { position: static; }
    .kx-app .kx-setup-steps { gap: 0; padding: 6px; }
    .kx-app .kx-content button.kx-setup-steps-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 10px; width: 100%; min-height: 48px; margin: 0; padding: 6px 10px; border: 0; background: transparent; box-shadow: none; color: var(--kx-ink); text-align: left; }
    .kx-app .kx-setup-steps-toggle span { color: var(--kx-muted); font-size: 11.5px; font-weight: var(--kx-weight-regular); }
    .kx-app .kx-setup-steps-toggle strong { grid-row: 2; min-width: 0; overflow: hidden; color: var(--kx-ink); font-size: 14px; font-weight: var(--kx-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
    .kx-app .kx-setup-steps-toggle.is-partial span { color: var(--kx-warning); }
    .kx-app .kx-setup-steps-toggle.is-done span { color: var(--kx-success); }
    .kx-app .kx-setup-steps-toggle i { grid-column: 2; grid-row: 1 / 3; color: var(--kx-muted); font-style: normal; transition: transform .15s ease; }
    .kx-app .kx-setup-steps.is-expanded .kx-setup-steps-toggle i { transform: rotate(180deg); }
    .kx-app .kx-setup-steps:not(.is-expanded):has(.kx-setup-steps-toggle) > :not(.kx-setup-steps-toggle) { display: none; }
    .kx-app .kx-setup-steps.is-expanded > ol { display: grid; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--kx-line-soft); }
    .kx-app .kx-setup-steps.is-expanded > .kx-setup-all { display: block; margin-bottom: 6px; }
    .kx-app .kx-setup-steps.is-expanded > .kx-eyebrow { display: none; }
    .kx-app .kx-setup-workspace:has(.kx-setup-steps-toggle) .kx-setup-stepline span { display: none; }
    .kx-app .kx-flowmap { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-flow-node { margin: 0 0 12px; }
    .kx-app .kx-flow-node:not(:last-child)::after { top: auto; right: auto; bottom: -13px; left: 24px; width: 1px; height: 12px; }
    .kx-app .kx-flow-node:not(:last-child)::before { display: none; }
    .kx-app .kx-impact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kx-app .kx-content form.kx-measure-form { flex-wrap: wrap; }
    .kx-app .kx-content form.kx-close-form { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-hbar-row { grid-template-columns: 90px minmax(0, 1fr) 32px; }
    .kx-app .kx-content .kx-explorer-list .kx-table-wrap,
    .kx-app .kx-content .kx-surface .kx-table-wrap { overflow-x: auto; }
    .kx-app .kx-content table.kx-table:not(.kx-work-table) { display: table; min-width: 600px; }
    .kx-app .kx-content table.kx-table:not(.kx-work-table) thead { display: table-header-group; }
    .kx-app .kx-content table.kx-table:not(.kx-work-table) tbody { display: table-row-group; }
    .kx-app .kx-content table.kx-table:not(.kx-work-table) tr { display: table-row; }
    .kx-app .kx-content table.kx-table:not(.kx-work-table) :is(td, th) { display: table-cell; height: auto; }
    .kx-app .kx-explorer-table thead th { position: static; }
    .kx-app .kx-distribution { grid-template-columns: minmax(0, 1fr); }
    .kx-app .kx-content .kx-people-columns { display: none; }
    .kx-app .kx-content .kx-people-list .edit-panel > summary { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .kx-app .kx-content .kx-people-list .edit-panel > summary > :is(.kx-people-groups, .kx-people-keys, .text-link) { display: none; }
    .kx-app .kx-content .kx-list .kx-list-columns.has-select { display: none; }
    .kx-app .kx-content :is(.panel > .toolbar, .calm-list-head) .pagination { flex-wrap: wrap; justify-content: flex-end; }
    .kx-app .kx-content :is(.panel > .toolbar, .calm-list-head) .pagination .button.ghost { width: auto; flex: 0 0 auto; }
    .kx-app .kx-topbar .kx-search { order: 1; }
    .kx-app .kx-topbar .kx-context { order: 2; }
    .kx-app .kx-content .panel:not(.calm-work-list):has(> .record-list, > .table-wrap, > table) > .toolbar:first-child { margin: -16px -16px 12px; }
    .kx-app .kx-content .calm-stepper > span { flex: 1 0 auto; padding: 7px 10px; }
    .kx-app .kx-content .inventory-summary > div { border-bottom: 1px solid var(--kx-line-soft); }
    .kx-app .kx-search kbd,
    .kx-app .kx-profile-text { display: none; }
    .kx-app .kx-main { padding: 16px 14px 40px; }
    .kx-app .kx-strip,
    .kx-app .kx-content > .calm-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kx-app .kx-strip-cell,
    .kx-app .kx-content > .calm-overview-grid > div { border-bottom: 1px solid var(--kx-line-soft); }
    .kx-app .kx-content .kx-list .kx-list-columns { display: none; }
    .kx-app .kx-content .kx-list .calm-row-meta small { display: block; }
    .kx-app .kx-content .calm-row-link { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 14px; }
    .kx-app .kx-content .calm-row-action { justify-self: start; }
    .kx-app .kx-work-table thead { display: none; }
    .kx-app .kx-work-table,
    .kx-app .kx-work-table tbody,
    .kx-app .kx-work-table tr,
    .kx-app .kx-work-table td { display: block; }
    .kx-app .kx-work-table tr { padding: 10px 14px; border-bottom: 1px solid var(--kx-line-soft); }
    .kx-app .kx-work-table td { height: auto; padding: 1px 0; border: 0; }
    .kx-app .kx-work-table td[data-label="Status"],
    .kx-app .kx-work-table td[data-label="Zuständig"] { display: inline-block; margin: 4px 10px 0 0; color: var(--kx-muted); font-size: 12px; vertical-align: middle; }
    .kx-app .kx-work-table td[data-label="Status"] small { display: inline; margin-left: 6px; }
    .kx-app .kx-content .kx-list .calm-list-row { grid-template-columns: minmax(0, 1fr) auto; }
    .kx-app .kx-cell-action { width: auto; text-align: left; }
    .kx-app .kx-content table:not(.kx-table) td { height: auto; }
}
@media print {
    .kx-app .kx-sidebar,
    .kx-app .kx-topbar,
    .kx-app .kx-tabs { display: none; }
    .kx-app .kx-shell { display: block; }
    .kx-app [data-kx-tab][hidden] { display: block !important; }
}

/* 7. Authentication -------------------------------------------------------- */
body:has(.access-auth-page) {
    background: var(--kx-canvas);
    color: var(--kx-ink);
    font-family: var(--kx-font);
}
.access-auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 52px);
    background: var(--kx-canvas);
}
.access-auth-frame {
    width: min(920px, 100%);
    overflow: hidden;
    border: 1px solid var(--kx-line);
    border-radius: 10px;
    background: var(--kx-surface);
    box-shadow: 0 18px 46px rgba(16, 43, 83, .07);
}
.access-auth-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 10px 20px;
    background: var(--kx-navy-900);
    color: #fff;
}
.access-auth-brand a { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 16px; font-weight: var(--kx-weight-strong); letter-spacing: -.01em; text-decoration: none; }
.access-auth-brand img { width: 32px; height: 32px; padding: 2px; border-radius: 6px; background: #fff; object-fit: contain; }
.access-auth-brand p { margin: 0; color: var(--kx-nav-muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.access-auth-content { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(300px, .94fr); }
.access-auth-login { padding: 34px 42px 32px; }
.access-auth-login .eyebrow,
.access-auth-activation .eyebrow { margin: 0 0 6px; color: var(--kx-muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.access-auth-login h1 { margin: 0; color: var(--kx-ink); font-size: 26px; font-weight: var(--kx-weight-strong); line-height: 1.15; letter-spacing: -.02em; }
.access-auth-login .subline { margin: 6px 0 22px; color: var(--kx-muted); font-size: 13px; line-height: 1.45; }
.access-auth-login form { display: grid; gap: 12px; }
.access-auth-login label { display: grid; gap: 5px; color: var(--kx-text); font-size: 12px; font-weight: var(--kx-weight-medium); }
.access-auth-login input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--kx-line-strong); border-radius: 6px; background: #fff; box-sizing: border-box; font: 14px var(--kx-font); }
.access-auth-login input:focus { border-color: var(--kx-blue); box-shadow: 0 0 0 3px rgba(23, 105, 209, .12); outline: none; }
.access-auth-login button { justify-self: start; min-width: 128px; min-height: 36px; margin-top: 4px; padding: 0 20px; border: 1px solid var(--kx-blue); border-radius: 6px; background: var(--kx-blue); color: #fff; font: var(--kx-weight-medium) 13px var(--kx-font); cursor: pointer; }
.access-auth-login button:hover { border-color: var(--kx-blue-strong); background: var(--kx-blue-strong); }
.access-auth-login .error { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--kx-danger-line); border-radius: 6px; background: var(--kx-danger-soft); color: var(--kx-danger); font-size: 13px; }
.access-auth-forgot { display: inline-block; margin-top: 14px; color: var(--kx-blue); font-size: 12px; font-weight: var(--kx-weight-medium); text-decoration: none; }
.access-auth-activation { padding: 34px 34px 30px; border-left: 1px solid var(--kx-line-soft); background: var(--kx-surface-sub); }
.access-auth-activation h2 { margin: 0; color: var(--kx-ink); font-size: 18px; font-weight: var(--kx-weight-strong); line-height: 1.2; }
.access-auth-activation > p:not(.eyebrow) { margin: 8px 0 18px; color: var(--kx-muted); font-size: 13px; line-height: 1.5; }
.access-auth-activation ol { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.access-auth-activation li { display: flex; align-items: center; gap: 9px; color: var(--kx-text); font-size: 12.5px; font-weight: 500; }
.access-auth-activation li span { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border: 1px solid var(--kx-blue-line); border-radius: 50%; background: #fff; color: var(--kx-blue); font-size: 10px; font-weight: 700; }
.access-auth-activation > strong { display: block; padding-top: 14px; border-top: 1px solid var(--kx-line-soft); color: var(--kx-ink); font-size: 13px; font-weight: var(--kx-weight-medium); }
.access-auth-activation > small { display: block; max-width: 32ch; margin-top: 4px; color: var(--kx-muted); font-size: 11px; line-height: 1.45; }
.access-auth-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 20px; border-top: 1px solid var(--kx-line-soft); background: var(--kx-surface-sub); color: var(--kx-quiet); font-size: 11px; }

@media (max-width: 760px) {
    .access-auth-page { align-items: start; padding: 14px; }
    .access-auth-brand p { display: none; }
    .access-auth-content { grid-template-columns: 1fr; }
    .access-auth-login { padding: 26px 20px 24px; }
    .access-auth-activation { padding: 22px 20px; border-top: 1px solid var(--kx-line-soft); border-left: 0; }
    .access-auth-footer { display: grid; gap: 4px; }
}

/* 5x. Inventory work tool: overview, counting, reconciliation ------------ */
.kx-app .kx-inventory-tabs { margin-bottom: 16px; }
.kx-app .kx-tab-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 9px; background: var(--kx-line-soft); color: var(--kx-muted); font-size: 11px; font-weight: var(--kx-weight-medium); line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.kx-app .is-active > .kx-tab-count { background: var(--kx-blue-soft); color: var(--kx-blue); }
.kx-app .kx-inline-meter { display: inline-block; width: 72px; height: 6px; margin-right: 6px; overflow: hidden; border-radius: 3px; background: var(--kx-line-soft); vertical-align: middle; }
.kx-app .kx-inline-meter i { display: block; height: 100%; border-radius: 3px; background: var(--kx-chart-issued); }
.kx-app .kx-inventory-runs tr.is-selected td { background: var(--kx-blue-soft); }
.kx-app .kx-inventory-runs td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kx-app .kx-strip-text { overflow: hidden; font-size: 15px !important; text-overflow: ellipsis; white-space: nowrap; }
.kx-app .kx-inventory-closing { padding: 12px 16px 16px; color: var(--kx-text); font-size: 13px; }
.kx-app details#inventur-starten { margin: 16px 0; }

.kx-app .kx-count-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.kx-app .kx-count-scan { padding-bottom: 0; }
.kx-app .kx-content form.kx-scan-form { display: flex; gap: 10px; margin: 4px 16px 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content form.kx-scan-form input[name="scan_code"] { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 18px; border: 1.5px solid var(--kx-blue-line); border-radius: var(--kx-radius); background: #fff; color: var(--kx-ink); font: var(--kx-weight-medium) 20px/1 var(--kx-font); letter-spacing: .01em; }
.kx-app .kx-content form.kx-scan-form input[name="scan_code"]:focus { border-color: var(--kx-blue); box-shadow: 0 0 0 4px rgba(26, 106, 212, .14); outline: none; }
.kx-app .kx-content form.kx-scan-form button { width: auto; min-width: 120px; height: 56px; font-size: 15px; }
.kx-app .kx-count-progress { display: grid; gap: 10px; margin: 22px 16px 0; }
.kx-app .kx-count-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kx-app .kx-count-figure strong { color: var(--kx-ink); font-size: 34px; font-weight: 520; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kx-app .kx-count-figure span { color: var(--kx-muted); font-size: 13px; }
.kx-app .kx-meter.kx-meter-large { height: 10px; margin: 0; border-radius: 5px; }
.kx-app .kx-meter.kx-meter-large i { border-radius: 5px; transition: width .3s var(--kx-ease); }
.kx-app .kx-count-tallies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 1px solid var(--kx-line); }
.kx-app .kx-count-tallies a { display: grid; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--kx-line-soft); color: var(--kx-text); text-decoration: none; transition: background-color .12s ease; }
.kx-app .kx-count-tallies a:last-child { border-right: 0; }
.kx-app .kx-count-tallies a:hover { background: var(--kx-hover); }
.kx-app .kx-count-tallies span { color: var(--kx-muted); font-size: 12px; }
.kx-app .kx-count-tallies strong { color: var(--kx-ink); font-size: 24px; font-weight: 520; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kx-app .kx-count-tallies a.is-warn strong { color: var(--kx-warning); }
.kx-app .kx-count-tallies a.is-bad strong { color: var(--kx-danger); }
.kx-app .kx-count-recent h2 { font-size: 17px; }
.kx-app .kx-count-last-meta { margin: 0 16px 10px; color: var(--kx-muted); font-size: 12.5px; }
.kx-app .kx-count-feed { display: grid; margin: 0; padding: 0 0 6px; border-top: 1px solid var(--kx-line-soft); list-style: none; }
.kx-app .kx-count-feed li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--kx-line-soft); color: var(--kx-text); font-size: 13px; }
.kx-app .kx-count-feed li:last-child { border-bottom: 0; }
.kx-app .kx-count-feed li small { color: var(--kx-quiet); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kx-app .kx-count-feed li.is-unexpected span { color: var(--kx-danger); }

.kx-app .kx-reconcile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kx-app .kx-content form.kx-reconcile-search { flex: 1 1 240px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.kx-app .kx-content form.kx-reconcile-search input { width: 100%; }
.kx-app .kx-reconcile-head .pagination { margin: 0; }

@media (max-width: 960px) {
    .kx-app .kx-count-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .kx-app .kx-content form.kx-scan-form { flex-direction: column; }
    .kx-app .kx-content form.kx-scan-form button { width: 100%; }
    .kx-app .kx-count-tallies strong { font-size: 20px; }
    .kx-app .kx-count-figure strong { font-size: 28px; }
}
.kx-app .kx-content .kx-reconcile .inventory-items-wrap { overflow-x: visible; border: 0; border-top: 1px solid var(--kx-line); border-radius: 0; }
.kx-app .kx-content table.inventory-items-table.kx-table { table-layout: auto; }
.kx-app .kx-content table.inventory-items-table :is(th, td) { overflow-wrap: normal; }
.kx-app .kx-content table.inventory-items-table .kx-check-col { width: 36px; padding-right: 0; }
.kx-app .kx-content table.inventory-items-table td strong { display: block; font-weight: var(--kx-weight-medium); }
.kx-app .kx-content table.inventory-items-table td small { display: block; color: var(--kx-quiet); }
.kx-app .kx-content form.kx-scan-form { align-items: stretch; }
.kx-app .kx-content form.kx-scan-form input[name="scan_code"] { min-height: 56px; margin: 0; text-transform: uppercase; }
.kx-app .kx-content form.kx-scan-form input[name="scan_code"]::placeholder { color: var(--kx-quiet); font-size: 16px; font-weight: var(--kx-weight-regular); letter-spacing: 0; text-transform: none; }
.kx-app .kx-content form.kx-scan-form button { align-self: stretch; margin: 0; }
.kx-app .kx-count-recent .kx-surface-head h2 { font-size: 16px; overflow-wrap: anywhere; }
.kx-app .kx-inventory-runs .kx-cell-action { white-space: nowrap; }
.kx-app .kx-inventory-runs .kx-cell-action a + a { margin-left: 12px; }
.kx-app .kx-inventory-runs td small { display: block; color: var(--kx-quiet); font-weight: var(--kx-weight-regular); }
.kx-app .kx-reconcile-head nav.kx-views { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
@media (max-width: 720px) {
    .kx-app .kx-content .kx-reconcile .inventory-items-wrap { overflow-x: auto; }
    .kx-app .kx-content table.inventory-items-table td { display: table-cell; }
    .kx-app .kx-content table.inventory-items-table td::before { content: none; }
    .kx-app .kx-content table.inventory-items-table { min-width: 640px; }
    .kx-app .kx-reconcile-head .button { width: auto; }
    .kx-app .kx-reconcile-head .kx-density,
    .kx-app .kx-reconcile-head [data-kx-density] { display: none; }
}
.kx-app .kx-content > .kx-reconcile,
.kx-app .kx-content > .kx-count-workspace,
.kx-app .kx-content > .kx-list { min-width: 0; }
.kx-app .kx-content section.kx-reconcile { grid-template-columns: minmax(0, 1fr); }
.kx-app .kx-content table.inventory-items-table td[data-label="Schlüssel"] strong,
.kx-app .kx-inventory-runs td a strong { white-space: nowrap; }
@media (max-width: 720px) {
    .kx-app .kx-content .kx-list:has(.kx-inventory-runs) .kx-table-wrap { overflow-x: auto; }
    .kx-app .kx-content table.kx-inventory-runs { min-width: 860px; }
}
.kx-app .kx-content table:is(.kx-inventory-runs, .inventory-items-table) td { overflow-wrap: normal; word-break: normal; }
.kx-app .kx-content table.kx-inventory-runs td:nth-child(2) { white-space: nowrap; }
.kx-app .kx-content :is(section, .panel, form, article):has(> .kx-combobox > .kx-combobox-list:not([hidden])),
.kx-app .kx-content :is(section, .panel):has(.kx-combobox-list:not([hidden])) { position: relative; z-index: 40; }

/* closure: scan field placeholder stays fully readable on phones */
@media (max-width: 600px) {
    .kx-app .kx-content form.kx-scan-form input[name="scan_code"] { padding: 0 12px; text-overflow: ellipsis; }
    .kx-app .kx-content form.kx-scan-form input[name="scan_code"]::placeholder { font-size: 14px; }
}