/* ============================
   SISTEMIN LAYOUT (Admin Shell)
   ============================ */

/* ===== Root tokens ===== */
:root {
    --bs-primary: #0d6efd;
    --bs-body-bg: #f6f6f8;
    --sl-dark-bg: #0a0c27;
    --sl-dark-surface: #1a1c3d;
    --sl-dark-card: #232651;
    --sl-dark-border: #2d3266;
    --sl-dark-text: #f8f9fa;
    --sl-dark-muted: #adb5bd;
    --sl-primary: #0d6efd;
    --brand-logo-primary: #1E3A8A;
    --brand-logo-secondary: #0D9488;
    --brand-logo-accent: #F59E0B;
    --brand-wordmark-main: #0F172A;
    --brand-wordmark-accent: #1E3A8A;
}

/* ===== Base ===== */
html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: var(--bs-body-bg);
    overflow: hidden;
}

/* ===== Material Symbols ===== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined Variable';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    text-transform: none;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    vertical-align: middle;
}

.material-symbols-outlined.icon-fill {
    font-variation-settings: 'FILL' 1;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.brand-lockup.stacked {
    flex-direction: column;
    text-align: center;
}

.brand-mark {
    display: block;
    flex: 0 0 auto;
}

.brand-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-wordmark-name {
    font-family: "Lexend", sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--brand-wordmark-main);
}

.brand-wordmark-name .accent {
    color: var(--brand-wordmark-accent);
}

.brand-wordmark-tagline {
    margin-top: 0.38rem;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #616f89;
}

/* ============================
   Layout Structure
   ============================ */

.wrapper {
    display: flex;
    height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sidebar.offcanvas-lg {
    --bs-offcanvas-width: min(20rem, calc(100vw - 1.5rem));
    --bs-offcanvas-border-color: #dee2e6;
    --bs-offcanvas-bg: #ffffff;
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
}

.sidebar .sidebar-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
    margin-right: -0.25rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(97, 111, 137, 0.45) transparent; /* Firefox */
}

.sidebar .sidebar-nav > .nav-item {
    width: 100%;
    flex: 0 0 auto;
}

.sidebar .sidebar-nav .nav-link {
    width: 100%;
}

/* Sidebar scrollbar (WebKit) */
.sidebar .sidebar-nav::-webkit-scrollbar {
    width: 7px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(97, 111, 137, 0.45);
    border-radius: 999px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(97, 111, 137, 0.65);
}

.sidebar > .mt-auto {
    flex-shrink: 0;
}

.sidebar .nav-link {
    color: #616f89;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
}

.sidebar .nav-link:hover {
    background-color: #f8f9fa;
    color: #111318;
}

.sidebar .nav-link.active {
    background-color: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary);
}

.sidebar .nav-link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.sidebar .sidebar-group-toggle {
    border: 0;
    background: transparent;
    text-align: left;
}

.sidebar .sidebar-group-label {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar .sidebar-group-chevron {
    margin-left: auto;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.sidebar .sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron {
    transform: rotate(180deg);
}

.sidebar .sidebar-submenu-wrap {
    padding-left: 0.3rem;
}

.sidebar .sidebar-submenu .nav-link {
    font-size: 0.84rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
    padding: 0.58rem 0.75rem 0.58rem 2.25rem;
    border-radius: 0.45rem;
}

.sidebar .sidebar-submenu .material-symbols-outlined {
    font-size: 18px;
}

/* ===== Main Content ===== */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wrapper.user-shell .main-content {
    width: 100%;
}

.content-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* ============================
   Components
   ============================ */

.row-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
}

tr:hover .row-actions {
    opacity: 1;
}

.btn-icon-round {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-actions {
    white-space: nowrap;
}

.table-actions .btn-group-actions {
    display: inline-flex;
}

.table-actions .btn-group-actions .btn {
    border-radius: 0 !important;
    margin: 0;
}

.table-actions .btn-group-actions .btn:first-child {
    border-top-left-radius: 0.6rem !important;
    border-bottom-left-radius: 0.6rem !important;
}

.table-actions .btn-group-actions .btn:last-child {
    border-top-right-radius: 0.6rem !important;
    border-bottom-right-radius: 0.6rem !important;
}

.table-actions .btn-group-actions .btn + .btn {
    margin-left: -1px;
}

/* Search input */
.search-input-group .input-group-text {
    background: transparent;
    border-right: none;
}

.search-input-group .form-control {
    border-left: none;
}

.search-input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.22);
    border-radius: 0.375rem;
}

/* ===== Shared selects (avoid raw browser look across modules) ===== */
.form-select {
    border-radius: 0.6rem;
    border-color: #d9deea;
    min-height: 38px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-select:focus {
    border-color: rgba(13, 110, 253, 0.62);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

.dropdown-select-native {
    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;
}

.dropdown-select-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dropdown-select-button {
    min-height: 38px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 0.6rem;
    border-color: #d9deea;
    background: #fff;
    color: #111318;
    overflow: hidden;
    box-sizing: border-box;
}

.dropdown-select-button:hover,
.dropdown-select-button:focus,
.dropdown-select-button.show {
    border-color: rgba(13, 110, 253, 0.62);
    background: #fff;
    color: #111318;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

.dropdown-select-button::after {
    display: none;
}

.dropdown-select-button-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-select-button-icon {
    flex: 0 0 auto;
    opacity: 0.72;
}

.dropdown-select-wrapper.is-disabled .dropdown-select-button,
.dropdown-select-button:disabled {
    background: #eef1f7;
    color: #6c757d;
    border-color: #d9deea;
    box-shadow: none;
}

.dropdown-select-menu {
    width: max-content;
    min-width: 100%;
    max-width: min(36rem, calc(100vw - 2rem));
    max-height: 18rem;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(105, 118, 171, 0.34) transparent;
}

.dropdown-select-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-select-menu::-webkit-scrollbar-thumb {
    background: rgba(105, 118, 171, 0.34);
    border-radius: 999px;
}

.dropdown-select-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(105, 118, 171, 0.52);
}

.dropdown-select-item.active,
.dropdown-select-item:active {
    background-color: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary);
}

/* ===== Shared dropdown menu styling ===== */
.dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid #e4e7f0;
    padding: 0.4rem;
    box-shadow: 0 12px 28px rgba(17, 19, 24, 0.12);
}

