/* Lexora Glass UI System
   ========================
   Glassmorphism design tokens and AdminLTE overlays
*/

/* ========================================
   1. FONT FACES
   ======================================== */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/montserrat-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Bengali';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans-bengali-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Bengali';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/noto-sans-bengali-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Bengali';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/noto-sans-bengali-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Bengali';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans-bengali-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/noto-sans-arabic-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/noto-sans-arabic-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/noto-sans-arabic-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/noto-sans-arabic-700.woff2') format('woff2');
}

/* ========================================
   2. CSS VARIABLES (Design Tokens)
   ======================================== */
:root {
    --lx-ink: #33415C;
    --lx-heading: #2C3A57;
    --lx-accent: #3A4FE0;
    --lx-focus: #4B5CFF;
    --lx-muted: #5B6784;
    --lx-icon: #6B7A99;
    --lx-line: #EDF0FA;
    --lx-surface: #F4F6FD;

    --lx-trial-bg: #FFE1E9;
    --lx-trial-fg: #A12A52;
    --lx-discovery-bg: #DCEFFF;
    --lx-discovery-fg: #1A5F9A;
    --lx-filed-bg: #DDF6EA;
    --lx-filed-fg: #1B6B49;
    --lx-pending-bg: #FFE9DB;
    --lx-pending-fg: #9A4818;
    --lx-active-bg: #EAE6FF;
    --lx-active-fg: #4A3BC4;

    --lx-gradient-brand: linear-gradient(90deg, #2FD0FF, #4B6BFF);
    --lx-gradient-tile: linear-gradient(160deg, #35D0FF, #4B5CFF);
    --lx-gradient-ring: linear-gradient(135deg, #2FD0FF, #5B4BFF);
    --lx-gradient-area: linear-gradient(180deg, #3FB9FF, #5B4BFF);
    --lx-gradient-line: linear-gradient(90deg, #4B5CFF, #2FC8FF);
    --lx-gradient-tube: linear-gradient(135deg, #19B8FF, #3D63FF 55%, #2EE6B6);

    --lx-radius-frame: 38px;
    --lx-radius-card: 28px;
    --lx-radius-auth: 44px;
    --lx-radius-tile: 26px;
    --lx-radius-btn: 99px;
    --lx-radius-badge: 99px;
    --lx-radius-input: 99px;
    --lx-radius-date: 14px;
    --lx-radius-logo: 14px;

    --lx-shadow-card: 0 14px 30px rgba(90, 110, 200, 0.11);
    --lx-shadow-tile: 0 14px 30px rgba(90, 110, 200, 0.1);
    --lx-shadow-tile-active: 0 18px 34px rgba(60, 110, 255, 0.38);
    --lx-shadow-nav-active: 0 12px 22px rgba(60, 120, 255, 0.35);
    --lx-shadow-btn: 0 14px 26px rgba(60, 120, 255, 0.36);
    --lx-shadow-glass: 0 30px 60px rgba(90, 100, 200, 0.16);
    --lx-shadow-promo: 0 16px 30px rgba(60, 110, 255, 0.35);
    --lx-shadow-frame: 0 30px 60px rgba(90, 100, 200, 0.18);

    --lx-glass-bg: rgba(255, 255, 255, 0.52);
    --lx-glass-border: 1.5px solid rgba(255, 255, 255, 0.85);
    --lx-glass-blur: blur(20px);
    --lx-page-bg: radial-gradient(circle at 20% 8%, #F6F4FF, #E4E7F7 60%, #DADFF3);

    --lx-font: 'Montserrat', 'Noto Sans Bengali', 'Noto Sans Arabic', system-ui, sans-serif;
    --lx-sidebar-width: 230px;

    --bs-primary: #4B6BFF;
    --bs-primary-rgb: 75, 107, 255;
    --bs-link-color: #3A4FE0;
    --bs-link-hover-color: #4B6BFF;
    --bs-body-color: var(--lx-ink);
    --bs-secondary-color: var(--lx-muted);
    --bs-border-color: var(--lx-line);
    --bs-border-radius: var(--lx-radius-card);
    --bs-font-sans-serif: var(--lx-font);
    --bs-body-font-family: var(--lx-font);
}

/* ========================================
   3. BASE STYLES
   ======================================== */
html {
    font-family: var(--lx-font);
}

body {
    margin: 0;
    font-family: var(--lx-font);
    color: var(--lx-ink);
    background: transparent;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   4. PAGE BACKGROUND + DECORATIVE LAYER
   ======================================== */
.lx-page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--lx-page-bg);
}

.lx-decorative-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.lx-decorative-layer svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lx-disc {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #F3EEFF, #B8ADF5 60%, #4FC3FF);
    box-shadow: 0 14px 0 #62C7F5, 0 22px 26px rgba(90, 110, 220, 0.3);
}

.lx-disc--top {
    inset-inline-start: 44%;
    top: 0;
    width: 200px;
    height: 56px;
    transform: rotate(-8deg);
}

.lx-disc--bottom {
    inset-inline-start: 0;
    bottom: 20px;
    width: 210px;
    height: 64px;
    transform: rotate(-6deg);
}

.lx-disc--right {
    inset-inline-end: -40px;
    top: 44%;
    width: 130px;
    height: 110px;
}

/* ========================================
   5. GLASS FRAME + APP SHELL
   ======================================== */
.lx-app {
    --lte-sidebar-width: var(--lx-sidebar-width);
    --bs-body-bg: transparent;
    --bs-tertiary-bg: rgba(255, 255, 255, 0.45);
    --bs-tertiary-bg-rgb: 244, 246, 253;
    min-height: 100vh;
}

.lx-app .app-wrapper.lx-glass-frame {
    margin: 28px;
    min-height: calc(100vh - 56px);
    max-width: calc(100vw - 56px);
    border-radius: var(--lx-radius-frame);
    background: var(--lx-glass-bg);
    border: var(--lx-glass-border);
    box-shadow: var(--lx-shadow-frame);
    overflow: hidden;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .lx-app .app-wrapper.lx-glass-frame {
        backdrop-filter: var(--lx-glass-blur);
        -webkit-backdrop-filter: var(--lx-glass-blur);
    }
}

@media (max-width: 1280px) {
    .lx-app .app-wrapper.lx-glass-frame {
        margin: 20px;
        min-height: calc(100vh - 40px);
        max-width: calc(100vw - 40px);
    }
}

@media (max-width: 1024px) {
    .lx-app .app-wrapper.lx-glass-frame {
        margin: 12px;
        min-height: calc(100vh - 24px);
        max-width: calc(100vw - 24px);
        border-radius: 28px;
    }
}

@media (max-width: 640px) {
    .lx-app .app-wrapper.lx-glass-frame {
        margin: 0;
        min-height: 100vh;
        max-width: 100vw;
        border-radius: 0;
    }
}

.lx-app .app-main,
.lx-app .app-content,
.lx-app .app-content-header,
.lx-app .app-footer {
    background: transparent;
}

.lx-app .app-content-header {
    border-bottom: 0;
    padding: 28px 0.5rem 16px;
}

.lx-page-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--lx-muted);
}

.lx-page-title {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lx-heading);
}

.lx-page-subtitle {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--lx-muted);
}

.lx-app .app-content {
    padding-top: 8px;
    padding-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .lx-app .app-content-header {
        padding: 20px 0.5rem 8px;
    }

    .lx-page-kicker {
        margin-bottom: 6px;
    }

    .lx-page-subtitle {
        margin-top: 6px;
    }
}

.lx-app .app-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--lx-muted);
    background: transparent;
}

