/**
 * The new app frame (LXP-2579): loaded by ux2HeadTags (engine/ux2.php) with UX2_SHELL_NEXT_ON, which also puts the
 * classes below on <html> before the page draws. Each part has its own class, so tools/ux2-shell-demo.php and
 * tools/ux2-shell-try.js can switch them one by one.
 *   ux2-frame      a white rounded header and page on a light background, lifted by a shadow on its left; the sidebar
 *                  232px on that background with a white pill on the current page that glides to the item pointed at
 *                  (appjs/common/ux2/asideGlide.js); the usual small sidebar icon as the toggle
 *   ux2-white      the page white (else today's grey under the header); cards get a hairline instead of floating
 *   ux2-tab        minimized sidebar: the current page's icon in a brand-coloured tab reaching the page, curved in
 *   ux2-pill       open sidebar: the current page in a brand-coloured pill (demo only, not live)
 *   ux2-tray       header buttons as raised white keys; an open one has a brand ring
 *   ux2-ios        switches like Apple's: a white knob with a soft shadow, a springy slide; still green when on
 *   ux2-icon-grow  sidebar icons grow very slightly on hover
 * Live: ux2-ios on every UX2 page; the rest only with the UX2 admin sidebar. Desktop only for the frame and the tab
 * (from 992px); phones keep today's full-width page and slide-in menu. Colours use light-dark() for dark mode later.
 */
