@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Cinzel:wght@600;700&family=DM+Serif+Display&family=Exo+2:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Lato:wght@400;700&family=Libre+Franklin:wght@600;700&family=Lora:wght@600;700&family=Manrope:wght@500;600;700;800&family=Merriweather:wght@700&family=Montserrat:wght@700;800&family=Nunito+Sans:wght@500;600;700&family=Orbitron:wght@600;700&family=Oswald:wght@600;700&family=Playfair+Display:wght@700&family=Poppins:wght@600;700&family=Rajdhani:wght@500;600;700&family=Sora:wght@600;700&family=Source+Sans+3:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
    --ui-bg-main: #0e1620;
    --ui-bg-secondary: #162130;
    --ui-bg-elevated: #203043;
    --ui-card-surface: #1b2939;
    --ui-border: #344759;
    --ui-text-primary: #e8f3ff;
    --ui-text-secondary: #b0c5da;
    --ui-text-muted: #8ca4bc;
    --ui-heading: #f4f8ff;
    --ui-accent: #4fa3ff;
    --ui-accent-hover: #75b8ff;
    --ui-button-bg: #458fdf;
    --ui-button-hover: #3272b8;
    --ui-button-text: #f4f9ff;
    --ui-success: #5ac89f;
    --ui-warning: #dfbf71;
    --ui-danger: #e67d90;
    --ui-info: #66bae5;
    --ui-sidebar-bg: #1b2939;
    --ui-sidebar-text: #b0c6da;
    --ui-sidebar-active: #4fa2ff;
    --ui-sidebar-hover: #253a51;
    --ui-topbar-bg: #1b2939;
    --ui-input-bg: #1e2d40;
    --ui-modal-bg: #1c2a3a;
    --ui-table-hover: #263c56;
    --ui-badge-bg: #2e4762;
    --ui-badge-text: #d8e9ff;
    --ui-icon-bg: #2d4560;
    --ui-icon-color: #93c4fb;
    --ui-footer-bg: #1b2939;
    --ui-shadow: 0 4px 16px rgba(12, 18, 26, 0.25);
    --ui-bg-pattern: radial-gradient(circle at 10% 10%, rgba(255,255,255,.07) 1px, transparent 1px);
    --ui-font-body: Inter, sans-serif;
    --ui-font-heading: Manrope, sans-serif;
    --ui-heading-weight: 700;
    --ui-heading-spacing: 0.01em;
    --ui-icon-radius: .6rem;
    --ui-card-radius: .85rem;
    --ui-button-radius: .65rem;

    /* ─── Bridge: remap legacy --dg-* vars to follow active theme ─── */
    --dg-bg: var(--ui-bg-main);
    --dg-surface: var(--ui-card-surface);
    --dg-surface-2: var(--ui-topbar-bg);
    --dg-border: var(--ui-border);
    --dg-border-2: var(--ui-border);
    --dg-text: var(--ui-text-secondary);
    --dg-muted: var(--ui-text-muted);
    --dg-heading: var(--ui-heading);
    --dg-green: var(--ui-accent);
    --dg-green-dim: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    --dg-green-border: color-mix(in srgb, var(--ui-accent) 25%, transparent);
    --dg-cyan: var(--ui-accent);
    --dg-cyan-dim: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    --dg-radius: var(--ui-card-radius);
    --dg-radius-sm: var(--ui-icon-radius);
    --dg-shadow: var(--ui-shadow);

    /* ─── Bridge: Bootstrap core variables → theme engine ─── */
    --bs-body-bg: var(--ui-bg-main);
    --bs-body-color: var(--ui-text-primary);
    --bs-paper-bg: var(--ui-card-surface);
    --bs-heading-color: var(--ui-heading);
    --bs-menu-bg: var(--ui-sidebar-bg);
    --bs-menu-color: var(--ui-sidebar-text);
    --bs-menu-hover-bg: var(--ui-sidebar-hover);
    --bs-menu-hover-color: var(--ui-sidebar-text);
    --bs-menu-active-bg: var(--ui-accent);
    --bs-menu-active-color: var(--ui-button-text);
    --bs-menu-active-toggle-bg: var(--ui-sidebar-hover);
    --bs-menu-sub-active-bg: var(--ui-accent);
    --bs-menu-sub-active-color: var(--ui-button-text);
    --bs-menu-box-shadow: none;
    --bs-navbar-bg: var(--ui-topbar-bg);
    --bs-primary: var(--ui-accent);
    --bs-link-color: var(--ui-accent);
    --bs-link-hover-color: var(--ui-accent-hover);
    --bs-border-color: var(--ui-border);
}

