/* ==========================================================================
   Tesoro Admin — visual theme
   Loaded after the Skote template styles. Purely presentational: it restyles
   the existing markup and touches no behaviour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — taken from the Tesoro mark */
    --t-ink: #141b33;
    --t-ink-deep: #0f1428;
    --t-ink-soft: #1c2440;
    --t-plum: #6b3fb5;
    --t-plum-deep: #58339a;
    --t-plum-soft: #efe9fa;
    --t-coral: #f0508f;
    --t-amber: #faae11;
    --t-blue: #1f6fd0;
    --t-spectrum: linear-gradient(90deg, #faae11 0%, #f65308 22%, #fc50a3 48%, #c52b73 66%, #7060a0 82%, #1161be 100%);

    /* Surfaces & text */
    --t-canvas: #f4f5fa;
    --t-surface: #ffffff;
    --t-surface-2: #f8f9fc;
    --t-border: #e5e7f0;
    --t-border-strong: #d5d9e6;
    --t-text: #1f2437;
    --t-text-2: #4b5170;
    --t-muted: #7a809a;

    /* Status */
    --t-success: #1a9e72;
    --t-success-soft: #e3f6ee;
    --t-warning: #e3961d;
    --t-warning-soft: #fdf2dc;
    --t-danger: #dc4459;
    --t-danger-soft: #fce8eb;
    --t-info: #2a7fd5;
    --t-info-soft: #e5f0fb;

    --t-radius-sm: 8px;
    --t-radius: 12px;
    --t-radius-lg: 16px;
    --t-shadow-sm: 0 1px 2px rgba(20, 27, 51, 0.05);
    --t-shadow: 0 6px 18px -8px rgba(20, 27, 51, 0.16), 0 1px 2px rgba(20, 27, 51, 0.05);
    --t-shadow-lg: 0 24px 48px -16px rgba(20, 27, 51, 0.28);
    --t-focus: 0 0 0 3px rgba(107, 63, 181, 0.22);

    /* Bootstrap variable remap */
    --bs-primary: var(--t-plum);
    --bs-primary-rgb: 107, 63, 181;
    --bs-secondary: #6b7188;
    --bs-secondary-rgb: 107, 113, 136;
    --bs-success: var(--t-success);
    --bs-success-rgb: 26, 158, 114;
    --bs-info: var(--t-info);
    --bs-info-rgb: 42, 127, 213;
    --bs-warning: var(--t-warning);
    --bs-warning-rgb: 227, 150, 29;
    --bs-danger: var(--t-danger);
    --bs-danger-rgb: 220, 68, 89;
    --bs-light: #eef0f6;
    --bs-light-rgb: 238, 240, 246;
    --bs-dark: var(--t-ink);
    --bs-dark-rgb: 20, 27, 51;
    --bs-body-bg: var(--t-canvas);
    --bs-body-bg-rgb: 244, 245, 250;
    --bs-body-color: var(--t-text);
    --bs-body-color-rgb: 31, 36, 55;
    --bs-border-color: var(--t-border);
    --bs-font-sans-serif: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-heading-bg: var(--t-surface);
    --bs-input-border-color: var(--t-border-strong);
    --bs-input-focus-border-color: var(--t-plum);
    --bs-footer-bg: transparent;
    --bs-footer-color: var(--t-muted);
    --bs-link-color: var(--t-plum);
    --bs-link-hover-color: var(--t-plum-deep);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--bs-font-sans-serif);
    font-size: 0.875rem;
    color: var(--t-text);
    background-color: var(--t-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--t-ink);
    font-weight: 700;
    letter-spacing: -0.015em;
}

a {
    color: var(--t-plum);
    text-decoration: none;
}

a:hover {
    color: var(--t-plum-deep);
}

.text-muted {
    color: var(--t-muted) !important;
}

.text-primary {
    color: var(--t-plum) !important;
}

.text-secondary {
    color: var(--t-text-2) !important;
}

:focus-visible {
    outline: none;
    box-shadow: var(--t-focus);
}

::selection {
    background: rgba(107, 63, 181, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
   3. Shell: topbar
   -------------------------------------------------------------------------- */
#page-topbar {
    background-color: var(--t-surface);
    box-shadow: none;
    border-bottom: 1px solid var(--t-border);
}

/* The signature: a thin spectrum rule that runs the full width of the panel
   beneath the topbar, borrowed straight from the logo mark. */
#page-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--t-spectrum);
    pointer-events: none;
}

.navbar-header {
    height: 70px;
    padding: 0 20px 0 0;
}

body[data-sidebar="dark"] .navbar-brand-box,
.navbar-brand-box {
    background: var(--t-ink);
    width: 250px;
    padding: 0 20px;
    text-align: left;
    display: flex;
    align-items: center;
    height: 70px;
}

.navbar-brand-box .logo {
    display: flex;
    align-items: center;
    line-height: 1;
}

.navbar-brand-box .logo .logo-lg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand-box .logo .logo-sm {
    display: none;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--t-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.brand-mark img {
    height: 22px;
    width: auto;
}

.brand-word {
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.brand-sub {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 3px;
    text-transform: none;
}

.vertical-collpsed .navbar-brand-box {
    width: 70px !important;
    padding: 0;
    justify-content: center;
}

.vertical-collpsed .navbar-brand-box .logo .logo-lg {
    display: none;
}

.vertical-collpsed .navbar-brand-box .logo .logo-sm {
    display: inline-flex;
}

#vertical-menu-btn.header-item {
    color: var(--t-text-2);
    background: transparent;
    width: 44px;
    height: 70px;
    margin-left: 6px;
    font-size: 18px;
}

#vertical-menu-btn.header-item:hover {
    color: var(--t-ink);
}

.header-item {
    height: 70px;
    color: var(--t-text-2);
    background: transparent !important;
    border: 0;
    box-shadow: none !important;
}

.header-item:hover {
    color: var(--t-ink);
}

.noti-icon i {
    font-size: 21px;
    color: var(--t-text-2);
}

.header-item.noti-icon:hover i {
    color: var(--t-ink);
}

/* User menu */
.user-menu-toggle.header-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 10px;
    border-radius: 12px;
    height: 44px;
    margin: 13px 0;
}

.user-menu-toggle.header-item:hover {
    background: var(--t-surface-2) !important;
}

.avatar-initials {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--t-plum-soft);
    color: var(--t-plum);
    font-weight: 700;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}

.user-menu-name {
    color: var(--t-ink);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
}

.user-menu-role {
    display: block;
    color: var(--t-muted);
    font-weight: 500;
    font-size: 11.5px;
    margin-top: 2px;
}

.user-menu-toggle .mdi-chevron-down {
    color: var(--t-muted);
    font-size: 16px;
}

/* The template forces top:100% on open menus while Popper also offsets them
   from top:0, so menus opened a full header-height too low. Popper owns the
   position; reset the forced top for menus it has placed. */
.dropdown-menu.show[data-popper-placement^="bottom"] {
    top: 0 !important;
}

.dropdown-menu {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    padding: 6px;
    font-size: 13px;
    animation: t-pop 0.14s ease-out;
}

/* Opacity only: Popper positions the menu with an inline transform */
@keyframes t-pop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.dropdown-item {
    border-radius: var(--t-radius-sm);
    padding: 8px 10px;
    color: var(--t-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item i {
    font-size: 16px;
    color: var(--t-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--t-surface-2);
    color: var(--t-ink);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background: var(--t-danger-soft);
    color: var(--t-danger) !important;
}

.dropdown-divider {
    border-color: var(--t-border);
    margin: 6px 4px;
}

.dropdown-header {
    padding: 8px 10px 6px;
    color: var(--t-muted);
    font-size: 11.5px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Shell: sidebar
   -------------------------------------------------------------------------- */
body[data-sidebar="dark"] .vertical-menu,
.vertical-menu {
    background: var(--t-ink);
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

#sidebar-menu {
    padding: 14px 0 30px;
}

#sidebar-menu ul li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 12px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
    color: rgba(255, 255, 255, 0.72);
}

#sidebar-menu ul li a i,
body[data-sidebar="dark"] #sidebar-menu ul li a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    width: 22px;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s ease;
}

#sidebar-menu ul li a svg {
    width: 20px;
    height: 20px;
    min-width: 22px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s ease;
}

#sidebar-menu ul li a svg path {
    fill: currentColor !important;
    opacity: 1 !important;
}

#sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover svg,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i {
    color: #fff;
}

/* Active item: a plum pill with a spectrum tick on its leading edge */
body[data-sidebar="dark"] .mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li a.active,
#sidebar-menu ul li a.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(107, 63, 181, 0.55), rgba(107, 63, 181, 0.22));
}

body[data-sidebar="dark"] .mm-active > a i,
body[data-sidebar="dark"] .mm-active > a svg,
body[data-sidebar="dark"] #sidebar-menu ul li a.active i,
body[data-sidebar="dark"] #sidebar-menu ul li a.active svg {
    color: #fff !important;
}

#sidebar-menu ul li a.active::before,
body[data-sidebar="dark"] #sidebar-menu > ul > li.mm-active > a:not(.has-arrow)::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--t-spectrum);
    background-size: 100% 400%;
}

#sidebar-menu .has-arrow::after {
    font-size: 15px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

#sidebar-menu ul li ul.sub-menu {
    padding: 2px 0 6px;
}

#sidebar-menu ul li ul.sub-menu li a,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a {
    margin: 1px 12px 1px 12px;
    padding: 7px 12px 7px 44px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
}

#sidebar-menu ul li ul.sub-menu li a i {
    display: none;
}

#sidebar-menu ul li ul.sub-menu li a::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#sidebar-menu ul li ul.sub-menu li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

#sidebar-menu ul li ul.sub-menu li a:hover::after {
    background: rgba(255, 255, 255, 0.6);
}

body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active > a::after,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a.active::after {
    background: var(--t-coral);
    transform: scale(1.3);
}

/* Nested submenus shouldn't get the leading tick */
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li.mm-active > a::before {
    display: none;
}

/* Section labels */
#sidebar-menu ul li.menu-title,
body[data-sidebar="dark"] .menu-title,
.menu-title {
    padding: 18px 24px 6px !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.38);
    background: transparent;
}

#sidebar-menu ul li.menu-title:first-child {
    padding-top: 4px !important;
}

/* Collapsed rail */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
    margin: 2px 10px;
    padding: 0;
    min-height: 44px;
    width: 50px;
    justify-content: center;
    border-radius: 10px;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a::before {
    display: none;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a svg {
    margin: 0;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a span {
    display: none;
    padding-left: 0;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: calc(190px + 50px);
    justify-content: flex-start;
    padding: 0 14px;
    gap: 12px;
    background: var(--t-ink-soft);
    color: #fff;
    border-radius: 10px;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
    display: inline;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
    left: 70px;
    width: 200px;
    padding: 6px;
    background: var(--t-ink-soft);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--t-shadow-lg);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    margin: 0;
    padding: 8px 12px 8px 30px;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a::after {
    left: 12px;
}

.vertical-collpsed .menu-title {
    display: none !important;
}

/* Simplebar scrollbar on the dark rail */
.vertical-menu .simplebar-scrollbar::before {
    background: rgba(255, 255, 255, 0.25);
}

/* --------------------------------------------------------------------------
   5. Shell: content, footer, loader
   -------------------------------------------------------------------------- */
.page-content {
    padding: calc(70px + 28px) 28px 72px 28px;
}

@media (max-width: 991.98px) {
    .page-content {
        padding: calc(70px + 20px) 16px 72px 16px;
    }
}

.footer {
    background: transparent;
    color: var(--t-muted);
    font-size: 12.5px;
    padding: 18px 28px;
    height: 56px;
}

#loader {
    background-color: rgba(244, 245, 250, 0.6);
    backdrop-filter: blur(2px);
}

#loader .spinner-border {
    color: var(--t-plum) !important;
    border-width: 3px;
    width: 2.5rem;
    height: 2.5rem;
}