:root {
    --ux2s-gap: 12px;
    --ux2s-r: 18px;
    /* The background behind the sheet: slate, top to bottom, #E2E8F0 to #F1F5F9. light-dark() picks the second
       colour only once a page says color-scheme: dark (the dark mode story); until then it's always the first. */
    --ux2s-canvas-top: light-dark(#e2e8f0, #1c1d21);
    --ux2s-canvas-end: light-dark(#f1f5f9, #25262b);
    --ux2s-sheet: light-dark(#f5f8fa, #15161a); /* the page grey without ux2-white: white cards stand out as today */
    --ux2s-edge: light-dark(#e6e8ec, #2e3036);
    /* The sheet sits lifted off the background: a soft shadow down its left side, beside the sidebar */
    --ux2s-lift: -12px 0 28px -16px rgb(16 24 40 / .22);
    --ux2s-canvas: linear-gradient(180deg, var(--ux2s-canvas-top) 0%, var(--ux2s-canvas-end) 100%) fixed;
    --ux2s-aside: 232px;
    --ux2s-rail: 75px;
    /* Cards on the white page: no drawn border, a soft shadow in the slate #E2E8F0 instead (a faint ring for the edge,
       then a spread below, so they lift a touch) */
    --ux2s-card-line: transparent;
    --ux2s-card-lift: 0 0 0 1px rgb(226 232 240 / .75), 0 2px 10px -2px #e2e8f0, 0 1px 2px rgb(226 232 240 / .9);
    /* Text: near-black ink; slate grey #64748B (4.8:1 on white, readable on low-end screens); the lighter #7C8EA3
       (3.4:1) only for hints and placeholders, never for text people have to read */
    --ux2s-ink: #010b13;
    --ux2s-grey: #64748b;
    --ux2s-quiet: #7c8ea3;
    --ux2s-tab-out: 15px; /* from the rail icon's right edge to the rail's (75px rail, 44px icon) */
}

/* ---------- Frame ---------- */
@media (min-width: 992px) {
    html.ux2-frame body {
        background: var(--ux2s-canvas) var(--ux2s-canvas-end) !important;
    }

    html.ux2-frame body #kt_aside,
    html.ux2-frame body #kt_aside .aside-logo,
    html.ux2-frame body #kt_aside .aside-menu,
    html.ux2-frame body #kt_aside .aside-footer,
    html.ux2-frame body #kt_aside .ux2-aside {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Narrower open sidebar (the rows had a wide gap between the name and its arrow) */
    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside,
    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .aside-menu {
        width: var(--ux2s-aside) !important;
    }

    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside_footer {
        padding-right: 16px !important;
        padding-left: 20px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    html.ux2-frame body.aside-fixed:not([data-kt-aside-minimize="on"]) #kt_wrapper {
        padding-left: var(--ux2s-aside);
    }

    /* Current page: a white pill on the background; hover a paler one */
    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link.active {
        background-color: #fff !important;
        border-radius: 999px;
        box-shadow: 0 1px 2px rgb(9 10 12 / .07), 0 0 0 1px rgb(9 10 12 / .04);
    }

    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link {
        border-radius: 999px;
    }

    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link:hover:not(.active) {
        background-color: rgb(255 255 255 / .7) !important;
    }

    /* The glide (appjs/common/ux2/asideGlide.js): one white pill that rests on the current page and slides to the
       item under the pointer; the rows themselves go clear so only the pill shows */
    html.ux2-frame body #kt_aside .ux2-aside .menu.has-glide {
        position: relative;
    }

 html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu.has-glide .menu-link {
        position: relative;
        z-index: 1;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* The current page keeps its solid pill while the glide is on another item, so hovering never moves the
       highlight (LXP-2650); the glide rests underneath it */
    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu.has-glide .menu-link.active {
        background-color: #fff !important;
        box-shadow: 0 1px 2px rgb(9 10 12 / .07), 0 0 0 1px rgb(9 10 12 / .04) !important;
    }

    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .ux2-aside-glide {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        display: block;
        pointer-events: none;
        /* Hover: frosted glass over the slate (the current page's pill, .is-home below, stays solid white) */
        background: linear-gradient(180deg, rgb(255 255 255 / .62) 0%, rgb(255 255 255 / .34) 100%);
        border-radius: 999px;
        box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / .75), 0 1px 3px rgb(15 23 42 / .08),
            0 4px 12px -6px rgb(15 23 42 / .14);
        -webkit-backdrop-filter: blur(10px) saturate(1.3);
        backdrop-filter: blur(10px) saturate(1.3);
        transition: opacity .15s ease, background-color .2s ease, box-shadow .2s ease;
    }

    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .ux2-aside-glide.is-home {
        background: #fff;
        box-shadow: 0 1px 2px rgb(9 10 12 / .07), 0 0 0 1px rgb(9 10 12 / .04);
    }

    html.ux2-frame body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .ux2-aside-glide.is-moving {
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1),
            height .3s cubic-bezier(.2, .8, .2, 1), opacity .15s ease, background-color .2s ease, box-shadow .2s ease;
    }

    html.ux2-frame body #kt_aside .ux2-aside .menu.has-glide > .menu-item {
        position: relative;
        z-index: 1;
    }

    html.ux2-frame body #kt_aside .ux2-aside .menu-sub.menu-sub-accordion {
        border-left-color: #e2e5ea !important;
    }

    /* The header is the sheet's top edge */
    html.ux2-frame body.header-fixed #kt_header {
        top: var(--ux2s-gap);
        right: var(--ux2s-gap);
        left: var(--ux2s-aside);
        border-radius: var(--ux2s-r) var(--ux2s-r) 0 0;
        border-bottom: 1px solid var(--ux2k-line-2, #eef0f3);
        box-shadow: none;
    }

    html.ux2-frame body.header-fixed[data-kt-aside-minimize="on"] #kt_header {
        left: var(--ux2s-rail);
    }

    html.ux2-frame body.header-fixed #kt_wrapper {
        padding-top: calc(65px + var(--ux2s-gap));
        padding-right: var(--ux2s-gap);
        padding-bottom: 0;
    }

    /* The sheet: under the white header, today's page grey (so every page's white cards look as they do now),
       running on to the bottom of the window; a hairline edge keeps it apart from the light end of the background */
    html.ux2-frame body #kt_wrapper > #kt_content,
    html.ux2-frame body #kt_wrapper > #kt_footer {
        background: var(--ux2s-sheet) !important;
        border-right: 1px solid var(--ux2s-edge);
        border-left: 1px solid var(--ux2s-edge);
        box-shadow: var(--ux2s-lift);
    }

    html.ux2-frame body.header-fixed #kt_header {
        border: 1px solid var(--ux2s-edge);
        border-bottom-color: var(--ux2k-line-2, #eef0f3);
        box-shadow: var(--ux2s-lift);
    }

    html.ux2-frame body #kt_wrapper > #kt_footer {
        border-top: 1px solid var(--ux2s-edge);
        border-radius: 0;
        box-shadow: none;
    }

    /* ux2-white: a white page (the cards below get a hairline so they still stand apart) */
    html.ux2-frame.ux2-white body #kt_wrapper > #kt_content,
    html.ux2-frame.ux2-white body #kt_wrapper > #kt_footer {
        background: #fff !important;
    }

    /* The gap above the header stays the background while the page scrolls under it, down past the header's curves:
       behind the header (z 100) and the sidebar (101), in front of the page, so the corners stay round on scroll */
    html.ux2-frame body.header-fixed::before {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 99;
        height: calc(var(--ux2s-gap) + var(--ux2s-r));
        content: "";
        background: var(--ux2s-canvas); /* fixed, so it lines up with the body's */
    }

    /* Cards on a white page: a hairline instead of floating on grey. Metronic's .card, .ux2-panel, and the admin pages'
       own white cards that had only a shadow (assets/*.css, checked 31 Oct 2026); add a page's card here if it fades */
    html.ux2-frame.ux2-white body #kt_content :is(.card, .ux2-panel, .qa-card, .qi-card, .kq-done-card, .ba-card, .bp-card,
        .bf-card, .bf-side, .bs-card, .bv-card, .ss-wrap-in, .cu-topic, .la-share-card) {
        border: 1px solid var(--ux2s-card-line) !important;
        box-shadow: var(--ux2s-card-lift) !important;
    }

    /* The selection bar centres on the page beside the narrower sidebar / the rail (components.css .ux2-selbar) */
    html.ux2-frame body .ux2-selbar {
        left: calc(50% + 110px);
        max-width: calc(100vw - 264px);
    }

   html.ux2-frame body[data-kt-aside-minimize="on"] .ux2-selbar {
        left: calc(50% + 31px);
        max-width: calc(100vw - 107px);
    }

    html.ux2-frame body .ux2-selbar.is-docked {
        left: var(--ux2s-aside);
        max-width: none;
    }

    html.ux2-frame body[data-kt-aside-minimize="on"] .ux2-selbar.is-docked {
        left: var(--ux2s-rail);
    }
}