/* Same overrides for dark theme selector specificity */
[data-bs-theme=dark] {
    --bs-body-bg: var(--ui-bg-main);
    --bs-body-color: var(--ui-text-primary);
    --bs-paper-bg: var(--ui-card-surface);
    --bs-paper-bg-rgb: 0, 0, 0;
    --bs-heading-color: var(--ui-heading);
    --bs-menu-bg: var(--ui-sidebar-bg);
    --bs-menu-bg-rgb: 0, 0, 0;
    --bs-menu-color: var(--ui-sidebar-text);
    --bs-menu-hover-bg: var(--ui-sidebar-hover);
    --bs-menu-hover-color: var(--ui-sidebar-text);
    --bs-menu-active-bg: var(--ui-accent);
    --bs-menu-active-color: var(--ui-button-text);
    --bs-menu-active-toggle-bg: var(--ui-sidebar-hover);
    --bs-menu-sub-active-bg: var(--ui-accent);
    --bs-menu-sub-active-color: var(--ui-button-text);
    --bs-menu-box-shadow: none;
    --bs-navbar-bg: var(--ui-topbar-bg);
    --bs-primary: var(--ui-accent);
    --bs-link-color: var(--ui-accent);
    --bs-link-hover-color: var(--ui-accent-hover);
    --bs-border-color: var(--ui-border);
}

html,
body {
    background: var(--ui-bg-main) !important;
    color: var(--ui-text-primary);
}

body,
.layout-wrapper,
.content-wrapper {
    font-family: var(--ui-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.fw-bold,
.card-title,
.section-title {
    color: var(--ui-heading);
    font-family: var(--ui-font-heading);
    letter-spacing: var(--ui-heading-spacing);
    font-weight: var(--ui-heading-weight);
}

/* Preserve white text in explicitly styled containers */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .fw-bold, .text-white .card-title,
[style*="color"] h1, [style*="color"] h2, [style*="color"] h3,
[style*="color"] h4, [style*="color"] h5, [style*="color"] h6 {
    color: inherit;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .06;
    background-image: var(--ui-bg-pattern);
    background-size: 180px 180px;
}

.layout-navbar,
.navbar,
.navbar-detached,
.layout-navbar-fixed .layout-navbar,
html[data-bs-theme="dark"] .layout-navbar,
html[data-bs-theme="dark"] .layout-navbar.navbar-detached,
html[data-bs-theme="dark"] .bg-navbar-theme,
html[data-bs-theme="dark"] #layout-navbar.navbar-detached {
    background: var(--ui-topbar-bg) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kill the core.min.css blur pseudo-element on navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: none !important;
    mask: none !important;
}

/* Kill the scrolled-state blur on navbar */
.layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--ui-topbar-bg) !important;
}

#layout-menu,
.layout-menu,
.menu,
.menu-vertical,
html[data-bs-theme="dark"] #layout-menu,
html[data-bs-theme="dark"] .layout-menu,
html[data-bs-theme="dark"] .menu {
    background: var(--ui-sidebar-bg) !important;
    background-color: var(--ui-sidebar-bg) !important;
    color: var(--ui-sidebar-text) !important;
    border-right: 1px solid var(--ui-border) !important;
}

.dg-sidebar-user,
.dg-sidebar-user:hover,
.dg-sidebar-user:focus,
.dg-sidebar-user:active,
html[data-bs-theme="dark"] .dg-sidebar-user,
#layout-menu .dg-sidebar-user {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ─── Bridge: brand icon & user avatar follow theme accent ─── */
.dg-brand-icon {
    background: var(--ui-accent) !important;
    color: var(--ui-bg-main) !important;
}

.dg-user-avatar {
    background: var(--ui-accent) !important;
    color: var(--ui-bg-main) !important;
}

.dg-user-avatar::after {
    background: var(--ui-accent) !important;
}

.dg-user-name {
    color: var(--ui-heading) !important;
}

.dg-user-balance {
    color: var(--ui-accent) !important;
}

.dg-brand-name {
    color: var(--ui-heading) !important;
}

/* ─── Menu inner shadow — must use sidebar-bg ─── */
.menu-inner-shadow {
    background: linear-gradient(var(--ui-sidebar-bg) 41%, transparent 95%, transparent) !important;
}