/* --------------------------------------------------------------------------
   6. Page header (breadcrumb component)
   -------------------------------------------------------------------------- */
.page-title-box {
    padding-bottom: 22px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-head-trail.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 500;
}

.page-head-trail .breadcrumb-item a {
    color: var(--t-muted);
}

.page-head-trail .breadcrumb-item a:hover {
    color: var(--t-plum);
}

.page-head-trail .breadcrumb-item.active {
    color: var(--t-text-2);
}

.page-head-trail .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--t-border-strong);
    padding: 0 8px 0 0;
    font-family: "Material Design Icons";
    content: "\F0142";
    font-size: 14px;
    line-height: 1.3;
}

.page-head-trail .breadcrumb-item + .breadcrumb-item {
    padding-left: 6px;
}

.page-title-box h4,
.page-head-title {
    margin: 0;
    font-size: 24px !important;
    font-weight: 800;
    text-transform: none;
    color: var(--t-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--t-surface);
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-sm);
    margin-bottom: 24px;
}

.card-body {
    padding: 22px 24px;
}

.card-body + .card-body {
    border-top: 1px solid var(--t-border);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--t-border) !important;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--t-ink);
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0 !important;
}

/* Permission-group headers on the role form */
.card .card-header.bg-secondary {
    background: var(--t-surface-2) !important;
    color: var(--t-ink) !important;
    font-size: 14px;
    padding: 12px 16px;
}

.card .card-header.bg-secondary .text-white {
    color: var(--t-text-2) !important;
    font-weight: 600;
    font-size: 12.5px;
}

.card .card-header.bg-secondary .form-check {
    margin: 0;
    min-height: 0;
}

.card .card-header.bg-secondary h5 {
    font-size: 14px;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.card .card-header.bg-secondary.d-flex {
    flex-wrap: wrap;
    gap: 4px 10px;
}

.card .card-header.bg-secondary > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.card .card-header.bg-secondary > div .form-check-input {
    margin: 0;
}

.card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--t-ink);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.card-title-desc {
    color: var(--t-muted);
    margin-bottom: 18px;
}

.card-title-desc:empty {
    display: none;
}

.card-title.mb-0 + .card-title-desc:empty {
    display: block;
    height: 12px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   8. Dashboard stat cards
   -------------------------------------------------------------------------- */
.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-sm);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.stat-card:hover {
    box-shadow: var(--t-shadow);
    transform: translateY(-1px);
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.stat-card-icon.is-plum {
    background: var(--t-plum-soft);
    color: var(--t-plum);
}

.stat-card-icon.is-blue {
    background: var(--t-info-soft);
    color: var(--t-info);
}

.stat-card-icon.is-green {
    background: var(--t-success-soft);
    color: var(--t-success);
}

.stat-card-icon.is-amber {
    background: var(--t-warning-soft);
    color: var(--t-warning);
}

.stat-card-icon.is-coral {
    background: #fde7f0;
    color: var(--t-coral);
}

.stat-card-label {
    display: block;
    color: var(--t-muted);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-card-value {
    display: block;
    color: var(--t-ink);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dashboard-greeting {
    margin: -6px 0 22px;
    color: var(--t-text-2);
    font-size: 14px;
}

.dashboard-greeting strong {
    color: var(--t-ink);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-x: 0.95rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 10px;
    --bs-btn-focus-box-shadow: var(--t-focus);
    letter-spacing: 0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn i {
    font-size: 1.1em;
    line-height: 1;
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.36rem;
    --bs-btn-font-size: 0.78rem;
    --bs-btn-border-radius: 8px;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-size: 0.9rem;
    --bs-btn-border-radius: 12px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--t-plum);
    --bs-btn-border-color: var(--t-plum);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--t-plum-deep);
    --bs-btn-hover-border-color: var(--t-plum-deep);
    --bs-btn-focus-shadow-rgb: 107, 63, 181;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4c2c86;
    --bs-btn-active-border-color: #4c2c86;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--t-plum);
    --bs-btn-disabled-border-color: var(--t-plum);
    box-shadow: 0 1px 2px rgba(107, 63, 181, 0.25);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--t-success);
    --bs-btn-border-color: var(--t-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #158460;
    --bs-btn-hover-border-color: #158460;
    --bs-btn-focus-shadow-rgb: 26, 158, 114;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #127354;
    --bs-btn-active-border-color: #127354;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--t-success);
    --bs-btn-disabled-border-color: var(--t-success);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--t-danger);
    --bs-btn-border-color: var(--t-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c2384b;
    --bs-btn-hover-border-color: #c2384b;
    --bs-btn-focus-shadow-rgb: 220, 68, 89;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a92f40;
    --bs-btn-active-border-color: #a92f40;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--t-danger);
    --bs-btn-disabled-border-color: var(--t-danger);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--t-warning);
    --bs-btn-border-color: var(--t-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c98016;
    --bs-btn-hover-border-color: #c98016;
    --bs-btn-focus-shadow-rgb: 227, 150, 29;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b07013;
    --bs-btn-active-border-color: #b07013;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--t-warning);
    --bs-btn-disabled-border-color: var(--t-warning);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--t-info);
    --bs-btn-border-color: var(--t-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #216cb8;
    --bs-btn-hover-border-color: #216cb8;
    --bs-btn-focus-shadow-rgb: 42, 127, 213;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1b5b9c;
    --bs-btn-active-border-color: #1b5b9c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--t-info);
    --bs-btn-disabled-border-color: var(--t-info);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6b7188;
    --bs-btn-border-color: #6b7188;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #585e74;
    --bs-btn-hover-border-color: #585e74;
    --bs-btn-focus-shadow-rgb: 107, 113, 136;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4a4f62;
    --bs-btn-active-border-color: #4a4f62;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6b7188;
    --bs-btn-disabled-border-color: #6b7188;
}

.btn-light {
    --bs-btn-color: var(--t-ink);
    --bs-btn-bg: #eef0f6;
    --bs-btn-border-color: #eef0f6;
    --bs-btn-hover-color: var(--t-ink);
    --bs-btn-hover-bg: #e2e5ef;
    --bs-btn-hover-border-color: #e2e5ef;
    --bs-btn-focus-shadow-rgb: 20, 27, 51;
    --bs-btn-active-color: var(--t-ink);
    --bs-btn-active-bg: #d8dce9;
    --bs-btn-active-border-color: #d8dce9;
    --bs-btn-disabled-color: var(--t-muted);
    --bs-btn-disabled-bg: #eef0f6;
    --bs-btn-disabled-border-color: #eef0f6;
}

.btn-dark {
    --bs-btn-bg: var(--t-ink);
    --bs-btn-border-color: var(--t-ink);
    --bs-btn-hover-bg: var(--t-ink-soft);
    --bs-btn-hover-border-color: var(--t-ink-soft);
    --bs-btn-active-bg: var(--t-ink-deep);
    --bs-btn-active-border-color: var(--t-ink-deep);
}

.btn-link {
    --bs-btn-color: var(--t-plum);
    --bs-btn-hover-color: var(--t-plum-deep);
    text-decoration: none;
}

.btn-outline-primary {
    --bs-btn-color: var(--t-plum);
    --bs-btn-border-color: var(--t-plum);
    --bs-btn-hover-bg: var(--t-plum);
    --bs-btn-hover-border-color: var(--t-plum);
    --bs-btn-active-bg: var(--t-plum-deep);
    --bs-btn-active-border-color: var(--t-plum-deep);
}

.btn-outline-secondary {
    --bs-btn-color: var(--t-text-2);
    --bs-btn-border-color: var(--t-border-strong);
    --bs-btn-hover-color: var(--t-ink);
    --bs-btn-hover-bg: var(--t-surface-2);
    --bs-btn-hover-border-color: var(--t-border-strong);
}

.btn-outline-danger {
    --bs-btn-color: var(--t-danger);
    --bs-btn-border-color: var(--t-danger);
    --bs-btn-hover-bg: var(--t-danger);
    --bs-btn-hover-border-color: var(--t-danger);
}

.btn-outline-success {
    --bs-btn-color: var(--t-success);
    --bs-btn-border-color: var(--t-success);
    --bs-btn-hover-bg: var(--t-success);
    --bs-btn-hover-border-color: var(--t-success);
}

/* "Cancel" links that sit beside a Save button read as secondary actions */
.card-body a.btn.btn-primary:has(+ .btn-success),
.card-body a.btn.btn-primary:has(+ button.btn-primary[type="submit"]) {
    --bs-btn-color: var(--t-ink);
    --bs-btn-bg: #eef0f6;
    --bs-btn-border-color: #eef0f6;
    --bs-btn-hover-color: var(--t-ink);
    --bs-btn-hover-bg: #e2e5ef;
    --bs-btn-hover-border-color: #e2e5ef;
    --bs-btn-active-color: var(--t-ink);
    --bs-btn-active-bg: #d8dce9;
    --bs-btn-active-border-color: #d8dce9;
    box-shadow: none;
}

/* Row action buttons inside tables become quiet, tinted icon chips */
.table .btn-sm,
.dataTable .btn-sm {
    --bs-btn-padding-x: 8px;
    --bs-btn-padding-y: 0;
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    box-shadow: none;
    font-size: 14px;
    white-space: nowrap;
    vertical-align: middle;
}

.table .btn-sm i,
.dataTable .btn-sm i {
    font-size: 14px;
}

.table .btn-sm i + span,
.table .btn-sm i:not(:only-child) {
    font-size: 12.5px;
}

.table .btn-sm.btn-success,
.dataTable .btn-sm.btn-success {
    --bs-btn-bg: var(--t-success-soft);
    --bs-btn-border-color: var(--t-success-soft);
    --bs-btn-color: var(--t-success);
    --bs-btn-hover-bg: var(--t-success);
    --bs-btn-hover-border-color: var(--t-success);
    --bs-btn-hover-color: #fff;
}

.table .btn-sm.btn-primary,
.dataTable .btn-sm.btn-primary {
    --bs-btn-bg: var(--t-plum-soft);
    --bs-btn-border-color: var(--t-plum-soft);
    --bs-btn-color: var(--t-plum);
    --bs-btn-hover-bg: var(--t-plum);
    --bs-btn-hover-border-color: var(--t-plum);
    --bs-btn-hover-color: #fff;
}

.table .btn-sm.btn-info,
.dataTable .btn-sm.btn-info {
    --bs-btn-bg: var(--t-info-soft);
    --bs-btn-border-color: var(--t-info-soft);
    --bs-btn-color: var(--t-info);
    --bs-btn-hover-bg: var(--t-info);
    --bs-btn-hover-border-color: var(--t-info);
    --bs-btn-hover-color: #fff;
}

.table .btn-sm.btn-warning,
.dataTable .btn-sm.btn-warning {
    --bs-btn-bg: var(--t-warning-soft);
    --bs-btn-border-color: var(--t-warning-soft);
    --bs-btn-color: var(--t-warning);
    --bs-btn-hover-bg: var(--t-warning);
    --bs-btn-hover-border-color: var(--t-warning);
    --bs-btn-hover-color: #fff;
}

.table .btn-sm.btn-danger,
.dataTable .btn-sm.btn-danger {
    --bs-btn-bg: var(--t-danger-soft);
    --bs-btn-border-color: var(--t-danger-soft);
    --bs-btn-color: var(--t-danger);
    --bs-btn-hover-bg: var(--t-danger);
    --bs-btn-hover-border-color: var(--t-danger);
    --bs-btn-hover-color: #fff;
}

.table .btn-sm.btn-secondary,
.dataTable .btn-sm.btn-secondary,
.table .btn-sm.btn-light,
.dataTable .btn-sm.btn-light {
    --bs-btn-bg: #eef0f6;
    --bs-btn-border-color: #eef0f6;
    --bs-btn-color: var(--t-text-2);
    --bs-btn-hover-bg: var(--t-ink);
    --bs-btn-hover-border-color: var(--t-ink);
    --bs-btn-hover-color: #fff;
}

/* Filter toolbars (filter / reset icon buttons) */
.btn-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-box .btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
}

.btn-box .btn-warning {
    --bs-btn-bg: #eef0f6;
    --bs-btn-border-color: #eef0f6;
    --bs-btn-color: var(--t-text-2);
    --bs-btn-hover-bg: #e2e5ef;
    --bs-btn-hover-border-color: #e2e5ef;
    --bs-btn-hover-color: var(--t-ink);
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.form-label,
label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t-text-2);
    margin-bottom: 6px;
}