.lx-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--lx-radius-logo);
    background: var(--lx-gradient-tile);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 19px;
    flex: none;
}

.sidebar-brand .lx-mark {
    width: 33px;
    height: 33px;
    font-size: 16px;
    border-radius: 10px;
}

.login-logo .lx-mark {
    width: 40px;
    height: 40px;
}

.app-sidebar .nav-icon,
.lx-nav-svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.lx-page-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.lx-app-container {
    max-width: 880px;
}

.lx-auth-box {
    width: min(480px, calc(100% - 32px));
}

/* ========================================
   6. SIDEBAR
   ======================================== */
.lx-app .app-sidebar {
    --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.6);
    --lte-sidebar-color: var(--lx-muted);
    --lte-sidebar-hover-color: var(--lx-ink);
    --lte-sidebar-active-color: #fff;
    --lte-sidebar-menu-active-bg: transparent;
    --lte-sidebar-menu-active-color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.lx-app .sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, 0.55);
    justify-content: flex-start;
    padding-inline: 18px;
}

.lx-app .sidebar-brand .brand-text {
    margin-inline-start: 0.5rem;
    color: var(--lx-heading);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.lx-app .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link {
    margin: 4px 8px;
    padding: 12px 16px;
    border-radius: var(--lx-radius-btn);
    font-size: 13px;
    font-weight: 600;
    color: var(--lx-muted);
}

.lx-app .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:hover,
.lx-app .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus {
    background: rgba(255, 255, 255, 0.6);
    color: var(--lx-ink);
}

.lx-app .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active,
.lx-app .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link[aria-current="page"] {
    background: var(--lx-gradient-brand);
    color: #fff;
    box-shadow: var(--lx-shadow-nav-active);
}

.lx-app .sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus-visible {
    outline: 2px solid var(--lx-focus);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar {
        max-height: calc(100vh - 56px);
    }

    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
        height: calc(100vh - 56px - 3.5rem - 1px);
    }
}

@media (max-width: 1280px) {
    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar {
        max-height: calc(100vh - 40px);
    }

    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
        height: calc(100vh - 40px - 3.5rem - 1px);
    }
}