/* ---------- Minimized sidebar: the brand tab ---------- */
@media (min-width: 992px) {
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item > .menu-link.active,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item.here > .menu-link {
        position: relative;
        overflow: visible;
        background: var(--sko-primary, #1e5f69) !important;
        border-radius: 14px 0 0 14px !important;
        box-shadow: var(--ux2s-tab-out) 0 0 var(--sko-primary, #1e5f69) !important; /* the tab runs on to the rail's edge */
    }

    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item > .menu-link.active .menu-icon :is(i, svg),
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item.here > .menu-link .menu-icon :is(i, svg) {
        color: #fff !important;
    }

    /* The curves above and below, where the tab meets the edge */
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item > .menu-link.active::before,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item > .menu-link.active::after,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item.here > .menu-link::before,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item.here > .menu-link::after {
        position: absolute;
        right: calc(-1 * var(--ux2s-tab-out));
        width: 14px;
        height: 14px;
        content: "";
        pointer-events: none;
    }

    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item > .menu-link.active::before,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item.here > .menu-link::before {
        top: -14px;
        background: radial-gradient(circle at 0 0, transparent 13.5px, var(--sko-primary, #1e5f69) 14px);
    }

    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item > .menu-link.active::after,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-aside .menu > .menu-item.here > .menu-link::after {
        bottom: -14px;
        background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--sko-primary, #1e5f69) 14px);
    }

    /* The menu must let the tab and its curves show */
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside .aside-menu,
    html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside .menu > .menu-item {
        overflow: visible !important;
    }
}

/* ---------- Open sidebar: the brand pill (demo only) ---------- */
html.ux2-pill body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link.active {
    background: var(--sko-primary, #1e5f69) !important;
}

html.ux2-pill body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link.active .menu-title,
html.ux2-pill body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link.active .menu-icon :is(i, svg),
html.ux2-pill body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link.active .menu-bullet {
    color: #fff !important;
}

html.ux2-pill body:not([data-kt-aside-minimize="on"]) #kt_aside .ux2-aside .menu-link.active::before {
    border-color: var(--sko-primary, #1e5f69) !important;
}

/* ---------- Header keys ---------- */
:root {
    --ux2s-key: inset 0 1px 0 #fff, inset 0 -2px 0 rgb(9 10 12 / .05), 0 1px 2px rgb(9 10 12 / .12),
        0 3px 8px rgb(9 10 12 / .06);
    --ux2s-key-up: inset 0 1px 0 #fff, inset 0 -2px 0 rgb(9 10 12 / .05), 0 2px 4px rgb(9 10 12 / .12),
        0 8px 18px rgb(9 10 12 / .1);
}

@media (min-width: 992px) {
    html.ux2-tray body #kt_header [data-ux2-quickjump] {
        gap: 10px;
        align-self: center;
        height: auto;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    html.ux2-tray body #kt_header [data-ux2-quickjump] > div {
        gap: 10px;
        margin: 0 !important;
    }
}

html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon {
    width: 40px !important;
    height: 40px !important;
    background: linear-gradient(180deg, #fff 0%, #f5f6f8 100%) !important;
    border: 1px solid #dfe2e8 !important;
    border-radius: 12px !important;
    box-shadow: var(--ux2s-key);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon :is(i, svg) {
    color: var(--ux2k-ink-2, #3f4254) !important;
    font-size: 17px !important;
}

html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: var(--ux2s-key-up);
}

html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon:active {
    background: #f1f3f6 !important;
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgb(9 10 12 / .14);
}

/* Open (its menu is showing): a brand ring and glow */
html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon.show,
html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon.active,
html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon[aria-expanded="true"] {
    border-color: var(--sko-primary, #1e5f69) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sko-primary, #1e5f69) 18%, transparent),
        0 6px 16px color-mix(in srgb, var(--sko-primary, #1e5f69) 28%, transparent);
}

html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon.show :is(i, svg),
html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon.active :is(i, svg),
html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon[aria-expanded="true"] :is(i, svg) {
    color: var(--sko-primary, #1e5f69) !important;
}

/* ---------- Switches like Apple's ---------- */
html.ux2-ios body .form-check.form-switch .form-check-input {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    margin-top: 0;
    background-color: #dfe2e8 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(9 10 12 / .04) !important;
    transform: none !important;
    transition: background-color .25s ease;
    cursor: pointer;
}

html.ux2-ios body .form-check.form-switch .form-check-input::before {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    content: "";
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16), 0 0 0 .5px rgb(0 0 0 / .04);
    transition: transform .32s cubic-bezier(.34, 1.36, .64, 1), width .18s ease;
}

html.ux2-ios body .form-check.form-switch .form-check-input:checked {
    background-color: var(--ux2p-on, #1f9d63) !important;
}

html.ux2-ios body .form-check.form-switch .form-check-input:checked::before {
    transform: translateX(18px);
}

/* Pressed: the knob stretches towards where it's going */
html.ux2-ios body .form-check.form-switch .form-check-input:active:not(:disabled)::before {
    width: 30px;
}

html.ux2-ios body .form-check.form-switch .form-check-input:checked:active:not(:disabled)::before {
    transform: translateX(12px);
}

html.ux2-ios body .form-check.form-switch .form-check-input:focus-visible {
    box-shadow: 0 0 0 3px var(--ux2p-ring, rgba(30, 95, 105, .35)) !important;
}

html.ux2-ios body .form-check.form-switch .form-check-input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* The small switch */
html.ux2-ios body .form-check.form-switch.form-check-sm .form-check-input {
    width: 38px;
    height: 22px;
}

html.ux2-ios body .form-check.form-switch.form-check-sm .form-check-input::before {
    width: 18px;
    height: 18px;
}

html.ux2-ios body .form-check.form-switch.form-check-sm .form-check-input:checked::before {
    transform: translateX(16px);
}

html.ux2-ios body .form-check.form-switch.form-check-sm .form-check-input:active:not(:disabled)::before {
    width: 22px;
}

html.ux2-ios body .form-check.form-switch.form-check-sm .form-check-input:checked:active:not(:disabled)::before {
    transform: translateX(12px);
}

/* Calm and reduced motion: the knob moves without the spring */
@media (prefers-reduced-motion: reduce) {
    html.ux2-ios body .form-check.form-switch .form-check-input::before {
        transition: none;
    }
}

html.ux2-calm.ux2-ios body .form-check.form-switch .form-check-input::before {
    transition: none;
}

/* The glide pill only in the open sidebar with the frame (desktop) */
.ux2-aside-glide {
    display: none;
}

/* ---------- Sidebar toggle: the usual small "sidebar" icon ----------
   Open: a quiet 32px button beside the logo. Minimized: hidden behind the workspace's mark; pointing at the mark
   swaps it for the toggle, which opens the sidebar (as on most apps). */
@media (min-width: 992px) {
    html.ux2-frame body #kt_aside:has(.ux2-aside) #kt_aside_toggle {
        display: grid;
        place-items: center;
        width: 32px !important;
        height: 32px;
        padding: 0 !important;
        color: #7e8299;
        background: transparent;
        border-radius: 8px;
        box-shadow: none;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease, opacity .15s ease;
    }

    html.ux2-frame body #kt_aside:has(.ux2-aside) #kt_aside_toggle:hover {
        color: var(--ux2k-ink, #181c32);
        background: rgb(9 10 12 / .06);
    }

    html.ux2-frame body #kt_aside:has(.ux2-aside) #kt_aside_toggle > .navbar-icon-wrapper {
        display: none !important;
    }

    html.ux2-frame body #kt_aside:has(.ux2-aside) #kt_aside_toggle::before {
        width: 18px;
        height: 18px;
        content: "";
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* Minimized: the toggle lies on the mark and shows when the pointer is over it */
    html.ux2-frame body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .aside-logo {
        position: relative;
    }

    html.ux2-frame body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) #kt_aside_toggle {
        position: absolute !important;
        top: 14px;
        left: 50%;
        width: 30px !important;
        height: 30px;
        margin: 0 0 0 -15px;
        color: var(--ux2k-ink, #181c32);
        background: #fff;
        box-shadow: 0 1px 2px rgb(9 10 12 / .1), 0 0 0 1px rgb(9 10 12 / .06);
        opacity: 0;
    }

    html.ux2-frame body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .aside-logo:hover #kt_aside_toggle {
        opacity: 1;
    }

    html.ux2-frame body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .ux2-rail-mark {
        transition: opacity .15s ease;
    }

    html.ux2-frame body[data-kt-aside-minimize="on"] #kt_aside:has(.ux2-aside) .aside-logo:hover .ux2-rail-mark {
        opacity: 0;
    }
}

/* ---------- Sidebar icons: a very small grow on hover (ux2-icon-grow) ----------
   The icon eases up a touch and fades to the brand colour while the pointer is on the item. Open sidebar and rail.
   Reduced motion or Display → Calm: the colour still changes, the size doesn't. */
html.ux2-icon-grow body #kt_aside .ux2-aside .menu-link .menu-icon :is(i, svg) {
    display: inline-block;
    transition: color .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

html.ux2-icon-grow body #kt_aside .ux2-aside .menu-link:hover .menu-icon :is(i, svg) {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    html.ux2-icon-grow body #kt_aside .ux2-aside .menu-link .menu-icon :is(i, svg) {
        transform: none !important;
    }
}

html.ux2-calm.ux2-icon-grow body #kt_aside .ux2-aside .menu-link .menu-icon :is(i, svg) {
    transform: none !important;
}

/* Demo only: the card line tinted a little towards the brand (ux2-card-tint) */
html.ux2-card-tint {
    --ux2s-card-lift: 0 0 0 1px color-mix(in srgb, var(--sko-primary, #1e5f69) 16%, #e2e8f0), 0 2px 10px -2px #e2e8f0,
        0 1px 2px rgb(226 232 240 / .9);
}

/* ---------- Text colours with the frame: ink #010B13, grey #64748B, hints #7C8EA3 ----------
   The shared tokens (components.css) and Metronic's text classes the pages use */
html.ux2-frame {
    --ux2k-ink: var(--ux2s-ink);
    --ux2k-muted: var(--ux2s-grey);
    --ux2k-quiet: var(--ux2s-quiet);
}

html.ux2-frame body,
html.ux2-frame :is(.text-dark, .text-gray-900, .text-gray-800, h1, h2, h3, h4, h5, h6) {
    color: var(--ux2s-ink);
}

html.ux2-frame :is(.text-muted, .text-gray-600, .text-gray-500, .form-text) {
    color: var(--ux2s-grey) !important;
}

html.ux2-frame :is(input, textarea)::placeholder {
    color: var(--ux2s-quiet);
}

html.ux2-frame #kt_aside .ux2-aside .menu-link .menu-title {
    color: var(--ux2s-ink);
}

html.ux2-frame #kt_aside .ux2-aside .menu-link .menu-icon :is(i, svg) {
    color: var(--ux2s-grey);
}

/* ---------- Header: the avatar and Jump to in the same family as the frame ----------
   The avatar's initials on the dark brand colour, round (it was the theme's green tile); a photo stays a photo, round.
   Jump to: the slate fill of the sidebar's lower end, slate text and a slate edge on hover. */
html.ux2-tray #kt_header_user_menu_toggle > .symbol .symbol-label,
html.ux2-tray #kt_header_user_menu_toggle > .symbol img {
    border-radius: 50% !important;
}

html.ux2-tray #kt_header_user_menu_toggle > .symbol .symbol-label {
    color: #fff !important;
    background: var(--sko-primary-dark, #154951) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2e8f0;
}

html.ux2-tray #kt_header_user_menu_toggle > .symbol img {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2e8f0;
}