.form-control,
.form-select {
    --bs-custom-white: var(--t-surface);
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    color: var(--t-text);
    background-color: var(--t-surface);
    border: 1px solid var(--t-border-strong);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control::placeholder {
    color: #a3a8bd;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--t-surface);
    border-color: var(--t-plum);
    box-shadow: var(--t-focus);
    color: var(--t-text);
}

.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: #bfc4d6;
}

.form-control-sm,
.form-select-sm {
    min-height: 34px;
    padding: 0.3rem 0.65rem;
    font-size: 0.8125rem;
    border-radius: 8px;
}

.form-control-lg {
    min-height: 48px;
    font-size: 1rem;
    border-radius: 12px;
}

textarea.form-control {
    min-height: 96px;
    line-height: 1.55;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: var(--t-surface-2);
    border-color: var(--t-border);
    color: var(--t-text);
    cursor: default;
}

.form-control[readonly]:focus {
    border-color: var(--t-border-strong);
    box-shadow: none;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237a809a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-size: 14px 12px;
    background-position: right 0.85rem center;
    padding-right: 2.4rem;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--t-danger);
    background-image: none;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 68, 89, 0.18);
}

.invalid-feedback,
.text-danger:not(.btn):not(.dropdown-item):not(i):not(h1):not(h2):not(h3):not(h4):not(h5) {
    font-size: 12px;
    font-weight: 500;
}

span.text-danger,
.invalid-feedback {
    display: block;
    margin-top: 5px;
    color: var(--t-danger) !important;
}

/* Required-field asterisks inside labels stay inline */
label span.text-danger {
    display: inline;
    margin: 0;
    font-size: inherit;
}

.input-group .form-control {
    border-radius: 10px;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-text {
    background: var(--t-surface-2);
    border: 1px solid var(--t-border-strong);
    color: var(--t-text-2);
    border-radius: 10px;
    font-size: 13px;
    padding: 0.5rem 0.85rem;
}

.input-group-text[id^="copy-button"] {
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.input-group-text[id^="copy-button"].is-copied {
    background: var(--t-success-soft);
    color: var(--t-success);
    border-color: var(--t-success-soft);
}

.input-group-text[id^="copy-button"]:hover {
    background: var(--t-plum-soft);
    color: var(--t-plum);
    border-color: var(--t-plum-soft);
}

.input-group .btn {
    border-radius: 10px;
}

.form-check-input {
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
    border: 1.5px solid var(--t-border-strong);
    background-color: var(--t-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check-input:focus {
    border-color: var(--t-plum);
    box-shadow: var(--t-focus);
}

.form-check-input:checked {
    background-color: var(--t-plum);
    border-color: var(--t-plum);
}

.form-check-input[type="checkbox"] {
    border-radius: 5px;
}

.form-check-label {
    font-weight: 500;
    color: var(--t-text);
    font-size: 13.5px;
}

/* "Copy On Create" sits in a narrow nested column on the template and overview
   pages. The wrapper column differs per page (col-md-3 on PDF templates,
   col-md-4 elsewhere), so target the label itself to keep it on one line. */
.form-check-label[for="copy_on_create"] {
    white-space: nowrap;
}

.form-switch .form-check-input {
    width: 2.2em;
    height: 1.2em;
    border-radius: 2em;
    background-color: #d5d9e6;
    border-color: #d5d9e6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--t-plum);
    border-color: var(--t-plum);
}

.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Select2 */
.select2-container {
    font-family: inherit;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    background: var(--t-surface);
    border: 1px solid var(--t-border-strong);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-selection--single {
    height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--t-plum);
    box-shadow: var(--t-focus);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 0.85rem;
    padding-right: 34px;
    color: var(--t-text);
    font-size: 0.875rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #a3a8bd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    width: 30px;
    right: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--t-muted) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: -6px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--t-muted) transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
    padding: 3px 6px 3px 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    padding: 3px 8px 3px 6px;
    background: var(--t-plum-soft);
    color: var(--t-plum);
    border: 0;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    float: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 -3px 0 0;
    border-radius: 50%;
    color: var(--t-plum);
    font-size: 0;
    line-height: 0;
    opacity: 0.65;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: rgba(220, 68, 89, 0.14);
    color: var(--t-danger);
    opacity: 1;
}

.select2-container--default .select2-search--inline .select2-search__field {
    margin: 0;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--t-text);
    min-height: 26px;
    width: 100% !important;
}

/* The inline search sits in its own list item, which is the actual flex item:
   let that item shrink so chips share the row instead of wrapping early. */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 80px;
    min-width: 80px;
    float: none;
}

.select2-container .select2-search--inline .select2-search__field::placeholder {
    color: #a3a8bd;
}

.select2-dropdown {
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    overflow: hidden;
    margin-top: 4px;
}

.select2-container--default .select2-search--dropdown {
    padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--t-border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--t-plum);
    box-shadow: var(--t-focus);
}

.select2-results {
    padding: 4px;
}

.select2-container--default .select2-results__option {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--t-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--t-plum-soft);
    color: var(--t-plum);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--t-surface-2);
    color: var(--t-ink);
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background: var(--t-plum-soft);
    color: var(--t-plum);
}

.select2-container--default .select2-results__group {
    color: var(--t-muted);
    font-size: 11.5px;
    font-weight: 600;
    padding: 8px 10px 4px;
}

.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background: var(--t-surface-2) !important;
    border-color: var(--t-border) !important;
}

/* Datepicker */
.datepicker {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    padding: 8px;
    font-family: inherit;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: var(--t-text);
}

.datepicker table tr th {
    font-weight: 600;
    color: var(--t-text-2);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover {
    background: var(--t-surface-2);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #b5b9c9;
}

.datepicker table tr td .active.disabled,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td.active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover {
    background-color: var(--t-plum) !important;
    color: #fff !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background-color: var(--t-plum-soft) !important;
    color: var(--t-plum) !important;
}

.datepicker table tr td.range {
    background: var(--t-plum-soft);
    color: var(--t-plum);
    border-radius: 0;
}

.datepicker .datepicker-switch {
    font-weight: 700;
    color: var(--t-ink);
}

/* Bootstrap validation states inside DataTables filters */
.dataTables_filter input.form-control-sm {
    min-height: 36px;
}

/* --------------------------------------------------------------------------
   11. Tables & DataTables
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--t-text);
    --bs-table-border-color: var(--t-border);
    --bs-table-striped-bg: var(--t-surface-2);
    --bs-table-hover-bg: #f6f4fc;
    --bs-table-hover-color: var(--t-text);
    color: var(--t-text);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 10px 14px;
    border-bottom: 1px solid var(--t-border);
    vertical-align: middle;
}

.table-bordered > :not(caption) > * {
    border-width: 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0;
}

.table > thead > tr > th,
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--t-surface-2);
    color: var(--t-text-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-top: 0;
    border-bottom: 1px solid var(--t-border);
    white-space: nowrap;
}

/* Header and body sit inside one rounded, bordered frame */
.dataTables_wrapper .dataTables_scroll,
.card .table-responsive {
    border: 1px solid var(--t-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--t-surface);
}

.card .table-responsive {
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_scrollHead {
    background: var(--t-surface-2);
}

/* The hidden header clone DataTables keeps inside the scroll body must not
   draw a stray line under the real header */
.dataTables_scrollBody > table > thead > tr > th,
.dataTables_scrollBody > table > thead > tr > td {
    /* Zero only the vertical box. DataTables sizes the visible header from
       this copy, so its side padding, font and dividers must match the real
       header exactly or every heading drifts away from its column. */
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.dataTables_scrollBody > table > tbody > tr:first-child > * {
    border-top: 0;
}

.dataTables_scrollBody > table > tbody > tr:last-child > *,
.card .table-responsive > .table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-y: hidden !important;
}


.table > tbody > tr {
    transition: background-color 0.12s ease;
}

.table > tbody > tr:hover > * {
    background: var(--t-table-hover-bg, #faf9fd);
}

.table td .badge {
    vertical-align: middle;
}

.table.nowrap > :not(caption) > * > *,
.dataTables_wrapper .table td:last-child {
    white-space: nowrap;
}

/* Key/value tables on detail pages wrap long values instead of clipping */
.card .table-responsive > .table:not(.dataTable) td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.card .table-responsive > .table:not(.dataTable) th {
    white-space: nowrap;
}

/* Wide DataTables show a slim, always-visible scrollbar as the overflow cue */
.dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: #c9cddc transparent;
}

.dataTables_scrollBody::-webkit-scrollbar {
    height: 8px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #c9cddc;
    border-radius: 8px;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
    background: transparent;
}

.table td .btn + .btn,
.table td .btn + a,
.table td a + .btn {
    margin-left: 2px;
}


table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

table.dataTable.no-footer {
    border-bottom: 0;
}

table.dataTable tbody td.dataTables_empty {
    padding: 40px 14px;
    color: var(--t-muted);
    text-align: center;
}

.dataTables_wrapper {
    font-size: 13px;
}

.dataTables_wrapper .row:first-child {
    margin-bottom: 14px;
    align-items: center;
}

.dataTables_wrapper .row:last-child {
    margin-top: 16px;
    align-items: center;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-muted);
}

.dataTables_wrapper .dataTables_length select {
    min-height: 36px;
    padding: 0.3rem 2rem 0.3rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--t-border-strong);
    color: var(--t-text);
    font-weight: 600;
    background-color: var(--t-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237a809a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 12px 10px;
    background-position: right 0.6rem center;
    -webkit-appearance: none;
    appearance: none;
}

.dataTables_wrapper .dataTables_filter input {
    min-height: 36px;
    width: 240px;
    max-width: 100%;
    margin-left: 0 !important;
    padding: 0.35rem 0.8rem 0.35rem 2.1rem;
    border-radius: 8px;
    border: 1px solid var(--t-border-strong);
    background-color: var(--t-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a809a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='M20 20l-3.5-3.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 10px center;
    font-family: inherit;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--t-plum);
    box-shadow: var(--t-focus);
}

.dataTables_wrapper .dataTables_info {
    color: var(--t-muted);
    font-size: 12.5px;
    padding-top: 0;
}

div.dataTables_wrapper div.dataTables_processing {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: var(--t-shadow-lg);
    color: var(--t-text-2);
    font-weight: 600;
    font-size: 12.5px;
    width: 160px;
    margin-left: -80px;
    padding: 12px 0;
    z-index: 5;
}

/* Pagination */
.pagination {
    --bs-pagination-color: var(--t-text-2);
    --bs-pagination-bg: var(--t-surface);
    --bs-pagination-border-color: var(--t-border);
    --bs-pagination-hover-color: var(--t-plum);
    --bs-pagination-hover-bg: var(--t-plum-soft);
    --bs-pagination-hover-border-color: var(--t-plum-soft);
    --bs-pagination-focus-color: var(--t-ink);
    --bs-pagination-focus-bg: var(--t-surface-2);
    --bs-pagination-focus-box-shadow: var(--t-focus);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--t-plum);
    --bs-pagination-active-border-color: var(--t-plum);
    --bs-pagination-disabled-color: #b5b9c9;
    --bs-pagination-disabled-bg: var(--t-surface-2);
    --bs-pagination-disabled-border-color: var(--t-border);
    gap: 4px;
    margin: 0;
}

.pagination .page-link,
.pagination-rounded .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pagination .page-link i {
    font-size: 16px;
}