@media (max-width: 1024px) {
    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar {
        max-height: calc(100vh - 24px);
    }

    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
        height: calc(100vh - 24px - 3.5rem - 1px);
    }
}

@media (max-width: 640px) {
    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar,
    .lx-app.sidebar-expand-lg .app-sidebar {
        max-height: 100vh;
    }

    .lx-app.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper,
    .lx-app.sidebar-expand-lg .app-sidebar .sidebar-wrapper {
        height: calc(100vh - 3.5rem - 1px);
    }
}

/* ========================================
   7. TOP BAR
   ======================================== */
.lx-app .app-header {
    background: rgba(255, 255, 255, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    min-height: 72px;
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .lx-app .app-header {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

.lx-app .app-header .container-fluid,
.lx-app .app-header .container {
    gap: 12px;
}

.lx-app .app-header .nav-link {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: var(--lx-radius-btn);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.9);
    color: var(--lx-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lx-app .app-header .nav-link:hover,
.lx-app .app-header .nav-link:focus {
    background: #fff;
    color: var(--lx-ink);
    border-color: rgba(75, 107, 255, 0.2);
}

.lx-app .app-header .navbar-nav form {
    display: flex;
    align-items: center;
    margin: 0;
}

.lx-app .app-header .btn {
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.lx-search,
.lx-header-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--lx-radius-btn);
    padding: 0 20px;
    height: 44px;
    max-width: 520px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .lx-search,
    .lx-header-search {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.lx-search:focus-within,
.lx-header-search:focus-within {
    background: #fff;
    border-color: rgba(75, 107, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(75, 107, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.lx-search input,
.lx-header-search input {
    flex: 1;
    width: 100%;
    min-height: 0;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font: 500 13px var(--lx-font);
    color: var(--lx-ink);
}

.lx-search input::placeholder,
.lx-header-search input::placeholder {
    color: var(--lx-icon);
}

.lx-profile-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--lx-radius-btn);
    padding: 4px 16px 4px 4px;
    cursor: pointer;
    text-align: start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    list-style: none;
}

[dir="rtl"] .lx-profile-pill {
    padding: 4px 4px 4px 16px;
}

.lx-profile-pill::-webkit-details-marker {
    display: none;
}

.lx-profile-pill:hover {
    background: #fff;
    border-color: rgba(75, 107, 255, 0.2);
}

.lx-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lx-gradient-brand);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    flex: none;
    box-shadow: 0 2px 6px rgba(60, 120, 255, 0.3);
}

.lx-profile-info {
    line-height: 1.25;
}

.lx-profile-name {
    font-weight: 700;
    font-size: 12px;
    color: var(--lx-ink);
    display: block;
}

.lx-profile-role {
    font-size: 10px;
    color: var(--lx-muted);
    display: block;
}

@media (max-width: 768px) {
    .lx-profile-info {
        display: none;
    }

    .lx-profile-pill {
        width: 44px;
        padding: 4px;
        justify-content: center;
    }
}

.lx-app .app-header select,
.lx-app .app-header .form-select {
    width: auto;
    min-height: 38px;
    border-radius: var(--lx-radius-btn);
}

/* ========================================
   8. DROPDOWN MENUS
   ======================================== */
.lx-menu {
    position: relative;
}

.lx-menu > summary {
    list-style: none;
    cursor: pointer;
}

.lx-menu > summary::-webkit-details-marker {
    display: none;
}

.lx-app .dropdown-menu,
.lx-menu > .dropdown-menu {
    min-width: 240px;
    background: rgba(255, 255, 255, 0.88);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 18px;
    box-shadow: var(--lx-shadow-glass);
    padding: 8px;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .lx-app .dropdown-menu,
    .lx-menu > .dropdown-menu {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

.lx-app .dropdown-item {
    border-radius: 10px;
}

.lx-app .dropdown-item.active,
.lx-app .dropdown-item:active {
    background: rgba(75, 107, 255, 0.12);
    color: var(--lx-heading);
}

.login-logo .lx-menu .nav-link {
    font-size: 1rem;
}

/* ========================================
   9. CARDS, TILES, TABLES
   ======================================== */
.lx-app .card,
.lx-app .info-box {
    background: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--lx-radius-card);
    box-shadow: var(--lx-shadow-card);
    color: var(--lx-ink);
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .lx-app .card {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.94);
    }
}

.lx-app .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    background: transparent;
    border-bottom-color: rgba(237, 240, 250, 0.8);
}

.lx-app .card-title {
    float: none;
    margin: 0;
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--lx-heading);
}

.lx-app .card-header > p,
.lx-app .card-header > .lx-page-subtitle {
    flex: 1 1 100%;
    margin: 0;
    color: var(--lx-muted);
}

.lx-app .card-header > .card-tools {
    float: none;
    margin: 0;
}

.lx-app .card-footer {
    background: transparent;
    border-top-color: rgba(237, 240, 250, 0.8);
}

.lx-app .info-box {
    box-shadow: var(--lx-shadow-tile);
    min-height: 96px;
}

.lx-app .info-box.lx-stat {
    align-items: center;
    gap: 14px;
    min-height: 108px;
    padding: 18px 20px;
    border-color: transparent;
    background: var(--lx-stat-bg);
    box-shadow: 0 10px 24px rgba(90, 110, 200, 0.08);
}

.lx-app .info-box.lx-stat .info-box-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: var(--lx-stat-icon-bg);
    color: var(--lx-stat-icon);
}

.lx-app .lx-stat--sky {
    --lx-stat-bg: #eaf2ff;
    --lx-stat-icon-bg: #d7e6ff;
    --lx-stat-icon: #3d6bff;
}

.lx-app .lx-stat--mint {
    --lx-stat-bg: #e8f8f1;
    --lx-stat-icon-bg: #d4f0e2;
    --lx-stat-icon: #1e8f5a;
}

.lx-app .lx-stat--violet {
    --lx-stat-bg: #f3eeff;
    --lx-stat-icon-bg: #e6dcff;
    --lx-stat-icon: #7a5af8;
}

.lx-app .lx-stat--peach {
    --lx-stat-bg: #fff1e8;
    --lx-stat-icon-bg: #ffe1d0;
    --lx-stat-icon: #e07a2f;
}

.lx-app .lx-stat--cyan {
    --lx-stat-bg: #e7f6ff;
    --lx-stat-icon-bg: #d0ecff;
    --lx-stat-icon: #1a8fd0;
}

.lx-app .lx-stat--paper {
    --lx-stat-bg: #fff;
    --lx-stat-icon-bg: #e4ebff;
    --lx-stat-icon: #3a4fe0;
}

.lx-app .info-box.lx-stat.lx-stat--active {
    border-color: #8eb4ff;
    box-shadow: 0 12px 28px rgba(60, 110, 255, 0.16);
}

.lx-app .info-box-icon {
    border-radius: 16px;
    background: var(--lx-surface);
    color: var(--lx-icon);
}

.lx-app .info-box-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--lx-muted);
}

