/*
 * App chrome — top bar + main-menu drawer + user menu + messenger bell.
 *
 * A clean white sticky top bar over a LIGHT slide-in navigation drawer that
 * matches the rest of the (Bootstrap, light) ERP. Indigo is used only as the
 * active/selection accent. Built on Bootstrap 5 offcanvas + custom CSS.
 *
 * Desktop (>=992px): a group reveals its items as a hover flyout panel beside
 * the rail — no clicking to expand. Mobile keeps the tap-to-expand accordion.
 */

:root {
    --kk-topbar-h: 56px;
    --kk-accent: #4f46e5;            /* indigo-600 */
    --kk-accent-bright: #6366f1;     /* indigo-500 */
    --kk-accent-soft: rgba(99, 102, 241, .16);
    --kk-accent-tint: #eef2ff;       /* indigo-50  */
    --kk-menu-bg: #ffffff;
    --kk-menu-head: #f8fafc;
    --kk-slate-500: #64748b;
    --kk-slate-400: #94a3b8;
    --kk-slate-300: #cbd5e1;
    --kk-slate-200: #e2e8f0;
    --kk-slate-100: #f1f5f9;
    --kk-slate-700: #334155;
    --kk-slate-600: #475569;
    --kk-slate-900: #0f172a;
}

/* ---------------------------------------------------------------- app shell */
/*
 * The page is a fixed shell: the top bar never moves and the only thing that
 * scrolls is #app-scroll under it. The document itself must therefore have
 * nothing left to scroll — the moment it has, a mobile browser will scroll it
 * on its own (to reveal a focused field, to fit a dropdown), and the touch
 * gesture that would undo that goes to #app-scroll instead, so the top of the
 * page stays parked behind the fixed bar until the next reload (#521).
 *
 * Sizing the shell in `vh` is what left something to scroll: `vh` is the tall
 * viewport, the height the page has only while the mobile URL bar is hidden, so
 * a 100vh shell overflows the visible viewport by exactly that bar's height.
 * `dvh` is the viewport as it currently stands, and the percentage chain
 * (html -> body -> .kk-app-shell -> #app-scroll) is the fallback where `dvh` is
 * unsupported. `overflow: hidden` belongs on the root as well as on body: the
 * viewport reads its scrolling from the root element, so body alone does not
 * refuse the scroll.
 */
html,
body {
    height: 100%;
    overflow: hidden;
}

@supports (height: 100dvh) {
    html,
    body {
        height: 100dvh;
    }
}

body {
    background-color: #f7f7f7;
}

/*
 * The top bar is out of flow, so the shell keeps its height clear as padding.
 * A margin on #app-scroll would collapse through this wrapper and push the
 * shell itself down, past the bottom of a viewport-height body.
 */
.kk-app-shell {
    box-sizing: border-box;
    height: 100%;
    padding-top: var(--kk-topbar-h);
}

#app-scroll {
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* `?embed=1` / a bare layout renders without the top bar, so the scroll region
   is the whole shell. */
.kk-embed .kk-app-shell {
    padding-top: 0;
}

@media (max-width: 991.98px) {
    #app-scroll {
        padding-bottom: 150px;
    }
}

/* ------------------------------------------------------------------ top bar */
.kk-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--kk-topbar-h);
    z-index: 1031;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .9rem;
    background: #fff;
    border-bottom: 1px solid var(--kk-slate-200);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.kk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--kk-slate-700);
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color .12s ease, color .12s ease;
}

.kk-icon-btn:hover { background: var(--kk-slate-100); }
.kk-icon-btn:active { background: var(--kk-slate-200); }
.kk-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--kk-accent-soft);
}

.kk-hamburger { margin-left: -.2rem; }

.kk-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .15rem;
}

/* --------------------------------------------------------------- user menu */
.kk-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    border-radius: .55rem;
    padding: .25rem .45rem .25rem .3rem;
    transition: background-color .12s ease;
}

.kk-user-btn:hover { background: var(--kk-slate-100); }
.kk-user-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--kk-accent-soft);
}

.kk-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kk-accent-bright), var(--kk-accent));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .35);
}