/* ─── Sidebar toggle button ─── */
.menu .app-brand .layout-menu-toggle {
    background-color: var(--ui-sidebar-bg) !important;
    border-color: var(--ui-bg-main) !important;
    color: var(--ui-text-muted) !important;
}

.menu .app-brand .layout-menu-toggle i {
    color: var(--ui-text-muted) !important;
}

/* ─── Sidebar brand area — no extra background ─── */
.app-brand,
.dg-sidebar-brand,
#layout-menu .app-brand {
    background: transparent !important;
}

.menu-vertical .menu-item .menu-link,
.menu-vertical .menu-header,
.menu-vertical .menu-icon,
.app-brand-text,
.menu-text,
html[data-bs-theme="dark"] #layout-menu .menu-inner > .menu-item > .menu-link,
html[data-bs-theme="dark"] #layout-menu .menu-sub .menu-link,
html[data-bs-theme="dark"] #layout-menu .menu-link .menu-icon {
    color: var(--ui-sidebar-text) !important;
}

.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.open > .menu-link,
html[data-bs-theme="dark"] #layout-menu .menu-item.active > .menu-link,
html[data-bs-theme="dark"] #layout-menu .menu-item.open > .menu-link {
    color: var(--ui-sidebar-active) !important;
    background: color-mix(in srgb, var(--ui-sidebar-active) 18%, transparent) !important;
}

html[data-bs-theme="dark"] #layout-menu .menu-item.active > .menu-link::before {
    background: var(--ui-accent) !important;
}

html[data-bs-theme="dark"] #layout-menu .menu-item.active > .menu-link .menu-icon {
    color: var(--ui-accent) !important;
    opacity: 1;
}

.menu-vertical .menu-item .menu-link:hover,
html[data-bs-theme="dark"] #layout-menu .menu-inner > .menu-item:hover > .menu-link,
html[data-bs-theme="dark"] #layout-menu .menu-sub .menu-item:hover > .menu-link {
    background: var(--ui-sidebar-hover) !important;
    color: var(--ui-heading) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.alert,
.accordion-item,
.offcanvas,
.table,
.form-control,
.form-select,
.input-group-text {
    background-color: var(--ui-card-surface) !important;
    color: var(--ui-text-primary) !important;
    border-color: var(--ui-border) !important;
}

/* ─── Preserve explicit Bootstrap bg/text utilities on colored cards ─── */
.card[style*="background"],
.card.bg-primary, .card.bg-success, .card.bg-danger, .card.bg-warning, .card.bg-info,
.card.bg-dark, .card.bg-secondary {
    color: inherit !important;
}
.card[style*="background"] .card-body,
.card.bg-primary .card-body, .card.bg-success .card-body, .card.bg-danger .card-body,
.card.bg-warning .card-body, .card.bg-info .card-body, .card.bg-dark .card-body {
    background: transparent !important;
    color: inherit !important;
}
.card[style*="background"] .table,
.card.bg-primary .table, .card.bg-success .table, .card.bg-danger .table {
    background: transparent !important;
    color: inherit !important;
}
.text-white { color: #fff !important; }
.text-white-50 { color: rgba(255,255,255,.5) !important; }
.bg-label-primary { background-color: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-card-surface)) !important; color: var(--ui-text-primary) !important; }
.bg-label-success { background-color: color-mix(in srgb, var(--ui-success) 12%, var(--ui-card-surface)) !important; color: var(--ui-text-primary) !important; }
.bg-label-danger { background-color: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-card-surface)) !important; color: var(--ui-text-primary) !important; }
.bg-label-warning { background-color: color-mix(in srgb, var(--ui-warning) 12%, var(--ui-card-surface)) !important; color: var(--ui-text-primary) !important; }
.bg-label-info { background-color: color-mix(in srgb, var(--ui-info) 12%, var(--ui-card-surface)) !important; color: var(--ui-text-primary) !important; }
.bg-label-secondary { background-color: color-mix(in srgb, var(--ui-text-muted) 12%, var(--ui-card-surface)) !important; color: var(--ui-text-primary) !important; }
.bg-light { background-color: color-mix(in srgb, var(--ui-border) 20%, var(--ui-card-surface)) !important; }

