/* =============================================================================
   LNX FX — motion, colour, the hero header, list tools, notifications,
   dialogs, tour, session lock, sign-in scene and the animated SVGs.
   Pairs with erpJs/CommonHelperJs/lnx-fx/*.js. Loaded after lnx-skin.css.
   html.lnx-still (customizer "Motion" off) or prefers-reduced-motion stops
   every animation; html.lnx-plain (customizer "Colourful" off) drops the
   module colours back to the brand navy.
   ============================================================================= */

:root { --mod: var(--phoenix-primary); --mod-rgb: var(--phoenix-primary-rgb); --lnx-ease: cubic-bezier(.22, .9, .32, 1); }
/* the page header (hero, its tile, the crumb) always wears the theme's accent (owner, 2026-10-12: "page header also match
   with theme color"); "Colourful" now only colours the sidebar icons per part of the ERP */
html:root, html.lnx-plain { --mod: var(--phoenix-primary) !important; --mod-rgb: var(--phoenix-primary-rgb) !important; }

/* =============================== MOTION =============================== */
.lnx-enter { animation: lnx-rise .5s var(--lnx-ease) both; animation-delay: var(--lnx-d, 0ms); }
.lnx-enter .card, .lnx-enter.card, .lnx-enter .table-list { animation: lnx-rise .5s var(--lnx-ease) both; animation-delay: calc(var(--lnx-d, 0ms) + var(--lnx-d2, 0ms)); }
@keyframes lnx-rise { from { opacity: 0; transform: translateY(12px); } }
html.lnx-leaving .content { opacity: 0; transform: translateY(-6px); transition: opacity .17s ease, transform .17s ease; }
.content { transition: opacity .2s ease; }

.lnx-ripple-host { overflow: hidden; isolation: isolate; }
.lnx-ripple-wave { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0);
    animation: lnx-ripple .6s ease-out forwards; z-index: 0; }
@keyframes lnx-ripple { to { transform: scale(1); opacity: 0; } }