html.ux2-tray #kt_header .ux2-qj-trigger {
    color: #64748b;
    background: #f1f5f9;
}

html.ux2-tray #kt_header .ux2-qj-trigger:hover {
    background: #fff;
    border-color: #e2e8f0;
}

html.ux2-tray #kt_header .ux2-qj-trigger kbd {
    color: #64748b;
    border-color: #e2e8f0;
}

/* ---------- Display → More contrast with the frame: for screens that wash light greys out ----------
   Grey text one step darker, hints readable, and the cards get a visible slate line on top of their shadow */
html.ux2-frame.ux2-contrast {
    --ux2s-grey: #475569;
    --ux2s-quiet: #64748b;
    --ux2s-card-lift: 0 0 0 1px #cbd5e1, 0 2px 10px -2px #e2e8f0;
}

/* ---------- Status colours (RAG) in the slate family (with the switch: every UX2 page) ----------
   Pill backgrounds are the palette's light tints; the text is the next shade darker in the same colour, so every
   pill reads at 4.5:1 or better on low-end screens. The brighter mid shades (--ux2s-*-mark) are for dots, bars and
   charts, where shapes need only 3:1. Draft grey, Published blue, In progress amber, Completed green, problems red. */
html:is(.ux2-frame, .ux2-ios) {
    --ux2k-green: #047857;
    --ux2k-green-bg: #ecfdf5;
    --ux2k-amber: #b45309;
    --ux2k-amber-bg: #fef3c7;
    --ux2k-red: #b91c1c;
    --ux2k-red-bg: #fff1f2;
    --ux2k-blue: #0369a1;
    --ux2k-blue-bg: #e0f2fe;
    --ux2k-grey: #475569;
    --ux2k-grey-bg: #f1f5f9;
    --ux2s-green-mark: #10b981;
    --ux2s-amber-mark: #f59e0b;
    --ux2s-red-mark: #ef4444;
    --ux2s-blue-mark: #0ea5e9;
    --ux2s-grey-mark: #94a3b8;
}