.dropdown-item {
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-select-item {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
}

@media (max-width: 767.98px) {
    .dropdown-select-menu {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(13, 110, 253, 0.08);
    color: #111318;
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background-color: rgba(220, 53, 69, 0.08);
    color: #b42332 !important;
}

/* Avatar */
.avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* ============================
   Topbar
   ============================ */

body[data-theme="light"] .app-topbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

body[data-theme="dark"] .app-topbar {
    background-color: var(--sl-dark-surface);
    border-bottom: 1px solid var(--sl-dark-border);
}

/* Search in topbar */
body[data-theme="dark"] .app-topbar .search-input-group .form-control {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .app-topbar .search-input-group .input-group-text {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-muted);
}

body[data-theme="dark"] .app-topbar .search-input-group .form-control::placeholder {
    color: rgba(173, 181, 189, 0.72);
}

body[data-theme="dark"] .app-topbar h5,
body[data-theme="dark"] .app-topbar .fw-medium.fs-6 {
    color: var(--sl-dark-text);
}

.app-topbar-brand {
    color: inherit;
}

.app-topbar-brand:hover {
    color: inherit;
}

.app-topbar-brand .brand-wordmark-name {
    font-size: 1.15rem;
}

.sidebar-brand .brand-wordmark-name {
    font-size: 1.05rem;
}

.sidebar .offcanvas-header .brand-wordmark-name {
    font-size: 1.05rem;
}

.sidebar .offcanvas-header {
    border-bottom: 1px solid #e5e7eb;
    align-items: flex-start;
    gap: 0.75rem;
}

.sidebar .offcanvas-header > :first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar .offcanvas-header .sidebar-offcanvas-close {
    flex: 0 0 auto;
    margin: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #616f89;
    border-radius: 999px;
}

.sidebar .offcanvas-header .sidebar-offcanvas-close:hover,
.sidebar .offcanvas-header .sidebar-offcanvas-close:focus {
    background-color: rgba(13, 110, 253, 0.08);
    color: #111318;
    box-shadow: none;
}

.guest-brand-lockup .brand-wordmark-name {
    font-size: 1.6rem;
}

.landing-brand .brand-wordmark-name {
    font-size: 1.3rem;
}

.user-topbar-nav {
    margin-left: 0.5rem;
}

.topbar-autoschedule-indicator {
    display: none;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: 23rem;
    margin-left: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    text-decoration: none;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.12);
    color: inherit;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.topbar-autoschedule-indicator.is-visible {
    display: inline-flex;
}

.topbar-autoschedule-indicator:hover {
    background: rgba(13, 110, 253, 0.12);
}

.topbar-autoschedule-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.14);
    color: #0d6efd;
}

.topbar-autoschedule-indicator.is-processing .topbar-autoschedule-icon {
    background: rgba(25, 135, 84, 0.14);
    color: #198754;
}

.topbar-autoschedule-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-autoschedule-kicker {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d6efd;
}

.topbar-autoschedule-indicator.is-processing .topbar-autoschedule-kicker {
    color: #198754;
}

.topbar-autoschedule-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1f2a44;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-autoschedule-progress {
    width: 5.5rem;
    height: 0.42rem;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
}

.topbar-autoschedule-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #4f8cff 0%, #8ff0b1 100%);
    transition: width 0.4s ease;
}

.topbar-autoschedule-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: #58657f;
    white-space: nowrap;
}

.user-topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.3rem;
    padding: 0.45rem 0.8rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
    color: #616f89;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.user-topbar-link:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #111318;
}

.user-topbar-link.active {
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary);
}

.user-topbar-link-button {
    border: 0;
    background: transparent;
}

.user-topbar-link-button .material-symbols-outlined {
    font-size: 1rem;
    margin-left: 0.2rem;
}

.user-topbar-dropdown .dropdown-menu,
.user-mobile-nav-dropdown .dropdown-menu {
    min-width: 13rem;
}

.topbar-module-dropdown {
    margin-top: 0.45rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    padding: 0.45rem;
}

.topbar-module-dropdown .dropdown-item {
    border-radius: 0.7rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.topbar-module-dropdown .dropdown-item.active,
.topbar-module-dropdown .dropdown-item:active {
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary);
}

.topbar-credit-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.9rem;
    padding: 0.35rem 0.8rem 0.35rem 0.45rem;
    border-radius: 1rem;
    text-decoration: none;
    color: #1f2a44;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 255, 0.98) 100%);
    border: 1px solid rgba(13, 110, 253, 0.14);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.topbar-credit-balance:hover {
    transform: translateY(-1px);
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.24);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.topbar-credit-balance.active {
    border-color: rgba(13, 110, 253, 0.3);
    background: linear-gradient(180deg, rgba(232, 240, 255, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
}

.topbar-credit-balance-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(13, 110, 253, 0.16) 0%, rgba(13, 110, 253, 0.08) 100%);
    color: #0d6efd;
}

.topbar-credit-balance-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    line-height: 1;
}