.lx-app .info-box.lx-stat .info-box-number {
    color: var(--lx-heading);
}

.lx-app .info-box-number {
    font-size: 1.05rem;
    font-weight: 600;
}

.info-box-icon .lx-nav-svg {
    width: 28px;
    height: 28px;
}

.lx-app .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(75, 107, 255, 0.04);
    --bs-table-striped-bg: rgba(244, 246, 253, 0.55);
}

.lx-app .table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lx-muted);
    border-bottom-color: var(--lx-line);
}

.lx-app .table > :not(caption) > * > * {
    background-color: transparent;
}

.lx-app .list-group {
    border-radius: 18px;
    overflow: hidden;
}

.lx-app .list-group-item {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(237, 240, 250, 0.9);
}

.lx-app .bg-body-tertiary {
    background-color: rgba(244, 246, 253, 0.72) !important;
}

.lx-date-chip {
    width: 48px;
    min-width: 48px;
    text-align: center;
    border-radius: 12px;
    padding: 8px 0;
    line-height: 1.15;
    color: #fff;
    background: var(--lx-gradient-brand);
    flex: none;
    box-shadow: 0 2px 8px rgba(60, 120, 255, 0.25);
}

.lx-date-chip--alt1 {
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.lx-date-chip--alt2 {
    background: linear-gradient(135deg, #22C997, #14B8A6);
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.lx-date-chip .month {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.lx-date-chip .day {
    display: block;
    font-size: 18px;
    font-weight: 800;
}

.lx-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.lx-trend-up {
    font-size: 11.5px;
    font-weight: 700;
    color: #1F8F66;
    margin-top: 2px;
}

/* ========================================
   10. BANNERS & ALERTS
   ======================================== */
.lx-banner {
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.lx-banner--warn {
    background: var(--lx-pending-bg);
    color: var(--lx-pending-fg);
}

.lx-banner--support {
    background: var(--lx-active-bg);
    color: var(--lx-active-fg);
}

.lx-banner--success {
    background: var(--lx-filed-bg);
    color: var(--lx-filed-fg);
}

.lx-banner a {
    color: inherit;
    font-weight: 800;
}

.lx-app .alert {
    border-radius: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    box-shadow: var(--lx-shadow-card);
}

/* ========================================
   11. FORMS
   ======================================== */
.lx-input,
.lx-app input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='submit']):not(.lx-search input):not(.lx-filter-bar__search input):not(.lx-filter-bar__field):not(.lx-filter-bar__date-input),
.lx-app select:not(.lx-filter-bar__select),
.lx-app textarea,
.lx-app .form-control,
.lx-app .form-select {
    display: block;
    width: 100%;
    border: 1.5px solid #D5DBF0;
    border-radius: 14px;
    min-height: 46px;
    padding: 10px 14px;
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--lx-ink);
    font: 500 14px var(--lx-font);
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lx-input:hover,
.lx-app input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='submit']):not(.lx-search input):not(.lx-filter-bar__search input):not(.lx-filter-bar__field):not(.lx-filter-bar__date-input):hover,
.lx-app select:not(.lx-filter-bar__select):hover,
.lx-app textarea:hover,
.lx-app .form-control:hover,
.lx-app .form-select:hover {
    border-color: #C5CDED;
}

.lx-input:focus,
.lx-app input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='submit']):not(.lx-search input):not(.lx-filter-bar__search input):not(.lx-filter-bar__field):not(.lx-filter-bar__date-input):focus,
.lx-app select:not(.lx-filter-bar__select):focus,
.lx-app textarea:focus,
.lx-app .form-control:focus,
.lx-app .form-select:focus {
    outline: none;
    border-color: var(--lx-focus);
    box-shadow: 0 0 0 3px rgba(75, 107, 255, 0.12);
}

