/* =============================================================================
   LNX SKIN — Aira's Phoenix UI dressed as LNX ERP.

   Phoenix stays underneath (its classes, grids, JS); this file only changes
   how it looks, using the values measured on LNX ERP itself (classic theme,
   navy palette): Jost type, a #f5f6f9 page, white 18px cards with a soft
   navy shadow, 10px controls, uppercase table heads, pill status chips,
   a white topbar and a white icon rail.

   Loaded after theme.min.css / user.min.css / erpcustom.css and BEFORE the
   per-user accent style (app-theme.js), so a user's own accent still wins.
   Page-head structure (icon tile, breadcrumb pill) is lnx-skin.js.
   ============================================================================= */

/* ---------- tokens ---------- */
/* Dark theme: the accent is lifted a quarter towards white, so it reads both as TEXT on the dark page (links, active tabs,
   chips, breadcrumbs: the deep indigo was 2.6) and as a FILL under white text (counts, badges, New); .btn-primary keeps
   the real accent. A user's own accent does the same (_Layout AiraTheme.paint). */
html[data-bs-theme="dark"] {
    --phoenix-primary: #6f7dc8;
    --phoenix-primary-rgb: 111, 125, 200;
    --phoenix-link-color: #8592d2;
    --phoenix-link-color-rgb: 111, 125, 200;
    --phoenix-link-hover-color: #b7bee4;
    --phoenix-navbar-vertical-link-active-color: #8592d2;
    --phoenix-primary-text-emphasis: #b7bee4;
}
html[data-bs-theme="dark"] .btn-primary { --phoenix-btn-bg: #3f51b5; --phoenix-btn-border-color: #3f51b5; --phoenix-btn-hover-bg: #4f61c5; --phoenix-btn-hover-border-color: #4f61c5;
    --phoenix-btn-active-bg: #34449c; --phoenix-btn-disabled-bg: #3f51b5; --phoenix-btn-color: #fff; --phoenix-btn-hover-color: #fff; }
/* the notification count: white on Phoenix's light dark-mode red read at 2.5 */
html[data-bs-theme="dark"] .navbar-top .badge.bg-danger { background-color: #d93a2b !important; }

:root {
    --lnx-primary: #3f51b5;
    --lnx-primary-rgb: 63, 81, 181;
    --lnx-ink: #313f8d;              /* table heads, rail links */
    --lnx-link: #1e3a8a;
    --lnx-line: #d1d5e4;             /* card hairline, table head rule */
    --lnx-border: #e9ebec;           /* row rules */
    --lnx-input: #c0c7d6;
    --lnx-muted: #878a99;
    --lnx-heading: #495057;
    --lnx-readonly: #e6eaf4;
    --lnx-soft: #f1f4f7;
    --lnx-tool: #eff2f7;
    --lnx-card-head: #f5f6fb;
    --lnx-radius: 10px;
    --lnx-card-radius: 18px;
    --lnx-font: "Jost", "Nunito Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Phoenix tokens that follow LNX in both themes */
    --phoenix-primary: var(--lnx-primary);
    --phoenix-primary-rgb: var(--lnx-primary-rgb);
    --phoenix-font-sans-serif: var(--lnx-font);
    --phoenix-body-font-family: var(--lnx-font);
    --phoenix-border-radius: var(--lnx-radius);
    --phoenix-border-radius-sm: 8px;
    --phoenix-border-radius-lg: 14px;
    --phoenix-navbar-vertical-link-active-color: var(--lnx-primary);
}

/* light theme only: page, rails, text */
html:not([data-bs-theme="dark"]) {
    --phoenix-body-bg: #f5f6f9;
    --phoenix-body-bg-rgb: 245, 246, 249;
    --phoenix-body-color: #212529;
    --phoenix-link-color: var(--lnx-link);
    --phoenix-link-color-rgb: 30, 58, 138;
    --phoenix-link-hover-color: #1e2f6b;
    --phoenix-primary-text-emphasis: #1e3a8a;
    --phoenix-primary-bg-subtle: rgba(63, 81, 181, .12);
    --phoenix-primary-border-subtle: rgba(63, 81, 181, .3);
    --phoenix-navbar-top-bg-color: #fff;
    --phoenix-navbar-vertical-bg-color: #fff;
    --phoenix-navbar-vertical-link-color: var(--lnx-ink);
    --phoenix-navbar-vertical-link-hover-color: var(--lnx-primary);
    --phoenix-navbar-vertical-link-hover-bg: rgba(63, 81, 181, .07);
    --phoenix-navbar-vertical-border-color: transparent;
}

body { font-family: var(--lnx-font); font-size: .90625rem; letter-spacing: .005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--lnx-font); }

/* ---------- topbar: white, no rule, LNX wordmark ---------- */
.navbar-top { box-shadow: none; border-bottom: 0 !important; }
html:not([data-bs-theme="dark"]) .navbar-top[data-navbar-appearance="darker"] { background: #fff !important; }
.navbar-top .navbar-brand .lnx-logo { height: 26px; width: auto; display: block; }
html[data-bs-theme="dark"] .navbar-top .navbar-brand .lnx-logo.is-dark,
html:not([data-bs-theme="dark"]) .navbar-top .navbar-brand .lnx-logo.is-light { display: none; }
.navbar-top .search-box .search-input { border-radius: var(--lnx-radius); background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .1); height: 2.15rem; }
html:not([data-bs-theme="dark"]) .navbar-top .nav-link { color: var(--lnx-muted); }

/* ---------- vertical rail: white, navy icons, soft active pill ---------- */
html:not([data-bs-theme="dark"]) .navbar-vertical,
html:not([data-bs-theme="dark"]) .navbar-vertical[data-navbar-appearance="darker"] { background: #fff !important; border-right: 0 !important; box-shadow: 1px 0 0 rgba(0, 0, 0, .03); }
.navbar-vertical .nav-link { font-size: .9375rem; border-radius: var(--lnx-radius); }
.navbar-vertical .nav-link .nav-link-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.navbar-vertical .navbar-vertical-label { font-size: .7rem; letter-spacing: .06em; color: var(--lnx-muted); }
html:not([data-bs-theme="dark"]) .navbar-vertical .nav-link.active,
html:not([data-bs-theme="dark"]) .navbar-vertical .nav-link.active:hover {
    color: var(--phoenix-primary) !important; background: rgba(var(--phoenix-primary-rgb), .09); font-weight: 600;
}
.navbar-vertical .nav-link:hover { background: rgba(var(--phoenix-primary-rgb), .07); }
.navbar-vertical .navbar-vertical-footer { border-top: 1px solid var(--lnx-border); }

/* ---------- page head (lnx-skin.js adds the icon tile and the crumb pill) ---------- */
.content > nav[aria-label="breadcrumb"]:not(.lnx-crumbs-host) { display: none; }
.lnx-title { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.lnx-title-ico {
    flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--phoenix-primary) 80%, #fff), var(--phoenix-primary) 55%, color-mix(in srgb, var(--phoenix-primary) 82%, #000));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--phoenix-primary) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
    animation: lnx-title-in .35s cubic-bezier(.34, 1.4, .64, 1) backwards;
}
.lnx-title-ico svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; }
.lnx-title-text { min-width: 0; }
.lnx-title h2, .lnx-title .h2 {
    font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.25; margin: 0 !important;
    color: var(--phoenix-emphasis-color);
}
.lnx-title h2 + p, .lnx-title h2 + h5, .lnx-title .text-body-tertiary, .lnx-title .text-muted { font-size: .82rem !important; margin: .1rem 0 0 !important; font-weight: 400 !important; color: var(--lnx-muted) !important; }
@keyframes lnx-title-in { from { opacity: 0; transform: scale(.6) rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .lnx-title-ico { animation: none; } }

.lnx-crumbs {
    display: inline-flex; align-items: center; gap: .15rem; flex-wrap: wrap; padding: .25rem .35rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--phoenix-primary) 14%, var(--lnx-border));
    background: color-mix(in srgb, var(--phoenix-emphasis-bg, #fff) 85%, transparent);
    box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--phoenix-primary) 50%, transparent);
}
.lnx-crumb { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
    line-height: 1.2; color: var(--lnx-muted); text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
a.lnx-crumb:hover { color: var(--phoenix-primary); background: color-mix(in srgb, var(--phoenix-primary) 9%, transparent); }
.lnx-crumb.is-home { padding: .25rem .5rem; color: var(--phoenix-primary); }
.lnx-crumb.is-current { color: #fff; font-weight: 600;
    background: linear-gradient(145deg, color-mix(in srgb, var(--phoenix-primary) 82%, #fff), var(--phoenix-primary) 55%, color-mix(in srgb, var(--phoenix-primary) 85%, #000));
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--phoenix-primary) 75%, transparent); }
.lnx-crumb svg { width: .9rem; height: .9rem; }
.lnx-crumb-sep { font-size: .8rem; color: var(--lnx-muted); opacity: .5; }
.lnx-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
@media (max-width: 575.98px) { .lnx-crumbs { display: none; } }

/* ---------- cards ---------- */
.card {
    border-radius: var(--lnx-card-radius);
    border: 1px solid var(--lnx-line);
    box-shadow: 0 16px 36px -26px rgba(var(--phoenix-primary-rgb), .4), 0 2px 6px rgba(15, 23, 42, .04);
}
html[data-bs-theme="dark"] .card { border-color: var(--phoenix-border-color); }
.card > .card-header:first-child { border-radius: var(--lnx-card-radius) var(--lnx-card-radius) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 var(--lnx-card-radius) var(--lnx-card-radius); }
html:not([data-bs-theme="dark"]) .card-header { background: var(--lnx-card-head); border-bottom-color: var(--lnx-border); }
html:not([data-bs-theme="dark"]) .card-footer { background: #fff; border-top-color: var(--lnx-border); }
.card-body > .table-responsive:only-child, .card-body.p-0 > .table-responsive { border-radius: inherit; }

/* list pages (.table-list) sit in a card like LNX's registers */
.table-list {
    background: var(--phoenix-emphasis-bg, #fff); border: 1px solid var(--lnx-line); border-radius: var(--lnx-card-radius); padding: 1rem 1.25rem .75rem;
    box-shadow: 0 16px 36px -26px rgba(var(--phoenix-primary-rgb), .4), 0 2px 6px rgba(15, 23, 42, .04);
}

/* ---------- tables ---------- */
.table { --phoenix-table-border-color: var(--lnx-border); }
.content table.table, .content table.table.fs-9, .content table.table.fs-10, .modal table.table { font-size: .875rem !important; }
.table > thead > tr > th, .table > thead > tr > td, .tl-th {
    font-size: .72rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em;
    color: var(--lnx-ink) !important; background: transparent !important;
    border-bottom: 1px solid var(--lnx-line) !important; padding-top: .7rem; padding-bottom: .7rem; white-space: nowrap;
}
html[data-bs-theme="dark"] .table > thead > tr > th { color: var(--phoenix-tertiary-color) !important; }
thead.bg-body-highlight, thead .bg-body-highlight, .table thead.bg-light { background: transparent !important; }
.table > tbody > tr > td, .table > tbody > tr > th { padding-top: .6rem; padding-bottom: .6rem; border-bottom-color: var(--lnx-border); }
.table-hover > tbody > tr:hover > * { --phoenix-table-accent-bg: rgba(var(--phoenix-primary-rgb), .035); }
.table tbody a.fw-bold, .table tbody a.fw-semibold, .table tbody td > a:not(.btn):not(.dropdown-item) { color: var(--phoenix-link-color); font-weight: 600; }

/* ---------- buttons ---------- */
.btn { border-radius: var(--lnx-radius); font-weight: 500; letter-spacing: .005em; }
.btn-sm, .btn-group-sm > .btn { border-radius: 8px; }
.btn-primary {
    --phoenix-btn-bg: var(--phoenix-primary); --phoenix-btn-border-color: var(--phoenix-primary);
    --phoenix-btn-hover-bg: color-mix(in srgb, var(--phoenix-primary) 86%, #000); --phoenix-btn-hover-border-color: color-mix(in srgb, var(--phoenix-primary) 86%, #000);
    --phoenix-btn-active-bg: color-mix(in srgb, var(--phoenix-primary) 78%, #000); --phoenix-btn-disabled-bg: var(--phoenix-primary); --phoenix-btn-disabled-border-color: var(--phoenix-primary);
    box-shadow: 0 6px 14px -8px rgba(var(--phoenix-primary-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-phoenix-secondary, .btn-outline-secondary, .btn-light {
    --phoenix-btn-bg: var(--lnx-soft); --phoenix-btn-border-color: var(--lnx-soft); --phoenix-btn-color: #212529;
    --phoenix-btn-hover-bg: #e4e8ee; --phoenix-btn-hover-border-color: #e4e8ee; --phoenix-btn-hover-color: #212529;
}
html[data-bs-theme="dark"] :is(.btn-phoenix-secondary, .btn-outline-secondary, .btn-light) { --phoenix-btn-bg: var(--phoenix-secondary-bg); --phoenix-btn-border-color: var(--phoenix-border-color); --phoenix-btn-color: var(--phoenix-body-color); }
.btn-phoenix-primary { --phoenix-btn-color: var(--phoenix-primary); --phoenix-btn-bg: rgba(var(--phoenix-primary-rgb), .08); --phoenix-btn-border-color: transparent;
    --phoenix-btn-hover-bg: var(--phoenix-primary); --phoenix-btn-hover-color: #fff; }
.btn-phoenix-danger { --phoenix-btn-bg: rgba(240, 101, 72, .1); --phoenix-btn-border-color: transparent; --phoenix-btn-color: #d6452b;
    --phoenix-btn-hover-bg: #f06548; --phoenix-btn-hover-color: #fff; }
.btn-warning { --phoenix-btn-bg: #f7b84b; --phoenix-btn-border-color: #f7b84b; --phoenix-btn-color: #fff; --phoenix-btn-hover-bg: #e5a43a; --phoenix-btn-hover-border-color: #e5a43a; }
.btn-link { box-shadow: none; }
/* the row "..." action button, as LNX's */
.btn-reveal, .table .dropdown-toggle.btn-sm:not(.btn-primary) {
    background: #fff; border: 1px solid var(--lnx-border) !important; color: var(--lnx-muted); border-radius: var(--lnx-radius); width: 2rem; height: 1.8rem; padding: 0;
}
html[data-bs-theme="dark"] .btn-reveal { background: transparent; }

/* ---------- forms ---------- */
.form-control, .form-select {
    border-radius: var(--lnx-radius); border-color: var(--lnx-input); padding: .5rem .9rem; font-size: .90625rem; min-height: 2.45rem;
}
.form-control-sm, .form-select-sm { border-radius: 8px; padding: .3rem .7rem; min-height: 2.05rem; font-size: .8125rem; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--phoenix-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--phoenix-primary-rgb), .12); }
html:not([data-bs-theme="dark"]) :is(.form-control, .form-select):is(:disabled, [readonly]) { background-color: var(--lnx-readonly); border-color: transparent; color: var(--lnx-heading); }
.form-label, label.fw-bold, label.form-label { font-weight: 500 !important; color: inherit; text-transform: none; letter-spacing: 0; font-size: .875rem; }
.form-check-input { border-radius: 5px; }
.form-check-input:checked { background-color: var(--phoenix-primary); border-color: var(--phoenix-primary); }
.input-group-text { border-radius: var(--lnx-radius); border-color: var(--lnx-input); }
textarea.form-control { min-height: auto; }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection,
.select2-container .select2-selection--multiple {
    border-radius: var(--lnx-radius) !important; border-color: var(--lnx-input) !important; min-height: 2.45rem;
}
.select2-container--default .select2-selection--single { height: 2.45rem !important; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; }
.select2-dropdown { border-radius: var(--lnx-radius) !important; border-color: var(--lnx-line) !important; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .25); overflow: hidden; }
.select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--phoenix-primary) !important; }

/* ---------- status chips: Phoenix badges and Aira's tl-* badges as LNX pills ---------- */
.badge.badge-phoenix, .tl-status-badge, .tl-badge {
    text-transform: none !important; letter-spacing: 0; font-size: .6875rem !important; font-weight: 600 !important;
    border-radius: 999px !important; padding: .2rem .55rem !important; line-height: 1.35;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
    border: 0 !important;
}
.badge-phoenix-success, .tl-status-approved, .tl-badge-success { background: rgba(60, 209, 136, .15) !important; color: #146c43 !important; }
.badge-phoenix-warning, .tl-status-pending, .tl-badge-warning, .tl-status-partial { background: rgba(247, 184, 75, .18) !important; color: #8a5a00 !important; }
.badge-phoenix-danger, .tl-status-cancelled, .tl-badge-danger { background: rgba(240, 101, 72, .14) !important; color: #b4361c !important; }
.badge-phoenix-info, .tl-badge-info { background: rgba(41, 156, 219, .14) !important; color: #1b6c99 !important; }
.badge-phoenix-primary { background: rgba(var(--phoenix-primary-rgb), .12) !important; color: var(--phoenix-primary) !important; }
.badge-phoenix-secondary, .tl-status-draft, .tl-badge-gray, .tl-status-closed { background: rgba(135, 138, 153, .14) !important; color: #4b4f5c !important; }
html[data-bs-theme="dark"] :is(.badge.badge-phoenix, .tl-status-badge, .tl-badge) { color: inherit !important; }

/* ---------- Aira list toolbar (.tl-*) as LNX's register toolbar ---------- */
.tl-search-input { border-radius: var(--lnx-radius) !important; background: rgba(0, 0, 0, .03) !important; border: 1px solid rgba(0, 0, 0, .1) !important; height: 2.15rem; }
.tl-pagesize, .tl-filter-control { border-radius: 8px !important; }
.tl-filter-btn { border-radius: var(--lnx-radius) !important; background: var(--lnx-tool) !important; border: 0 !important; color: var(--lnx-muted) !important; height: 2.3rem; }
.tl-filter-panel { border-radius: 14px !important; background: var(--lnx-card-head) !important; border-color: var(--lnx-border) !important; }
.tl-pill { border-radius: 999px !important; }
.tl-pill.active, .tl-pill[aria-pressed="true"] { background: var(--phoenix-primary) !important; color: #fff !important; border-color: var(--phoenix-primary) !important; }

/* pagination: rounded squares, the current one filled */
.pagination .page-link, .pagination .page { border-radius: var(--lnx-radius) !important; border: 1px solid var(--lnx-line); margin: 0 .15rem; min-width: 2.1rem; text-align: center; color: #212529; }
.pagination .active .page-link, .pagination .page-item.active .page, .pagination li.active > * {
    background: var(--phoenix-primary) !important; border-color: var(--phoenix-primary) !important; color: #fff !important;
    box-shadow: 0 6px 14px -8px rgba(var(--phoenix-primary-rgb), .75);
}

/* ---------- nav tabs / pills ---------- */
.nav-underline .nav-link.active { color: var(--phoenix-primary); border-bottom-color: var(--phoenix-primary); font-weight: 600; }
.nav-underline .nav-link { color: var(--lnx-muted); }

/* ---------- modals, dropdowns, toasts, alerts ---------- */
.modal-content { border-radius: 18px; border: 0; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35); }
.modal-header { border-bottom-color: var(--lnx-border); }
.modal-footer { border-top-color: var(--lnx-border); }
.modal-footer .btn { border-radius: 12px; }
.dropdown-menu { border-radius: 12px; border-color: var(--lnx-line); box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .25); }
.alert { border-radius: 14px; }
.swal2-popup { border-radius: 18px !important; font-family: var(--lnx-font) !important; }
.swal2-styled.swal2-confirm { background: var(--phoenix-primary) !important; border-radius: var(--lnx-radius) !important; }
.swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { border-radius: var(--lnx-radius) !important; }
.offcanvas { border-radius: 22px 0 0 22px; }

/* ---------- topbar scope chip (division), as LNX's scope strip ---------- */
.lnx-scope { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .7rem .3rem .35rem; border-radius: 12px;
    border: 1px solid var(--lnx-border); background: rgba(var(--phoenix-primary-rgb), .03); color: inherit; line-height: 1.1; cursor: pointer; }
.lnx-scope:hover { border-color: rgba(var(--phoenix-primary-rgb), .35); background: rgba(var(--phoenix-primary-rgb), .07); }
.lnx-scope-ico { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; color: var(--phoenix-primary);
    background: rgba(var(--phoenix-primary-rgb), .1); }
.lnx-scope-ico svg { width: 15px; height: 15px; }
.lnx-scope-txt { display: flex; flex-direction: column; text-align: left; }
.lnx-scope-txt small { font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lnx-muted); }
.lnx-scope-txt b { font-size: .8125rem; font-weight: 600; color: var(--phoenix-emphasis-color); }
.lnx-scope-caret { width: 14px; height: 14px; color: var(--lnx-muted); }

/* ---------- column filter row and grey "applyBgColor" fields: LNX's quiet inputs ---------- */
.erp-col-filter th { background: transparent !important; border-bottom-color: var(--lnx-border) !important; }
.erp-col-filter-input { background: rgba(0, 0, 0, .03) !important; border: 1px solid rgba(0, 0, 0, .1) !important; border-radius: 8px !important; height: 30px !important; font-size: .78rem !important; }
.erp-col-filter-input:focus { border-color: rgba(var(--phoenix-primary-rgb), .55) !important; box-shadow: 0 0 0 .2rem rgba(var(--phoenix-primary-rgb), .12) !important; background: #fff !important; }
html:not([data-bs-theme="dark"]) .applyBgColor, html:not([data-bs-theme="dark"]) .applyBgColor + .select2-container--default .select2-selection--single { background-color: #fff !important; }
html:not([data-bs-theme="dark"]) input.form-control[readonly], html:not([data-bs-theme="dark"]) input[readonly].form-control-sm { background-color: var(--lnx-readonly) !important; border-color: transparent !important; }

/* ---------- footer ---------- */
.content .footer { border-top: 0; color: var(--lnx-muted); font-size: .8rem; }

/* Collapsed side rail: pinned to the screen with its own (hidden-bar) scroll. Left as Phoenix has it, a long menu
   spilled past the page — the document grew empty space below the footer and the rail's background stopped
   while its icons carried on. */
html.navbar-vertical-collapsed .navbar-vertical { position: fixed !important; top: 0; bottom: 0; height: 100vh !important; }
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content {
    height: calc(100vh - var(--phoenix-navbar-top-height, 4rem) - 4rem) !important; overflow-y: auto !important; overflow-x: hidden !important;
    scrollbar-width: none; overscroll-behavior: contain; }
html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content::-webkit-scrollbar { display: none; }

/* Phoenix's theme pads every <section> 40-56px top and bottom (a landing-page rule). Inside the app a section is a
   card or a strip (KPI cards, store flow, settings panels) and that band only leaves empty gaps above and below. */
/* :where keeps it as weak as the theme rule (it only wins by coming later), so any section class with its own padding still wins */
:where(.content, .modal, .offcanvas, .aira-saved) section { padding-top: 0; padding-bottom: 0; }
/* header menu button (lnx-skin.js menuButton): a plain ☰, visible on the dark bar */
.navbar-top .navbar-toggler-humburger-icon { display: inline-grid !important; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; color: rgba(255, 255, 255, .85); }
.navbar-top .navbar-toggler-humburger-icon:hover, .navbar-top .navbar-toggler-humburger-icon:focus-visible { background: rgba(255, 255, 255, .1) !important; color: #fff; }

/* Select2 lists (every dropdown is searchable now, aira-searchable.js): the list reads at the box's own size, a soft
   hover instead of a solid blue bar, and the picked option marked with a tick */
.select2-container--default .select2-dropdown { border-color: var(--phoenix-border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px -14px rgba(15, 23, 42, .3); }
.select2-container--default .select2-search--dropdown { padding: .45rem; }
.select2-container--default .select2-search--dropdown .select2-search__field { height: 34px; padding: 0 .65rem; border-radius: 8px; font-size: .84rem; }
.select2-container--default .select2-results__option { position: relative; padding: .42rem 2rem .42rem .8rem; font-size: .84rem; line-height: 1.35; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(var(--phoenix-primary-rgb), .09) !important; color: var(--phoenix-emphasis-color) !important; }
/* Select2 4.1 sets aria-selected on the HIGHLIGHTED row (keyboard focus), so only --selected marks the picked one */
.select2-container--default .select2-results__option--selected { background: transparent; color: var(--phoenix-primary); font-weight: 700; }
.select2-container--default .select2-results__option--selected::after { content: ""; position: absolute; right: .8rem; top: 50%; width: 5px; height: 9px; margin-top: -6px;
    border: solid var(--phoenix-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; }

/* ===== Aira date picker (aira-datepick.js on flatpickr): rounded card, primary day, today ringed, Today / Clear foot ===== */
.adp-input { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7891' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.2rem !important; }
.adp-input:disabled, .adp-input[readonly] { cursor: default; }
.flatpickr-calendar { width: 18.5rem !important; padding: .55rem; border: 1px solid var(--phoenix-border-color) !important; border-radius: 16px !important;
    background: var(--phoenix-emphasis-bg, #fff) !important; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .35) !important; font-family: inherit; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none !important; }
.flatpickr-months { align-items: center; padding: .1rem .2rem .45rem; }
.flatpickr-months .flatpickr-month { height: 34px; color: var(--phoenix-emphasis-color) !important; fill: currentColor; }
.flatpickr-current-month { padding-top: 6px; font-size: .95rem !important; font-weight: 800; }
.flatpickr-current-month .cur-month { font-weight: 800 !important; }
.flatpickr-current-month input.cur-year { font-weight: 700 !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: .6rem !important; width: 30px; height: 30px; padding: 0 !important; display: grid; place-items: center;
    border-radius: 9px; font-size: 1.25rem; line-height: 1; color: var(--phoenix-emphasis-color) !important; }
.flatpickr-months .flatpickr-prev-month { left: .55rem !important; } .flatpickr-months .flatpickr-next-month { right: .55rem !important; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(var(--phoenix-primary-rgb), .1); color: var(--phoenix-primary) !important; }
.flatpickr-weekdays { height: 28px; }
span.flatpickr-weekday { font-size: .66rem !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--lnx-muted, #6e7891) !important; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; }
.flatpickr-day { max-width: none; height: 36px; line-height: 34px; margin: 1px 0; border-radius: 10px !important; border: 1px solid transparent; font-size: .82rem; font-weight: 600;
    color: var(--phoenix-emphasis-color); }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(var(--phoenix-primary-rgb), .1) !important; border-color: transparent !important; }
.flatpickr-day.today { border-color: rgba(var(--phoenix-primary-rgb), .55) !important; color: var(--phoenix-primary); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--phoenix-primary) !important; border-color: var(--phoenix-primary) !important; color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(var(--phoenix-primary-rgb), .8); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--lnx-muted, #6e7891) !important; opacity: .45; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--lnx-muted, #6e7891) !important; opacity: .3; background: none !important; text-decoration: line-through; }
.adp-foot { display: flex; justify-content: space-between; gap: .4rem; margin-top: .35rem; padding-top: .5rem; border-top: 1px dashed var(--phoenix-border-color); }
.adp-foot button { flex: 1; height: 32px; border: 0; border-radius: 9px; font-size: .78rem; font-weight: 700; background: rgba(var(--phoenix-primary-rgb), .08); color: var(--phoenix-primary); }
.adp-foot button + button { background: transparent; color: var(--lnx-muted, #6e7891); }
.adp-foot button:hover { background: rgba(var(--phoenix-primary-rgb), .16); }
/* date picker fixes over Phoenix's own flatpickr theme: no grey bands, seven days a row, real arrows, tighter height */
.flatpickr-calendar .flatpickr-months, .flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays, .flatpickr-calendar .flatpickr-weekdaycontainer, .flatpickr-calendar span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent !important; }
.flatpickr-calendar .flatpickr-months { position: relative; height: 40px; padding: 0; }
.flatpickr-calendar .flatpickr-current-month { left: 0; width: 100%; height: 40px; padding: 0 !important; display: flex; align-items: center; justify-content: center; gap: .35rem; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { top: 5px !important; z-index: 3; font-size: 1.4rem; }
.flatpickr-calendar .flatpickr-weekdays { margin-top: .2rem; }
.flatpickr-calendar .dayContainer { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; }
.flatpickr-calendar .flatpickr-day { box-sizing: border-box; flex: 0 0 calc(100% / 7) !important; width: calc(100% / 7) !important; max-width: calc(100% / 7) !important;
    height: 34px; line-height: 32px; margin: 1px 0 !important; }
.flatpickr-calendar .flatpickr-day.hidden { display: none; }
.flatpickr-calendar .adp-foot { margin-top: .45rem; }
.flatpickr-calendar .flatpickr-months .flatpickr-month { height: 40px !important; }
.flatpickr-calendar .flatpickr-current-month { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 40px !important;
    background: transparent !important; padding: 0 2.5rem !important; display: flex !important; align-items: center; justify-content: center; }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 4.2ch; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { top: 5px !important; height: 30px !important; }
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month { background-color: transparent !important; font-size: .95rem !important; }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 5.2ch !important; } .flatpickr-calendar .flatpickr-current-month input.cur-year { padding: 0 0 0 .3ch !important; font-weight: 800 !important; } .flatpickr-calendar .flatpickr-current-month .numInputWrapper span { display: none; } .flatpickr-calendar .flatpickr-weekdays { margin-top: 0; }
/* today (not picked): ringed, not filled - Phoenix fills it with the primary colour, which hid the number under our primary text */
.flatpickr-calendar .flatpickr-day.today:not(.selected) { background: transparent !important; color: var(--phoenix-primary) !important; border-color: rgba(var(--phoenix-primary-rgb), .55) !important; }
.flatpickr-calendar .flatpickr-day.today:not(.selected):hover { background: rgba(var(--phoenix-primary-rgb), .1) !important; }