/* ---------- SKOAI colour: violet #6D28D9 (with the switch: every UX2 page) ----------
   AI buttons #7C3AED to #6D28D9 (white text 5.7:1 and up; the old #8B5CF6 start was 4.2:1); AI text and outlines
   #6D28D9 on white (7.1:1). Pink #DB2777 only in the thinking orbs (orbs.js) and a faint glow on an AI button's
   hover, never in buttons or text: it sits too close to the red of problems. */
html:is(.ux2-frame, .ux2-ios) {
    --ux2k-ai: #6d28d9;
    --ux2k-ai-dark: #5b21b6;
    --ux2k-ai-soft: #f3e8ff;
    --ux2k-ai-line: #ddd6fe;
    --ux2k-ai-grad: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

html:is(.ux2-frame, .ux2-ios) .ux2-btn-ai:not(:disabled):hover,
html:is(.ux2-frame, .ux2-ios) a.ux2-btn-ai:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(15 23 42 / .12), 0 8px 22px -6px rgb(219 39 119 / .35);
}

/* ---------- Loading skeletons in slate (datatables.css .ux2-skel and its shimmer) ---------- */
html:is(.ux2-frame, .ux2-ios) {
    --ux2-skel: #e2e8f0;
}

/* ---------- No sideways jump when a scrollbar appears (Windows and other always-visible scrollbars) ----------
   The page keeps room for the scrollbar, so content doesn't shift left when a list loads or a section opens.
   Bootstrap pads <body> by the scrollbar's width while a modal is open; with the room already kept, that padding
   would push the page left, so it's dropped. Mac's overlay scrollbars take no room either way. */