.bg-footer-theme,
.content-footer,
footer.content-footer {
    background-color: var(--ui-footer-bg, var(--ui-card-surface)) !important;
    color: var(--ui-text-secondary) !important;
    border-top: 1px solid var(--ui-border) !important;
}

.card,
.modal-content,
.dropdown-menu,
.alert,
.offcanvas {
    border-radius: var(--ui-card-radius) !important;
    box-shadow: var(--ui-shadow);
}

.form-control,
.form-select,
.input-group-text,
select,
textarea,
input {
    background: var(--ui-input-bg) !important;
    color: var(--ui-text-primary) !important;
    border-color: var(--ui-border) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ui-accent) 22%, transparent) !important;
}

.btn,
button,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
    border-radius: var(--ui-button-radius) !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
    background: var(--ui-button-bg) !important;
    border-color: var(--ui-button-bg) !important;
    color: var(--ui-button-text) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--ui-button-hover) !important;
    border-color: var(--ui-button-hover) !important;
}

.btn-outline-primary {
    border-color: var(--ui-accent) !important;
    color: var(--ui-accent) !important;
}

.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--ui-accent) 18%, transparent) !important;
}

.text-dark,
.text-body,
.text-body-emphasis {
    color: var(--ui-text-primary) !important;
}

.text-muted,
.text-secondary,
.small,
.form-text {
    color: var(--ui-text-muted) !important;
}

/* Bootstrap color utilities mapped to theme tokens */
.text-primary { color: var(--ui-accent) !important; }
.text-success { color: var(--ui-success) !important; }
.text-warning { color: var(--ui-warning) !important; }
.text-danger { color: var(--ui-danger) !important; }
.text-info { color: var(--ui-info) !important; }

a,
.link-primary,
.nav-link,
.dropdown-item:active {
    color: var(--ui-accent);
}

a:hover,
.nav-link:hover {
    color: var(--ui-accent-hover);
}

.badge,
.chip {
    background: var(--ui-badge-bg) !important;
    color: var(--ui-badge-text) !important;
    border: 1px solid color-mix(in srgb, var(--ui-badge-bg) 40%, var(--ui-border));
}

/* Preserve labeled/colored badge variants */
.badge.bg-label-primary, .badge.bg-primary { background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-card-surface)) !important; color: var(--ui-accent) !important; border-color: color-mix(in srgb, var(--ui-accent) 25%, transparent) !important; }
.badge.bg-label-success, .badge.bg-success { background: color-mix(in srgb, var(--ui-success) 14%, var(--ui-card-surface)) !important; color: var(--ui-success) !important; border-color: color-mix(in srgb, var(--ui-success) 25%, transparent) !important; }
.badge.bg-label-warning, .badge.bg-warning { background: color-mix(in srgb, var(--ui-warning) 14%, var(--ui-card-surface)) !important; color: var(--ui-warning) !important; border-color: color-mix(in srgb, var(--ui-warning) 25%, transparent) !important; }
.badge.bg-label-danger, .badge.bg-danger { background: color-mix(in srgb, var(--ui-danger) 14%, var(--ui-card-surface)) !important; color: var(--ui-danger) !important; border-color: color-mix(in srgb, var(--ui-danger) 25%, transparent) !important; }
.badge.bg-label-info, .badge.bg-info { background: color-mix(in srgb, var(--ui-info) 14%, var(--ui-card-surface)) !important; color: var(--ui-info) !important; border-color: color-mix(in srgb, var(--ui-info) 25%, transparent) !important; }
.badge.bg-label-secondary, .badge.bg-secondary { background: color-mix(in srgb, var(--ui-text-muted) 14%, var(--ui-card-surface)) !important; color: var(--ui-text-muted) !important; border-color: color-mix(in srgb, var(--ui-text-muted) 25%, transparent) !important; }

.table thead th,
.table td,
.table th {
    border-color: var(--ui-border) !important;
    color: var(--ui-text-primary) !important;
}

.table-hover tbody tr:hover {
    background: var(--ui-table-hover) !important;
}

.table-light,
.table-light th,
thead.table-light,
thead.table-light th {
    background: var(--ui-bg-secondary) !important;
    color: var(--ui-text-muted) !important;
}

.progress {
    background: var(--ui-bg-secondary) !important;
}

i[class*='bx'],
i[class*='fa'],
.icon,
.menu-icon,
.tf-icons {
    color: var(--ui-icon-color);
}