.kk-user-caret { font-size: .7rem; color: var(--kk-slate-400); }

.kk-user-dropdown {
    min-width: 14rem;
    border: 1px solid var(--kk-slate-200);
    border-radius: .7rem;
    padding: .35rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.kk-user-name {
    padding: .45rem .6rem .55rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--kk-slate-100);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--kk-slate-700);
    max-width: 240px;
}

.kk-user-dropdown .dropdown-item {
    border-radius: .45rem;
    padding: .5rem .6rem;
    font-size: .875rem;
}
.kk-user-dropdown .dropdown-item:active {
    background: var(--kk-accent);
    color: #fff;
}

/* ------------------------------------------------------------ menu drawer */
#erpSidebar.offcanvas {
    width: min(17rem, 84vw);
    background: var(--kk-menu-bg);
    color: var(--kk-slate-700);
    border-right: 1px solid var(--kk-slate-200);
    box-shadow: 0 0 40px rgba(15, 23, 42, .12);
}

#erpSidebar .offcanvas-header {
    justify-content: flex-end;
    background: var(--kk-menu-head);
    border-bottom: 1px solid var(--kk-slate-200);
    padding: .55rem .75rem;
    min-height: 44px;
}

#erpSidebar .offcanvas-body {
    padding: .65rem .55rem 1.5rem;
}

/* group block */
.kk-group { margin-bottom: .1rem; }

/* section (group) header */
.kk-nav .group-btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .58rem .65rem;
    border: 0;
    background: transparent;
    border-radius: .55rem;
    color: var(--kk-slate-700);
    font-size: .9rem;
    font-weight: 600;
    transition: color .12s ease, background-color .12s ease;
}

.kk-nav .group-btn:hover {
    color: var(--kk-slate-900);
    background: var(--kk-slate-100);
}

.kk-nav .group-btn .group-icon {
    font-size: 1.1rem;
    color: var(--kk-slate-400);
    transition: color .12s ease;
}
.kk-nav .group-btn:hover .group-icon { color: var(--kk-accent); }
.kk-nav .group-btn .group-title { flex: 1; text-align: left; }

.kk-nav .group-caret {
    font-size: .7rem;
    color: var(--kk-slate-400);
    transition: transform .15s ease;
}

/* sub-items */
.kk-nav .sub {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.kk-nav .sub a {
    position: relative;
    display: block;
    padding: .44rem .65rem;
    border-radius: .45rem;
    color: var(--kk-slate-600);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: color .12s ease, background-color .12s ease;
}

.kk-nav .sub a:hover {
    background: var(--kk-slate-100);
    color: var(--kk-slate-900);
}

.kk-nav .sub a.active {
    background: var(--kk-accent-tint);
    color: var(--kk-accent);
    font-weight: 600;
}
.kk-nav .sub a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.1rem;
    border-radius: 2px;
    background: var(--kk-accent);
}

/* ----------------------------------------------- MOBILE: tap accordion */
@media (max-width: 991.98px) {
    .kk-nav .sub {
        margin: .1rem 0 .5rem 1.15rem;
        padding-left: .85rem;
        border-left: 1px solid var(--kk-slate-200);
    }
    .kk-group.collapsed .group-caret { transform: rotate(-90deg); }
    .kk-group.collapsed .sub { display: none; }
}

/* ---------------------------------------- DESKTOP: hover flyout panels */
@media (min-width: 992px) {
    /* let flyouts escape the drawer's scroll box */
    #erpSidebar .offcanvas-body { overflow: visible; }

    .kk-group { position: relative; }

    /* whole row is the hover target; caret hints "more to the side" */
    .kk-nav .group-caret { transform: rotate(-90deg); opacity: .55; }

    .kk-nav .kk-group > .sub {
        display: none;
        position: absolute;
        left: calc(100% - .35rem);
        top: -.35rem;
        min-width: 224px;
        max-height: calc(100vh - var(--kk-topbar-h) - 2rem);
        overflow-y: auto;
        padding: .45rem;
        background: #fff;
        border: 1px solid var(--kk-slate-200);
        border-radius: .65rem;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
        z-index: 1040;
    }

    /* invisible bridge so the cursor can cross the gap without dropping hover */
    .kk-nav .kk-group > .sub::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -.6rem;
        width: .6rem;
    }

    .kk-nav .kk-group:hover > .group-btn,
    .kk-nav .kk-group:focus-within > .group-btn {
        background: var(--kk-slate-100);
        color: var(--kk-slate-900);
    }
    .kk-nav .kk-group:hover > .group-btn .group-icon,
    .kk-nav .kk-group:focus-within > .group-btn .group-icon { color: var(--kk-accent); }

    .kk-nav .kk-group:hover > .sub,
    .kk-nav .kk-group:focus-within > .sub { display: flex; }
}

