body.lebone-theme-app {
    min-height: 100vh;
    background:
        radial-gradient(900px 400px at 10% -10%, rgba(44, 123, 229, 0.16), transparent 65%),
        radial-gradient(900px 480px at 95% 5%, rgba(0, 210, 122, 0.12), transparent 70%),
        linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%);
    color: var(--bs-body-color);
}

body.lebone-theme-app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.08;
    background-image:
        linear-gradient(rgba(31, 41, 55, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 41, 55, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}

body.lebone-theme-app::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background: url("/assets/video/beach.jpg") center center / cover no-repeat;
    opacity: 0.035;
    filter: saturate(0.9) contrast(0.95);
}

html[data-bs-theme="dark"] body.lebone-theme-app {
    background:
        radial-gradient(900px 460px at 8% -10%, rgba(44, 123, 229, 0.22), transparent 65%),
        radial-gradient(900px 520px at 100% 0%, rgba(0, 210, 122, 0.16), transparent 70%),
        linear-gradient(180deg, #070b14 0%, #0b1220 100%);
    color: #d8e2ef;
}

html[data-bs-theme="dark"] body.lebone-theme-app::before {
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

html[data-bs-theme="dark"] body.lebone-theme-app::after {
    opacity: 0.05;
    filter: saturate(0.8) brightness(0.55);
}

.lebone-shell {
    min-height: 100vh;
}

.lebone-shell-main,
.lebone-shell-admin {
    padding-bottom: 3rem;
}

.lebone-shell-main .lebone-sidebar,
.lebone-shell-admin .lebone-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px !important;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
}

.lebone-topbar {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 0;
    border-right: 0;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.35);
}

.lebone-topbar .navbar-brand {
    color: var(--bs-emphasis-color);
}

html[data-bs-theme="dark"] .lebone-topbar {
    background: rgba(11, 18, 32, 0.78) !important;
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 32px -22px rgba(0, 0, 0, 0.65);
}

.lebone-main-outlet,
.lebone-admin-outlet,
.lebone-account-sub-shell,
.lebone-auth-route-shell {
    position: relative;
    min-height: calc(100vh - 4.25rem);
    padding: 1rem 1rem 3rem;
    box-sizing: border-box;
    display: block !important;
    margin-top: 0 !important;
    align-content: normal !important;
    justify-content: flex-start !important;
}

.lebone-shell-main .lebone-main-outlet {
    padding-top: 5rem;
}

.lebone-shell-main .lebone-sidebar ~ .lebone-main-outlet {
    margin-left: 280px !important;
    width: calc(100vw - 280px);
    max-width: calc(100vw - 280px);
    overflow-y: visible !important;
    overflow-x: clip;
}

.lebone-shell-admin .lebone-sidebar ~ .lebone-admin-outlet {
    margin-left: 280px !important;
    width: calc(100vw - 280px);
    max-width: calc(100vw - 280px);
    overflow-y: visible !important;
    overflow-x: clip;
    min-height: calc(100vh - 0.5rem) !important;
    height: auto;
    padding-top: 0.5rem !important;
    padding-bottom: 2rem !important;
}

.lebone-admin-outlet > :first-child:not(.modal):not(.toast-container):not([class*="toast"]) {
    margin-top: 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

.lebone-empty-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.lebone-auth-route-shell {
    padding-top: 2rem;
}

.lebone-manage-shell {
    min-height: calc(100vh - 4rem);
}

.lebone-surface-card,
.page-content-body,
.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.accordion-item,
.list-group-item,
.alert,
.toast {
    border-radius: 0.8rem !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 14px 36px -30px rgba(15, 23, 42, 0.45);
}

.lebone-surface-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.22);
    backdrop-filter: blur(8px);
}

.page-content-body {
    background: rgba(255, 255, 255, 0.86);
    border-width: 1px;
}

html[data-bs-theme="dark"] .lebone-surface-card,
html[data-bs-theme="dark"] .page-content-body,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .alert,
html[data-bs-theme="dark"] .toast {
    background: rgba(11, 18, 32, 0.86) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 18px 34px -26px rgba(0, 0, 0, 0.7);
}

/* Keep Bootstrap/BlazorBootstrap modals above the backdrop regardless of themed shell stacking contexts. */
body .modal-backdrop {
    z-index: 1990 !important;
}

body .modal {
    z-index: 2000 !important;
}

.lebone-theme-app h1,
.lebone-theme-app h2,
.lebone-theme-app h3,
.lebone-theme-app h4 {
    letter-spacing: -0.02em;
}

.lebone-theme-app h1,
.lebone-theme-app h2 {
    font-weight: 700;
}

.lebone-theme-app .btn {
    border-radius: 0.65rem;
    box-shadow: none;
}