/* Icons inside explicitly styled containers inherit parent color */
.text-white i[class*='bx'], .text-white i[class*='fa'],
[style*="color"] i[class*='bx'], [style*="color"] i[class*='fa'],
.text-success i[class*='bx'], .text-warning i[class*='bx'],
.text-danger i[class*='bx'], .text-info i[class*='bx'],
.text-primary i[class*='bx'],
.text-success i[class*='fa'], .text-warning i[class*='fa'],
.text-danger i[class*='fa'], .text-info i[class*='fa'],
.text-primary i[class*='fa'] {
    color: inherit;
}

.menu-icon,
.icon-wrap,
.icon-box,
.stat-icon,
.card-icon {
    background: var(--ui-icon-bg);
    border-radius: var(--ui-icon-radius);
}

/* ─── Sidebar menu icon themed treatment ─── */
.menu-vertical .menu-item .menu-link .menu-icon,
.menu-vertical .menu-item .menu-link .tf-icons {
    color: var(--ui-icon-color) !important;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.menu-vertical .menu-item.active > .menu-link .menu-icon,
.menu-vertical .menu-item.active > .menu-link .tf-icons,
.menu-vertical .menu-item.open > .menu-link .menu-icon,
.menu-vertical .menu-item.open > .menu-link .tf-icons {
    color: var(--ui-sidebar-active) !important;
}

.menu-vertical .menu-item .menu-link:hover .menu-icon,
.menu-vertical .menu-item .menu-link:hover .tf-icons {
    color: var(--ui-accent) !important;
    transform: scale(1.08);
}

/* ─── Icon shape variants (set by data-ui-icon-shape) ─── */
[data-ui-icon-shape='circle'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='circle'] .icon-box,
[data-ui-icon-shape='circle'] .stat-icon,
[data-ui-icon-shape='circle'] .card-icon {
    border-radius: 50%;
    padding: .35rem;
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ui-icon-bg);
}

[data-ui-icon-shape='rounded'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='rounded'] .icon-box,
[data-ui-icon-shape='rounded'] .stat-icon {
    border-radius: .55rem;
    padding: .3rem;
    background: var(--ui-icon-bg);
}

[data-ui-icon-shape='square'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='square'] .icon-box,
[data-ui-icon-shape='square'] .stat-icon {
    border-radius: .2rem;
    padding: .3rem;
    background: var(--ui-icon-bg);
}

[data-ui-icon-shape='squircle'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='squircle'] .icon-box,
[data-ui-icon-shape='squircle'] .stat-icon {
    border-radius: 30%;
    padding: .35rem;
    background: var(--ui-icon-bg);
}

[data-ui-icon-shape='diamond'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='diamond'] .icon-box,
[data-ui-icon-shape='diamond'] .stat-icon {
    border-radius: .3rem;
    padding: .32rem;
    transform: rotate(0deg);
    background: var(--ui-icon-bg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

[data-ui-icon-shape='hex'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='hex'] .icon-box,
[data-ui-icon-shape='hex'] .stat-icon {
    border-radius: .15rem;
    padding: .3rem;
    background: var(--ui-icon-bg);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

[data-ui-icon-shape='pill'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='pill'] .icon-box,
[data-ui-icon-shape='pill'] .stat-icon {
    border-radius: 999px;
    padding: .28rem .55rem;
    background: var(--ui-icon-bg);
}

[data-ui-icon-shape='capsule'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='capsule'] .icon-box,
[data-ui-icon-shape='capsule'] .stat-icon {
    border-radius: .7rem;
    padding: .32rem .5rem;
    background: var(--ui-icon-bg);
}

[data-ui-icon-shape='leaf'] :not(.glass-sidebar) > .menu-inner .menu-icon,
[data-ui-icon-shape='leaf'] .icon-box,
[data-ui-icon-shape='leaf'] .stat-icon {
    border-radius: .15rem 1rem .15rem 1rem;
    padding: .32rem;
    background: var(--ui-icon-bg);
}

.modal-content,
.modal-header,
.modal-footer {
    background: var(--ui-modal-bg) !important;
    border-color: var(--ui-border) !important;
}

[data-ui-hover='lift-soft'] .card:hover,
.card[data-ui-hover='lift-soft']:hover {
    transform: translateY(-4px);
}

[data-ui-hover='border-glow'] .card:hover,
.card[data-ui-hover='border-glow']:hover {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 20%, transparent), var(--ui-shadow) !important;
}

[data-ui-hover='accent-line'] .card:hover,
.card[data-ui-hover='accent-line']:hover {
    box-shadow: inset 0 -2px 0 var(--ui-accent), var(--ui-shadow) !important;
}

[data-ui-hover='soft-glow'] .card:hover,
.card[data-ui-hover='soft-glow']:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 30%, transparent), 0 16px 40px color-mix(in srgb, var(--ui-accent) 16%, transparent) !important;
}