/* --------------------------------------------------------- messenger bell */
.kk-messenger-root { position: relative; display: inline-flex; }

.kk-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--kk-slate-700);
    font-size: 1.2rem;
    transition: background-color .12s ease;
}
.kk-bell:hover { background: var(--kk-slate-100); }
.kk-bell:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--kk-accent-soft);
}

.kk-bell .kk-bell-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.kk-messenger-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: 92vw;
    overflow: hidden;
    border-radius: .7rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .2);
    z-index: 1055;
}

/*
 * The bell is not the last item in the top bar, so anchoring the panel to the
 * bell's right edge pushes its left edge past the viewport on a phone. Below
 * `sm` the panel leaves the anchor and spans the viewport instead.
 */
@media (max-width: 575.98px) {
    .kk-messenger-dropdown {
        position: fixed;
        top: calc(var(--kk-topbar-h) + 8px);
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }
}

.kk-messenger-list { max-height: 50vh; overflow-y: auto; }
.kk-messenger-item:hover { background: #f8fafc; }

.kk-messenger-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1060;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/*
 * The compose dialog is a flex column so its BODY scrolls and the footer — which
 * carries "Lähetä" — is always on screen. Without the height cap the recipient
 * picker, subject and message box simply make the box taller than the phone and
 * push the send button below the fold, where nothing scrolls it back into view
 * (the backdrop is position:fixed, so the page itself has nothing to scroll).
 */
.kk-messenger-modal {
    margin-top: 8vh;
    width: 520px;
    max-width: 94vw;
    /* Percentages resolve against the fixed, full-viewport backdrop. */
    max-height: calc(100% - 16vh);
    display: flex;
    flex-direction: column;
    border-radius: .7rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .4);
}

/* Header and footer stay put; only the body scrolls. */
.kk-messenger-modal > .modal-header,
.kk-messenger-modal > .modal-footer {
    flex: 0 0 auto;
}

.kk-messenger-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Keep momentum scrolling inside the dialog rather than the page. */
    overscroll-behavior: contain;
}

/* On a phone the dialog is a full-screen sheet: there is no room for a floating
   box once the on-screen keyboard opens, and the extra margins only cost body
   height that the message field wants. */
@media (max-width: 575.98px) {
    .kk-messenger-modal {
        margin-top: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* The selected conversation is tinted indigo, NOT Bootstrap-primary blue (see
   .kk-inbox-row.active below), so Bootstrap's own `.list-group-item.active`
   white text has to be undone here — otherwise subject, sender and timestamp all
   paint white on a near-white row and the selected message becomes invisible.
   Muted text keeps its normal slate grey, which reads fine on the tint.
   Both lists — Saapuneet and Lähetetyt — carry .kk-inbox-row, so a row that
   misses the tint and keeps grey muted text on solid blue cannot recur. */
#internal-messages-app .kk-inbox-row.active {
    color: var(--kk-slate-900);
}

/* Bootstrap tints .list-group-item-action on hover and while held down, which on
   the Lähetetyt rows would repaint the selected row grey mid-click. Keep the
   selection tint stable. */
#internal-messages-app .kk-inbox-row.active:hover,
#internal-messages-app .kk-inbox-row.active:focus,
#internal-messages-app .kk-inbox-row.active:active {
    background: var(--kk-accent-tint);
    color: var(--kk-slate-900);
}