.lx-app input[aria-invalid="true"],
.lx-app select[aria-invalid="true"],
.lx-app textarea[aria-invalid="true"],
.lx-app .is-invalid {
    border-color: var(--lx-trial-fg);
}

.lx-app input[aria-invalid="true"]:focus,
.lx-app select[aria-invalid="true"]:focus,
.lx-app textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.lx-app select:not(.lx-filter-bar__select),
.lx-app .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-inline-end: 40px;
    cursor: pointer;
}

[dir="rtl"] .lx-app select:not(.lx-filter-bar__select),
[dir="rtl"] .lx-app .form-select {
    background-position: left 14px center;
}

.lx-app textarea {
    min-height: 100px;
    resize: vertical;
    border-radius: 16px;
}

.lx-app input[type="date"] {
    cursor: pointer;
}

.lx-app input[type="search"].form-control {
    border-radius: var(--lx-radius-btn);
}

.lx-error {
    color: var(--lx-trial-fg);
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}

.lx-form-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1100px) {
    .lx-form-layout {
        grid-template-columns: 1fr;
    }
}

.lx-form {
    background: rgba(255, 255, 255, 0.72);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--lx-radius-card);
    box-shadow: var(--lx-shadow-card);
    overflow: hidden;
}

.lx-form-head {
    padding: 24px 28px;
    border-bottom: 1px solid var(--lx-line);
}

.lx-form-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--lx-ink);
    margin: 0 0 6px 0;
}

.lx-form-head p {
    font-size: 14px;
    color: var(--lx-muted);
    margin: 0;
}

.lx-form-body {
    padding: 24px 28px;
}

.lx-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.lx-form-grid > label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lx-ink);
}

.lx-form-grid .lx-col-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .lx-form-grid {
        grid-template-columns: 1fr;
    }

    .lx-form-grid .lx-col-full {
        grid-column: auto;
    }
}

.lx-form-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 28px;
    border-top: 1px solid var(--lx-line);
    background: rgba(244, 246, 253, 0.65);
}

.lx-form-aside {
    position: sticky;
    top: 24px;
}

.lx-form-section {
    padding: 24px 28px;
    border-bottom: 1px solid var(--lx-line);
}

.lx-form-section:last-child {
    border-bottom: none;
}

.lx-form-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--lx-ink);
    margin: 0 0 6px 0;
}

.lx-form-section > p {
    font-size: 13px;
    color: var(--lx-muted);
    margin: 0 0 20px 0;
}

.lx-form fieldset {
    border: 1.5px solid var(--lx-line);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0;
    background: var(--lx-surface);
}

.lx-form legend {
    font-size: 14px;
    font-weight: 700;
    color: var(--lx-ink);
    padding: 0 8px;
    margin-inline-start: -8px;
}

.lx-app .form-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 1.75rem;
    margin-bottom: 0.4rem;
    padding: 0;
}

.lx-app .form-check-inline {
    display: inline-flex;
    width: auto;
    margin-bottom: 0.4rem;
    margin-inline-end: 1.1rem;
}

.lx-app .form-check-input,
.lx-app input[type="checkbox"],
.lx-app input[type="radio"] {
    float: none;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--lx-accent);
    cursor: pointer;
    vertical-align: middle;
}

.lx-app .form-check-input[type="radio"],
.lx-app input[type="radio"] {
    border-radius: 50%;
}

.lx-app .form-check-label {
    margin: 0;
    line-height: 1.35;
}

.lx-form-alert {
    grid-column: 1 / -1;
}

/* ========================================
   12. FILTER BAR + TOOLBARS
   ======================================== */
.lx-filter-bar,
.lx-app .app-content .row.g-2.align-items-center.mb-3,
.lx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--lx-radius-card);
    box-shadow: var(--lx-shadow-card);
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .lx-filter-bar,
    .lx-app .app-content .row.g-2.align-items-center.mb-3,
    .lx-toolbar {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.55);
    }
}

.lx-app .app-content .row.g-2.align-items-center.mb-3 {
    --bs-gutter-x: 0.7rem;
    margin-inline: 0;
}