[data-ui-hover='scan-border'] .card:hover,
.card[data-ui-hover='scan-border']:hover {
    border-image: linear-gradient(90deg, transparent, var(--ui-accent), transparent) 1;
}

[data-ui-density='compact'] .card-body,
[data-ui-density='compact'] .table td,
[data-ui-density='compact'] .table th,
[data-ui-density='compact'] .btn,
[data-ui-density='compact'] .form-control,
[data-ui-density='compact'] .form-select {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
}

[data-ui-compact='1'] .container-p-y,
[data-ui-compact='1'] .content-wrapper,
[data-ui-compact='1'] .layout-page {
    padding-top: .5rem !important;
}

[data-ui-sidebar='minimal'] #layout-menu {
    width: 14.25rem !important;
}

[data-ui-sidebar='floating'] #layout-menu,
[data-ui-sidebar='floating'] .layout-navbar {
    margin: .6rem;
    border-radius: 1rem;
}

/* Light themes: fill sidebar column gap so body-bg doesn't bleed through */
html[data-bs-theme="light"] #layout-menu,
html[data-bs-theme="light"] .layout-menu,
html[data-bs-theme="light"] .glass-sidebar,
html[data-bs-theme="light"] .glass-sidebar.layout-menu,
html[data-bs-theme="light"] .glass-sidebar.menu-vertical {
    background: var(--ui-sidebar-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-bs-theme="light"] .glass-sidebar::before {
    display: none;
}

[data-ui-radius='sharp'] {
    --ui-card-radius: .25rem;
    --ui-button-radius: .2rem;
    --ui-icon-radius: .2rem;
}

[data-ui-radius='medium'] {
    --ui-card-radius: .75rem;
    --ui-button-radius: .6rem;
    --ui-icon-radius: .55rem;
}

[data-ui-radius='soft'] {
    --ui-card-radius: 1.1rem;
    --ui-button-radius: .95rem;
    --ui-icon-radius: .85rem;
}

[data-ui-motion='off'] *,
[data-ui-motion='off'] *::before,
[data-ui-motion='off'] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

[data-ui-motion='low'] *,
[data-ui-motion='low'] *::before,
[data-ui-motion='low'] *::after {
    animation-duration: .2s !important;
    transition-duration: .15s !important;
}

[data-ui-motion='normal'] .card,
[data-ui-motion='normal'] .btn,
[data-ui-motion='normal'] .menu-link,
[data-ui-motion='normal'] .dropdown-item {
    transition: all .22s ease;
}

@media (max-width: 992px) {
    body::before {
        opacity: .04;
        background-size: 220px 220px;
    }
}


/* ═══════════════════════════════════════════════════════════
   GLASS SIDEBAR — Modern Glassmorphism Design
   Targets BOTH Blade (.glass-sidebar) AND Vue (.gw-sidebar)
   ═══════════════════════════════════════════════════════════ */

/* ─── Blade Sidebar Glass Container ─── */
.glass-sidebar,
.glass-sidebar.layout-menu,
.glass-sidebar.menu-vertical {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ui-sidebar-bg) 85%, transparent) 0%,
        color-mix(in srgb, var(--ui-sidebar-bg) 92%, transparent) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    border-right: 1px solid color-mix(in srgb, var(--ui-accent) 12%, transparent) !important;
    position: relative;
}

.glass-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ui-accent) 5%, transparent) 0%,
        transparent 40%,
        color-mix(in srgb, var(--ui-accent) 3%, transparent) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.glass-sidebar > * {
    position: relative;
    z-index: 1;
}

/* ─── Glass User Card ─── */
.glass-user-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .65rem .85rem;
    padding: .75rem .85rem;
    background: color-mix(in srgb, var(--ui-accent) 8%, color-mix(in srgb, var(--ui-card-surface) 60%, transparent));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: .85rem;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 15%, transparent);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.glass-user-card:hover {
    background: color-mix(in srgb, var(--ui-accent) 12%, color-mix(in srgb, var(--ui-card-surface) 70%, transparent));
    border-color: color-mix(in srgb, var(--ui-accent) 25%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

.glass-user-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 70%, var(--ui-bg-main)));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ui-button-text);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