/* Recipient checkbox picker in the compose modal (issue #273): the list scrolls
   inside the modal so a long user list never pushes the send button off-screen. */
.kk-recipient-list {
    max-height: 11rem;
    overflow-y: auto;
}

/* honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .kk-icon-btn, .kk-user-btn, .kk-bell,
    .kk-nav .group-btn, .kk-nav .group-icon,
    .kk-nav .group-caret, .kk-nav .sub a {
        transition: none;
    }
}

/* ── Internal-messaging conversation threads ─────────────────────────────── */
.kk-thread-msg {
    border: 1px solid #e2e8f0;
    background: #fff;
}
.kk-thread-mine {
    background: #eef2ff; /* indigo-50 */
    border-color: #c7d2fe;
    margin-left: 1.5rem;
}
.kk-thread-theirs {
    margin-right: 1.5rem;
}

/* ── Pinned (docked) main menu ───────────────────────────────────────────── */
/* The pin toggle in the drawer header keeps #erpSidebar docked open instead of
   acting as a transient overlay. Docking is a desktop affordance — on narrow
   screens the drawer remains a normal Bootstrap offcanvas overlay. */
.kk-menu-pin { margin-right: auto; }
.kk-menu-pinned .kk-menu-pin i { color: var(--kk-accent); }

@media (min-width: 992px) {
    /* Force the offcanvas visible + in-flow-looking on the left, below the
       topbar. Overrides Bootstrap's translate/visibility for the closed state. */
    .kk-menu-pinned #erpSidebar.offcanvas {
        transform: none !important;
        visibility: visible !important;
        top: var(--kk-topbar-h);
        height: calc(100vh - var(--kk-topbar-h));
        box-shadow: none;
    }
    /* No backdrop in docked mode, and the close (x) is meaningless when docked. */
    .kk-menu-pinned .offcanvas-backdrop { display: none !important; }
    .kk-menu-pinned #erpSidebar .btn-close { display: none; }
    /* The hamburger is redundant once the drawer is always open. */
    .kk-menu-pinned .kk-hamburger { display: none; }
    /* Shift the scroll/content region right to make room for the docked drawer. */
    .kk-menu-pinned #app-scroll {
        margin-left: min(17rem, 84vw);
    }
}

/* ── "#" reference autocomplete + links ──────────────────────────────────── */
.kk-msgref-dropdown {
    z-index: 2000;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--kk-slate-200);
    border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
    padding: .25rem;
}
.kk-msgref-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: .4rem .55rem;
    border-radius: .375rem;
    cursor: pointer;
    font-size: .9rem;
}
.kk-msgref-item:hover, .kk-msgref-item.active { background: var(--kk-accent-tint); }
.kk-msgref-badge {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: .25rem;
    color: #fff;
}
.kk-msgref-event { background: var(--kk-accent); }
.kk-msgref-contact { background: #0ea5e9; } /* sky-500 */
.kk-msgref-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.kk-msg-ref {
    font-weight: 600;
    color: var(--kk-accent);
    text-decoration: none;
    background: var(--kk-accent-tint);
    padding: 0 .25rem;
    border-radius: .25rem;
}
a.kk-msg-ref:hover { text-decoration: underline; }

/* ── Inbox flags ─────────────────────────────────────────────────────────── */
/* Selected row: an indigo tint rather than Bootstrap's solid blue. The border
   colour has to be overridden too — Bootstrap's `.active` paints it primary
   blue, which frames the pale row in a colour it no longer uses. */
.kk-inbox-row.active {
    background: var(--kk-accent-tint);
    border-color: var(--kk-slate-200);
}
.kk-inbox-open { min-width: 0; cursor: pointer; }
.kk-flag-badge { color: #fff; font-weight: 500; }
.kk-flag-btn { font-size: 1.05rem; line-height: 1; }
.kk-flag-dot {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Shared tile grid — used by the settings hubs and tile pickers (system
   settings, service packs, …). One source of truth so tiles look the same
   everywhere. Compact square tiles with a light hover lift.
   ────────────────────────────────────────────────────────────────────────── */
.kk-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: .75rem;
}
.kk-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem;
    text-align: center;
    border: 1px solid #e3e6ea;
    border-radius: .5rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.kk-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    background: #f8f9fa;
    color: inherit;
}
.kk-tile-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: #0d6efd;
}
.kk-tile-label {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.15;
}
.kk-tile-sub {
    font-size: .78rem;
    color: #6c757d;
}