.lebone-theme-app .btn-primary {
    background: linear-gradient(135deg, #2c7be5 0%, #1f5fb8 100%);
    border-color: #2c7be5;
}

.lebone-theme-app .btn-primary:hover,
.lebone-theme-app .btn-primary:focus {
    background: linear-gradient(135deg, #2468c5 0%, #184a8f 100%);
    border-color: #2468c5;
}

.lebone-theme-app .btn-success {
    background: linear-gradient(135deg, #00d27a 0%, #00a666 100%);
    border-color: #00c173;
}

/* Inline grid actions: keep on one line and reduce footprint */
.lebone-theme-app .action-inline-buttons {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    min-width: max-content;
}

.lebone-theme-app .action-inline-buttons .btn {
    padding: 0.2rem 0.42rem;
    font-size: 0.74rem;
    line-height: 1.1;
    border-radius: 0.5rem;
}

.lebone-theme-app .form-control,
.lebone-theme-app .form-select,
.lebone-theme-app .input-group-text,
.lebone-theme-app textarea {
    border-radius: 0.65rem;
}

.lebone-theme-app .form-control:focus,
.lebone-theme-app .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(44, 123, 229, 0.14);
    border-color: rgba(44, 123, 229, 0.45);
}

.lebone-theme-app .breadcrumb,
.lebone-theme-app .pagination,
.lebone-theme-app .nav-pills,
.lebone-theme-app .nav-tabs {
    gap: 0.25rem;
}

.lebone-theme-app .nav-pills .nav-link,
.lebone-theme-app .nav-tabs .nav-link {
    border-radius: 0.6rem;
}

.lebone-theme-app .nav-pills .nav-link.active,
.lebone-theme-app .nav-tabs .nav-link.active {
    box-shadow: 0 10px 24px -18px rgba(44, 123, 229, 0.9);
}

.lebone-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.88) 100%),
        url("/assets/img/illustrations/bg-wave.png") bottom center / cover no-repeat !important;
    border-right: 1px solid rgba(148, 163, 184, 0.22) !important;
    backdrop-filter: blur(12px);
    box-shadow: 18px 0 40px -34px rgba(15, 23, 42, 0.45) !important;
}

.lebone-sidebar .accordion {
    background: transparent !important;
}

.lebone-sidebar .accordion-item {
    background: transparent !important;
    box-shadow: none;
    border: 0 !important;
    border-radius: 0 !important;
}

.lebone-sidebar .accordion-button {
    background: transparent !important;
    color: var(--bs-emphasis-color) !important;
    font-weight: 600;
    border-radius: 0.75rem !important;
    margin: 0.15rem 0.5rem;
}

.lebone-sidebar .accordion-button:not(.collapsed) {
    background: rgba(44, 123, 229, 0.08) !important;
    color: #1f5fb8 !important;
    box-shadow: none !important;
}

.lebone-sidebar .nav-item a,
.lebone-sidebar .nav-link {
    border-radius: 0.7rem !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Sidebar accordion menu links inherit text-center from the container.
   Force submenu items to align left so icon + label blocks line up cleanly. */
.lebone-sidebar .accordion-body,
.lebone-sidebar .accordion-body .nav-item,
.lebone-sidebar .accordion-body .nav-item a,
.lebone-sidebar .accordion-body .nav-link {
    text-align: left !important;
}

/* Normalize submenu typography and icon alignment across all sections. */
.lebone-sidebar .accordion-body .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0;
    font-size: 0.88rem !important;
    font-weight: 500;
    line-height: 1.25;
}

.lebone-sidebar .accordion-body .nav-link .nav-label {
    font-size: inherit;
    font-weight: inherit;
}

.lebone-sidebar .accordion-body .nav-link > .bi {
    width: 1.25rem;
    min-width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem !important;
    text-align: center;
}

.lebone-sidebar .nav-item a:hover,
.lebone-sidebar .nav-link:hover {
    background: rgba(44, 123, 229, 0.08) !important;
    color: var(--bs-emphasis-color) !important;
    transform: translateX(2px);
}

.lebone-sidebar .nav-item a.active,
.lebone-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(44, 123, 229, 0.14), rgba(0, 210, 122, 0.1)) !important;
    color: var(--bs-emphasis-color) !important;
    border: 1px solid rgba(44, 123, 229, 0.14);
}

html[data-bs-theme="dark"] .lebone-sidebar {
    background:
        linear-gradient(180deg, rgba(11, 18, 32, 0.92) 0%, rgba(7, 11, 20, 0.92) 100%),
        url("/assets/img/illustrations/bg-wave.png") bottom center / cover no-repeat !important;
    border-right-color: rgba(148, 163, 184, 0.12) !important;
    box-shadow: 22px 0 44px -28px rgba(0, 0, 0, 0.7) !important;
}

html[data-bs-theme="dark"] .lebone-sidebar .accordion-button:not(.collapsed) {
    color: #9ec5ff !important;
    background: rgba(44, 123, 229, 0.14) !important;
}

html[data-bs-theme="dark"] .lebone-sidebar .nav-item a:hover,
html[data-bs-theme="dark"] .lebone-sidebar .nav-link:hover {
    background: rgba(148, 163, 184, 0.12) !important;
}

.lebone-footer {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(10px);
    border-top-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-bs-theme="dark"] .lebone-footer {
    background: rgba(11, 18, 32, 0.8) !important;
    border-top-color: rgba(148, 163, 184, 0.12) !important;
}

.lebone-access-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 1rem;
    padding: 1.25rem;
    max-width: 40rem;
    box-shadow: 0 20px 35px -28px rgba(15, 23, 42, 0.55);
}

html[data-bs-theme="dark"] .lebone-access-card {
    background: rgba(11, 18, 32, 0.88);
    border-color: rgba(148, 163, 184, 0.14) !important;
}

@media (max-width: 991.98px) {
    .lebone-shell-main .lebone-sidebar,
    .lebone-shell-admin .lebone-sidebar {
        position: static;
        top: auto;
        left: auto;
        width: 100% !important;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .lebone-shell-main .lebone-sidebar ~ .lebone-main-outlet,
    .lebone-shell-admin .lebone-sidebar ~ .lebone-admin-outlet {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    .lebone-main-outlet,
    .lebone-admin-outlet {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .lebone-topbar .navbar-brand span {
        font-size: 0.95rem;
    }
}

@media (max-width: 767.98px) {
    .lebone-empty-body,
    .lebone-auth-route-shell,
    .lebone-account-sub-shell {
        padding: 1rem 0.75rem 2.5rem;
    }

    .lebone-surface-card {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }
}