html.ux2-frame {
    scrollbar-gutter: stable;
}

html.ux2-frame body.modal-open,
html.ux2-frame body[style*="padding-right"] {
    padding-right: 0 !important;
}

/* ---------- Squircle corners where the browser has them (Chrome / Edge; others keep round corners) ----------
   A smoother, Apple-like curve on the larger shapes: the page sheet, cards, header keys, drawers and windows.
   The same radius looks a touch tighter as a squircle, so these go up by a few pixels. */
@supports (corner-shape: superellipse(2)) {
    html.ux2-frame body #kt_header {
        corner-shape: superellipse(1.6);
        border-radius: 22px 22px 0 0;
    }

    html.ux2-frame body #kt_content :is(.card, .ux2-panel, .qa-card, .qi-card, .kq-done-card, .ba-card, .bp-card,
        .bf-card, .bf-side, .bs-card, .bv-card, .ss-wrap-in, .cu-topic, .la-share-card),
    html.ux2-frame .modal-content,
    html.ux2-frame .ux2-drawer-panel {
        corner-shape: superellipse(1.6);
        border-radius: 16px;
    }

    html.ux2-tray #kt_header [data-ux2-quickjump] .btn.btn-icon {
        corner-shape: superellipse(1.6);
        border-radius: 14px !important;
    }
}