.btn, .card, .lnx-hero-btn, .lnx-tt-btn, .nav-link, .form-control, .form-select, .badge { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn:not(:disabled):active { transform: translateY(1px) scale(.985); }
.btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(var(--phoenix-primary-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
.table-hover > tbody > tr { transition: background-color .15s ease; }
.dropdown-menu.show { animation: lnx-pop-in .16s var(--lnx-ease); transform-origin: top right; }
@keyframes lnx-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Bootstrap modals: a soft rise and a blurred backdrop */
.modal.fade .modal-dialog { transform: translateY(18px) scale(.97); transition: transform .28s var(--lnx-ease), opacity .2s ease; }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .4; backdrop-filter: blur(3px); }

/* the page loader: our animated mark */
#phoenixLoader { backdrop-filter: blur(4px); background: rgba(245, 246, 249, .7) !important; }
html[data-bs-theme="dark"] #phoenixLoader { background: rgba(15, 17, 26, .7) !important; }
#phoenixLoader .lnx-svg-loader { width: 72px; height: 72px; }

/* =============================== COLOURFUL =============================== */
html:not(.lnx-plain) .navbar-vertical .nav-link[style*="--ic"] .nav-link-icon { color: var(--ic); }
html:not(.lnx-plain) .navbar-vertical .nav-link[style*="--ic"] .nav-link-icon svg { stroke: var(--ic); }
html:not(.lnx-plain) .navbar-vertical .nav-link.active[style*="--ic"] { background: color-mix(in srgb, var(--ic) 12%, transparent) !important; color: var(--ic) !important; }
html:not(.lnx-plain) .navbar-vertical .nav-link[style*="--ic"]:hover { background: color-mix(in srgb, var(--ic) 9%, transparent); }

/* a dark rail / topbar is a deep shade of the brand colour (customizer "Dark") */
html:not([data-bs-theme="dark"]) .navbar-vertical[data-navbar-appearance="darker"] {
    background: color-mix(in srgb, var(--phoenix-primary) 34%, #0c0b10) !important;
    --phoenix-navbar-vertical-link-color: color-mix(in srgb, var(--phoenix-primary) 22%, #fff);
    --phoenix-navbar-vertical-link-hover-color: #fff; --phoenix-navbar-vertical-link-hover-bg: rgba(255, 255, 255, .08);
}
html:not([data-bs-theme="dark"]) .navbar-vertical[data-navbar-appearance="darker"] .nav-link { color: color-mix(in srgb, var(--phoenix-primary) 22%, #fff); }
html:not([data-bs-theme="dark"]) .navbar-vertical[data-navbar-appearance="darker"] .navbar-vertical-label { color: rgba(255, 255, 255, .5); }
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] {
    background: color-mix(in srgb, var(--phoenix-primary) 40%, #0c0b10) !important;
}
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] .lnx-logo.is-dark { display: none; }
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] .lnx-logo.is-light { display: block !important; }
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] .nav-link,
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] .lnx-scope { color: rgba(255, 255, 255, .8); }
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] .lnx-scope-txt b { color: #fff; }

/* =============================== THE HERO =============================== */
.lnx-hero {
    position: relative; isolation: isolate; margin-left: 0 !important; margin-right: 0 !important;
    padding: 1.1rem 1.25rem !important; border-radius: 20px; margin-bottom: 1.25rem !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--mod-rgb), .16), transparent 55%),
        radial-gradient(90% 120% at 100% 100%, rgba(var(--mod-rgb), .10), transparent 60%),
        var(--phoenix-emphasis-bg, #fff);
    border: 1px solid rgba(var(--mod-rgb), .18);
    box-shadow: 0 18px 40px -30px rgba(var(--mod-rgb), .7), 0 2px 6px rgba(15, 23, 42, .03);
    row-gap: .75rem;
}
.lnx-hero > [class*="col"] { padding-left: 0; padding-right: 0; }
.lnx-hero-art {
    position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: .55;
    background-image: radial-gradient(rgba(var(--mod-rgb), .22) 1px, transparent 1.2px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(105deg, transparent 45%, #000 85%); mask-image: linear-gradient(105deg, transparent 45%, #000 85%);
}
.lnx-hero-art::after {
    content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    border: 1.5px dashed rgba(var(--mod-rgb), .35); animation: lnx-spin 60s linear infinite;
}
.lnx-hero .lnx-title-ico {
    width: 3.1rem; height: 3.1rem; border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--mod) 78%, #fff), var(--mod) 55%, color-mix(in srgb, var(--mod) 80%, #000));
    box-shadow: 0 10px 22px -10px rgba(var(--mod-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lnx-hero .lnx-title-ico svg { animation: lnx-wiggle 6s ease-in-out 1.2s infinite; }
@keyframes lnx-wiggle { 0%, 92%, 100% { transform: none; } 94% { transform: rotate(-12deg) scale(1.06); } 96% { transform: rotate(10deg) scale(1.06); } 98% { transform: rotate(-4deg); } }
.lnx-hero .lnx-title h2 { font-size: 1.4rem !important; }
.lnx-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.lnx-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 500;
    background: rgba(var(--mod-rgb), .08); color: color-mix(in srgb, var(--mod) 75%, #111); border: 1px solid rgba(var(--mod-rgb), .16); animation: lnx-rise .4s var(--lnx-ease) both .25s; }
html[data-bs-theme="dark"] .lnx-chip { color: color-mix(in srgb, var(--mod) 55%, #fff); }
.lnx-chip svg { width: 12px; height: 12px; }
.lnx-chip b { font-weight: 700; }
.lnx-chip.is-mod::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--mod); box-shadow: 0 0 0 3px rgba(var(--mod-rgb), .2); }
.lnx-hero .lnx-crumb.is-current { background: linear-gradient(145deg, color-mix(in srgb, var(--mod) 82%, #fff), var(--mod) 55%, color-mix(in srgb, var(--mod) 85%, #000)); box-shadow: 0 6px 14px -8px rgba(var(--mod-rgb), .9); }
.lnx-hero .lnx-crumb.is-home { color: var(--mod); }
.lnx-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.lnx-head-right-col { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.lnx-head-right-col > .lnx-head-right { flex-direction: row; align-items: center; }
.lnx-head-tools { display: flex; gap: .35rem; }
.lnx-hero-btn { position: relative; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 11px; border: 1px solid rgba(var(--mod-rgb), .18);
    background: var(--phoenix-emphasis-bg, #fff); color: var(--lnx-muted); cursor: pointer; }
.lnx-hero-btn svg { width: 16px; height: 16px; }
.lnx-hero-btn:hover { color: var(--mod); border-color: rgba(var(--mod-rgb), .45); transform: translateY(-1px); }
.lnx-hero-fav.is-on { color: #f59e0b; border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .1); }
.lnx-hero-fav.is-on svg { fill: #f59e0b; animation: lnx-star .5s var(--lnx-ease); }
@keyframes lnx-star { 40% { transform: scale(1.35) rotate(15deg); } }
.lnx-pulse { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--mod); }
.lnx-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--mod); animation: lnx-ping 1.6s ease-out infinite; }
@keyframes lnx-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
@media (max-width: 767.98px) { .lnx-head-right, .lnx-head-right-col { align-items: flex-start; } .lnx-hero { padding: .9rem !important; } }

/* favourites group in the rail */
.lnx-fav-group .nav-link-icon { color: #f59e0b !important; }

/* =============================== LIST TOOLS =============================== */
.lnx-tt { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.lnx-tt-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.lnx-tt-head > .lnx-tt { margin-left: auto; }
.lnx-tt-bar { display: flex; justify-content: flex-end; padding: .5rem .25rem; }
.tl-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.lnx-tt-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2.15rem; padding: 0 .7rem; border-radius: 10px; border: 0;
    background: var(--lnx-tool, #eff2f7); color: var(--lnx-muted, #878a99); font-size: .8rem; font-weight: 500; cursor: pointer; }
html[data-bs-theme="dark"] .lnx-tt-btn { background: var(--phoenix-secondary-bg); }
.lnx-tt-btn:hover, .lnx-tt-btn.is-on { background: rgba(var(--phoenix-primary-rgb), .12); color: var(--phoenix-primary); }
.lnx-tt-btn svg { width: 15px; height: 15px; }
.lnx-tt-count { min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: var(--phoenix-primary); color: #fff; font-size: .65rem; display: inline-grid; place-items: center; }
@media (max-width: 767.98px) { .lnx-tt-btn span { display: none; } }

th.lnx-sortable { cursor: pointer; user-select: none; position: relative; }
th.lnx-sortable:hover { color: var(--phoenix-primary) !important; }
th.lnx-sortable::after { content: "↕"; margin-left: .3rem; font-size: .75em; opacity: .28; }
th.lnx-sort-asc::after { content: "↑"; opacity: 1; color: var(--phoenix-primary); }
th.lnx-sort-desc::after { content: "↓"; opacity: 1; color: var(--phoenix-primary); }
.lnx-filter-row th { padding: .35rem .4rem !important; text-transform: none !important; letter-spacing: 0 !important; }
.lnx-filter-input { width: 100%; height: 30px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .03); padding: 0 .55rem; font-size: .78rem; color: inherit; animation: lnx-rise .25s ease both; }
.lnx-filter-input:focus { outline: 0; border-color: rgba(var(--phoenix-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--phoenix-primary-rgb), .12); background: var(--phoenix-emphasis-bg, #fff); }

.lnx-pop { position: absolute; z-index: 1080; min-width: 14rem; max-height: 60vh; overflow: auto; padding: .4rem; border-radius: 14px;
    background: var(--phoenix-emphasis-bg, #fff); border: 1px solid var(--lnx-line, #d1d5e4); box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .35);
    opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .15s ease, transform .15s var(--lnx-ease); font-size: .84rem; }
.lnx-pop.is-in { opacity: 1; transform: none; }
.lnx-pop-title { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lnx-muted); padding: .35rem .5rem; }
.lnx-pop-row { display: flex; align-items: center; gap: .25rem; padding: .2rem .25rem .2rem .5rem; border-radius: 9px; }
.lnx-pop-row span { flex: 1; }
.lnx-pop-row.is-on { background: rgba(var(--phoenix-primary-rgb), .07); }
.lnx-pop-row button { width: 1.8rem; height: 1.6rem; border-radius: 7px; border: 1px solid var(--lnx-border, #e9ebec); background: transparent; color: var(--lnx-muted); }
.lnx-pop-row button.is-on, .lnx-pop-row button:hover { background: var(--phoenix-primary); border-color: var(--phoenix-primary); color: #fff; }
.lnx-pop-check { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 9px; cursor: pointer; margin: 0; }
.lnx-pop-check:hover, .lnx-pop-item:hover { background: rgba(var(--phoenix-primary-rgb), .07); }
.lnx-pop-item { display: flex; width: 100%; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; }
.lnx-pop-item svg { color: var(--phoenix-primary); }
.lnx-pop-link { display: block; margin: .25rem .5rem; padding: 0; border: 0; background: none; color: var(--phoenix-primary); font-size: .8rem; }

/* empty state */
.lnx-empty-row > td { padding: 1.5rem .5rem !important; background: transparent !important; }
.lnx-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; animation: lnx-rise .45s var(--lnx-ease) both; }
.lnx-empty-text { color: var(--lnx-muted); font-size: .88rem; font-weight: 500; }
.lnx-svg-empty { width: 120px; height: 90px; }
.lnx-e-back { fill: rgba(var(--phoenix-primary-rgb), .18); }
.lnx-e-left { fill: rgba(var(--phoenix-primary-rgb), .32); }
.lnx-e-right { fill: rgba(var(--phoenix-primary-rgb), .22); }
.lnx-e-flap { fill: rgba(var(--phoenix-primary-rgb), .45); transform-box: fill-box; }
.lnx-a-flap-l { transform-origin: right top; animation: lnx-flap-l 3.2s ease-in-out infinite; }
.lnx-a-flap-r { transform-origin: left top; animation: lnx-flap-r 3.2s ease-in-out infinite; }
@keyframes lnx-flap-l { 50% { transform: rotate(-9deg); } }
@keyframes lnx-flap-r { 50% { transform: rotate(9deg); } }
.lnx-e-spark { fill: #f59e0b; transform-box: fill-box; transform-origin: center; }
.lnx-e-dot { fill: var(--phoenix-primary); opacity: .5; }
.lnx-a-shadow { fill: rgba(15, 23, 42, .08); animation: lnx-shadow 3.2s ease-in-out infinite; transform-origin: 80px 106px; }
.lnx-a-float { animation: lnx-float 3.2s ease-in-out infinite; }
@keyframes lnx-float { 50% { transform: translateY(-6px); } }
@keyframes lnx-shadow { 50% { transform: scaleX(.82); opacity: .6; } }
.lnx-a-twinkle { animation: lnx-twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lnx-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.lnx-a-rise { animation: lnx-bubble 3s ease-in infinite; }
@keyframes lnx-bubble { from { transform: translateY(14px); opacity: 0; } 40% { opacity: .7; } to { transform: translateY(-14px); opacity: 0; } }
.lnx-a-d2 { animation-delay: .8s; } .lnx-a-d3 { animation-delay: 1.4s; } .lnx-a-d4 { animation-delay: .35s; } .lnx-a-d5 { animation-delay: .55s; }

/* =============================== STATUS ICONS (draw themselves) =============================== */
.lnx-svg-status { width: 100%; height: 100%; overflow: visible; }
.lnx-svg-status.is-success { color: #10b981; } .lnx-svg-status.is-danger, .lnx-svg-status.is-error { color: #ef4444; }
.lnx-svg-status.is-warning { color: #f59e0b; } .lnx-svg-status.is-info, .lnx-svg-status.is-primary { color: var(--phoenix-primary); }
.lnx-svg-status.is-question { color: #8b5cf6; }
.lnx-a-halo { opacity: .12; transform-origin: 27px 27px; animation: lnx-halo .5s var(--lnx-ease) both; }
@keyframes lnx-halo { from { transform: scale(.4); opacity: 0; } }
.lnx-a-ring { stroke-dasharray: 140; stroke-dashoffset: 140; transform: rotate(-90deg); transform-origin: 27px 27px; animation: lnx-draw .55s ease-out forwards; }
.lnx-a-draw { stroke-dasharray: 48; stroke-dashoffset: 48; animation: lnx-draw .4s ease-out forwards; }
.lnx-a-pop { transform-origin: center; transform-box: fill-box; transform: scale(0); animation: lnx-popdot .3s var(--lnx-ease) forwards; }
@keyframes lnx-draw { to { stroke-dashoffset: 0; } }
@keyframes lnx-popdot { to { transform: scale(1); } }

/* =============================== NOTIFICATIONS: the island ===============================
   A graphite capsule that grows out of the top centre of the screen (under the top bar).
   The icon sits in a ring that drains while the note waits; the newest is in front, older
   ones tuck in behind and peek out below; pointing at them spreads the stack and pauses
   every timer. Same in light and dark (it reads on both). lnx-notify.js builds it. */
.lnx-isles {
    position: fixed; z-index: 1095; left: 50%; top: calc(var(--phoenix-navbar-top-height, 4rem) + 14px); transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 !important; margin: 0; pointer-events: none;
}
body.lx .lnx-isles, body:not(:has(.navbar-top)) .lnx-isles { top: 18px; }
.lnx-isle {
    --c: #6366f1; --c-rgb: 99, 102, 241;
    position: relative; pointer-events: auto; box-sizing: border-box; max-width: 100%; min-width: min(320px, 100%);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
    padding: .5rem .55rem .5rem .5rem; border-radius: 26px;
    background: linear-gradient(180deg, rgba(30, 34, 48, .96), rgba(17, 20, 30, .96)); color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 22px 44px -18px rgba(8, 10, 20, .6), 0 2px 6px rgba(8, 10, 20, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
    font-family: var(--lnx-font, "Jost", sans-serif);
    opacity: 0; transform: translateY(-14px) scale(.7); clip-path: inset(0 22% round 26px);
    transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.25, .35, 1), clip-path .5s cubic-bezier(.2, 1, .3, 1);
}
html[data-bs-theme="dark"] .lnx-isle { background: linear-gradient(180deg, rgba(44, 50, 68, .97), rgba(30, 34, 48, .97)); border-color: rgba(255, 255, 255, .12); }
.lnx-isle.is-in { opacity: 1; transform: none; clip-path: inset(0 0 round 26px); }
.lnx-isle.is-out { opacity: 0; transform: translateY(-10px) scale(.9); clip-path: inset(0 18% round 26px); transition-duration: .22s; }
.lnx-isle.is-success { --c: #34d399; --c-rgb: 52, 211, 153; }
.lnx-isle.is-danger { --c: #f87171; --c-rgb: 248, 113, 113; }
.lnx-isle.is-warning { --c: #fbbf24; --c-rgb: 251, 191, 36; }
.lnx-isle.is-info, .lnx-isle.is-primary { --c: #60a5fa; --c-rgb: 96, 165, 250; }
/* a soft glow of the kind's colour on the left */
.lnx-isle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(60% 140% at 0% 50%, rgba(var(--c-rgb), .2), transparent 60%); }

/* the icon in its draining ring */
.lnx-isle-ico { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.lnx-isle-ico > svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.lnx-isle-ico .ring-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 2.5; }
.lnx-isle-ico .ring-bar { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 0; }
.lnx-isle.is-timed .ring-bar { animation: lnx-isle-ring var(--t, 4s) linear forwards; }
.lnx-isle.is-paused .ring-bar { animation-play-state: paused; }
@keyframes lnx-isle-ring { to { stroke-dashoffset: 113.1; } }
.lnx-isle-ico > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--c-rgb), .16); color: var(--c); }
.lnx-isle-ico > i svg { width: 15px; height: 15px; }
.lnx-isle-ico > i svg path, .lnx-isle-ico > i svg line, .lnx-isle-ico > i svg polyline, .lnx-isle-ico > i svg circle { stroke-dasharray: 40; stroke-dashoffset: 40; animation: lnx-isle-draw .45s ease-out .2s forwards; }
@keyframes lnx-isle-draw { to { stroke-dashoffset: 0; } }
.lnx-isle.is-danger .lnx-isle-ico > i { animation: lnx-isle-shake .45s ease .25s; }
@keyframes lnx-isle-shake { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }

.lnx-isle-body { min-width: 0; position: relative; padding: .05rem 0; }
.lnx-isle-title { font-weight: 600; font-size: .84rem; line-height: 1.25; color: #fff; display: flex; align-items: center; gap: .45rem; }
.lnx-isle-title small { font-weight: 500; font-size: .66rem; color: rgba(255, 255, 255, .45); }
.lnx-isle-msg { font-size: .79rem; line-height: 1.4; color: rgba(255, 255, 255, .72); margin-top: .1rem; word-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lnx-isle-msg b, .lnx-isle-msg strong { color: #fff; }
.lnx-isle-side { position: relative; display: flex; align-items: center; gap: .35rem; }
.lnx-isle-side button { border: 0; font: 600 .74rem/1 var(--lnx-font, "Jost", sans-serif); cursor: pointer; transition: background .15s, color .15s; }
.lnx-isle-act { height: 1.85rem; padding: 0 .8rem; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff; white-space: nowrap; }
.lnx-isle-act:hover { background: var(--c); color: #11141e; }
.lnx-isle-x { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); display: grid; place-items: center; }
.lnx-isle-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lnx-isle-x svg { width: 13px; height: 13px; }
.lnx-isle.is-clickable { cursor: pointer; }

/* the stack: older notes tuck in behind and peek out below */
.lnx-isle:not(.is-behind) { z-index: 20; }
.lnx-isles:not(.is-open) .lnx-isle.is-behind {
    position: absolute; top: 0; left: 50%; width: var(--front-w, 100%); height: var(--front-h, 56px); min-width: 0; z-index: calc(10 - var(--i));
    transform: translateX(-50%) translateY(calc(var(--i) * 8px)) scale(calc(1 - var(--i) * .05)); opacity: calc(1 - var(--i) * .28);
}
.lnx-isles:not(.is-open) .lnx-isle.is-behind > * { visibility: hidden; }
.lnx-isle.is-hidden { display: none; }
.lnx-isles.is-open .lnx-isle.is-hidden { display: grid; }
.lnx-isles[data-more]:not([data-more=""])::after {
    content: attr(data-more); pointer-events: auto; font-size: .68rem; font-weight: 600; color: rgba(255, 255, 255, .85);
    background: rgba(17, 20, 30, .85); padding: .15rem .6rem; border-radius: 99px; margin-top: 10px;
}
.lnx-isles.is-open[data-more]::after { display: none; }
@media (prefers-reduced-motion: reduce) { .lnx-isle { transition: opacity .2s; transform: none; clip-path: none; } }
html.lnx-still .lnx-isle { transition: opacity .2s; transform: none; clip-path: none; }
@media (max-width: 575.98px) { .lnx-isles { top: calc(var(--phoenix-navbar-top-height, 4rem) + 8px); } .lnx-isle { border-radius: 20px; } }

/* =============================== DIALOGS (SweetAlert) =============================== */
.swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .42) !important; backdrop-filter: blur(3px); }
.lnx-swal { border-radius: 22px !important; padding: 1.75rem 1.5rem 1.4rem !important; width: min(30rem, 92vw) !important;
    box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .5) !important; background: var(--phoenix-emphasis-bg, #fff) !important; color: var(--phoenix-body-color) !important; }
.lnx-swal-icon.swal2-icon { border: 0 !important; width: 74px !important; height: 74px !important; margin: .25rem auto .75rem !important; }
.lnx-swal-icon .swal2-icon-content { width: 100%; height: 100%; }
.lnx-swal-title { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--phoenix-emphasis-color) !important; padding: 0 .5rem !important; }
.lnx-swal-text { font-size: .9rem !important; color: var(--lnx-muted) !important; }
.lnx-swal-actions { gap: .6rem; margin-top: 1.2rem !important; }
.lnx-swal-actions .btn { min-width: 7rem; border-radius: 12px; padding: .55rem 1.1rem; }
.lnx-swal .swal2-input, .lnx-swal .form-control { margin: 1rem auto 0 !important; width: 100% !important; max-width: none; box-shadow: none !important; }
.lnx-swal-validation { background: rgba(239, 68, 68, .08) !important; color: #b4361c !important; border-radius: 10px; font-size: .82rem !important; }
.lnx-swal-in { animation: lnx-swal-in .38s var(--lnx-ease) both !important; }
.lnx-swal-out { animation: lnx-swal-out .18s ease-in both !important; }
@keyframes lnx-swal-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes lnx-swal-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.btn-danger { --phoenix-btn-bg: #ef4444; --phoenix-btn-border-color: #ef4444; --phoenix-btn-hover-bg: #dc2626; --phoenix-btn-hover-border-color: #dc2626;
    box-shadow: 0 6px 14px -8px rgba(239, 68, 68, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }

/* =============================== TOUR & ABOUT =============================== */
.lnx-tour { position: fixed; inset: 0; z-index: 1100; }
.lnx-tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .58), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 30px 6px rgba(var(--mod-rgb), .55);
    transition: top .35s var(--lnx-ease), left .35s var(--lnx-ease), width .35s var(--lnx-ease), height .35s var(--lnx-ease); pointer-events: none; }
.lnx-tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); padding: 1rem 1.1rem .85rem; border-radius: 18px; background: var(--phoenix-emphasis-bg, #fff);
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .55); border-top: 4px solid var(--mod); transition: top .35s var(--lnx-ease), left .35s var(--lnx-ease); }
.lnx-tour-card.is-in { animation: lnx-rise .3s var(--lnx-ease); }
.lnx-tour-step { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mod); }
.lnx-tour-title { margin: .2rem 0 .3rem; font-weight: 700; font-size: 1.02rem; }
.lnx-tour-text { margin: 0 0 .75rem; color: var(--lnx-muted); font-size: .86rem; line-height: 1.45; }
.lnx-tour-foot { display: flex; align-items: center; gap: .35rem; }
.lnx-tour-dots { display: flex; gap: 4px; margin-right: auto; }
.lnx-tour-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(var(--mod-rgb), .22); transition: width .25s var(--lnx-ease), background .25s; }
.lnx-tour-dots i.is-done { background: rgba(var(--mod-rgb), .55); }
.lnx-tour-dots i.is-on { width: 18px; background: var(--mod); }
html.lnx-touring { overflow: hidden; }

.lnx-about { position: absolute; z-index: 1085; width: min(330px, calc(100vw - 24px)); padding: 1rem; border-radius: 18px; background: var(--phoenix-emphasis-bg, #fff);
    border: 1px solid rgba(var(--mod-rgb), .2); box-shadow: 0 24px 50px -20px rgba(15, 23, 42, .45); opacity: 0; transform: translateY(-6px) scale(.98);
    transition: opacity .18s ease, transform .2s var(--lnx-ease); font-size: .86rem; }
.lnx-about.is-in { opacity: 1; transform: none; }
.lnx-about-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; }
.lnx-about-head > svg { width: 38px; height: 38px; flex: none; color: var(--mod); }
.lnx-about-head small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mod); }
.lnx-about-head b { font-size: 1rem; }
.lnx-about p { color: var(--phoenix-body-color); margin-bottom: .5rem; line-height: 1.45; }
.lnx-about ul { padding-left: 1.1rem; color: var(--lnx-muted); margin-bottom: .6rem; }
.lnx-about-keys { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; font-size: .74rem; color: var(--lnx-muted); }
kbd { padding: .1rem .35rem; border-radius: 5px; font-size: .7rem; background: var(--phoenix-secondary-bg); color: var(--phoenix-emphasis-color); border: 1px solid var(--lnx-border, #e9ebec); box-shadow: 0 1px 0 var(--lnx-border, #e9ebec); }

/* =============================== SESSION LOCK =============================== */
html.lnx-locked body > :not(.lnx-lock):not(.lnx-isles):not(script) { filter: blur(6px) grayscale(.3); pointer-events: none; user-select: none; }
.lnx-lock { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: rgba(15, 23, 42, .45); animation: lnx-fade .25s ease; }
@keyframes lnx-fade { from { opacity: 0; } }
.lnx-lock-card { width: min(400px, calc(100vw - 32px)); text-align: center; padding: 1.75rem 1.5rem 1.4rem; border-radius: 24px; background: var(--phoenix-emphasis-bg, #fff);
    box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .6); animation: lnx-swal-in .4s var(--lnx-ease) both; }
.lnx-lock-ico { width: 74px; height: 74px; margin: 0 auto .75rem; }
.lnx-lock-card h4 { font-weight: 700; margin-bottom: .4rem; }
.lnx-lock-card p { color: var(--lnx-muted); font-size: .9rem; }
.lnx-lock-count { position: relative; width: 70px; height: 70px; margin: .25rem auto 1rem; }
.lnx-lock-count svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lnx-lock-count circle { fill: none; stroke: rgba(var(--phoenix-primary-rgb), .15); stroke-width: 4; }
.lnx-lock-count .lnx-lock-arc { stroke: var(--phoenix-primary); stroke-linecap: round; stroke-dasharray: 120; animation: lnx-drain-arc linear forwards; }
@keyframes lnx-drain-arc { to { stroke-dashoffset: 120; } }
.lnx-lock-count b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; }
.lnx-lock-actions { display: flex; gap: .6rem; justify-content: center; }

/* =============================== LOADER =============================== */
.lnx-svg-loader { overflow: visible; }
.lnx-l-track { fill: none; stroke: rgba(var(--phoenix-primary-rgb), .12); stroke-width: 4; }
.lnx-l-arc { fill: none; stroke: var(--phoenix-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 40 124; transform-origin: 32px 32px; animation: lnx-spin 1s linear infinite; }
.lnx-l-bar { fill: var(--phoenix-primary); transform-box: fill-box; transform-origin: bottom; animation: lnx-bar 1s ease-in-out infinite; }
.lnx-a-b2 { animation-delay: .15s; } .lnx-a-b3 { animation-delay: .3s; }
@keyframes lnx-bar { 50% { transform: scaleY(.45); opacity: .6; } }
.lnx-l-dot { fill: #f26b4a; transform-origin: 32px 32px; animation: lnx-spin 1.6s linear infinite reverse; }
@keyframes lnx-spin { to { transform: rotate(360deg); } }

/* the sign-in page has its own sheet: customcss/lnx-login.css */

/* =============================== CUSTOMIZER: colour themes =============================== */
.lnx-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.lnx-preset { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .3rem; border: 1px solid transparent; border-radius: 12px; background: transparent; }
.lnx-preset:hover { background: rgba(var(--phoenix-primary-rgb), .06); }
.lnx-preset.active { border-color: var(--phoenix-primary); background: rgba(var(--phoenix-primary-rgb), .08); }
.lnx-preset small { font-size: .68rem; color: var(--lnx-muted); }
.lnx-preset-tile { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 30% 1fr; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08); background: #f5f6f9; }
.lnx-preset-tile i:nth-child(1) { grid-row: 1 / 3; background: var(--r); border-right: 1px solid rgba(0, 0, 0, .06); }
.lnx-preset-tile i:nth-child(2) { background: #fff; }
.lnx-preset-tile i:nth-child(3) { margin: 18% 14%; border-radius: 3px; background: var(--a); }

/* =============================== STILL =============================== */
html.lnx-still *, html.lnx-still *::before, html.lnx-still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
/* Drawing portal 2026-10-19 (owner: "not able to find any smoothness"): Windows' "Animation effects" off = reduce motion, and this
   rule froze every animation and transition on every page. Now only the endless, decorative loops stop here; the rest keeps
   short fades without movement (AppCss/dp-look.css, "reduce motion"). Motion switched off in the customizer still stops all. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* a hero that lives inside a list card is that card's header band, not a card within a card */
.table-list > .lnx-hero, .card-body > .lnx-hero:first-child {
    margin: -1rem -1.25rem 1rem !important; border-radius: 18px 18px 0 0; border: 0; border-bottom: 1px solid rgba(var(--mod-rgb), .14); box-shadow: none;
}
.card-body > .lnx-hero:first-child { margin: -1rem -1rem 1rem !important; }

/* =====================================================================
   AIRA LOOK v2 — our own take (not a copy): soft tinted surfaces instead
   of stark white, a compact command header, the action dock, the
   condensed sticky bar and the command palette.
   ===================================================================== */

/* ---------- surfaces: a cool, faintly tinted palette ---------- */
html:not([data-bs-theme="dark"]) {
    --phoenix-body-bg: #eef1f8;
    --phoenix-body-bg-rgb: 238, 241, 248;
    --phoenix-emphasis-bg: #fbfcff;
    --phoenix-card-bg: #fbfcff;
    --phoenix-card-cap-bg: #f4f6fc;
    --lnx-card-head: #f4f6fc;
    --lnx-line: #dde2f0;
    --lnx-border: #e6e9f3;
    --phoenix-navbar-top-bg-color: rgba(246, 248, 253, .82);
    --phoenix-navbar-vertical-bg-color: #f4f6fc;
}
html:not([data-bs-theme="dark"]) body { background: radial-gradient(1200px 600px at 100% -10%, rgba(var(--mod-rgb), .07), transparent 60%), #eef1f8; background-attachment: fixed; }
html:not([data-bs-theme="dark"]) .card, html:not([data-bs-theme="dark"]) .table-list { background: #fbfcff; border-color: #dde2f0; }
html:not([data-bs-theme="dark"]) .navbar-top:not([data-navbar-appearance="darker"]) { background: rgba(246, 248, 253, .82) !important; backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(var(--phoenix-primary-rgb), .08) !important; }
html:not([data-bs-theme="dark"]) .navbar-vertical:not([data-navbar-appearance="darker"]) { background: #f4f6fc !important; box-shadow: inset -1px 0 0 rgba(var(--phoenix-primary-rgb), .08); }
html:not([data-bs-theme="dark"]) .navbar-top .search-box .search-input { background: rgba(var(--phoenix-primary-rgb), .05); border-color: rgba(var(--phoenix-primary-rgb), .12); }
html:not([data-bs-theme="dark"]) .form-control, html:not([data-bs-theme="dark"]) .form-select { background-color: #fdfdff; }
html:not([data-bs-theme="dark"]) .table > tbody > tr > * { background-color: transparent; }
html:not([data-bs-theme="dark"]) .lnx-scope { background: rgba(var(--phoenix-primary-rgb), .05); }
html:not([data-bs-theme="dark"]) .lnx-hero-btn { background: rgba(255, 255, 255, .6); }

/* ---------- the hero, compact: title left, crumbs + tools right, one line ---------- */
.lnx-hero {
    align-items: center !important; padding: 1rem 1.25rem !important;
    background:
        radial-gradient(70% 140% at 0% 0%, rgba(var(--mod-rgb), .22), transparent 60%),
        radial-gradient(60% 120% at 100% 0%, rgba(var(--mod-rgb), .10), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)) !important;
    backdrop-filter: blur(6px);
}
html[data-bs-theme="dark"] .lnx-hero { background: radial-gradient(70% 140% at 0% 0%, rgba(var(--mod-rgb), .25), transparent 60%), var(--phoenix-emphasis-bg) !important; }
.lnx-head-right-col { display: flex; flex-direction: column !important; align-items: flex-end !important; justify-content: center; gap: .6rem; align-self: center; }
.lnx-head-right { display: flex; flex-direction: row !important; align-items: center !important; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.lnx-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.lnx-hero .lnx-title h2 + p, .lnx-hero .lnx-title h2 + h5 { margin-top: .15rem !important; }
.lnx-chip[data-chip="state"] { background: rgba(var(--mod-rgb), .1); }
.lnx-chip[data-chip="state"].is-dirty { background: rgba(245, 158, 11, .14); color: #8a5a00; border-color: rgba(245, 158, 11, .3); }
.lnx-chip[data-chip="state"].is-dirty::after { content: " \00b7  unsaved"; font-weight: 600; }
@media (max-width: 767.98px) { .lnx-head-right, .lnx-head-right-col { align-items: flex-start !important; justify-content: flex-start; } }

/* ---------- the action dock: see lnx-flow.css (the fixed action bar) ---------- */

/* ---------- the condensed bar ---------- */
.lnx-mini {
    position: fixed; z-index: 1019; top: calc(var(--phoenix-navbar-top-height, 4rem) + 10px); display: flex; align-items: center; gap: .7rem;
    padding: .45rem .55rem .45rem .5rem; border-radius: 16px; background: rgba(251, 252, 255, .85); backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--mod-rgb), .18); box-shadow: 0 14px 30px -18px rgba(var(--mod-rgb), .6);
    transform: translateY(-14px); opacity: 0; pointer-events: none; transition: transform .3s var(--lnx-ease), opacity .2s ease;
}
html[data-bs-theme="dark"] .lnx-mini { background: rgba(20, 24, 36, .85); }
.lnx-mini.is-in { transform: none; opacity: 1; pointer-events: auto; }
.lnx-mini-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--mod) 78%, #fff), var(--mod)); }
.lnx-mini-ico svg { width: 15px; height: 15px; }
.lnx-mini b { font-size: .95rem; }
.lnx-mini-crumb { font-size: .74rem; color: var(--lnx-muted); padding: .1rem .5rem; border-radius: 999px; background: rgba(var(--mod-rgb), .08); }
.lnx-mini-top { margin-left: auto; width: 2rem; height: 2rem; border: 0; border-radius: 10px; background: rgba(var(--mod-rgb), .08); color: var(--mod); display: inline-grid; place-items: center; }
.lnx-mini-top svg { width: 15px; height: 15px; }

/* ---------- the command palette ---------- */
.lnx-cmd { position: fixed; inset: 0; z-index: 1110; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s ease; }
.lnx-cmd.is-in { opacity: 1; }
.lnx-cmd-box { width: min(640px, calc(100vw - 24px)); border-radius: 20px; overflow: hidden; background: var(--phoenix-emphasis-bg, #fff);
    box-shadow: 0 40px 90px -30px rgba(15, 23, 42, .6); border: 1px solid rgba(var(--phoenix-primary-rgb), .15); transform: translateY(-10px) scale(.98); transition: transform .25s var(--lnx-ease); }
.lnx-cmd.is-in .lnx-cmd-box { transform: none; }
.lnx-cmd-input { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--lnx-border); color: var(--lnx-muted); }
.lnx-cmd-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.05rem; color: var(--phoenix-emphasis-color); }
.lnx-cmd-list { max-height: 52vh; overflow-y: auto; padding: .4rem; }
.lnx-cmd-group { padding: .55rem .7rem .25rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lnx-muted); }
.lnx-cmd-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 12px; cursor: pointer; }
.lnx-cmd-item.is-on { background: rgba(var(--phoenix-primary-rgb), .09); }
.lnx-cmd-item.is-on .lnx-cmd-ico { background: var(--phoenix-primary); color: #fff; }
.lnx-cmd-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 10px; background: rgba(var(--phoenix-primary-rgb), .08); color: var(--phoenix-primary); transition: background .15s, color .15s; }
.lnx-cmd-text { flex: 1; min-width: 0; }
.lnx-cmd-text b { display: block; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnx-cmd-text small { display: block; font-size: .74rem; color: var(--lnx-muted); }
.lnx-cmd-text mark { padding: 0; background: rgba(245, 158, 11, .28); color: inherit; border-radius: 3px; }
.lnx-cmd-kind { font-size: .66rem; font-weight: 600; color: var(--lnx-muted); padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--lnx-border); }
.lnx-cmd-none { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.5rem; color: var(--lnx-muted); }
.lnx-cmd-foot { display: flex; gap: 1.1rem; padding: .55rem 1rem; border-top: 1px solid var(--lnx-border); font-size: .72rem; color: var(--lnx-muted); background: rgba(var(--phoenix-primary-rgb), .03); }
.lnx-cmd-foot kbd { margin-right: .2rem; }

/* sidebar icons draw in the icon box's own text colour: on the dark rail that is the light tint of the part's hue
   (the dark hue itself vanished there), on the active item white over the filled hue */
html:not(.lnx-plain) .navbar-vertical .nav-link[style*="--ic"] .nav-link-icon svg { stroke: currentColor !important; }

/* the active menu item wears the theme accent (like the page header), whatever part of the ERP it is in */
.navbar-vertical .nav-link.active .nav-link-icon, html:not(.lnx-plain) .navbar-vertical .nav-link.active[style*="--ic"] .nav-link-icon {
    background: var(--phoenix-primary) !important; color: #fff !important; box-shadow: 0 3px 8px -3px rgba(var(--phoenix-primary-rgb), .7); }
/* every menu icon sits in the same 26px box, so the active one's filled tile has air round the glyph (it hugged it
   and read as a cut-off blue block) and the text never moves */
.navbar-vertical #navbarVerticalNav .nav-link .nav-link-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; min-width: 26px; border-radius: 8px; margin-right: .5rem; }
.navbar-vertical .nav-link.active .nav-link-icon svg { width: 16px; height: 16px; }
/* the active item's text: white only on the dark rail; on the light (default) rail it was white on a pale tint, unreadable */
html:not(.lnx-plain) .navbar-vertical[data-navbar-appearance="darker"] .nav-link.active[style*="--ic"],
html[data-bs-theme="dark"]:not(.lnx-plain) .navbar-vertical .nav-link.active[style*="--ic"] { background: rgba(var(--phoenix-primary-rgb), .14) !important; color: #fff !important; }
html:not([data-bs-theme="dark"]):not(.lnx-plain) .navbar-vertical:not([data-navbar-appearance="darker"]) .nav-link.active[style*="--ic"],
html:not([data-bs-theme="dark"]):not(.lnx-plain) .navbar-vertical:not([data-navbar-appearance="darker"]) .nav-link.active[style*="--ic"] .nav-link-text {
    background-color: rgba(var(--phoenix-primary-rgb), .1) !important; color: var(--phoenix-primary) !important; font-weight: 700; }
html:not([data-bs-theme="dark"]):not(.lnx-plain) .navbar-vertical:not([data-navbar-appearance="darker"]) .nav-link.active[style*="--ic"] .nav-link-text { background-color: transparent !important; }

/* the folded rail opening on hover lies OVER the page: give it an edge and a shadow so it reads as a panel, not as part of the page */
@media (min-width: 992px) {
    html.navbar-vertical-collapsed .navbar-vertical:hover {
        box-shadow: 14px 0 34px -14px rgba(15, 23, 42, .32), 1px 0 0 var(--phoenix-border-color) !important; }
    html:not([data-bs-theme="dark"]).navbar-vertical-collapsed .navbar-vertical:not([data-navbar-appearance="darker"]):hover { background: var(--phoenix-emphasis-bg, #fff) !important; }
}

/* work-queue counts on the dark rail: a light pill that reads on any rail colour; the active item's is white on accent */
.navbar-vertical .aira-nav-count { color: #fff !important; background: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.navbar-vertical .nav-link.active .aira-nav-count { color: var(--phoenix-primary) !important; background: #fff !important; box-shadow: none; }
html:not([data-bs-theme="dark"]) .navbar-vertical:not([data-navbar-appearance="darker"]) .aira-nav-count { color: var(--phoenix-primary) !important; background: rgba(var(--phoenix-primary-rgb), .12) !important; box-shadow: none; }

/* the division switcher on a dark header: light icon tile and a light FY tag (dark-on-blue vanished) */
.navbar-top[data-navbar-appearance="darker"] .lnx-scope { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .16) !important; color: rgba(255, 255, 255, .85); }
/* dark theme: the division picker sits on the page colour, a hairline edge - not the white frame it had */
html[data-bs-theme="dark"] .navbar-top .lnx-scope { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .12) !important; }
.navbar-top[data-navbar-appearance="darker"] .lnx-scope-ico { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.navbar-top[data-navbar-appearance="darker"] .lnx-scope-txt small { color: rgba(255, 255, 255, .7) !important; }
.navbar-top[data-navbar-appearance="darker"] .lnx-scope-txt b { color: #fff !important; }
.navbar-top[data-navbar-appearance="darker"] .aira-fy-tag { color: #fff !important; background: rgba(255, 255, 255, .2) !important; }
.navbar-top[data-navbar-appearance="darker"] .lnx-scope.aira-fy-off .aira-fy-tag { background: #d97706 !important; }
.navbar-top[data-navbar-appearance="darker"] .lnx-scope-caret { color: rgba(255, 255, 255, .75); }

/* header bell count: sits on the bell's shoulder inside the bar (top-0 + translate-middle pushed it half off the top),
   ringed in the header colour so it reads as a dot over the bell */
.navbar-top .nav-link.position-relative > .badge.position-absolute { top: 8px !important; left: auto !important; right: -2px; transform: none !important;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: .62rem; line-height: 17px; box-shadow: 0 0 0 2px var(--phoenix-navbar-top-bg, #0b3a6e); }

/* header tools on a dark bar: one set of equal 36px rounded tiles (theme, studio, bell), same see-through fill and
   white icons, even gaps; the avatar the same size */
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons { gap: .4rem; align-items: center; }
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons > li > .nav-link,
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons .theme-control-toggle-label {
    display: inline-grid !important; place-items: center; width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important;
    border-radius: 10px !important; background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons > li > .nav-link:hover,
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons .theme-control-toggle-label:hover { background: rgba(255, 255, 255, .2) !important; }
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons > li > .nav-link svg,
.navbar-top[data-navbar-appearance="darker"] .navbar-nav-icons .theme-control-toggle-label svg { width: 17px; height: 17px; }
.navbar-top[data-navbar-appearance="darker"] .theme-control-toggle { padding: 0 !important; }
.navbar-top[data-navbar-appearance="darker"] .theme-control-toggle-light svg { color: #fbbf24; stroke: #fbbf24; }
/* the user tile: no box, the avatar itself is the 36px button */
.navbar-top[data-navbar-appearance="darker"] #navbarDropdownUser { background: none !important; box-shadow: none !important; width: auto !important; }
.navbar-top[data-navbar-appearance="darker"] #navbarDropdownUser .aira-avatar { width: 36px; height: 36px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
/* the theme toggle is two labels (sun / moon) of which Phoenix shows one: keep its hiding rule (the tile rule above
   forced both visible) */
.navbar-top .theme-control-toggle .theme-control-toggle-input:checked ~ .theme-control-toggle-dark,
.navbar-top .theme-control-toggle .theme-control-toggle-input:not(:checked) ~ .theme-control-toggle-light { display: none !important; }
/* division switcher: the FY tag never wraps */
.lnx-scope-txt small, .aira-fy-tag { white-space: nowrap; }