.pagination .page-item.active .page-link {
    box-shadow: 0 1px 2px rgba(107, 63, 181, 0.3);
}

/* --------------------------------------------------------------------------
   12. Badges
   -------------------------------------------------------------------------- */
.badge {
    --bs-badge-padding-x: 0.6em;
    --bs-badge-padding-y: 0.38em;
    --bs-badge-font-size: 0.72rem;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 6px;
    letter-spacing: 0.01em;
    line-height: 1.2;
    vertical-align: middle;
}

.badge.rounded-pill {
    --bs-badge-padding-x: 0.75em;
}

.badge.bg-primary {
    background-color: var(--t-plum) !important;
}

.badge.bg-success {
    background-color: var(--t-success) !important;
}

.badge.bg-danger {
    background-color: var(--t-danger) !important;
}

.badge.bg-warning {
    background-color: var(--t-warning) !important;
    color: #fff;
}

.badge.bg-info {
    background-color: var(--t-info) !important;
}

.badge.bg-secondary {
    background-color: #6b7188 !important;
}

.badge.bg-light {
    background-color: #eef0f6 !important;
    color: var(--t-text-2) !important;
}

.badge.bg-dark {
    background-color: var(--t-ink) !important;
}

.badge-soft-primary {
    background-color: var(--t-plum-soft) !important;
    color: var(--t-plum) !important;
}

.badge-soft-success {
    background-color: var(--t-success-soft) !important;
    color: var(--t-success) !important;
}

.badge-soft-danger {
    background-color: var(--t-danger-soft) !important;
    color: var(--t-danger) !important;
}

.badge-soft-warning {
    background-color: var(--t-warning-soft) !important;
    color: #b8720f !important;
}

.badge-soft-info {
    background-color: var(--t-info-soft) !important;
    color: var(--t-info) !important;
}

.badge-soft-secondary {
    background-color: #eef0f6 !important;
    color: var(--t-text-2) !important;
}

.badge-soft-dark {
    background-color: #e4e6ee !important;
    color: var(--t-ink) !important;
}

/* Inside tables every badge uses the soft treatment */
.table .badge.bg-primary { background-color: var(--t-plum-soft) !important; color: var(--t-plum) !important; }
.table .badge.bg-success { background-color: var(--t-success-soft) !important; color: var(--t-success) !important; }
.table .badge.bg-danger { background-color: var(--t-danger-soft) !important; color: var(--t-danger) !important; }
.table .badge.bg-warning { background-color: var(--t-warning-soft) !important; color: #b8720f !important; }
.table .badge.bg-info { background-color: var(--t-info-soft) !important; color: var(--t-info) !important; }
.table .badge.bg-secondary { background-color: #eef0f6 !important; color: var(--t-text-2) !important; }
.table .badge.bg-dark { background-color: #e4e6ee !important; color: var(--t-ink) !important; }

/* Background utilities used on non-badge chips */
.bg-secondary:not(.badge) {
    background-color: #6b7188 !important;
}

/* --------------------------------------------------------------------------
   13. Modals
   -------------------------------------------------------------------------- */
.modal-backdrop {
    background-color: var(--t-ink);
}

.modal-backdrop.show {
    opacity: 0.55;
}

.modal-content {
    border: 0;
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-lg);
    overflow: hidden;
}

.modal-header {
    padding: 20px 24px 14px;
    border-bottom: 0;
    align-items: center;
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--t-ink);
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 8px 24px 20px;
}

.modal-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--t-border);
    background: var(--t-surface-2);
    gap: 8px;
}

.modal-footer > * {
    margin: 0;
}

.btn-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: var(--t-surface-2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234b5170'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/11px no-repeat;
    opacity: 1;
    transition: background-color 0.12s ease;
}

.btn-close:hover {
    background-color: #e2e5ef;
    opacity: 1;
}

.btn-close:focus {
    box-shadow: var(--t-focus);
}

.modal.fade .modal-dialog {
    transform: translateY(8px) scale(0.985);
    transition: transform 0.18s ease-out;
}

.modal.show .modal-dialog {
    transform: none;
}

/* --------------------------------------------------------------------------
   14. Alerts, toasts, SweetAlert
   -------------------------------------------------------------------------- */
.alert {
    border: 0;
    border-radius: var(--t-radius);
    font-weight: 500;
    padding: 12px 16px;
}

.alert-success {
    background: var(--t-success-soft);
    color: #12724f;
}

.alert-danger {
    background: var(--t-danger-soft);
    color: #a92f40;
}

.alert-warning {
    background: var(--t-warning-soft);
    color: #8f5a0c;
}

.alert-info {
    background: var(--t-info-soft);
    color: #1b5b9c;
}

.jq-toast-wrap {
    width: 320px;
}

.jq-toast-wrap.top-right {
    top: 84px;
    right: 20px;
}

.jq-toast-single {
    font-family: var(--bs-font-sans-serif);
    font-size: 13px;
    line-height: 1.45;
    padding: 14px 16px 14px 48px;
    border-radius: 12px;
    box-shadow: var(--t-shadow-lg);
    background-position: 14px center;
    background-size: 20px;
    border: 0;
    margin-bottom: 8px;
}

.jq-toast-single h2 {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    margin: 0 0 2px;
    color: inherit;
    letter-spacing: 0;
}

.jq-icon-success {
    background-color: var(--t-success);
    color: #fff;
}

.jq-icon-error {
    background-color: var(--t-danger);
    color: #fff;
}

.jq-icon-info {
    background-color: var(--t-info);
    color: #fff;
}

.jq-icon-warning {
    background-color: var(--t-warning);
    color: #fff;
}

.jq-toast-loader {
    top: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, 0.55) !important;
}

.close-jq-toast-single {
    top: 8px;
    right: 10px;
    font-size: 18px;
    opacity: 0.7;
}

.swal2-popup {
    border-radius: var(--t-radius-lg) !important;
    font-family: var(--bs-font-sans-serif) !important;
    padding: 28px 24px 24px !important;
    box-shadow: var(--t-shadow-lg) !important;
}

.swal2-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--t-ink) !important;
    letter-spacing: -0.01em;
}

.swal2-html-container {
    font-size: 14px !important;
    color: var(--t-text-2) !important;
}

.swal2-icon {
    border-width: 3px !important;
    transform: scale(0.9);
}

.swal2-actions {
    gap: 8px;
}

.swal2-styled {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 22px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.swal2-styled:focus {
    box-shadow: var(--t-focus) !important;
}

/* --------------------------------------------------------------------------
   15. Misc components
   -------------------------------------------------------------------------- */
.list-group {
    --bs-list-group-border-color: var(--t-border);
    --bs-list-group-border-radius: var(--t-radius);
    --bs-list-group-item-padding-x: 16px;
    --bs-list-group-item-padding-y: 12px;
}

.avatar-title {
    background-color: var(--t-plum);
}

.rounded {
    border-radius: 10px !important;
}

.border {
    border-color: var(--t-border) !important;
}

.bg-light {
    background-color: var(--t-surface-2) !important;
}

hr {
    border-color: var(--t-border);
    opacity: 1;
}

.nav-tabs {
    border-bottom: 1px solid var(--t-border);
    gap: 4px;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--t-muted);
    font-weight: 600;
    padding: 10px 14px;
    margin-bottom: -1px;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--t-ink);
}

.nav-tabs .nav-link.active {
    color: var(--t-plum);
    background: transparent;
    border-bottom-color: var(--t-plum);
}

.nav-pills .nav-link {
    border-radius: 10px;
    font-weight: 600;
    color: var(--t-text-2);
}

.nav-pills .nav-link.active {
    background: var(--t-plum);
}

.accordion-button {
    font-weight: 600;
    color: var(--t-ink);
}

.accordion-button:not(.collapsed) {
    background: var(--t-plum-soft);
    color: var(--t-plum);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: var(--t-focus);
    border-color: var(--t-plum);
}

.accordion-item {
    border-color: var(--t-border);
}

.tooltip-inner {
    background: var(--t-ink);
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 10px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--t-ink);
}

.popover {
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
}

.progress {
    height: 8px;
    border-radius: 999px;
    background: #e9ebf3;
}

.progress-bar {
    background: var(--t-plum);
}

/* Image gallery (blade component) */
.image-gallery .btnClose {
    background-color: var(--t-danger);
}

.image-gallery .imgBox {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--t-border);
    background: var(--t-surface-2);
}

/* CodeMirror & TinyMCE containers */
.CodeMirror {
    border-radius: 12px;
    border: 1px solid var(--t-border);
    font-size: 13px;
}

.tox-tinymce {
    border-radius: 12px !important;
    border: 1px solid var(--t-border-strong) !important;
}

.tox .tox-toolbar__primary,
.tox .tox-menubar,
.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background: var(--t-surface-2) !important;
}

/* Dropzone-ish file inputs */
.form-control[type="file"] {
    padding: 0.35rem 0.5rem;
}

.form-control[type="file"]::file-selector-button {
    border-radius: 7px;
    background: #eef0f6;
    color: var(--t-ink);
    border: 0;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    margin-right: 0.75rem;
}

/* Filter card select2 width helper (existing custom.css hook) */
.top-box .select2-container {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   16. Auth pages
   -------------------------------------------------------------------------- */
body.auth-body {
    background: var(--t-canvas);
    min-height: 100vh;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .auth-shell {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

.auth-side {
    position: relative;
    display: none;
    background: var(--t-ink);
    color: #fff;
    padding: 48px;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) {
    .auth-side {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.auth-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 45% at 8% 100%, rgba(250, 174, 17, 0.35), transparent 70%),
        radial-gradient(55% 50% at 60% 110%, rgba(252, 80, 163, 0.32), transparent 70%),
        radial-gradient(60% 55% at 100% 85%, rgba(17, 97, 190, 0.45), transparent 72%);
    z-index: -1;
}

.auth-side::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--t-spectrum);
}

.auth-side-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.auth-side-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.auth-side-brand .brand-mark img {
    height: 26px;
}

.auth-side-brand .brand-word {
    font-size: 19px;
}

.auth-side-copy h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    max-width: 18ch;
    margin: 0 0 14px;
}

.auth-side-copy p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.6;
    max-width: 40ch;
    margin: 0;
}

.auth-side-foot {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.5px;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-card-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.auth-card-brand img {
    height: 30px;
}

@media (min-width: 992px) {
    .auth-card-brand {
        display: none;
    }
}

.auth-card h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 6px;
}

.auth-card .auth-lead {
    color: var(--t-muted);
    font-size: 14px;
    margin: 0 0 28px;
    line-height: 1.55;
}

.auth-card .form-control {
    min-height: 46px;
    border-radius: 12px;
    font-size: 15px;
}

.auth-card .btn-primary,
.auth-card .btn-success {
    min-height: 46px;
    border-radius: 12px;
    font-size: 14.5px;
    width: 100%;
}

.auth-card .auth-foot {
    margin-top: 26px;
    color: var(--t-muted);
    font-size: 13px;
    text-align: center;
}

.auth-card .auth-foot a,
.auth-card .auth-foot button {
    color: var(--t-plum);
    font-weight: 600;
    background: transparent;
    border: 0;
    padding: 0;
}

.auth-card .auth-foot a:hover,
.auth-card .auth-foot button:hover {
    color: var(--t-plum-deep);
    text-decoration: underline;
}

.auth-card .auth-copy {
    margin-top: 40px;
    color: #a3a8bd;
    font-size: 12px;
    text-align: center;
}

.otp-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--t-plum-soft);
    color: var(--t-plum);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.otp-inputs .form-control {
    height: 56px;
    min-height: 56px;
    padding: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
}

.otp-inputs .mb-3 {
    margin-bottom: 0 !important;
}

.auth-card .fw-semibold {
    color: var(--t-ink);
}