/* Recolorable CDN icon (konekallio-media). The monochrome SVG is used as a mask
   so the glyph takes the element's `color`. Set --kk-icon to the asset URL. */
.kk-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background: currentColor;
    -webkit-mask: var(--kk-icon) no-repeat center / contain;
    mask: var(--kk-icon) no-repeat center / contain;
}
.kk-tile .kk-icon,
.kk-tile-icon.kk-icon {
    width: 1.8rem;
    height: 1.8rem;
    color: #0d6efd;
}

/* Hide un-mounted Vue templates until the app is ready. */
[v-cloak] { display: none; }

/* Shared centred modal for the Vue admin editors (CRUD + service packs). */
.crud-modal-backdrop,
.sp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1085;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem;
    overflow: auto;
}
.crud-modal,
.sp-modal {
    width: 100%;
    max-width: 540px;
}
/* The service-pack editor carries four sections of fields, including a checklist
   whose rows need title + goal side by side. At 540px those rows wrapped and the
   delete button landed on top of the "Pakollinen" label (issue #273). */
.sp-modal {
    max-width: 900px;
}

/* <typeahead-multi> dropdown (webroot/js/vue/apps/components/typeahead-multi.js) */
.tam-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1090;
    width: 100%;
    max-height: 220px;
    overflow: auto;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* Opened near the bottom of the window the menu used to render below the fold,
   so typing looked like it did nothing at all. The component measures the space
   below and flips the list above the input when it will not fit. */
.tam-menu.tam-menu-up {
    top: auto;
    bottom: 100%;
    box-shadow: 0 -.5rem 1rem rgba(0, 0, 0, .15);
}

/* ------------------------------------------------------------- tab headers */
/*
 * Tab headers scroll horizontally instead of wrapping. A wrapped tab strip
 * reflows the whole page below it and hides which tab is active, so on narrow
 * viewports the strip stays one row and the overflowing tabs are swiped to.
 * The scrollbar is hidden; the container border-bottom stays put while the
 * tabs slide under it.
 */
.nav-tabs,
.nav-underline {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Without this the strip scrolls VERTICALLY too: CSS computes a `visible`
       axis to `auto` as soon as the other axis is not visible. */
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

/*
 * No baseline on a scrolling strip. Bootstrap draws .nav-tabs' border-bottom on
 * the strip itself and lets the active tab hide the 1px behind it via
 * `margin-bottom: -1px` -- an overlap a scroll container necessarily clips. The
 * line therefore ran unbroken under the active tab and read as a stray rule
 * across the whole header. The active tab is already drawn as a box, so the
 * baseline is dropped rather than faked.
 */
.nav-tabs {
    border-bottom: 0;
}

.nav-tabs::-webkit-scrollbar,
.nav-underline::-webkit-scrollbar {
    display: none;
}

.nav-tabs > .nav-item,
.nav-tabs > .nav-link,
.nav-underline > .nav-item,
.nav-underline > .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

/*
 * Legacy opt-in wrapper (Events, Contacts, Autojerry estimate requests). The
 * behaviour above is now the default, so the wrapper only has to stop clipping
 * its own child.
 */
.nav-tabs-scrollable {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-tabs-scrollable::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------------------------------------------
   Impersonation banner — pinned to the top of the scrolling content while one
   user acts as another. Explicit colours: the theme's text-bg-* helpers do not
   render here.
   ------------------------------------------------------------------------ */
.kk-impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffe69c;
    font-size: .875rem;
}
.kk-impersonation-meta { color: #856404; }
.kk-impersonation-stop {
    background: #664d03;
    border-color: #664d03;
    color: #fff;
}
.kk-impersonation-stop:hover,
.kk-impersonation-stop:focus {
    background: #4d3a02;
    border-color: #4d3a02;
    color: #fff;
}