.lx-app .app-content .row.g-2.align-items-center.mb-3 > [class*="col"] {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.lx-app .app-content .row.g-2.align-items-center.mb-3 .form-control,
.lx-app .app-content .row.g-2.align-items-center.mb-3 .form-select {
    width: auto;
    min-width: 10rem;
    max-width: 100%;
}

.lx-filter-bar > .lx-filter-bar__select {
    flex: 0 1 auto;
    max-width: 100%;
}

.lx-filter-bar__search {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    flex: 1 1 200px;
    width: 220px;
    max-width: 320px;
    background: var(--lx-surface);
    border-radius: 99px;
    border: 1.5px solid var(--lx-line);
    overflow: hidden;
}

.lx-filter-bar__search:focus-within {
    border-color: var(--lx-focus);
    box-shadow: 0 0 0 3px rgba(75, 107, 255, 0.1);
}

.lx-filter-bar__search svg {
    position: absolute;
    inset-inline-start: 12px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--lx-icon);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.lx-filter-bar__search input {
    width: 100%;
    height: 100%;
    padding-block: 0;
    padding-inline: 36px 14px;
    border: 0;
    outline: 0;
    background: transparent;
    font: 500 13px var(--lx-font);
    color: var(--lx-ink);
}

.lx-filter-bar__search input::placeholder {
    color: var(--lx-icon);
}

.lx-filter-bar__select {
    height: 38px;
    width: auto;
    min-width: 8.5rem;
    padding-block: 0;
    padding-inline: 14px 32px;
    border: 1.5px solid var(--lx-line);
    border-radius: 99px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font: 600 13px var(--lx-font);
    color: var(--lx-ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

[dir="rtl"] .lx-filter-bar__select {
    background-position: left 12px center;
}

.lx-filter-bar__select:hover {
    border-color: var(--lx-focus);
}

.lx-filter-bar__select:focus {
    outline: none;
    border-color: var(--lx-focus);
    box-shadow: 0 0 0 3px rgba(75, 107, 255, 0.1);
}

.lx-filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-inline-start: auto;
}

.lx-filter-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 99px;
    font: 600 13px/1 var(--lx-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.lx-filter-bar__btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lx-app a.lx-filter-bar__btn--primary,
.lx-filter-bar__btn--primary {
    background: var(--lx-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(46, 63, 196, 0.22);
}

.lx-app a.lx-filter-bar__btn--primary:hover,
.lx-filter-bar__btn--primary:hover {
    background: #2e3fc4;
    color: #fff;
}

.lx-app a.lx-filter-bar__btn--secondary,
.lx-filter-bar__btn--secondary {
    background: #fff;
    color: var(--lx-heading);
    border: 1px solid #d5dcf0;
}

.lx-app a.lx-filter-bar__btn--secondary:hover,
.lx-filter-bar__btn--secondary:hover {
    background: #f4f6ff;
    border-color: #b9c4ee;
    color: var(--lx-accent);
}

.lx-filter-bar__date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.lx-filter-bar__date-sep {
    color: var(--lx-muted);
    font: 500 13px var(--lx-font);
}

.lx-filter-bar__date-label {
    font: 600 12px var(--lx-font);
    color: var(--lx-muted);
}

.lx-filter-bar__date-input,
.lx-filter-bar__field {
    height: 38px;
    padding-block: 0;
    padding-inline: 12px 14px;
    border: 1.5px solid var(--lx-line);
    border-radius: 99px;
    background: #fff;
    font: 500 13px var(--lx-font);
    color: var(--lx-ink);
}

.lx-filter-bar__date-input {
    width: 130px;
    max-width: 130px;
    flex: 0 0 130px;
}

.lx-filter-bar__field {
    width: auto;
    min-width: 10rem;
    flex: 1 1 160px;
    max-width: 220px;
}

.lx-filter-bar__search--wide {
    flex: 1 1 280px;
    max-width: 480px;
}

.lx-filter-bar__tabs,
.lx-filter-bar__nav {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.lx-filter-bar__tabs {
    padding: 3px;
    background: var(--lx-surface);
    border: 1.5px solid var(--lx-line);
    border-radius: 99px;
}

.lx-filter-bar__tab {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 99px;
    background: transparent;
    font: 600 13px var(--lx-font);
    color: var(--lx-ink);
    cursor: pointer;
    white-space: nowrap;
}

.lx-filter-bar__tab[aria-pressed="true"] {
    background: var(--lx-gradient-brand);
    color: #fff;
}

.lx-filter-bar__period,
.lx-filter-bar__hint {
    margin: 0;
    font: 600 13px var(--lx-font);
    color: var(--lx-heading);
    white-space: nowrap;
}

.lx-filter-bar__hint {
    font-weight: 500;
    color: var(--lx-muted);
}

button.lx-filter-bar__btn {
    appearance: none;
    -webkit-appearance: none;
}

.lx-filter-bar__date-input:hover,
.lx-filter-bar__field:hover {
    border-color: var(--lx-focus);
}

.lx-filter-bar__date-input:focus,
.lx-filter-bar__field:focus {
    outline: none;
    border-color: var(--lx-focus);
    box-shadow: 0 0 0 3px rgba(75, 107, 255, 0.1);
}

@media (max-width: 900px) {
    .lx-filter-bar {
        gap: 8px;
    }

    .lx-filter-bar__search {
        width: 180px;
    }

    .lx-filter-bar__date-input {
        width: 115px;
        max-width: 115px;
        flex-basis: 115px;
    }
}

@media (max-width: 640px) {
    .lx-filter-bar {
        padding: 12px;
        gap: 8px;
    }

    .lx-filter-bar__search {
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        order: -1;
    }

    .lx-filter-bar__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ========================================
   13. DATA TABLE
   ======================================== */
.lx-data-table {
    width: 100%;
    border-collapse: collapse;
}

.lx-data-table thead {
    background: var(--lx-surface);
}

.lx-data-table th {
    padding: 14px 16px;
    font: 600 11px var(--lx-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lx-muted);
    text-align: start;
    border-bottom: 1px solid var(--lx-line);
}

.lx-data-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--lx-ink);
    border-bottom: 1px solid var(--lx-line);
    vertical-align: middle;
}

.lx-data-table tbody tr:last-child td {
    border-bottom: none;
}

.lx-data-table tbody tr:hover {
    background: rgba(75, 107, 255, 0.03);
}

.lx-data-table__link {
    font-weight: 600;
    color: var(--lx-ink);
    text-decoration: none;
}

.lx-data-table__link:hover {
    color: var(--lx-accent);
}

.lx-data-table__empty {
    padding: 40px 16px !important;
    text-align: center;
    color: var(--lx-muted);
}

.lx-data-table__sub {
    display: block;
    font-size: 11.5px;
    color: var(--lx-muted);
    margin-top: 2px;
}

/* ========================================
   14. CALENDAR
   ======================================== */
.lx-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--lx-line);
    border-radius: 18px;
    overflow: hidden;
}

.lx-calendar-grid--day {
    grid-template-columns: minmax(0, 1fr);
}

.lx-calendar-head {
    padding: 0.5rem;
    background: rgba(244, 246, 253, 0.8);
}

.lx-calendar-cell {
    min-height: 90px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.72);
}

[dir="rtl"] .lx-flip-rtl {
    transform: scaleX(-1);
}

.lx-settings-logo {
    max-height: 4rem;
}

/* ========================================
   15. BUTTONS + BOOTSTRAP OVERRIDES
   ======================================== */
.lx-app .btn,
.lx-app-wrapper--no-sidebar .btn,
.lx-mkt-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 1.15rem;
    border-radius: var(--lx-radius-btn);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.01em;
}