/* ---------- Sticky page headers on the white page ----------
   Analytics (Learning, Hiring, Content: hiring-analytics.css .ha-sticky) and Settings (settings-v2.css) paint their
   sticky filter bar in the page colour so content scrolls under it; on the white page that's white, not the old grey */
html.ux2-frame.ux2-white {
    --ha-page-bg: #fff;
    --sg-page-bg: #fff;
}

/* ---------- SKOAI icons in SKOAI's colours: pink #DB2777 into violet #6D28D9, as the thinking orbs ----------
   The header's SKOAI key (Diskover) and the sidebar's Studio link. On the minimized rail's brand tab the icon stays
   white, as every current-page icon there. */
html:is(.ux2-frame, .ux2-ios) #kt_header a[href$="/skoai/diskover"] i,
html:is(.ux2-frame, .ux2-ios) #kt_aside .menu-link[href$="/skoai/studio"] .menu-icon i {
    background: linear-gradient(135deg, #db2777 0%, #a21caf 45%, #6d28d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.ux2-tab body[data-kt-aside-minimize="on"] #kt_aside .menu-link.active[href$="/skoai/studio"] .menu-icon i {
    -webkit-text-fill-color: #fff;
}

/* The apps key's grid in the brand colour (the bell stays ink; the SKOAI key has SKOAI's gradient) */
html.ux2-tray body #kt_header [data-ux2-quickjump] .btn.btn-icon[aria-label="Apps and integrations"] :is(i, svg) {
    color: var(--sko-primary, #1e5f69) !important;
}