.glass-online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ui-success);
    border: 2px solid var(--ui-sidebar-bg);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-success) 30%, transparent);
}

.glass-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.glass-user-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ui-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.glass-user-balance {
    font-size: .72rem;
    font-weight: 500;
    color: var(--ui-accent);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.glass-user-balance i {
    font-size: .65rem;
}

.glass-user-settings {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    color: var(--ui-text-muted);
    background: color-mix(in srgb, var(--ui-sidebar-hover) 60%, transparent);
    transition: all .25s ease;
    text-decoration: none;
}

.glass-user-settings:hover {
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    transform: rotate(90deg);
}

/* ─── Glass Panel Switch ─── */
.glass-panel-switch {
    margin: 0 .85rem .5rem;
}

.glass-switch-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .65rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-warning);
    background: color-mix(in srgb, var(--ui-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-warning) 18%, transparent);
    text-decoration: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.glass-switch-btn:hover {
    background: color-mix(in srgb, var(--ui-warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--ui-warning) 30%, transparent);
    color: var(--ui-warning);
    transform: translateX(2px);
}

.glass-switch-btn i:first-child {
    font-size: .85rem;
}

.glass-switch-arrow {
    margin-left: auto;
    font-size: .75rem;
    opacity: .6;
    transition: transform .25s ease;
}

.glass-switch-btn:hover .glass-switch-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* ─── Glass Menu Items ─── */
.glass-sidebar .menu-vertical .menu-item .menu-link.glass-menu-link,
.glass-sidebar .menu-item .menu-link.glass-menu-link {
    margin: 2px .65rem;
    padding: .55rem .75rem;
    border-radius: .6rem;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
}

.glass-sidebar .menu-item .menu-link.glass-menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--ui-accent);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.glass-sidebar .menu-item.active > .menu-link.glass-menu-link::before {
    transform: translateY(-50%) scaleY(1);
}

.glass-sidebar .menu-item.active > .menu-link.glass-menu-link {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent) !important;
    color: var(--ui-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

.glass-sidebar .menu-item.active > .menu-link.glass-menu-link .menu-icon {
    color: var(--ui-accent) !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ui-accent) 40%, transparent));
    background-color: currentColor !important;
}

/* ─── Glass sidebar: make icons fully visible ─── */
#layout-menu.glass-sidebar .menu-item .menu-link .menu-icon,
#layout-menu.glass-sidebar .menu-link .menu-icon,
.glass-sidebar .menu-item .menu-link .menu-icon {
    background-color: currentColor !important;
    background-image: none !important;
    color: #b0c6da !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.375rem !important;
    block-size: 1.375rem !important;
    inline-size: 1.375rem !important;
    flex-shrink: 0 !important;
    margin-inline-end: .5rem !important;
    border-radius: 0 !important;
    padding: 0 !important;
    clip-path: none !important;
}

.glass-sidebar .menu-item .menu-link.glass-menu-link:hover {
    background: color-mix(in srgb, var(--ui-sidebar-hover) 80%, transparent) !important;
    transform: translateX(3px);
}

.glass-sidebar .menu-item .menu-link.glass-menu-link:hover .menu-icon {
    transform: scale(1.12);
    color: var(--ui-accent) !important;
    background-color: currentColor !important;
}

/* ─── Glass Menu Headers ─── */
.glass-menu-header .menu-header-text {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ui-text-muted) !important;
    padding: .4rem .85rem;
    text-transform: uppercase;
}

.glass-header-icon {
    font-size: .7rem;
    opacity: .5;
    color: var(--ui-accent);
}

/* ─── Glass Submenu ─── */
.glass-menu-sub,
.glass-sidebar .menu-sub.glass-menu-sub {
    background: color-mix(in srgb, var(--ui-bg-main) 30%, transparent) !important;
    border-radius: 0 0 .55rem .55rem;
    margin: 0 .45rem;
    padding: .25rem 0;
    border-left: 2px solid color-mix(in srgb, var(--ui-accent) 15%, transparent);
    list-style: none;
    padding-left: 0 !important;
}

.glass-menu-sub .menu-item .menu-link {
    padding: .35rem .65rem .35rem .75rem;
    padding-inline-start: .75rem !important;
    font-size: .8rem;
    border-radius: .45rem;
    margin: 1px .3rem;
    text-align: left;
    transition: all .2s ease;
}