.lx-app .btn-sm,
.lx-app-wrapper--no-sidebar .btn-sm,
.lx-mkt-page .btn-sm {
    min-height: 34px;
    padding: 0 0.9rem;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.lx-app .btn-primary,
.lx-app-wrapper--no-sidebar .btn-primary,
.lx-mkt-page .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lx-accent);
    --bs-btn-border-color: var(--lx-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2e3fc4;
    --bs-btn-hover-border-color: #2e3fc4;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2434a8;
    --bs-btn-active-border-color: #2434a8;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--lx-accent);
    --bs-btn-disabled-border-color: var(--lx-accent);
    background-image: none;
    border: 0;
    box-shadow: 0 1px 2px rgba(46, 63, 196, 0.22);
}

.lx-app .btn-outline-primary,
.lx-app-wrapper--no-sidebar .btn-outline-primary,
.lx-mkt-page .btn-outline-primary {
    --bs-btn-color: var(--lx-accent);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #c5cff5;
    --bs-btn-hover-color: var(--lx-accent);
    --bs-btn-hover-bg: #f4f6ff;
    --bs-btn-hover-border-color: var(--lx-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lx-accent);
    --bs-btn-active-border-color: var(--lx-accent);
    background-image: none;
}

.lx-app .btn-outline-secondary,
.lx-app-wrapper--no-sidebar .btn-outline-secondary,
.lx-mkt-page .btn-outline-secondary {
    --bs-btn-color: var(--lx-heading);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d5dcf0;
    --bs-btn-hover-color: var(--lx-accent);
    --bs-btn-hover-bg: #f4f6ff;
    --bs-btn-hover-border-color: #b9c4ee;
    --bs-btn-active-color: var(--lx-accent);
    --bs-btn-active-bg: #eef1ff;
    --bs-btn-active-border-color: #b9c4ee;
    --bs-btn-disabled-color: var(--lx-muted);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #d5dcf0;
    background: #fff;
    background-image: none;
    box-shadow: none;
}