.topbar-credit-balance-value {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.topbar-credit-balance-unit {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #616f89;
}

.topbar-user-trigger {
    border-radius: 999px;
    padding: 0.35rem 0.5rem !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.topbar-user-trigger:hover,
.topbar-user-trigger:focus,
.topbar-user-menu.show .topbar-user-trigger {
    background-color: rgba(13, 110, 253, 0.08) !important;
    box-shadow: none !important;
}

.topbar-user-mobile-sheet {
    width: min(22rem, calc(100vw - 1rem));
    z-index: 2000;
}

.topbar-user-mobile-sheet + .offcanvas-backdrop,
.offcanvas-backdrop.show {
    z-index: 1995;
}

.topbar-user-mobile-sheet .offcanvas-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.topbar-user-mobile-sheet .list-group {
    gap: 0.45rem;
}

.topbar-user-mobile-sheet .list-group-item {
    border: 0;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    font-weight: 600;
}

.topbar-notifications-trigger {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.topbar-notifications-trigger:hover,
.topbar-notifications-trigger:focus,
.topbar-notifications-menu.show .topbar-notifications-trigger {
    background-color: rgba(13, 110, 253, 0.08) !important;
    box-shadow: none !important;
}

.topbar-notifications-dropdown {
    width: min(26rem, calc(100vw - 2rem));
    min-width: 22rem;
    margin-top: 0.18rem !important;
    border-radius: 1rem;
    overflow: hidden;
}

.topbar-notification-indicator {
    width: 0.65rem;
    height: 0.65rem;
    background: #dc3545;
    border: 2px solid #fff;
}

.topbar-notifications-head,
.topbar-notifications-foot {
    padding: 0.85rem 1rem;
    background: rgba(13, 110, 253, 0.03);
}

.topbar-notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.topbar-notifications-foot {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.topbar-notifications-list {
    max-height: min(28rem, 60vh);
    overflow-y: auto;
}

.topbar-notification-form {
    margin: 0;
}

.topbar-notification-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    white-space: normal;
}

.topbar-notification-item.is-unread {
    background: rgba(13, 110, 253, 0.04);
}

.topbar-notification-item:last-child {
    border-bottom: 0;
}

.topbar-notification-icon,
.notification-item-icon,
.notification-empty-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.topbar-notification-icon .material-symbols-outlined,
.notification-item-icon .material-symbols-outlined,
.notification-empty-icon .material-symbols-outlined {
    font-size: 1.2rem;
}

.tone-info {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.tone-success {
    background: rgba(25, 135, 84, 0.14);
    color: #198754;
}

.tone-warning {
    background: rgba(240, 176, 113, 0.2);
    color: #b96d21;
}

.topbar-notification-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.topbar-notification-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111318;
}

.topbar-notification-text,
.topbar-notification-meta {
    display: block;
}

.topbar-notification-text {
    font-size: 0.8rem;
    color: #616f89;
    line-height: 1.4;
}

.topbar-notification-meta {
    font-size: 0.74rem;
    color: #8b97ab;
}

.topbar-notifications-empty {
    padding: 1.5rem 1rem;
    text-align: center;
}

.topbar-user-dropdown {
    min-width: 240px;
    margin-top: 0.18rem !important;
    right: 0;
    left: auto;
    max-width: min(18rem, calc(100vw - 1rem));
}

.topbar-user-menu {
    position: relative;
    padding-bottom: 0.35rem;
}

.user-mobile-nav-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0 0.2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.user-mobile-nav {
    position: relative;
    z-index: 1082;
    isolation: isolate;
}

.user-mobile-nav-scroll::-webkit-scrollbar {
    display: none;
}

.user-mobile-nav-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e7ebf3;
    text-decoration: none;
    color: #616f89;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 0.15rem 0.35rem rgba(17, 19, 24, 0.04);
}

.user-mobile-nav-link-button {
    border: 0;
}

.user-mobile-nav-link-button .material-symbols-outlined {
    font-size: 1rem;
    margin-left: 0.2rem;
}

.user-mobile-nav-dropdown {
    position: relative;
    flex: 0 0 auto;
    z-index: 1083;
}

.user-mobile-nav-link.active {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.18);
    color: var(--bs-primary);
}

@media (min-width: 992px) {
    .sidebar.offcanvas-lg {
        position: static;
        transform: none !important;
        visibility: visible !important;
        width: 260px !important;
        min-width: 260px;
        flex: 0 0 260px;
        border-right: 1px solid #dee2e6;
        background-color: #ffffff;
        box-shadow: none;
    }

    .sidebar.offcanvas-lg .offcanvas-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        padding: 0 !important;
        overflow: hidden;
    }

    .topbar-user-menu:hover .topbar-user-dropdown {
        display: block;
    }
}

body[data-theme="dark"] .user-topbar-link {
    color: var(--sl-dark-muted);
}

body[data-theme="dark"] .topbar-autoschedule-indicator {
    background: rgba(139, 182, 255, 0.1);
    border-color: rgba(139, 182, 255, 0.18);
}

body[data-theme="dark"] .topbar-autoschedule-indicator:hover {
    background: rgba(139, 182, 255, 0.14);
}

body[data-theme="dark"] .topbar-autoschedule-title {
    color: rgba(248, 249, 250, 0.95);
}

body[data-theme="dark"] .topbar-autoschedule-meta {
    color: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] .topbar-autoschedule-progress {
    background: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] {
    --brand-logo-primary: #FFFFFF;
    --brand-logo-secondary: #0D9488;
    --brand-logo-accent: #F59E0B;
    --brand-wordmark-main: #FFFFFF;
    --brand-wordmark-accent: #9DC3FF;
}

body[data-theme="dark"] .user-topbar-link:hover {
    background: rgba(134, 134, 172, 0.14);
    color: #ffffff;
}

body[data-theme="dark"] .user-topbar-link.active {
    background: rgba(134, 134, 172, 0.22);
    color: #ffffff;
}

body[data-theme="dark"] .topbar-module-dropdown {
    background: #1f245f;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 36px rgba(3, 7, 24, 0.34);
}

body[data-theme="dark"] .topbar-module-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.86);
}

body[data-theme="dark"] .topbar-module-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .topbar-module-dropdown .dropdown-item.active,
body[data-theme="dark"] .topbar-module-dropdown .dropdown-item:active {
    background: rgba(134, 134, 172, 0.22);
    color: #ffffff;
}

body[data-theme="dark"] .topbar-credit-balance {
    color: #eef2ff;
    background: linear-gradient(180deg, rgba(21, 26, 63, 0.98) 0%, rgba(15, 20, 53, 0.98) 100%);
    border-color: rgba(130, 161, 255, 0.18);
    box-shadow: 0 16px 34px rgba(3, 7, 24, 0.34);
}

body[data-theme="dark"] .topbar-credit-balance:hover {
    color: #ffffff;
    border-color: rgba(130, 161, 255, 0.3);
    background: linear-gradient(180deg, rgba(26, 33, 79, 0.98) 0%, rgba(19, 25, 64, 0.98) 100%);
}

body[data-theme="dark"] .topbar-credit-balance.active {
    border-color: rgba(130, 161, 255, 0.34);
    background: linear-gradient(180deg, rgba(31, 39, 92, 0.98) 0%, rgba(22, 29, 72, 0.98) 100%);
}

body[data-theme="dark"] .topbar-credit-balance-icon {
    background: linear-gradient(180deg, rgba(53, 87, 168, 0.5) 0%, rgba(35, 58, 119, 0.75) 100%);
    color: #edf3ff;
}