/* --------------------------------------------------------------------------
   17. Error pages
   -------------------------------------------------------------------------- */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.error-code {
    font-size: 96px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    background: var(--t-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    margin-bottom: 8px;
}

.error-page h4 {
    font-size: 20px;
    text-transform: none;
    margin-bottom: 8px;
}

.error-page p {
    color: var(--t-muted);
    max-width: 44ch;
    margin: 0 auto 24px;
}

/* --------------------------------------------------------------------------
   18. Responsive touches
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body[data-sidebar="dark"] .navbar-brand-box,
    .navbar-brand-box {
        width: auto;
        padding: 0 16px;
    }

    #page-topbar::after {
        bottom: -3px;
    }

    .page-head-title,
    .page-title-box h4 {
        font-size: 20px !important;
    }

    .card-body {
        padding: 18px 16px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: 10px;
    }
}

@media (max-width: 575.98px) {
    .user-menu-toggle .user-menu-name {
        display: none;
    }

    .stat-card-value {
        font-size: 22px;
    }
}

/* --------------------------------------------------------------------------
   19. Motion
   Interaction feedback and page transitions. Everything here is decorative
   and switches off under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
:root {
    --t-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-dur: 0.22s;
}

/* Page enter: the content rises into place once; leave: it fades while the
   next page loads. */
@keyframes t-page-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.page-content {
    animation: t-page-in 0.32s var(--t-ease) backwards;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

body.t-leaving .page-content,
body.t-leaving .auth-card {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

.auth-card {
    animation: t-page-in 0.36s var(--t-ease) backwards;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.auth-side-copy {
    animation: t-page-in 0.5s var(--t-ease) 0.08s backwards;
}

/* Spectrum progress bar shown while navigating or submitting */
.t-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: var(--t-spectrum);
    background-size: 200% 100%;
    opacity: 0;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(252, 80, 163, 0.45);
    transition: width 0.25s ease, opacity 0.2s ease;
    pointer-events: none;
}

.t-progress.is-active {
    opacity: 1;
    width: 72%;
    transition: width 6s cubic-bezier(0.05, 0.6, 0.2, 1), opacity 0.2s ease;
}

.t-progress.is-done {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.3s ease 0.15s;
}

/* Sidebar collapse and content reflow */
.vertical-menu,
.navbar-brand-box,
.main-content,
.footer {
    transition: width 0.26s var(--t-ease), margin-left 0.26s var(--t-ease), left 0.26s var(--t-ease), transform 0.26s var(--t-ease);
}

.vertical-collpsed .vertical-menu {
    transition: width 0.26s var(--t-ease);
}

#sidebar-menu ul li a {
    transition: background-color var(--t-dur) ease, color var(--t-dur) ease, transform var(--t-dur) var(--t-ease);
}

#sidebar-menu > ul > li > a:not(.active):hover,
#sidebar-menu ul li ul.sub-menu li a:not(.active):hover {
    transform: translateX(2px);
}

#sidebar-menu ul li a.active::before,
body[data-sidebar="dark"] #sidebar-menu > ul > li.mm-active > a:not(.has-arrow)::before {
    animation: t-tick-in 0.3s var(--t-ease) backwards;
}