.lx-app .btn-outline-secondary:hover,
.lx-app-wrapper--no-sidebar .btn-outline-secondary:hover,
.lx-mkt-page .btn-outline-secondary:hover {
    color: var(--lx-accent);
    background: #f4f6ff;
    border-color: #b9c4ee;
}

.lx-app .btn-outline-secondary:active,
.lx-app-wrapper--no-sidebar .btn-outline-secondary:active,
.lx-mkt-page .btn-outline-secondary:active {
    color: var(--lx-accent);
    background: #eef1ff;
    border-color: #b9c4ee;
}

.btn-link {
    --bs-btn-color: #3A4FE0;
    --bs-btn-hover-color: #4B6BFF;
    --bs-btn-active-color: #4B6BFF;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--lx-accent);
}

.lx-app .nav-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.lx-app .nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 0.9rem;
    border: 1px solid #d5dcf0;
    border-radius: var(--lx-radius-btn);
    background: #fff;
    color: var(--lx-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.lx-app .nav-pills .nav-link:hover,
.lx-app .nav-pills .nav-link:focus {
    color: var(--lx-accent);
    background: #f4f6ff;
    border-color: #b9c4ee;
}

.lx-app .nav-pills .nav-link.active,
.lx-app .nav-pills .nav-link[aria-current="page"] {
    background: var(--lx-accent);
    border-color: var(--lx-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(46, 63, 196, 0.22);
}

.nav {
    --bs-nav-link-color: #3A4FE0;
    --bs-nav-link-hover-color: #4B6BFF;
}

.pagination {
    --bs-pagination-color: #3A4FE0;
    --bs-pagination-hover-color: #4B6BFF;
    --bs-pagination-active-bg: #4B6BFF;
    --bs-pagination-active-border-color: #4B6BFF;
    --bs-pagination-focus-color: #4B6BFF;
}

.lx-app .page-link {
    border-radius: 99px;
    margin-inline: 2px;
}

.form-check-input:checked {
    background-color: #4B6BFF;
    border-color: #4B6BFF;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--lx-focus);
    box-shadow: 0 0 0 0.25rem rgba(75, 107, 255, 0.2);
}

.lx-app .badge.rounded-pill {
    font-weight: 600;
}

.text-bg-primary {
    background: var(--lx-gradient-brand) !important;
}

.lx-app a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.brand-link):not(.lx-filter-bar__btn) {
    color: var(--lx-accent);
}

.lx-app a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.brand-link):not(.lx-filter-bar__btn):hover {
    color: var(--lx-focus);
}

/* ========================================
   16. ERROR PAGE
   ======================================== */
.lx-error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.lx-error-page .login-logo {
    margin-bottom: 18px;
}

.lx-error-page .login-logo a {
    color: var(--lx-heading);
}

.lx-error-page .card {
    background: rgba(255, 255, 255, 0.72);
    border: var(--lx-glass-border);
    border-radius: var(--lx-radius-auth);
    box-shadow: var(--lx-shadow-glass);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .lx-error-page .card {
        backdrop-filter: var(--lx-glass-blur);
        -webkit-backdrop-filter: var(--lx-glass-blur);
        background: rgba(255, 255, 255, 0.55);
    }
}

/* ========================================
   17. REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Alpine, loading states, filter slide-over, combobox
   ======================================== */
[x-cloak] {
    display: none !important;
}

/* Livewire marks the element that started a request with data-loading, so every screen gets feedback without markup. */
[data-loading] {
    cursor: progress;
}

button[data-loading],
a[data-loading],
form[data-loading] button[type="submit"] {
    opacity: 0.65;
    pointer-events: none;
}

select[data-loading],
input[data-loading] {
    opacity: 0.75;
}

.lx-filter-wrap,
.lx-filter-panel {
    display: contents;
}

@media (max-width: 991.98px) {
    .lx-filter-panel {
        display: block;
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 1045;
        width: min(22rem, 90vw);
        padding: 1rem;
        overflow-y: auto;
        background: var(--bs-body-bg);
        box-shadow: var(--lx-shadow-glass);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0.2s;
    }

    [dir="rtl"] .lx-filter-panel {
        transform: translateX(-100%);
    }

    .lx-filter-panel.is-open,
    [dir="rtl"] .lx-filter-panel.is-open {
        transform: none;
        visibility: visible;
    }

    .lx-filter-panel > [class*="col"] {
        width: 100%;
        margin-block-end: 0.5rem;
    }

    .lx-filter-panel__head {
        display: flex;
        align-items: center;
        margin-block-end: 1rem;
    }

    .lx-filter-panel-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.35);
    }
}

.lx-combobox-list {
    z-index: 1050;
    max-height: 16rem;
    margin-block-start: 0.25rem;
    overflow-y: auto;
    cursor: pointer;
}

/* Usage against a plan limit (x-usage-meter). */
.lx-usage-meter {
    display: block;
    inline-size: 100%;
    block-size: 0.5rem;
}