body[data-theme="dark"] .topbar-credit-balance-unit {
    color: #b6c2ea;
}

body[data-theme="dark"] .topbar-user-trigger:hover,
body[data-theme="dark"] .topbar-user-trigger:focus,
body[data-theme="dark"] .topbar-user-menu.show .topbar-user-trigger {
    background-color: rgba(134, 134, 172, 0.16) !important;
}

body[data-theme="dark"] .topbar-user-mobile-sheet {
    background: var(--sl-dark-surface);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .topbar-user-mobile-sheet .offcanvas-header {
    border-bottom-color: var(--sl-dark-border);
}

body[data-theme="dark"] .topbar-user-mobile-sheet .list-group-item {
    background: rgba(255, 255, 255, 0.03);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .topbar-user-mobile-sheet .list-group-item.text-danger {
    color: #ff8896 !important;
}

body[data-theme="dark"] .topbar-notifications-trigger:hover,
body[data-theme="dark"] .topbar-notifications-trigger:focus,
body[data-theme="dark"] .topbar-notifications-menu.show .topbar-notifications-trigger {
    background-color: rgba(134, 134, 172, 0.16) !important;
}

body[data-theme="dark"] .topbar-notification-indicator {
    border-color: var(--sl-dark-surface);
}

body[data-theme="dark"] .topbar-notifications-head,
body[data-theme="dark"] .topbar-notifications-foot {
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .topbar-notifications-head,
body[data-theme="dark"] .topbar-notifications-foot,
body[data-theme="dark"] .topbar-notification-item {
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .topbar-notification-item.is-unread {
    background: rgba(157, 195, 255, 0.08);
}

body[data-theme="dark"] .topbar-notification-title {
    color: #f8f9ff;
}

body[data-theme="dark"] .topbar-notification-text {
    color: rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] .topbar-notification-meta {
    color: rgba(255, 255, 255, 0.52);
}

body[data-theme="dark"] .tone-info {
    background: rgba(157, 195, 255, 0.16);
    color: #9dc3ff;
}

body[data-theme="dark"] .tone-success {
    background: rgba(25, 135, 84, 0.18);
    color: #8ef0be;
}

body[data-theme="dark"] .tone-warning {
    background: rgba(240, 176, 113, 0.18);
    color: #f0b071;
}

body[data-theme="dark"] .user-mobile-nav-link {
    background: var(--sl-dark-surface);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--sl-dark-muted);
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] .user-mobile-nav-link.active {
    background: rgba(134, 134, 172, 0.22);
    border-color: rgba(157, 195, 255, 0.2);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .modal {
        z-index: 1400;
    }

    .modal-backdrop.show {
        z-index: 1390;
    }

    .topbar-autoschedule-indicator {
        display: none !important;
    }

    .topbar-credit-balance {
        padding-right: 0.7rem;
    }

    .sidebar.offcanvas-lg {
        width: auto;
        max-width: min(20rem, calc(100vw - 1.5rem));
        border-right: 1px solid #dee2e6;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    }

    .sidebar.offcanvas-lg .sidebar-nav {
        padding-right: 0;
        margin-right: 0;
    }

    .app-topbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        height: auto !important;
        min-height: 64px;
    }

    .user-mobile-nav-dropdown .dropdown-menu {
        position: fixed;
        inset: auto auto auto auto !important;
        transform: none !important;
        min-width: 12rem;
        z-index: 1200;
    }

    .content-scroll {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .user-mobile-nav {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.85rem !important;
        padding-top: 0.55rem !important;
    }

    .app-topbar {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
    }

    .topbar-user-dropdown {
        min-width: 220px;
    }

    .topbar-notifications-dropdown {
        min-width: min(22rem, calc(100vw - 1.5rem));
    }

    .content-scroll {
        padding: 0.9rem;
    }
}

/* ===== Dark theme: table text + links ===== */
body[data-theme="dark"] .table {
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .table thead th {
    color: #c9cfdf;
}

body[data-theme="dark"] .table tbody td,
body[data-theme="dark"] .table tbody th {
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .table a {
    color: #7FB2FF;
}

body[data-theme="dark"] .table a:hover {
    color: #A6C9FF;
}

/* Dark theme: table separators */
body[data-theme="dark"] .table > :not(caption) > * > * {
    border-bottom-color: var(--sl-dark-border);
}

/* ===== Dark theme: status/role badges ===== */
body[data-theme="dark"] .table .badge,
body[data-theme="dark"] .card .badge {
    border-radius: 0.45rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

body[data-theme="dark"] .badge.bg-primary,
body[data-theme="dark"] .badge.text-bg-primary {
    background-color: rgba(47, 107, 255, 0.28) !important;
    border-color: rgba(127, 178, 255, 0.45);
    color: #9fc3ff !important;
}

body[data-theme="dark"] .badge.bg-success-subtle.text-success,
body[data-theme="dark"] .badge.text-bg-success {
    background-color: rgba(29, 190, 145, 0.2) !important;
    border-color: rgba(29, 190, 145, 0.45);
    color: #6de9c3 !important;
}

body[data-theme="dark"] .badge.bg-warning-subtle.text-warning {
    background-color: rgba(247, 185, 85, 0.22) !important;
    border-color: rgba(247, 185, 85, 0.48);
    color: #ffd991 !important;
}

body[data-theme="dark"] .badge.bg-info-subtle.text-info {
    background-color: rgba(74, 170, 255, 0.2) !important;
    border-color: rgba(74, 170, 255, 0.45);
    color: #9bd2ff !important;
}

body[data-theme="dark"] .badge.bg-secondary-subtle.text-secondary,
body[data-theme="dark"] .badge.bg-secondary {
    background-color: rgba(134, 134, 172, 0.24) !important;
    border-color: rgba(134, 134, 172, 0.5);
    color: #d5d5ec !important;
}

body[data-theme="dark"] .badge.bg-light.text-dark.border {
    background-color: rgba(237, 237, 247, 0.14) !important;
    border-color: rgba(237, 237, 247, 0.32) !important;
    color: #EDEDF7 !important;
}

/* ===== Dark theme: DataTables pagination ===== */
body[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link:hover {
    background-color: rgba(134, 134, 172, 0.2);
    border-color: var(--sl-dark-muted);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--sl-primary);
    border-color: var(--sl-primary);
    color: #ffffff;
}

body[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: #6f6f9a;
}

/* ============================
   Theme: Light / Dark
   ============================ */

/* ===== Light ===== */
body[data-theme="light"] {
    background-color: #f6f6f8;
    color: #111318;
}

body[data-theme="light"] .main-content,
body[data-theme="light"] .content-scroll {
    background-color: #f6f6f8;
}

body[data-theme="light"] .card {
    background-color: #ffffff;
}

/* ===== Dark – Blue Eclipse ===== */

body[data-theme="dark"] {
    --bs-body-bg: var(--sl-dark-bg);
    --bs-body-color: var(--sl-dark-text);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Sidebar */
body[data-theme="dark"] .sidebar {
    background-color: var(--sl-dark-surface);
    border-right-color: var(--sl-dark-border);
}

body[data-theme="dark"] .sidebar.offcanvas-lg {
    --bs-offcanvas-bg: var(--sl-dark-surface);
    --bs-offcanvas-border-color: var(--sl-dark-border);
}

@media (min-width: 992px) {
    body[data-theme="dark"] .sidebar.offcanvas-lg {
        background-color: var(--sl-dark-surface);
        border-right-color: var(--sl-dark-border);
    }
}

body[data-theme="dark"] .sidebar .sidebar-nav {
    scrollbar-color: rgba(134, 134, 172, 0.45) transparent; /* Firefox */
}

body[data-theme="dark"] .sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(134, 134, 172, 0.45);
}

body[data-theme="dark"] .sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(134, 134, 172, 0.7);
}

body[data-theme="dark"] .sidebar .nav-link {
    color: var(--sl-dark-muted);
}

body[data-theme="dark"] .sidebar .nav-link:hover {
    background-color: rgba(134, 134, 172, 0.15);
    color: #ffffff;
}

/* ===== Dark theme: table action buttons ===== */
body[data-theme="dark"] .btn-icon-round.btn-outline-secondary,
body[data-theme="dark"] .btn-icon-round.btn-outline-danger {
    background-color: transparent;
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-muted);
}

body[data-theme="dark"] .btn-icon-round.btn-outline-secondary:hover,
body[data-theme="dark"] .btn-icon-round.btn-outline-danger:hover {
    background-color: rgba(134, 134, 172, 0.15);
    border-color: var(--sl-dark-muted);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .btn-icon-round.btn-outline-danger {
    border-color: rgba(255, 99, 99, 0.6);
    color: rgba(255, 99, 99, 0.9);
}

body[data-theme="dark"] .btn-icon-round.btn-outline-danger:hover {
    background-color: rgba(255, 99, 99, 0.12);
    border-color: rgba(255, 99, 99, 0.9);
    color: #FFECEC;
}

/* Dark theme: toggle switch */
body[data-theme="dark"] .form-switch .form-check-input {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
}

body[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #2f6bff;
    border-color: #2f6bff;
}

body[data-theme="dark"] .sidebar .nav-link.active {
    background-color: rgba(134, 134, 172, 0.25);
    color: #ffffff;
}

body[data-theme="dark"] .sidebar .sidebar-group-chevron {
    color: #b8bce3;
}

body[data-theme="dark"] .sidebar .sidebar-submenu .nav-link {
    color: #c1c7dc;
}

body[data-theme="dark"] .sidebar .sidebar-submenu .nav-link:hover {
    color: #ffffff;
}

body[data-theme="dark"] .sidebar .offcanvas-header {
    border-bottom: 1px solid var(--sl-dark-border);
}

body[data-theme="dark"] .sidebar .sidebar-offcanvas-close {
    color: #c1c7dc;
}

body[data-theme="dark"] .sidebar .sidebar-offcanvas-close:hover,
body[data-theme="dark"] .sidebar .sidebar-offcanvas-close:focus {
    background-color: rgba(134, 134, 172, 0.15);
    color: #ffffff;
}

/* Main content */
body[data-theme="dark"] .main-content,
body[data-theme="dark"] .content-scroll {
    background-color: var(--sl-dark-bg);
}

/* Cards */
body[data-theme="dark"] .card {
    background-color: var(--sl-dark-card);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

/* ===== Dark theme: shared selects ===== */
body[data-theme="dark"] .form-select {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .form-select:focus {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-muted);
    color: var(--sl-dark-text);
    box-shadow: 0 0 0 0.2rem rgba(134, 134, 172, 0.22);
}

/* Native option colors (limited by browser support, but helps on supported engines) */
body[data-theme="dark"] .form-select option {
    background-color: var(--sl-dark-surface);
    color: var(--sl-dark-text);
}

/* ===== Dark theme: shared dropdown menu ===== */
body[data-theme="dark"] .dropdown-menu {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    box-shadow: 0 14px 30px rgba(5, 5, 24, 0.45);
}

body[data-theme="dark"] .dropdown-item {
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .dropdown-select-button {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .dropdown-select-button:hover,
body[data-theme="dark"] .dropdown-select-button:focus,
body[data-theme="dark"] .dropdown-select-button.show {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-muted);
    color: var(--sl-dark-text);
    box-shadow: 0 0 0 0.2rem rgba(134, 134, 172, 0.22);
}

body[data-theme="dark"] .dropdown-select-wrapper.is-disabled .dropdown-select-button,
body[data-theme="dark"] .dropdown-select-button:disabled {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--sl-dark-border);
    color: rgba(248, 249, 250, 0.68);
}

body[data-theme="dark"] .dropdown-select-item.active,
body[data-theme="dark"] .dropdown-select-item:active {
    background-color: rgba(157, 195, 255, 0.16);
    color: #dbe8ff;
}

body[data-theme="dark"] .dropdown-select-menu {
    background-color: var(--sl-dark-card);
    border-color: var(--sl-dark-border);
    scrollbar-color: rgba(134, 134, 172, 0.45) transparent;
}

body[data-theme="dark"] .dropdown-select-menu::-webkit-scrollbar-thumb {
    background-color: rgba(134, 134, 172, 0.45);
}

body[data-theme="dark"] .dropdown-select-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(134, 134, 172, 0.65);
}

body[data-theme="dark"] .dropdown-item:hover,
body[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(134, 134, 172, 0.16);
    color: #ffffff;
}

body[data-theme="dark"] .dropdown-item.active,
body[data-theme="dark"] .dropdown-item:active {
    background-color: rgba(13, 110, 253, 0.26);
    color: #ffffff;
}

body[data-theme="dark"] .dropdown-item.disabled,
body[data-theme="dark"] .dropdown-item:disabled {
    color: #7f82a8;
}

body[data-theme="dark"] .dropdown-item.text-danger {
    color: #ff9fa8 !important;
}

body[data-theme="dark"] .dropdown-item.text-danger:hover,
body[data-theme="dark"] .dropdown-item.text-danger:focus {
    background-color: rgba(255, 99, 99, 0.14);
    color: #ffd5da !important;
}

body[data-theme="dark"] .table thead {
    background-color: var(--sl-dark-surface);
    color: #ffffff;
}

/* Secondary text */
body[data-theme="dark"] .text-secondary,
body[data-theme="dark"] .breadcrumb-item a {
    color: var(--sl-dark-muted) !important;
}

body[data-theme="dark"] .notifications-page .notification-center-card,
body[data-theme="dark"] .notifications-page .notification-center-empty {
    background: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
}

body[data-theme="dark"] .notifications-page .notification-center-card.is-unread {
    border-left-color: #7fb2ff;
}

body[data-theme="dark"] .brand-wordmark-tagline {
    color: rgba(255, 255, 255, 0.6);
}

/* ============================
   Page & card spacing (catalog)
   ============================ */

.page-container {
    padding-bottom: 2.5rem;
}

/* ===== Global credit confirmation modal ===== */
.credit-confirm-modal .modal-dialog {
    max-width: 34rem;
}

.credit-confirm-modal .modal-content {
    border: 1px solid rgba(77, 142, 255, 0.12);
    border-radius: 1rem;
    background: rgba(19, 27, 46, 0.92);
    color: #dae2fd;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(77, 142, 255, 0.15);
    backdrop-filter: blur(16px);
}

.credit-confirm-modal .modal-backdrop,
.modal-backdrop.show {
    backdrop-filter: blur(4px);
}

.credit-confirm-modal__content {
    position: relative;
}

.credit-confirm-modal__glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(48px);
    pointer-events: none;
    opacity: 0.6;
}

.credit-confirm-modal__glow--left {
    top: 1rem;
    left: 1rem;
    width: 8rem;
    height: 8rem;
    background: rgba(77, 142, 255, 0.12);
}

.credit-confirm-modal__glow--right {
    right: 1rem;
    bottom: 1rem;
    width: 11rem;
    height: 11rem;
    background: rgba(39, 104, 230, 0.1);
}

.credit-confirm-modal__header,
.credit-confirm-modal__body,
.credit-confirm-modal__footer {
    position: relative;
    z-index: 1;
    padding-inline: 2rem;
}

.credit-confirm-modal__header {
    padding-top: 2.3rem;
    padding-bottom: 1rem;
    text-align: center;
}

.credit-confirm-modal__title {
    margin: 0;
    font-family: "Lexend", sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f5f8ff;
}

.credit-confirm-modal__subtitle {
    margin: 0.45rem 0 0;
    color: rgba(194, 198, 214, 0.82);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.credit-confirm-modal__body {
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.credit-confirm-modal__amount-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.7rem;
    min-height: 8.5rem;
}

.credit-confirm-modal__amount-glow {
    position: absolute;
    inset: 0;
    width: 10rem;
    height: 10rem;
    margin: auto;
    background: rgba(173, 198, 255, 0.12);
    border-radius: 999px;
    filter: blur(34px);
}

.credit-confirm-modal__amount {
    position: relative;
    font-family: "Lexend", sans-serif;
    font-size: 4.25rem;
    line-height: 1;
    font-weight: 900;
    color: #adc6ff;
    text-shadow: 0 0 15px rgba(173, 198, 255, 0.35);
}

.credit-confirm-modal__amount-label {
    position: relative;
    margin-top: 0.45rem;
    color: rgba(173, 198, 255, 0.72);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.credit-confirm-modal__message {
    width: 100%;
    color: #dae2fd;
    font-size: 0.98rem;
    line-height: 1.65;
    text-align: left;
}

.credit-confirm-modal__breakdown {
    width: 100%;
    margin-top: 1.2rem;
    padding: 1.15rem 1.2rem;
    border-radius: 0.9rem;
    background: rgba(6, 14, 32, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.credit-confirm-modal__breakdown-list {
    display: grid;
    gap: 0.7rem;
}

.credit-confirm-modal__breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.credit-confirm-modal__breakdown-row + .credit-confirm-modal__breakdown-row {
    padding-top: 0.7rem;
    border-top: 1px solid rgba(66, 71, 84, 0.45);
}

.credit-confirm-modal__breakdown-label {
    color: rgba(194, 198, 214, 0.8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.credit-confirm-modal__breakdown-value {
    color: #f5f8ff;
    font-size: 0.93rem;
    font-weight: 700;
    text-align: right;
}

.credit-confirm-modal__warning {
    margin: 1rem 0 0;
    color: rgba(194, 198, 214, 0.56);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}

.credit-confirm-modal__footer {
    display: flex;
    gap: 1rem;
    padding-bottom: 2rem;
}

.credit-confirm-modal__cancel,
.credit-confirm-modal__confirm {
    border: 0;
    border-radius: 0.9rem;
    min-height: 3.4rem;
    padding: 0.95rem 1.3rem;
    font-size: 0.92rem;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.credit-confirm-modal__cancel {
    flex: 1 1 0;
    background: transparent;
    color: rgba(194, 198, 214, 0.9);
}

.credit-confirm-modal__cancel:hover {
    background: rgba(49, 57, 77, 0.4);
    color: #f5f8ff;
}

.credit-confirm-modal__confirm {
    position: relative;
    flex: 2 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
}

.credit-confirm-modal__confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.42);
}

.credit-confirm-modal__confirm .material-symbols-outlined {
    font-size: 1.05rem;
    font-variation-settings: 'FILL' 1;
}

.credit-confirm-modal__tail {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(173, 198, 255, 0.45), transparent);
    opacity: 0.5;
}

body[data-theme="light"] .credit-confirm-modal .modal-content {
    background: rgba(255, 255, 255, 0.96);
    color: #21325b;
    border-color: rgba(77, 142, 255, 0.14);
    box-shadow: 0 0 40px rgba(77, 142, 255, 0.12);
}

body[data-theme="light"] .credit-confirm-modal__title,
body[data-theme="light"] .credit-confirm-modal__breakdown-value {
    color: #162648;
}

body[data-theme="light"] .credit-confirm-modal__subtitle,
body[data-theme="light"] .credit-confirm-modal__breakdown-label,
body[data-theme="light"] .credit-confirm-modal__warning {
    color: rgba(62, 73, 93, 0.78);
}

body[data-theme="light"] .credit-confirm-modal__message {
    color: #2d3d66;
}

body[data-theme="light"] .credit-confirm-modal__breakdown {
    background: rgba(245, 248, 255, 0.92);
    border-color: rgba(77, 142, 255, 0.08);
}

body[data-theme="light"] .credit-confirm-modal__breakdown-row + .credit-confirm-modal__breakdown-row {
    border-top-color: rgba(140, 144, 159, 0.24);
}

body[data-theme="light"] .credit-confirm-modal__cancel {
    color: rgba(40, 48, 68, 0.84);
}

body[data-theme="light"] .credit-confirm-modal__cancel:hover {
    background: rgba(237, 243, 255, 0.8);
    color: #162648;
}

@media (max-width: 575.98px) {
    .credit-confirm-modal .modal-dialog {
        max-width: none;
        margin-inline: 0.75rem;
    }

    .credit-confirm-modal__header,
    .credit-confirm-modal__body,
    .credit-confirm-modal__footer {
        padding-inline: 1.25rem;
    }

    .credit-confirm-modal__footer {
        flex-direction: column;
    }
}

.notifications-page .notification-center-card,
.notifications-page .notification-center-empty {
    border-radius: 1rem;
}

.notifications-page .notification-center-card.is-unread {
    border-left: 4px solid var(--bs-primary);
}

.notifications-page .notifications-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.notifications-page .notifications-pagination-meta {
    color: var(--bs-secondary-color);
    font-size: 0.92rem;
}

.notifications-page .notifications-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.notifications-page .notifications-pagination-page {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

body[data-theme="dark"] .notifications-page .notifications-pagination-meta,
body[data-theme="dark"] .notifications-page .notifications-pagination-page {
    color: var(--sl-dark-muted);
}

.card-table {
    border: 1px solid #e9ecef !important;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
}

.page-header h1 {
    font-size: 1.4rem;
}

.page-header p {
    font-size: 0.9rem;
}

.card-table .dataTables_wrapper {
    padding: 0;
}

.card-table .table-dt-toolbar {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9edf3;
    background: #ffffff;
}

.card-table .table-dt-footer {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #e9edf3;
    background: #f8f9fb;
}

.card-table .dataTables_wrapper .row:first-child {
    margin-bottom: 0.75rem;
    align-items: center;
}

.card-table .dataTables_wrapper .row:last-child {
    margin-top: 0.75rem;
}

.card-table table.dataTable {
    margin: 0;
    width: 100% !important;
}

.card-table table.dataTable thead th {
    padding: 0.9rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fb;
}

.card-table table.dataTable tbody td {
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
    border-top: 1px solid #f0f2f7;
    vertical-align: middle;
}

.card-table table.dataTable tbody td a {
    color: #6ea9ff;
    font-weight: 600;
    text-underline-offset: 0.15em;
}

.card-table table.dataTable tbody td a:hover {
    color: #91beff;
}

.card-table table.dataTable tbody td .text-muted,
.card-table table.dataTable tbody td small,
.card-table table.dataTable tbody td .small {
    font-size: 0.82rem;
}

.card-table .dataTables_filter {
    text-align: right;
    width: 100%;
    margin: 0;
}

.card-table .dataTables_filter label {
    width: 100%;
    margin: 0;
    font-size: 0;
}

.card-table .dataTables_filter input {
    margin-left: 0;
    width: 100%;
    max-width: 320px;
    border-radius: 0.65rem;
    padding-inline: 0.75rem;
    border: 1px solid #dee2e6;
    background: #f8f9fb;
    height: 38px;
    font-size: 0.875rem;
}

.card-table .table-dt-footer .dataTables_info {
    margin: 0;
}

.card-table .table-dt-footer .dataTables_paginate {
    margin: 0;
}

/* Unified action buttons (Programs style) */
.card-table .program-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid #dfe3eb;
    background: #f8f9fb;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

.card-table .program-action-btn {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.card-table .program-action-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

.card-table .program-action-btn:hover,
.card-table .program-action-btn:focus {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.12);
}

.card-table .program-action-btn.action-danger:hover,
.card-table .program-action-btn.action-danger:focus {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.12);
}

.card-table .program-action-btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* Unified table pills/badges */
.card-table .badge {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.22rem 0.6rem;
    border: 1px solid transparent;
}

.card-table .badge.bg-secondary,
.card-table .badge.bg-light.text-dark.border {
    background: #f8f9fb !important;
    color: #4f5b6d !important;
    border-color: #d8dee8 !important;
}

.card-table .badge.bg-success-subtle.text-success,
.card-table .badge.bg-success {
    background: #e9f8f0 !important;
    color: #146c43 !important;
    border-color: #b8e3ce !important;
}

.card-table .badge.bg-warning-subtle.text-warning {
    background: #fff6e5 !important;
    color: #ad7b1a !important;
    border-color: #f0d9a8 !important;
}

.card-table .badge.bg-info-subtle.text-info {
    background: #e8f4ff !important;
    color: #1f5f99 !important;
    border-color: #c5def5 !important;
}

.card-table .badge.bg-secondary-subtle.text-secondary {
    background: #f3f4f6 !important;
    color: #6c757d !important;
    border-color: #dce0e5 !important;
}

/* Unified table action buttons */
.card-table .table-actions .btn-group-actions {
    border: 1px solid #dfe3eb;
    background: #f8f9fb;
    border-radius: 0.6rem;
    padding: 0.2rem;
    overflow: hidden;
    gap: 0;
}

.card-table .table-actions .btn-group-actions .btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: #6c757d !important;
    border-radius: 0.45rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.card-table .table-actions .btn-group-actions .btn + .btn {
    margin-left: 0 !important;
}

.card-table .table-actions .btn-group-actions .btn:not(:first-child) {
    border-left: 1px solid #dfe3eb !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.card-table .table-actions .btn-group-actions .btn:hover,
.card-table .table-actions .btn-group-actions .btn:focus {
    color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.12) !important;
}

.card-table .table-actions .btn-group-actions .btn.btn-outline-danger:hover,
.card-table .table-actions .btn-group-actions .btn.btn-outline-danger:focus {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

body[data-theme="dark"] .card-table {
    box-shadow: none;
    background: #232651;
    border-color: #2d3266 !important;
}

body[data-theme="dark"] .card-table .table-dt-toolbar {
    background: #232651;
    border-bottom-color: #2d3266;
}

body[data-theme="dark"] .card-table .table-dt-footer {
    background: #232651;
    border-top-color: #2d3266;
}

body[data-theme="dark"] .card-table .dataTables_filter input {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .card-table .dataTables_filter input::placeholder {
    color: var(--sl-dark-muted);
}

body[data-theme="dark"] .card-table .dataTables_info {
    color: var(--sl-dark-muted) !important;
}

body[data-theme="dark"] .card-table table.dataTable thead th {
    color: #adb5bd;
    background-color: #1a1c3d;
    border-bottom-color: #2d3266;
}

body[data-theme="dark"] .card-table table.dataTable tbody td {
    border-top-color: #2d3266;
    color: #f8f9fa;
    background: #232651;
}

body[data-theme="dark"] .card-table table.dataTable tbody td a {
    color: #7fb2ff;
}

body[data-theme="dark"] .card-table table.dataTable tbody td a:hover {
    color: #a6c9ff;
}

body[data-theme="dark"] .card-table table.dataTable tbody tr:hover td {
    background: #1f2248;
}

body[data-theme="dark"] .card-table table.dataTable tbody td .text-muted,
body[data-theme="dark"] .card-table table.dataTable tbody td.text-muted,
body[data-theme="dark"] .card-table table.dataTable tbody td small,
body[data-theme="dark"] .card-table table.dataTable tbody td .small {
    color: #adb5bd !important;
}

body[data-theme="dark"] .card-table .badge.bg-secondary,
body[data-theme="dark"] .card-table .badge.bg-light.text-dark.border {
    border-color: #2d3266 !important;
    background: #1a1c3d !important;
    color: #cfd4df !important;
}

body[data-theme="dark"] .card-table .badge.bg-success-subtle.text-success,
body[data-theme="dark"] .card-table .badge.bg-success {
    color: #7ee2ac !important;
    border-color: #1f7a4d !important;
    background: #113425 !important;
}

body[data-theme="dark"] .card-table .badge.bg-warning-subtle.text-warning {
    color: #ffd991 !important;
    border-color: rgba(247, 185, 85, 0.48) !important;
    background: rgba(247, 185, 85, 0.2) !important;
}

body[data-theme="dark"] .card-table .badge.bg-info-subtle.text-info {
    color: #9bd2ff !important;
    border-color: rgba(74, 170, 255, 0.45) !important;
    background: rgba(74, 170, 255, 0.18) !important;
}

body[data-theme="dark"] .card-table .badge.bg-secondary-subtle.text-secondary {
    color: #adb5bd !important;
    border-color: #2d3266 !important;
    background: #1a1c3d !important;
}

body[data-theme="dark"] .card-table .table-actions .btn-group-actions {
    border-color: #2d3266;
    background: #1a1c3d;
}

body[data-theme="dark"] .card-table .table-actions .btn-group-actions .btn {
    color: #adb5bd !important;
}

body[data-theme="dark"] .card-table .table-actions .btn-group-actions .btn:not(:first-child) {
    border-left-color: #2d3266 !important;
}

body[data-theme="dark"] .card-table .table-actions .btn-group-actions .btn:hover,
body[data-theme="dark"] .card-table .table-actions .btn-group-actions .btn:focus {
    color: #7fb2ff !important;
    background: rgba(13, 110, 253, 0.18) !important;
}

body[data-theme="dark"] .card-table .program-actions {
    border-color: #2d3266;
    background: #1a1c3d;
}

body[data-theme="dark"] .card-table .program-action-btn {
    color: #adb5bd;
}

body[data-theme="dark"] .card-table .program-action-btn:hover,
body[data-theme="dark"] .card-table .program-action-btn:focus {
    color: #7fb2ff;
    background: rgba(13, 110, 253, 0.18);
}

body[data-theme="dark"] .card-table .program-action-btn.action-danger:hover,
body[data-theme="dark"] .card-table .program-action-btn.action-danger:focus {
    color: #ff8f9a;
    background: rgba(220, 53, 69, 0.18);
}

/* ============================
   Dark theme modal adjustments
   ============================ */
body[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.75;
}

body[data-theme="dark"] .modal-content {
    background-color: var(--sl-dark-card);
    border: 1px solid var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-footer {
    border-color: var(--sl-dark-border);
}

body[data-theme="dark"] .modal-title,
body[data-theme="dark"] .modal-body,
body[data-theme="dark"] .modal .form-label {
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .modal .form-text,
body[data-theme="dark"] .modal .text-muted {
    color: var(--sl-dark-muted) !important;
}

body[data-theme="dark"] .modal .form-control,
body[data-theme="dark"] .modal .form-select {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-border);
    color: var(--sl-dark-text);
}

body[data-theme="dark"] .modal .form-control::placeholder {
    color: rgba(134, 134, 172, 0.75);
}

body[data-theme="dark"] .modal input[type="date"].form-control {
    color-scheme: dark;
}

body[data-theme="dark"] .modal .form-control:focus,
body[data-theme="dark"] .modal .form-select:focus {
    background-color: var(--sl-dark-surface);
    border-color: var(--sl-dark-muted);
    color: var(--sl-dark-text);
    box-shadow: 0 0 0 0.25rem rgba(80, 80, 129, 0.35);
}

body[data-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
    opacity: 0.8;
}

body[data-theme="dark"] .modal .btn-close:hover {
    opacity: 1;
}

body[data-theme="dark"] .modal .alert-danger {
    background-color: rgba(255, 99, 99, 0.12);
    border-color: rgba(255, 99, 99, 0.45);
    color: #ffd6d6;
}