.glass-menu-sub .menu-item .menu-link:hover {
    background: color-mix(in srgb, var(--ui-sidebar-hover) 60%, transparent);
    transform: translateX(2px);
}

.glass-menu-sub .menu-item .menu-link::before {
    display: none !important;
}

.glass-menu-sub .menu-item.active > .menu-link {
    color: var(--ui-accent) !important;
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent) !important;
}

/* ─── Glass Logout ─── */
.glass-logout-item {
    margin-top: .5rem;
}

.glass-logout-link,
.glass-sidebar .glass-logout-link.glass-menu-link {
    color: var(--ui-danger) !important;
    opacity: .75;
    transition: all .25s ease;
}

.glass-logout-link:hover,
.glass-sidebar .glass-logout-link.glass-menu-link:hover {
    background: color-mix(in srgb, var(--ui-danger) 12%, transparent) !important;
    opacity: 1;
}

.glass-logout-link .menu-icon,
.glass-logout-link:hover .menu-icon {
    color: var(--ui-danger) !important;
}

/* ─── Glass Sidebar Footer ─── */
.glass-sidebar-footer {
    margin-top: auto;
    padding: .75rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--ui-border) 40%, transparent);
}

.glass-footer-version {
    font-size: .65rem;
    color: var(--ui-text-muted);
    opacity: .5;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* ─── Glass Brand Icon ─── */
.glass-brand-icon {
    background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 60%, var(--ui-bg-main))) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ui-accent) 30%, transparent) !important;
}


/* ═══════════════════════════════════════════════════════════
   VUE / INERTIA SIDEBAR (.gw-sidebar) — Glass Override
   ═══════════════════════════════════════════════════════════ */

.gw-sidebar {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ui-sidebar-bg) 85%, transparent) 0%,
        color-mix(in srgb, var(--ui-sidebar-bg) 92%, transparent) 100%
    ) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    border-right: 1px solid color-mix(in srgb, var(--ui-accent) 12%, transparent) !important;
    position: relative;
}

.gw-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ui-accent) 5%, transparent) 0%,
        transparent 40%,
        color-mix(in srgb, var(--ui-accent) 3%, transparent) 100%
    );
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.gw-sidebar > * {
    position: relative;
    z-index: 1;
}

/* Vue sidebar items — glass treatment */
.gw-sidebar-item {
    margin: 2px .5rem;
    border-radius: .6rem;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
}

.gw-sidebar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--ui-accent);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 2;
}

.gw-sidebar-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

.gw-sidebar-item.active {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent) !important;
    color: var(--ui-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

.gw-sidebar-item:not(.active):hover {
    background: color-mix(in srgb, var(--ui-sidebar-hover) 80%, transparent) !important;
    transform: translateX(3px);
}

.gw-sidebar-item:not(.active):hover i,
.gw-sidebar-item:not(.active):hover .bx {
    color: var(--ui-accent) !important;
    transform: scale(1.12);
}

.gw-sidebar-item.active i,
.gw-sidebar-item.active .bx {
    color: var(--ui-accent) !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ui-accent) 40%, transparent));
}

/* Vue sidebar section headers */
.gw-sidebar-group-label {
    font-size: .62rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: var(--ui-text-muted) !important;
    text-transform: uppercase;
    padding: .6rem .85rem .3rem;
    opacity: .7;
}

/* Vue sidebar avatar */
.gw-sidebar .gw-avatar,
.gw-topbar .gw-avatar {
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 70%, var(--ui-bg-main)));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 30%, transparent);
}

/* Vue sidebar collapsed state */
.gw-sidebar-collapsed .gw-sidebar-item {
    margin: 2px .35rem;
    border-radius: .55rem;
}

/* Vue topbar glass treatment */
.gw-topbar {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ui-topbar-bg) 88%, transparent),
        color-mix(in srgb, var(--ui-topbar-bg) 94%, transparent)
    ) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-accent) 8%, transparent) !important;
}

/* Vue dropdown glass */
.gw-dropdown-menu {
    background: color-mix(in srgb, var(--ui-modal-bg) 92%, transparent) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 12%, transparent) !important;
    border-radius: .75rem !important;
    box-shadow: 0 16px 48px color-mix(in srgb, var(--ui-bg-main) 60%, transparent) !important;
}