@keyframes t-tick-in {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

/* Mobile drawer: slide instead of popping */
@media (max-width: 991.98px) {
    .vertical-menu {
        display: block !important;
        transform: translateX(-100%);
        box-shadow: none;
        transition: transform 0.28s var(--t-ease), box-shadow 0.28s ease;
    }

    body.sidebar-enable .vertical-menu {
        transform: none;
        box-shadow: 24px 0 48px -24px rgba(20, 27, 51, 0.5);
    }

    .t-sidebar-backdrop {
        position: fixed;
        inset: 70px 0 0 0;
        background: rgba(20, 27, 51, 0.45);
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    body.sidebar-enable .t-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Buttons and chips answer the press */
.btn {
    transition: background-color var(--t-dur) ease, border-color var(--t-dur) ease, color var(--t-dur) ease, box-shadow var(--t-dur) ease, transform 0.12s var(--t-ease);
}

.btn:not(:disabled):active {
    transform: scale(0.97);
}

.btn-primary:not(:disabled):hover {
    box-shadow: 0 6px 14px -6px rgba(107, 63, 181, 0.55);
}

.btn-success:not(:disabled):hover {
    box-shadow: 0 6px 14px -6px rgba(26, 158, 114, 0.5);
}

.btn-danger:not(:disabled):hover {
    box-shadow: 0 6px 14px -6px rgba(220, 68, 89, 0.5);
}

.table .btn-sm:not(:disabled):hover,
.dataTable .btn-sm:not(:disabled):hover {
    transform: translateY(-1px);
}

.header-item,
.dropdown-item,
.page-link,
.form-check-input,
.input-group-text,
.nav-link,
.select2-container--default .select2-results__option {
    transition: background-color var(--t-dur) ease, color var(--t-dur) ease, border-color var(--t-dur) ease, box-shadow var(--t-dur) ease;
}

/* Rows and stat cards reveal in sequence after each draw */
@keyframes t-row-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.t-rows-in > tr {
    animation: t-row-in 0.28s var(--t-ease) backwards;
}

.t-rows-in > tr:nth-child(1) { animation-delay: 0.02s; }
.t-rows-in > tr:nth-child(2) { animation-delay: 0.05s; }
.t-rows-in > tr:nth-child(3) { animation-delay: 0.08s; }
.t-rows-in > tr:nth-child(4) { animation-delay: 0.11s; }
.t-rows-in > tr:nth-child(5) { animation-delay: 0.14s; }
.t-rows-in > tr:nth-child(6) { animation-delay: 0.17s; }
.t-rows-in > tr:nth-child(7) { animation-delay: 0.2s; }
.t-rows-in > tr:nth-child(8) { animation-delay: 0.23s; }
.t-rows-in > tr:nth-child(9) { animation-delay: 0.26s; }
.t-rows-in > tr:nth-child(10) { animation-delay: 0.29s; }
.t-rows-in > tr:nth-child(n + 11) { animation-delay: 0.32s; }

.stat-card {
    animation: t-row-in 0.36s var(--t-ease) backwards;
}

.row > :nth-child(1) > .stat-card { animation-delay: 0.05s; }
.row > :nth-child(2) > .stat-card { animation-delay: 0.1s; }
.row > :nth-child(3) > .stat-card { animation-delay: 0.15s; }
.row > :nth-child(4) > .stat-card { animation-delay: 0.2s; }
.row > :nth-child(5) > .stat-card { animation-delay: 0.25s; }

/* Toasts glide in from the right */
@keyframes t-toast-in {
    from {
        transform: translateX(16px);
    }
    to {
        transform: none;
    }
}

/* Slide only. The toast plugin already fades opacity in and out with jQuery;
   animating opacity here as well made the toast vanish for a moment when this
   keyframe ended mid-fade, which read as a blink on create and edit. */
.jq-toast-single {
    animation: t-toast-in 0.3s var(--t-ease) backwards;
}

/* Modal: soften the backdrop fade */
.modal-backdrop.fade {
    transition: opacity 0.22s ease;
}

.modal.fade .modal-dialog {
    transition: transform 0.22s var(--t-ease), opacity 0.22s ease;
    opacity: 0;
}

.modal.show .modal-dialog {
    opacity: 1;
}

/* Waves ripple tuned to the palette */
.waves-effect .waves-ripple {
    background: rgba(107, 63, 181, 0.18);
}

.vertical-menu .waves-effect .waves-ripple,
.btn-primary .waves-ripple,
.btn-success .waves-ripple,
.btn-danger .waves-ripple {
    background: rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .page-content,
    .auth-card,
    .auth-side-copy,
    .stat-card,
    .t-rows-in > tr,
    .jq-toast-single,
    #sidebar-menu ul li a.active::before {
        animation: none !important;
    }

    body.t-leaving .page-content,
    body.t-leaving .auth-card {
        opacity: 1;
        transform: none;
    }

    .t-progress {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   20. Filter toolbars and pagination on small screens
   -------------------------------------------------------------------------- */
.top-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-box .select2-container {
    flex: 1 1 200px;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

.top-box .input-daterange {
    flex: 1 1 220px;
    width: auto;
    padding-left: 0 !important;
}

.top-box .btn-box {
    margin-left: 0;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .top-box {
        flex-wrap: wrap;
    }

    .top-box .select2-container,
    .top-box .input-daterange {
        flex-basis: 100%;
    }

    .top-box .btn-box {
        width: 100%;
    }

    .top-box .btn-box .btn {
        flex: 1 1 auto;
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: 8px;
    }

    .dataTables_wrapper .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 auto;
    }

    .card-body > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-head-title,
    .page-title-box h4 {
        font-size: 20px !important;
    }

    .modal-dialog {
        margin: 12px;
    }

    .stat-card {
        padding: 16px 18px;
    }
}

/* Phone: the template pins header menus to the viewport edges; cancel Popper's
   offset so the menu doesn't hang off the left side. */
@media (max-width: 600px) {
    .navbar-header .dropdown .dropdown-menu.show {
        transform: none !important;
        inset: 60px 10px auto 10px !important;
        width: auto;
    }
}

/* Filter button pairs shrink before they clip on tablet-width columns */
.btn-box {
    flex-wrap: wrap;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .btn-box .btn {
        min-width: 36px;
        padding: 0 8px;
    }
}

/* Phone: date-range groups keep their spacing when stacked above the buttons */
@media (max-width: 767.98px) {
    .card-body .row > [class*="col-"] > .input-daterange {
        margin-bottom: 1rem;
    }
}


/* --------------------------------------------------------------------------
   21. Collapsed sidebar without the phantom page scrollbar
   The template gives <body> a 1760px min-height while collapsed so its
   absolutely-positioned rail has room; that is what produced a scrollbar on
   every short page. The rail is now fixed to the viewport and scrolls on its
   own, and the hover flyouts use fixed positioning so the rail's overflow
   clipping cannot cut them off.
   -------------------------------------------------------------------------- */
body[data-sidebar="dark"].vertical-collpsed,
body.vertical-collpsed {
    min-height: 0 !important;
}

.vertical-collpsed .vertical-menu {
    position: fixed;
    top: 70px;
    bottom: 0;
    height: auto;
    z-index: 1001;
    transition: none;
}

.vertical-collpsed .vertical-menu .simplebar-mask {
    overflow: hidden !important;
}

.vertical-collpsed .vertical-menu .simplebar-content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none;
}

.vertical-collpsed .vertical-menu .simplebar-content-wrapper::-webkit-scrollbar {
    display: none;
}

.vertical-collpsed .vertical-menu #sidebar-menu {
    padding: 10px 0 20px;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li {
    position: relative;
    height: 48px;
    margin: 0;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
    margin: 2px 10px;
    padding: 0;
    width: 50px;
    height: 44px;
    min-height: 44px;
}

/* Hover: the link becomes a fixed flyout anchored at its own static position,
   so it escapes the scroll container while staying glued to its row. */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    border-radius: 10px 10px 0 0;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(:has(ul.sub-menu)):hover > a {
    border-radius: 10px;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    position: fixed;
    left: 10px;
    right: auto;
    width: 250px;
    z-index: 1003;
    justify-content: flex-start;
    padding: 0 14px;
    gap: 12px;
    background: var(--t-ink-soft);
    color: #fff;
    box-shadow: var(--t-shadow-lg);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
    display: inline;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > ul.sub-menu {
    display: none;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu {
    display: block;
    position: fixed;
    left: 10px;
    width: 250px;
    height: auto !important;
    margin: 0;
    padding: 4px 6px;
    background: var(--t-ink-soft);
    border-radius: 0;
    box-shadow: var(--t-shadow-lg);
    z-index: 1002;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu.t-flyout-first {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu.t-flyout-last {
    padding-bottom: 8px;
    border-radius: 0 0 12px 12px;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a {
    margin: 0;
    padding: 8px 12px 8px 44px;
    color: rgba(255, 255, 255, 0.72);
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a::after {
    left: 24px;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   22. Table sort indicators
   -------------------------------------------------------------------------- */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    padding-right: 28px !important;
    cursor: pointer;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    display: none !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    font-family: "Material Design Icons";
    font-size: 22px;
    line-height: 1;
    position: absolute;
    right: 4px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 1 !important;
    color: #b5b9c9;
    transition: color 0.15s ease;
}

table.dataTable thead .sorting:after {
    content: "\f04e2";
    font-size: 17px;
    right: 7px;
}

table.dataTable thead .sorting:hover:after {
    color: var(--t-text-2);
}

table.dataTable thead .sorting_asc:after {
    content: "\f0143";
    color: var(--t-plum);
}

table.dataTable thead .sorting_desc:after {
    content: "\f0140";
    color: var(--t-plum);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--t-ink);
}

/* --------------------------------------------------------------------------
   23. Inline switches used in tables (template's input[switch] component)
   -------------------------------------------------------------------------- */
input[switch] + label {
    width: 54px;
    height: 26px;
    padding: 0;
    background-color: #d5d9e6;
    box-shadow: none;
    transform: none;
    vertical-align: middle;
    margin: 0;
}

input[switch] + label:before {
    color: var(--t-text-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 26px;
    top: 0;
    margin: 0;
    right: 6px;
    min-width: 0;
}

input[switch] + label:after {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(20, 27, 51, 0.2);
}

input[switch]:checked + label,
input[switch="bool"]:checked + label,
input[switch="success"]:checked + label {
    background-color: var(--t-success);
}

input[switch]:checked + label:before {
    color: #fff;
    left: 7px;
    right: auto;
}

input[switch]:checked + label:after {
    left: 31px;
}

input[switch="bool"] + label {
    background-color: #d5d9e6;
}

.table td input[switch] {
    display: none;
}

/* --------------------------------------------------------------------------
   24. Secondary buttons read as enabled; disabled ones read as disabled
   -------------------------------------------------------------------------- */
.btn-secondary {
    --bs-btn-color: var(--t-ink);
    --bs-btn-bg: var(--t-surface);
    --bs-btn-border-color: var(--t-border-strong);
    --bs-btn-hover-color: var(--t-ink);
    --bs-btn-hover-bg: var(--t-surface-2);
    --bs-btn-hover-border-color: #bfc4d6;
    --bs-btn-focus-shadow-rgb: 20, 27, 51;
    --bs-btn-active-color: var(--t-ink);
    --bs-btn-active-bg: #e9ebf3;
    --bs-btn-active-border-color: #bfc4d6;
    --bs-btn-disabled-color: var(--t-muted);
    --bs-btn-disabled-bg: var(--t-surface);
    --bs-btn-disabled-border-color: var(--t-border);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   25. List-card header: title on the left, actions on the right, and clear
   air between them and the table controls below.
   -------------------------------------------------------------------------- */
.card-body > .d-flex.justify-content-between {
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.card-body > .d-flex.justify-content-between > .card-title {
    margin: 0 !important;
    line-height: 38px;
}

.card-body > .d-flex.justify-content-between .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.card-body > .d-flex.justify-content-between + .card-title-desc:empty {
    display: none;
}

.card-body > .d-flex.justify-content-between + .dataTables_wrapper,
.card-body > .d-flex.justify-content-between + .table-responsive,
.card-body > .d-flex.justify-content-between + table {
    margin-top: 0;
}

.card-body > .card-title + .card-title-desc:empty + .dataTables_wrapper .row:first-child,
.card-body > .card-title + .card-title-desc:empty + table {
    margin-top: 4px;
}

/* Buttons never wrap their label */
.btn {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   26. Dropdowns: one family for Select2, native selects, the date picker
   and menu dropdowns
   -------------------------------------------------------------------------- */

/* Select2 single: chevron instead of the legacy triangle */
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container .select2-selection--single .select2-selection__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 38px;
    top: 0;
    right: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "\f0140";
    font-family: "Material Design Icons";
    font-size: 18px;
    line-height: 1;
    color: var(--t-muted);
    transition: transform 0.2s var(--t-ease), color 0.15s ease;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: rotate(180deg);
    color: var(--t-plum);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container .select2-selection--single .select2-selection__placeholder {
    color: #a3a8bd;
}

/* Clear-all button. Select2 4.0.13 floats it inside the rendered area, which
   our flex layout ignores, so it drifted to the left of the chips. Pin it to
   the right edge instead: beside the chevron on single selects, at the end of
   the box on multiple selects. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 36px;
    z-index: 2;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: -11px 0 0;
    padding: 0;
    border-radius: 50%;
    color: var(--t-muted);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover,
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    background: rgba(220, 68, 89, 0.12);
    color: var(--t-danger);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before,
.select2-container--default .select2-selection--single .select2-selection__clear::before,
.select2-container--default .select2-selection--multiple .select2-selection__clear::before {
    content: "\f0156";
    display: block;
    font-family: "Material Design Icons";
    font-weight: normal;
    line-height: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before {
    font-size: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__clear::before,
.select2-container--default .select2-selection--multiple .select2-selection__clear::before {
    font-size: 16px;
}

/* Keep text and chips clear of the pinned button */
.select2-container--default .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered {
    padding-right: 62px;
}

.select2-container--default .select2-selection--multiple:has(.select2-selection__clear) {
    padding-right: 36px;
}

/* Select2 panel */
.select2-dropdown {
    margin-top: 6px;
    animation: t-pop 0.14s ease-out;
}

.select2-dropdown.select2-dropdown--above {
    margin-top: -6px;
}

.select2-container--default .select2-search--dropdown {
    position: relative;
    padding: 8px 8px 4px;
    background: transparent;
}

/* Search icon. The search area has 8px padding above the field and 4px below,
   so centring on 50% of the area put the icon above the field's middle.
   The field now has a fixed height and the icon is centred on the field:
   8px top padding + half of the 36px field = 26px. */
.select2-container--default .select2-search--dropdown::before {
    content: "\f0349";
    display: block;
    height: 17px;
    font-family: "Material Design Icons";
    font-size: 17px;
    line-height: 17px;
    color: var(--t-muted);
    position: absolute;
    left: 18px;
    top: 26px;
    margin-top: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding: 7px 10px 7px 34px;
    background: var(--t-surface);
    color: var(--t-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: #a3a8bd;
}

.select2-results {
    padding: 4px 6px 6px;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 264px;
    scrollbar-width: thin;
    scrollbar-color: #c9cddc transparent;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: #c9cddc;
    border-radius: 8px;
}

.select2-container--default .select2-results__option {
    position: relative;
    padding: 9px 34px 9px 12px;
    margin-bottom: 1px;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--t-surface-2);
    color: var(--t-ink);
    font-weight: 600;
}

.select2-container--default .select2-results__option[aria-selected="true"]::after {
    content: "\f012c";
    font-family: "Material Design Icons";
    font-size: 16px;
    line-height: 1;
    color: var(--t-plum);
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -8px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"]:hover {
    background: var(--t-plum-soft);
    color: var(--t-plum);
}

.select2-container--default .select2-results__option[role="group"] {
    padding: 0;
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 20px;
}

.select2-container--default .select2-results__message,
.select2-container--default .select2-results__option.loading-results {
    color: var(--t-muted);
    font-weight: 500;
    padding: 12px;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: #b5b9c9;
}

/* Select2 multiple: chips */
.select2-container .select2-selection--multiple {
    border: 1px solid var(--t-border-strong) !important;
    border-radius: 10px;
    background: var(--t-surface);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--t-plum) !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    background: var(--t-plum-soft);
    border: 0;
    border-radius: 7px;
    padding: 3px 8px 3px 8px;
}

/* Native selects and the entries-per-page select share the chevron */
.form-select,
.dataTables_wrapper .dataTables_length select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%237a809a' d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3e%3c/svg%3e");
    background-size: 18px 18px;
}

.form-select {
    background-position: right 0.7rem center;
    padding-right: 2.4rem;
    font-weight: 500;
}

.form-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%236b3fb5' d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3e%3c/svg%3e");
}

.dataTables_wrapper .dataTables_length select {
    background-size: 16px 16px;
    background-position: right 0.5rem center;
    padding-right: 1.9rem;
}

/* Date picker: same panel language, no beak */
.datepicker.dropdown-menu {
    padding: 10px;
    margin-top: 6px;
    border: 1px solid var(--t-border);
    border-radius: 12px;
    box-shadow: var(--t-shadow-lg);
    animation: t-pop 0.14s ease-out;
}

.datepicker-dropdown::before,
.datepicker-dropdown::after {
    display: none;
}

.datepicker table {
    border-spacing: 2px;
    border-collapse: separate;
}

.datepicker table tr td,
.datepicker table tr th {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-text);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.datepicker table tr th.dow {
    color: var(--t-muted);
    font-size: 11.5px;
    font-weight: 600;
    height: 28px;
}

.datepicker .datepicker-switch {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--t-ink);
    border-radius: 9px;
}

.datepicker .prev,
.datepicker .next {
    font-size: 0;
    color: var(--t-text-2);
}

.datepicker .prev::before,
.datepicker .next::before {
    font-family: "Material Design Icons";
    font-size: 18px;
    line-height: 34px;
}

.datepicker .prev::before {
    content: "\f0141";
}

.datepicker .next::before {
    content: "\f0142";
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr td span:hover {
    background: var(--t-surface-2);
    color: var(--t-ink);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #b5b9c9;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #d5d9e6;
    background: transparent;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover {
    background: var(--t-plum-soft);
    color: var(--t-plum);
    border-radius: 0;
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover {
    background: var(--t-plum-soft) !important;
    color: var(--t-plum) !important;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.range-start,
.datepicker table tr td.range-end,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--t-plum) !important;
    color: #fff !important;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(107, 63, 181, 0.35);
}

.datepicker table tr td span {
    height: 44px;
    line-height: 44px;
    border-radius: 9px;
    font-weight: 500;
}

.datepicker tfoot tr th {
    padding-top: 6px;
}

.datepicker tfoot tr th.clear,
.datepicker tfoot tr th.today {
    height: 34px;
    border-radius: 9px;
    font-weight: 600;
    color: var(--t-plum);
    background: var(--t-plum-soft);
}

.datepicker tfoot tr th.clear:hover,
.datepicker tfoot tr th.today:hover {
    background: var(--t-plum);
    color: #fff;
}

/* --------------------------------------------------------------------------
   27. Auth pages: sidebar points, OTP error state, toast placement
   -------------------------------------------------------------------------- */
.auth-side-points {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
    max-width: 44ch;
}

.auth-side-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13.5px;
    line-height: 1.5;
}

.auth-side-points strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.auth-side-point-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
}

.otp-inputs .form-control.parsley-error {
    border-color: var(--t-danger);
    color: var(--t-danger);
    box-shadow: 0 0 0 3px rgba(220, 68, 89, 0.16);
}

.otp-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--t-danger-soft);
    color: var(--t-danger);
    font-size: 13px;
    font-weight: 600;
    animation: t-page-in 0.2s var(--t-ease) backwards;
}

.otp-feedback.d-none {
    display: none;
}

.otp-feedback i {
    font-size: 18px;
    line-height: 1;
}

@keyframes t-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

.otp-inputs.is-shaking {
    animation: t-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.auth-body .jq-toast-wrap.top-right {
    top: 20px;
    right: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .otp-inputs.is-shaking,
    .otp-feedback {
        animation: none !important;
    }
}

/* Sign-in feedback (client and server side) shares the OTP strip style */
.auth-card .auth-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--t-danger-soft);
    color: var(--t-danger) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    animation: t-page-in 0.2s var(--t-ease) backwards;
}

.auth-card .auth-feedback.d-none {
    display: none;
}

.auth-card .auth-feedback i {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.auth-card .form-control.is-invalid {
    border-color: var(--t-danger);
    box-shadow: 0 0 0 3px rgba(220, 68, 89, 0.16);
    background-image: none;
    padding-right: 0.85rem;
}

.auth-card .form-control.is-invalid:focus {
    border-color: var(--t-danger);
    box-shadow: 0 0 0 3px rgba(220, 68, 89, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .auth-card .auth-feedback {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   28. Auth panel: living spectrum
   --------------------------------------------------------------------------
   The static gradient wash is replaced by drifting aurora blobs in the logo
   colours, a floating glass card holding the brand mark that tilts toward
   the cursor, and depth chips for the three feature areas.
   -------------------------------------------------------------------------- */
.auth-side {
    --tilt-x: 0;
    --tilt-y: 0;
    perspective: 1400px;
    justify-content: flex-start;
    gap: 0;
}

.auth-side::before {
    background: radial-gradient(90% 60% at 50% 110%, rgba(107, 63, 181, 0.28), transparent 70%);
}

.auth-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.auth-aurora-blob {
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 640px;
    max-height: 640px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    mix-blend-mode: screen;
    will-change: transform;
    transform: translate3d(calc(var(--tilt-x) * -14px), calc(var(--tilt-y) * -10px), 0);
}

.auth-aurora-blob.is-amber {
    left: -18%;
    bottom: -22%;
    background: radial-gradient(circle at 40% 40%, #faae11, transparent 62%);
    animation: t-aurora-a 22s ease-in-out infinite alternate;
}

.auth-aurora-blob.is-coral {
    left: 18%;
    bottom: -30%;
    background: radial-gradient(circle at 50% 50%, #f65308, transparent 62%);
    animation: t-aurora-b 26s ease-in-out infinite alternate;
}

.auth-aurora-blob.is-magenta {
    right: -14%;
    bottom: 4%;
    background: radial-gradient(circle at 50% 50%, #fc50a3, transparent 62%);
    animation: t-aurora-c 24s ease-in-out infinite alternate;
}

.auth-aurora-blob.is-blue {
    right: -22%;
    top: 18%;
    background: radial-gradient(circle at 50% 50%, #1161be, transparent 62%);
    opacity: 0.65;
    animation: t-aurora-d 30s ease-in-out infinite alternate;
}

@keyframes t-aurora-a {
    to { translate: 12% -18%; scale: 1.15; }
}

@keyframes t-aurora-b {
    to { translate: -10% -26%; scale: 1.08; }
}

@keyframes t-aurora-c {
    to { translate: -18% -10%; scale: 1.2; }
}

@keyframes t-aurora-d {
    to { translate: -8% 22%; scale: 1.1; }
}

/* Hero: the floating brand card */
.auth-hero {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    margin: 24px 0;
}

.auth-hero-scene {
    position: relative;
    width: 300px;
    height: 260px;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--tilt-y) * -9deg)) rotateY(calc(var(--tilt-x) * 11deg));
    transition: transform 0.08s linear;
    animation: t-hero-in 0.9s var(--t-ease) 0.1s backwards;
}

@keyframes t-hero-in {
    from {
        opacity: 0;
        transform: translateY(24px) rotateX(10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

.auth-hero-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168px;
    height: 168px;
    margin: -84px 0 0 -84px;
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(50px);
    animation: t-hero-float 6s ease-in-out infinite;
}

.auth-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 48%, transparent 62%);
    background-size: 220% 100%;
    animation: t-hero-sheen 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes t-hero-sheen {
    0%, 60% { background-position: 120% 0; }
    100% { background-position: -80% 0; }
}

.auth-hero-mark {
    width: 104px;
    height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
    transform: translateZ(30px);
}

.auth-hero-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #faae11, #f65308, #fc50a3, #c52b73, #7060a0, #1161be, #faae11);
    filter: blur(38px);
    opacity: 0.55;
    transform: translateZ(-30px);
    animation: t-hero-spin 18s linear infinite;
}

@keyframes t-hero-spin {
    to { rotate: 360deg; }
}

.auth-hero-shadow {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 170px;
    height: 28px;
    margin-left: -85px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    filter: blur(14px);
    transform: translateZ(-10px);
    animation: t-hero-shadow 6s ease-in-out infinite;
}

@keyframes t-hero-float {
    0%, 100% { transform: translateZ(50px) translateY(0); }
    50% { transform: translateZ(50px) translateY(-12px); }
}

@keyframes t-hero-shadow {
    0%, 100% { opacity: 0.55; scale: 1; }
    50% { opacity: 0.35; scale: 0.86; }
}

.auth-hero-chip {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    animation: t-chip-float 5s ease-in-out infinite;
}

.auth-hero-chip.is-one {
    left: 8px;
    top: 34px;
    transform: translateZ(95px);
    --chip-z: 95px;
    animation-delay: -1.2s;
}

.auth-hero-chip.is-two {
    right: 6px;
    top: 58px;
    transform: translateZ(120px);
    --chip-z: 120px;
    animation-delay: -3.1s;
}

.auth-hero-chip.is-three {
    left: 46px;
    bottom: 10px;
    transform: translateZ(80px);
    --chip-z: 80px;
    animation-delay: -2.2s;
}

@keyframes t-chip-float {
    0%, 100% { transform: translateZ(var(--chip-z)) translateY(0); }
    50% { transform: translateZ(var(--chip-z)) translateY(-10px); }
}

/* Staggered entrance for the copy */
.auth-side-copy h2 {
    animation: t-page-in 0.6s var(--t-ease) 0.25s backwards;
}

.auth-side-copy > p {
    animation: t-page-in 0.6s var(--t-ease) 0.35s backwards;
}

.auth-side-points li {
    animation: t-page-in 0.55s var(--t-ease) backwards;
}

.auth-side-points li:nth-child(1) { animation-delay: 0.45s; }
.auth-side-points li:nth-child(2) { animation-delay: 0.55s; }
.auth-side-points li:nth-child(3) { animation-delay: 0.65s; }

.auth-side-brand {
    animation: t-page-in 0.5s var(--t-ease) backwards;
}

.auth-side-foot {
    margin-top: 28px;
}

.auth-hero {
    min-height: 0;
    flex: 1 1 220px;
}

@media (max-height: 860px) {
    .auth-hero {
        flex-basis: 180px;
        margin: 8px 0;
    }

    .auth-hero-scene {
        scale: 0.8;
    }

    .auth-side-points {
        gap: 12px;
        margin-top: 20px;
    }

    .auth-side-foot {
        margin-top: 18px;
    }
}

@media (max-height: 740px) {
    .auth-hero {
        display: none;
    }

    .auth-side {
        justify-content: space-between;
    }

    .auth-side-copy h2 {
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-aurora-blob,
    .auth-hero-scene,
    .auth-hero-card,
    .auth-hero-card::after,
    .auth-hero-glow,
    .auth-hero-shadow,
    .auth-hero-chip,
    .auth-side-copy h2,
    .auth-side-copy > p,
    .auth-side-points li,
    .auth-side-brand {
        animation: none !important;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   29. Auth form side: a quiet card so the form holds its own next to the panel
   -------------------------------------------------------------------------- */
.auth-main {
    position: relative;
    background-color: var(--t-canvas);
    background-image:
        radial-gradient(60% 50% at 100% 0%, rgba(107, 63, 181, 0.08), transparent 70%),
        radial-gradient(50% 45% at 0% 100%, rgba(250, 174, 17, 0.07), transparent 70%),
        radial-gradient(rgba(20, 27, 51, 0.07) 1px, transparent 1.2px);
    background-size: auto, auto, 22px 22px;
    background-position: 0 0, 0 0, 11px 11px;
}

.auth-card {
    position: relative;
    max-width: 440px;
    padding: 40px 40px 32px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 22px;
    box-shadow: 0 30px 60px -30px rgba(20, 27, 51, 0.35), 0 1px 2px rgba(20, 27, 51, 0.05);
    overflow: hidden;
}

.auth-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--t-spectrum);
}

.auth-card-brand {
    margin-bottom: 24px;
}

.auth-card .auth-lead {
    margin-bottom: 24px;
}

.auth-input {
    position: relative;
}

.auth-input > i {
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -11px;
    font-size: 21px;
    line-height: 1;
    color: var(--t-muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

.auth-input .form-control {
    padding-left: 46px;
}

.auth-input:focus-within > i {
    color: var(--t-plum);
}

.auth-input .form-control.is-invalid ~ i,
.auth-input:has(.is-invalid) > i {
    color: var(--t-danger);
}

/* Feedback follows the wrapped input, so it can no longer rely on the
   sibling selector Bootstrap uses */
.auth-card .auth-feedback.invalid-feedback {
    display: flex;
}

.auth-card .btn-primary,
.auth-card .btn-success {
    gap: 8px;
    letter-spacing: 0.01em;
}

.auth-card .btn-primary {
    background: linear-gradient(135deg, #6b3fb5 0%, #7d47cc 100%);
    border-color: transparent;
    box-shadow: 0 10px 22px -10px rgba(107, 63, 181, 0.7);
}

.auth-card .btn-primary:hover {
    background: linear-gradient(135deg, #5e36a6 0%, #7240bf 100%);
    box-shadow: 0 14px 26px -10px rgba(107, 63, 181, 0.8);
}

.auth-card .btn i {
    font-size: 18px;
    transition: transform 0.2s var(--t-ease);
}

.auth-card .btn:hover i {
    transform: translateX(3px);
}

.auth-secure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 0;
    color: var(--t-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.auth-secure i {
    font-size: 17px;
    line-height: 1.2;
    color: var(--t-success);
    flex: 0 0 auto;
}

.auth-card .auth-foot {
    margin-top: 22px;
}

.auth-card .auth-copy {
    margin-top: 28px;
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 30px 22px 26px;
        border-radius: 18px;
    }

    .auth-main {
        padding: 24px 16px;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   30. 404 page: the brand card stands in for the missing zero
   -------------------------------------------------------------------------- */
.error-page {
    position: relative;
    overflow: hidden;
    background-color: var(--t-canvas);
    background-image: radial-gradient(rgba(20, 27, 51, 0.07) 1px, transparent 1.2px);
    background-size: 22px 22px;
    isolation: isolate;
}

.error-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.error-aurora .auth-aurora-blob {
    mix-blend-mode: normal;
    opacity: 0.22;
}

.error-aurora .auth-aurora-blob.is-blue {
    opacity: 0.18;
    top: -10%;
}

.error-aurora .auth-aurora-blob.is-amber {
    bottom: -30%;
    left: -10%;
}

.error-tilt {
    --tilt-x: 0;
    --tilt-y: 0;
    perspective: 1400px;
}

.error-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 8px;
}

.error-digit {
    font-size: 150px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    /* Mirrored spectrum so the loop has no seam */
    background: linear-gradient(90deg, #faae11 0%, #f65308 11%, #fc50a3 24%, #c52b73 33%, #7060a0 41%, #1161be 50%, #7060a0 59%, #c52b73 67%, #fc50a3 76%, #f65308 89%, #faae11 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: t-spectrum-flow 12s linear infinite, t-page-in 0.6s var(--t-ease) backwards;
}

.error-digit:last-child {
    animation-delay: -4.5s, 0.1s;
}

@keyframes t-spectrum-flow {
    from { background-position: 0% 50%; }
    to { background-position: 300% 50%; }
}

.error-scene.auth-hero-scene {
    width: 200px;
    height: 190px;
    margin: 0 4px;
}

.error-scene .auth-hero-card {
    width: 138px;
    height: 138px;
    margin: -69px 0 0 -69px;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 #fff, 0 30px 50px -22px rgba(20, 27, 51, 0.45);
}

.error-scene .auth-hero-mark {
    width: 86px;
    height: 86px;
    filter: drop-shadow(0 10px 16px rgba(20, 27, 51, 0.25));
}

.error-scene .auth-hero-glow {
    opacity: 0.5;
}

.error-scene .auth-hero-shadow {
    background: rgba(20, 27, 51, 0.3);
}

.error-scene .auth-hero-chip {
    width: 46px;
    height: 46px;
    font-size: 22px;
    color: var(--t-plum);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
    border: 1px solid #fff;
    box-shadow: 0 16px 26px -14px rgba(20, 27, 51, 0.4);
}

.error-scene .auth-hero-chip.is-one {
    left: 6px;
    top: 18px;
}

.error-scene .auth-hero-chip.is-two {
    right: 4px;
    bottom: 22px;
    top: auto;
    color: var(--t-coral);
}

.error-page h4 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 12px 0 10px;
    animation: t-page-in 0.6s var(--t-ease) 0.25s backwards;
}

.error-page p {
    animation: t-page-in 0.6s var(--t-ease) 0.35s backwards;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    animation: t-page-in 0.6s var(--t-ease) 0.45s backwards;
}

.error-actions .btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    gap: 8px;
}

.error-actions .btn i {
    font-size: 18px;
    transition: transform 0.2s var(--t-ease);
}

.error-actions .btn-primary:hover i {
    transform: translateX(3px);
}

.error-actions .btn-light:hover i {
    transform: translateX(-3px);
}

@media (max-width: 575.98px) {
    .error-digit {
        font-size: 96px;
    }

    .error-scene.auth-hero-scene {
        width: 140px;
        height: 140px;
        scale: 0.72;
    }

    .error-scene .auth-hero-chip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-digit,
    .error-page h4,
    .error-page p,
    .error-actions {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   31. Panel canvas: a faint dot grid with soft brand tints behind the cards
   -------------------------------------------------------------------------- */
body:not(.auth-body) {
    background-color: var(--t-canvas);
    background-image:
        radial-gradient(70% 55% at 100% 0%, rgba(107, 63, 181, 0.09), transparent 70%),
        radial-gradient(55% 45% at 0% 100%, rgba(250, 174, 17, 0.07), transparent 70%),
        radial-gradient(45% 40% at 85% 100%, rgba(17, 97, 190, 0.06), transparent 70%),
        radial-gradient(rgba(20, 27, 51, 0.065) 1px, transparent 1.2px);
    background-size: auto, auto, auto, 22px 22px;
    background-position: 0 0, 0 0, 0 0, 11px 11px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

@media (min-width: 992px) {
    body:not(.auth-body) {
        background-attachment: fixed, fixed, fixed, scroll;
    }
}

/* The topbar and sidebar keep solid surfaces above the canvas */
#page-topbar {
    background-color: var(--t-surface);
}

/* Cards gain a hair more lift so they sit cleanly on the textured canvas */
.card,
.stat-card {
    box-shadow: 0 1px 2px rgba(20, 27, 51, 0.05), 0 8px 24px -18px rgba(20, 27, 51, 0.25);
}

/* --------------------------------------------------------------------------
   32. Dashboard: greeting banner and quick-access grid
   -------------------------------------------------------------------------- */
.dash-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: -4px 0 24px;
    padding: 28px 32px;
    border-radius: var(--t-radius-lg);
    background: var(--t-ink);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    animation: t-page-in 0.5s var(--t-ease) backwards;
}

.dash-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--t-spectrum);
}

.dash-hero-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.dash-hero-aurora .auth-aurora-blob {
    width: 420px;
    height: 420px;
    opacity: 0.5;
}

.dash-hero-aurora .is-amber { left: -8%; bottom: -70%; }
.dash-hero-aurora .is-magenta { left: 40%; bottom: -90%; }
.dash-hero-aurora .is-blue { right: -6%; top: -60%; }

.dash-hero-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-hero-date {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.dash-hero-title {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 6px;
}

.dash-hero-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    max-width: 60ch;
    margin: 0;
}

.dash-hero-mark {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    display: none;
}

@media (min-width: 768px) {
    .dash-hero-mark {
        display: block;
    }
}

.dash-hero-mark .auth-hero-glow {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    opacity: 0.6;
    transform: none;
}

.dash-hero-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 24px 40px -18px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: t-hero-float-flat 6s ease-in-out infinite;
}

@keyframes t-hero-float-flat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.dash-hero-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

.dash-section-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--t-ink);
    margin: 30px 0 14px;
}

.dash-shortcut {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-text);
    transition: transform 0.18s var(--t-ease), box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash-shortcut:hover {
    color: var(--t-text);
    transform: translateY(-2px);
    border-color: rgba(107, 63, 181, 0.35);
    box-shadow: 0 16px 30px -18px rgba(107, 63, 181, 0.45);
}

.dash-shortcut-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--t-plum-soft);
    color: var(--t-plum);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.dash-shortcut:hover .dash-shortcut-icon {
    background: var(--t-plum);
    color: #fff;
}

.dash-shortcut-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-shortcut-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--t-ink);
    margin-bottom: 2px;
}

.dash-shortcut-body span {
    display: block;
    font-size: 12.5px;
    color: var(--t-muted);
    line-height: 1.4;
}

.dash-shortcut-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: #c9cddc;
    transition: transform 0.18s var(--t-ease), color 0.18s ease;
}

.dash-shortcut:hover .dash-shortcut-arrow {
    color: var(--t-plum);
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .dash-hero {
        padding: 22px 20px;
    }

    .dash-hero-title {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-hero,
    .dash-hero-card {
        animation: none !important;
    }
}

/* Daily quote inside the dashboard banner */
.dash-quote {
    position: relative;
    margin: 18px 0 0;
    padding: 12px 16px 12px 44px;
    max-width: 62ch;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dash-quote > i {
    position: absolute;
    left: 14px;
    top: 10px;
    font-size: 22px;
    line-height: 1;
    color: var(--t-coral);
}

.dash-quote blockquote {
    margin: 0 0 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.dash-quote figcaption {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 600;
}

.dash-quote figcaption::before {
    content: "\2014\00a0";
}

/* --------------------------------------------------------------------------
   33. Data tables: zebra rows and one alignment for every column
   -------------------------------------------------------------------------- */

/* Every column reads from the left, headers and cells alike. The only
   exception is a header cell that holds just a checkbox. */
.dataTables_wrapper .table > thead > tr > th,
.dataTables_wrapper .table > tbody > tr > td,
.dataTables_wrapper .table .text-center,
.dataTables_wrapper .table .text-end,
.dataTables_wrapper .table .dt-center,
.dataTables_wrapper .table .dt-right,
.card .table-responsive > .table > thead > tr > th,
.card .table-responsive > .table > tbody > tr > td {
    text-align: left !important;
}

.dataTables_wrapper .table > thead > tr > th:has(> input[type="checkbox"]:only-child),
.dataTables_wrapper .table > tbody > tr > td:has(> input[type="checkbox"]:only-child) {
    text-align: center !important;
    width: 44px;
}

/* Badges, chips and switches sit on the same baseline as the text */
.dataTables_wrapper .table td .badge,
.dataTables_wrapper .table td input[switch] + label {
    vertical-align: middle;
}

/* Zebra striping so long lists stay readable */
.dataTables_wrapper .table > tbody > tr:nth-child(even) > td,
.card .table-responsive > .table > tbody > tr:nth-child(even) > td {
    background-color: #f8f9fc;
}

.dataTables_wrapper .table > tbody > tr:hover > td,
.card .table-responsive > .table > tbody > tr:hover > td {
    background-color: #f3effb;
}

.dataTables_wrapper .table > tbody > tr > td {
    border-bottom-color: #eceef5;
}

/* Header band a shade stronger against the striped body */
.dataTables_wrapper .table > thead > tr > th,
.dataTables_wrapper .dataTables_scrollHead {
    background: #f1f2f8;
}

.dataTables_wrapper .table > thead > tr > th {
    color: var(--t-ink);
}

/* Empty state sits on plain white */
.dataTables_wrapper .table > tbody > tr > td.dataTables_empty {
    background: var(--t-surface) !important;
}

.dataTables_wrapper .table > tbody > tr > td.dataTables_empty {
    text-align: center !important;
}

/* --------------------------------------------------------------------------
   34. Topbar: frosted glass with a shadow that appears once the page scrolls
   -------------------------------------------------------------------------- */
#page-topbar {
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: rgba(20, 27, 51, 0.06);
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

body.t-scrolled #page-topbar {
    background-color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 30px -18px rgba(20, 27, 51, 0.35);
}

/* The brand box stays solid navy so the logo never picks up the blur */
#page-topbar .navbar-brand-box {
    background: var(--t-ink);
}

@supports not (backdrop-filter: blur(1px)) {
    #page-topbar {
        background-color: rgba(255, 255, 255, 0.96);
    }
}

/* --------------------------------------------------------------------------
   35. Column dividers: thin vertical lines so each value reads under its
   own heading. The last column has none, since the frame closes the table.
   -------------------------------------------------------------------------- */
.dataTables_wrapper .table > thead > tr > th,
.dataTables_wrapper .table > tbody > tr > td,
.card .table-responsive > .table > thead > tr > th,
.card .table-responsive > .table > tbody > tr > th,
.card .table-responsive > .table > tbody > tr > td {
    border-right: 1px solid #e3e6ef;
}

.dataTables_wrapper .table > thead > tr > th {
    border-right-color: #dde0eb;
}

.dataTables_wrapper .table > thead > tr > th:last-child,
.dataTables_wrapper .table > tbody > tr > td:last-child,
.card .table-responsive > .table > thead > tr > th:last-child,
.card .table-responsive > .table > tbody > tr > th:last-child,
.card .table-responsive > .table > tbody > tr > td:last-child {
    border-right: 0;
}

/* The hidden header copy inside the scroll body sizes the visible header, so
   it carries a matching (invisible) divider to keep the columns aligned. */
.dataTables_scrollBody > table > thead > tr > th:not(:last-child),
.dataTables_scrollBody > table > thead > tr > td:not(:last-child) {
    border-right: 1px solid transparent !important;
}

/* An empty table spans every column, so it shows no divider */
.dataTables_wrapper .table > tbody > tr > td.dataTables_empty {
    border-right: 0;
}

/* --------------------------------------------------------------------------
   36. A DataTable inside .table-responsive gets its frame from DataTables'
   own scroll area; the wrapper must not draw a second one around the
   length control and pager.
   -------------------------------------------------------------------------- */
.card .table-responsive:has(> .dataTables_wrapper),
.card .table-responsive:has(> table.dataTable) {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

/* --------------------------------------------------------------------------
   37. Filter bar (MLS API Log, Import). Phones stack every field. From 768px a
   six-column grid gives two tidy rows: three short dropdowns, then the wide
   search field, the date range and the buttons. From 1600px there is room for
   one row without cutting off option text or placeholders.
   -------------------------------------------------------------------------- */
.filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 16px;
}

.filter-bar .filter-field {
    min-width: 0;
}

.filter-bar .filter-field > label {
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-bar .select2-container {
    width: 100% !important;
}

.filter-bar .input-daterange {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.filter-bar .input-daterange .form-control {
    min-width: 0;
}

.filter-bar .filter-actions {
    display: flex;
    gap: 8px;
    margin-left: 0;
}

.filter-bar .filter-actions .btn {
    flex: 1 1 0;
}

@media (min-width: 768px) {
    .filter-bar {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .filter-bar .filter-field,
    .filter-bar .filter-field--dates {
        grid-column: span 2;
    }

    .filter-bar .filter-field--wide {
        grid-column: span 3;
    }

    .filter-bar .filter-actions {
        grid-column: span 1;
        justify-content: flex-end;
    }

    .filter-bar .filter-actions .btn {
        flex: 0 0 auto;
    }
}

/* Laptops: the second row lines up with the three dropdowns above it. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .filter-bar .filter-field--wide,
    .filter-bar .filter-actions {
        grid-column: span 2;
    }
}

@media (min-width: 1600px) {
    .filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 1.6fr)) auto;
    }

    .filter-bar .filter-field,
    .filter-bar .filter-field--wide,
    .filter-bar .filter-field--dates,
    .filter-bar .filter-actions {
        grid-column: auto;
    }
}