/* ============================================================
   BomaCheck — Application design system
   Layered on top of Bootstrap 5 + KaiAdmin.
   ============================================================ */

:root {
    /* Palette */
    --app-bg: #f4f6fb;
    --app-bg-strong: #eef1f8;
    --app-surface: #ffffff;
    --app-surface-muted: #f8fafc;
    --app-border: #e5e9f2;
    --app-border-strong: #d5dbe8;
    --app-text: #101828;
    --app-text-soft: #344054;
    --app-muted: #667085;
    --app-muted-2: #98a2b3;

    --app-primary: #4f46e5;
    --app-primary-600: #4338ca;
    --app-primary-700: #3730a3;
    --app-primary-soft: #eef2ff;
    --app-primary-soft-2: #e0e7ff;

    --app-info: #0284c7;
    --app-info-soft: #e0f2fe;
    --app-success: #047857;
    --app-success-soft: #d1fae5;
    --app-warning: #b45309;
    --app-warning-soft: #fef3c7;
    --app-danger: #b91c1c;
    --app-danger-soft: #fee2e2;

    --app-radius: 16px;
    --app-radius-sm: 10px;
    --app-radius-xs: 8px;

    --app-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -10px rgba(16, 24, 40, .18);
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -18px rgba(16, 24, 40, .22);
    --app-shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, .30);

    --app-sidebar-width: 265px;
    --app-header-height: 68px;
    --app-font: "Inter", "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    --bs-body-font-family: var(--app-font);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
}

/* ---------- Base ---------- */

html {
    font-size: 15px;
    scroll-behavior: smooth;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 15px; }
}

body {
    font-family: var(--app-font);
    color: var(--app-text);
    background:
            radial-gradient(1200px 500px at 100% -10%, rgba(99, 102, 241, .07), transparent 60%),
            radial-gradient(900px 400px at -10% 0%, rgba(14, 165, 233, .06), transparent 55%),
            var(--app-bg);
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body, h1, h2, h3, h4, h5, h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
    font-family: var(--app-font);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--app-text);
    letter-spacing: -.02em;
    font-weight: 700;
}

a {
    color: var(--app-primary);
    text-decoration: none !important;
    transition: color .18s ease;
}

a:hover, a:focus { color: var(--app-primary-700); }

hr {
    border-color: var(--app-border);
    opacity: 1;
    margin: 1.25rem 0;
}

::selection { background: var(--app-primary-soft-2); color: var(--app-primary-700); }

:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 3000;
    padding: 10px 18px;
    background: var(--app-text);
    color: #fff;
    border-radius: 10px;
    transition: top .2s ease;
}

.skip-link:focus { top: 16px; color: #fff; }

/* ---------- Shell ---------- */

.wrapper {
    height: auto;
    min-height: 100vh;
    background: transparent;
}

.main-panel {
    width: calc(100% - var(--app-sidebar-width));
    height: auto;
    min-height: 100vh;
    background: transparent;
}

.main-panel > .container {
    width: 100%;
    max-width: 1560px;
    margin: 96px auto 0;
    padding-left: 32px;
    padding-right: 32px;
    min-height: calc(100vh - 210px);
    overflow: visible;
}

.page-inner {
    padding: 4px 0 40px;
}

#main-content {
    padding: 20px 16px 4px;
}

.main-header {
    width: calc(100% - var(--app-sidebar-width));
    min-height: var(--app-header-height);
    padding: 14px 32px 0;
    background: transparent;
    position: fixed;
    top: 0;
    left: var(--app-sidebar-width);
    z-index: 1001;
}

body.sidebar-collapsed .main-panel,
body.sidebar-collapsed .main-header {
    width: calc(100% - 78px);
}

body.sidebar-collapsed .main-header { left: 78px; }

/* ---------- Sidebar ---------- */

.sidebar {
    width: var(--app-sidebar-width);
    background: #0d1424 !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}

.sidebar[data-background-color="dark"] {
    background:
            radial-gradient(600px 300px at 0% 0%, rgba(99, 102, 241, .22), transparent 62%),
            linear-gradient(180deg, #0c1322 0%, #0f1728 52%, #0b1220 100%) !important;
}

.sidebar .sidebar-wrapper { max-height: calc(100vh - 84px); }

.sidebar .sidebar-content { padding: 101px 0 32px; }

.sidebar-logo {
    height: 84px;
}

.logo-header,
.logo-header[data-background-color="dark"] {
    height: 84px;
    width: var(--app-sidebar-width);
    padding: 0 20px;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-header .logo { display: flex; align-items: center; }

.logo-header .logo img,
.logo-header .navbar-brand {
    height: 30px !important;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .96;
}

.logo-header .nav-toggle { display: flex; align-items: center; gap: 4px; }

.logo-header .btn-toggle,
.logo-header .btn-toggle:hover {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #cbd5e1 !important;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sidebar .nav.nav-secondary {
    display: block;
    margin: 13px 0 0;
    padding: 0 12px;
}

.sidebar .nav .nav-item {
    margin: 2px 0;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar .nav .nav-item > a,
.sidebar .nav .nav-item > a.collapsed {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 9px 12px !important;
    border-radius: 10px;
    color: #aebbd0 !important;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar .nav .nav-item > a p {
    margin: 0;
    color: inherit !important;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .005em;
}

.sidebar .nav .nav-item > a i {
    width: 19px;
    min-width: 19px;
    font-size: 15px;
    text-align: center;
    color: #8394ae;
    transition: color .18s ease;
}

.sidebar .nav .nav-item > a:hover,
.sidebar .nav .nav-item > a:focus {
    background: rgba(255, 255, 255, .065);
    color: #ffffff !important;
    transform: translateX(1px);
}

.sidebar .nav .nav-item > a:hover i,
.sidebar .nav .nav-item > a:focus i { color: #c7d2fe; }

.sidebar .nav .nav-item.active > a,
.sidebar .nav .nav-item > a[aria-expanded="true"] {
    background: linear-gradient(90deg, rgba(99, 102, 241, .26) 0%, rgba(99, 102, 241, .10) 100%);
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #818cf8;
}

.sidebar .nav .nav-item.active > a i,
.sidebar .nav .nav-item > a[aria-expanded="true"] i { color: #c7d2fe; }

.sidebar .nav .nav-item.active > a:before,
.sidebar .nav .nav-item > a[aria-expanded="true"]:before { background: transparent !important; }

.sidebar .nav .nav .caret,
.sidebar .nav .nav-item > a .caret {
    margin-left: auto;
    border: 0;
    width: 16px;
    height: 16px;
    position: relative;
    opacity: .7;
}

.sidebar .nav .nav .caret:after,
.sidebar .nav .nav-item > a .caret:after {
    content: "";
    position: absolute;
    inset: 4px 3px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.sidebar .nav .nav-item > a[aria-expanded="true"] .caret:after { transform: rotate(-135deg); top: 7px; }

.sidebar .nav.nav-secondary .nav-collapse {
    margin: 2px 0 4px;
    padding: 2px 0 2px 30px;
}

.sidebar .nav .nav-collapse .nav-item { margin: 1px 0; }

.sidebar .nav .nav-collapse .nav-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    border-radius: 8px;
    color: #93a3bb !important;
    font-size: .82rem;
    font-weight: 450;
    line-height: 1.35;
}

.sidebar .nav .nav-collapse .nav-item a:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    flex: 0 0 4px;
}

.sidebar .nav .nav-collapse .nav-item a:hover,
.sidebar .nav .nav-collapse .nav-item.active a {
    background: rgba(255, 255, 255, .06);
    color: #ffffff !important;
}

.sidebar .nav .nav-collapse .nav-item.active a:before {
    background: #a5b4fc;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, .15);
}

.sidebar .nav-section { padding: 18px 12px 6px !important; margin: 0; }

.sidebar .nav-section .text-section {
    color: #5f7091 !important;
    font-size: .64rem !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    margin: 0 !important;
    padding: 0;
    opacity: 1;
}

.sidebar .nav-section .sidebar-mini-icon { color: #5f7091; font-size: 11px; }

.sidebar-quick {
    padding: 4px 12px 8px;
}

.sidebar-quick .btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #e2e8f0;
    box-shadow: none;
    font-size: .82rem;
    padding: 10px 12px;
}

.sidebar-quick .btn:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transform: translateY(-1px);
}

.sidebar-quick .btn i { color: #a5b4fc; }

.sidebar-footer {
    margin: 24px 12px 0;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-footer .title {
    color: #e2e8f0;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-footer .title i { color: #a5b4fc; }

.sidebar-footer p {
    color: #8494ad;
    font-size: .74rem;
    line-height: 1.5;
    margin: 6px 0 12px;
}

.sidebar-footer .btn {
    width: 100%;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    border: 0;
    font-size: .78rem;
    padding: 8px 10px;
}

.sidebar-footer .btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Select2 inside sidebar hidden */
.sidebar .select2-container { display: none; }

/* ---------- Topbar ---------- */

.main-header .navbar-header,
.main-header .navbar-header[data-background-color],
.main-header .navbar-header[data-background-color="white"] {
    min-height: var(--app-header-height);
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid rgba(229, 233, 242, .9) !important;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 30px -22px rgba(16, 24, 40, .35);
    padding: 0 14px;
}

.navbar-header .container-fluid {
    min-height: var(--app-header-height);
    gap: 12px;
    padding: 0 !important;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    position: relative;
}

.icon-btn:hover,
.icon-btn:focus {
    background: var(--app-surface-muted);
    border-color: var(--app-border);
    color: var(--app-text);
}

.search-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 430px;
    width: 100%;
    height: 42px;
    padding: 0 10px 0 14px;
    border-radius: 11px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-muted);
    font-size: .84rem;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-trigger:hover,
.search-trigger:focus {
    background: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .09);
    color: var(--app-text-soft);
}

.search-trigger > i { color: var(--app-muted-2); font-size: 13px; }
.search-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-trigger kbd {
    font-family: var(--app-font);
    font-size: .66rem;
    font-weight: 600;
    color: var(--app-muted);
    background: #fff;
    border: 1px solid var(--app-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 6px;
}

.topbar-nav { display: flex; align-items: center; gap: 4px; }

.topbar-nav .nav-item { display: flex; align-items: center; }

.topbar-nav .nav-item .nav-link {
    height: 40px;
    min-width: 40px;
    padding: 0 10px !important;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #475467 !important;
    font-size: .84rem;
    font-weight: 500;
    transition: background .18s ease, color .18s ease;
}

.topbar-nav .nav-item .nav-link:hover,
.topbar-nav .nav-item.show .nav-link {
    background: var(--app-surface-muted);
    color: var(--app-text) !important;
}

.topbar-nav .nav-item .nav-link i { font-size: 15px; }

.topbar-nav .dropdown-toggle::after { display: none; }

.topbar-nav .notification {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff;
}

.topbar-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.topbar-credits .credit-pill,
.topbar-nav #sms-credits,
.topbar-nav #bomacheck-credits {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px !important;
    border-radius: 999px;
    font-size: .7rem !important;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1;
    color: var(--app-muted) !important;
    background: var(--app-surface-muted) !important;
}

.topbar-nav #sms-credits:empty,
.topbar-nav #bomacheck-credits:empty { display: none; }

.topbar-nav #bomacheck-credits.bg-success {
    color: var(--app-success) !important;
    background: var(--app-success-soft) !important;
    border-color: #a7f3d0;
}

.topbar-nav #bomacheck-credits.bg-danger {
    color: var(--app-danger) !important;
    background: var(--app-danger-soft) !important;
    border-color: #fecaca;
}

.topbar-nav #sms-credits {
    color: var(--app-info) !important;
    background: var(--app-info-soft) !important;
    border-color: #bae6fd;
}

.avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 34px;
}

.avatar-initials {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex: 0 0 34px;
}

.profile-pic {
    padding: 3px 8px 3px 4px !important;
    border-radius: 999px !important;
    border: 1px solid var(--app-border);
    background: #fff;
    height: 42px !important;
}

.profile-pic:hover { background: var(--app-surface-muted); }

.profile-pic .profile-username {
    font-size: .8rem;
    color: var(--app-text-soft);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-pic .profile-username .op-7 { color: var(--app-muted); }

/* Dropdowns */

.dropdown-menu {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .35), 0 2px 6px rgba(16, 24, 40, .05);
    padding: 6px;
    font-size: .875rem;
    /* Opacity-only animation: animating transform would override Popper's
       inline transform and break dropdown anchoring (e.g. in table rows). */
    animation: app-fade-in .16s ease both;
}

.dropdown-menu .dropdown-item {
    border-radius: 9px;
    padding: 8px 10px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--app-text-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--app-primary-soft);
    color: var(--app-primary-700);
}

.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.text-danger:hover {
    color: var(--app-danger) !important;
}

.dropdown-menu .dropdown-divider { border-color: var(--app-border); }

.dropdown-menu .dropdown-header {
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-muted-2);
    padding: 8px 10px 4px;
}

.topbar-nav .dropdown-menu {
    min-width: 260px;
    margin-top: 10px !important;
}

.dropdown-user { min-width: 280px; padding: 0; overflow: hidden; }

.dropdown-user .dropdown-user-scroll { max-height: 420px; overflow: auto; }

.dropdown-user .user-box {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, #f8faff, #f3f6ff);
    border-bottom: 1px solid var(--app-border);
}

.dropdown-user .avatar-lg {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 48px;
}

.dropdown-user .avatar-lg .avatar-initials {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: .95rem;
}

.dropdown-user .u-text h4 {
    font-size: .92rem;
    margin: 0 0 2px;
    font-weight: 700;
}

.dropdown-user .u-text p {
    margin: 0 0 6px;
    font-size: .76rem;
    color: var(--app-muted);
    word-break: break-word;
}

.dropdown-user .dropdown-item { border-radius: 0; padding: 10px 18px; }

.dropdown-user .dropdown-divider { margin: 0; }

/* Quick actions */

.dropdown-menu.quick-actions {
    width: 320px;
    padding: 14px;
}

.quick-actions-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 2px 4px 12px;
}

.quick-actions-header .title { font-size: .9rem; font-weight: 700; }
.quick-actions-header .subtitle { font-size: .7rem; color: var(--app-muted-2); }

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
    border: 1px solid var(--app-border);
    color: var(--app-text-soft);
    background: #fff;
    font-size: .78rem;
    font-weight: 600;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.quick-action:hover {
    background: var(--app-surface-muted);
    border-color: #c7d2fe;
    color: var(--app-primary-700);
    transform: translateY(-1px);
}

.quick-action .qi {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 32px;
}

.qi-indigo { background: var(--app-primary-soft); color: var(--app-primary); }
.qi-green { background: var(--app-success-soft); color: var(--app-success); }
.qi-amber { background: var(--app-warning-soft); color: var(--app-warning); }
.qi-sky { background: var(--app-info-soft); color: var(--app-info); }
.qi-rose { background: var(--app-danger-soft); color: var(--app-danger); }
.qi-slate { background: #eef2f6; color: #475467; }

.notif-box, .messages-notif-box { width: 330px; padding: 0; overflow: hidden; }

.notif-box .dropdown-title,
.messages-notif-box .dropdown-title {
    padding: 14px 16px;
    font-size: .82rem;
    font-weight: 600;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
}

.notif-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--app-muted);
    font-size: .8rem;
}

.notif-empty i {
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--app-muted-2);
}

/* ---------- Breadcrumbs / page header ---------- */

.app-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    font-size: .76rem;
    color: var(--app-muted);
    min-height: 22px;
}

.app-breadcrumb a {
    color: var(--app-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.app-breadcrumb a:hover { color: var(--app-primary); }

.app-breadcrumb .sep {
    color: #cbd2e0;
    font-size: 10px;
    line-height: 1;
}

.app-breadcrumb .current { color: var(--app-text-soft); font-weight: 600; }

.app-breadcrumb .crumb-home i { font-size: 11px; }

.page-back {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--app-muted) !important;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, .7);
}

.page-back:hover {
    color: var(--app-text) !important;
    background: #fff;
    border-color: var(--app-border-strong);
}

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

.page-head .page-title,
.page-inner > h1:first-of-type,
#main-content > h1:first-of-type {
    font-size: 1.68rem;
    font-weight: 700;
    letter-spacing: -.028em;
    margin: 0 0 4px;
    line-height: 1.2;
    color: var(--app-text);
}

.page-head .page-subtitle,
.page-subtitle {
    color: var(--app-muted);
    font-size: .86rem;
    margin: 0;
    max-width: 720px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page-inner > h1 + h4,
#main-content > h1 + h4 {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin: 2px 0 14px;
}

.page-inner > h1 + h4 + hr,
#main-content > h1 + h4 + hr { display: none; }

.page-inner > h2,
#main-content > h2 { font-size: 1.3rem; margin-bottom: .35rem; }

/* Hero (dashboard) */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 26px 28px;
    margin-bottom: 22px;
    color: #fff;
    background:
            radial-gradient(600px 240px at 100% 0%, rgba(56, 189, 248, .30), transparent 60%),
            radial-gradient(500px 260px at 0% 100%, rgba(168, 85, 247, .28), transparent 60%),
            linear-gradient(120deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    box-shadow: 0 28px 60px -34px rgba(49, 46, 129, .85);
}

.hero:after {
    content: "";
    position: absolute;
    right: -80px;
    top: -110px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, .05);
}

.hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(224, 231, 255, .8);
    margin-bottom: 8px;
}

.hero h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.032em;
    margin: 0 0 6px;
    color: #fff;
}

.hero p {
    color: rgba(224, 231, 255, .8);
    font-size: .9rem;
    margin: 0;
}

.hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hero-actions .btn {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero-actions .btn:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    transform: translateY(-1px);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: rgba(238, 242, 255, .92);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .13);
}

.hero-chip i { color: #a5b4fc; }

/* ---------- Cards ---------- */

.card,
.card-round,
.card-stats {
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-surface) !important;
    box-shadow: var(--app-shadow-sm) !important;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.card:hover { box-shadow: var(--app-shadow) !important; }

.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid #f0f2f8 !important;
    padding: 16px 20px !important;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card .card-header .card-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--app-text);
}

.card .card-header .card-category {
    font-size: .74rem;
    color: var(--app-muted);
    margin: 2px 0 0;
    text-transform: none;
    letter-spacing: 0;
}

.card .card-body { padding: 20px !important; }

.card .card-footer {
    background: var(--app-surface-muted) !important;
    border-top: 1px solid var(--app-border) !important;
    padding: 12px 20px !important;
}

.card .card-body > .row > .col-stats { padding-left: 0; }

.card .numbers { text-align: left; }

.card .numbers .card-category {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--app-muted);
    margin: 0 0 4px;
    font-weight: 600;
}

.card .numbers .card-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0;
    color: var(--app-text);
}

.card .numbers .card-title.financial { font-variant-numeric: tabular-nums; }

.icon-big i { font-size: 30px !important; }

/* Stat cards (dashboard) */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 16px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow);
    border-color: #d8def0;
    color: var(--app-text);
}

.stat-card .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 40px;
    border: 1px solid transparent;
}

.stat-icon.indigo { background: var(--app-primary-soft); color: var(--app-primary); border-color: #e0e7ff; }
.stat-icon.green { background: var(--app-success-soft); color: var(--app-success); border-color: #a7f3d0; }
.stat-icon.amber { background: var(--app-warning-soft); color: var(--app-warning); border-color: #fde68a; }
.stat-icon.rose { background: var(--app-danger-soft); color: var(--app-danger); border-color: #fecaca; }
.stat-icon.sky { background: var(--app-info-soft); color: var(--app-info); border-color: #bae6fd; }

.stat-label {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin: 0 0 3px;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.stat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    color: var(--app-muted);
    margin: 0;
}

.stat-meta i { color: var(--app-muted-2); font-size: 10px; }

.stat-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--app-primary); }
.stat-link i { font-size: 9px; transition: transform .18s ease; }
.stat-card:hover .stat-link i { transform: translateX(3px); }

/* Make card-stats white and modern when used */

.card-stats .icon-big i { color: var(--app-primary) !important; }
.card-stats.card-info .icon-big i { color: var(--app-info) !important; }
.card-stats.card-success .icon-big i { color: var(--app-success) !important; }
.card-stats.card-secondary .icon-big i { color: var(--app-primary) !important; }

.bg-info-gradient, .bg-secondary-gradient, .bg-primary-gradient, .bg-success-gradient {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

.bg-info-gradient .card-header, .bg-secondary-gradient .card-header,
.bg-primary-gradient .card-header, .bg-success-gradient .card-header {
    color: var(--app-text) !important;
}

.bg-info-gradient .text-white, .bg-secondary-gradient .text-white,
.bg-primary-gradient .text-white, .bg-success-gradient .text-white {
    color: var(--app-muted) !important;
}

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-border-radius: 10px;
    padding: .58rem 1.05rem;
    font-size: .855rem;
    font-weight: 600;
    letter-spacing: -.005em;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 1 !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
    box-shadow: none;
    white-space: nowrap;
}

.btn:hover, .btn:focus { transform: translateY(-1px); }

.btn:active { transform: translateY(0); }

.btn i { font-size: .95em; }

.btn-primary,
.btn-primary:focus {
    background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
    border: 1px solid #4338ca !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(67, 56, 202, .4), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.btn-primary:hover,
.btn-primary:active {
    background: linear-gradient(180deg, #4f46e5, #4338ca) !important;
    border-color: #3730a3 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(67, 56, 202, .65), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.btn-secondary,
.btn-secondary:focus {
    background: #fff !important;
    border: 1px solid var(--app-border-strong) !important;
    color: var(--app-text-soft) !important;
    box-shadow: var(--app-shadow-xs) !important;
}

.btn-secondary:hover, .btn-secondary:active {
    background: var(--app-surface-muted) !important;
    border-color: #c3cadd !important;
    color: var(--app-text) !important;
}

.btn-success,
.btn-success:focus {
    background: linear-gradient(180deg, #10b981, #059669) !important;
    border: 1px solid #047857 !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(4, 120, 87, .35), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.btn-success:hover, .btn-success:active {
    background: linear-gradient(180deg, #059669, #047857) !important;
    border-color: #065f46 !important;
    color: #fff !important;
}

.btn-warning,
.btn-warning:focus {
    background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
    border: 1px solid #d97706 !important;
    color: #451a03 !important;
    box-shadow: 0 1px 2px rgba(180, 83, 9, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.btn-warning:hover, .btn-warning:active {
    background: linear-gradient(180deg, #f59e0b, #d97706) !important;
    color: #451a03 !important;
}

.btn-danger,
.btn-danger:focus {
    background: linear-gradient(180deg, #ef4444, #dc2626) !important;
    border: 1px solid #b91c1c !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(185, 28, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

.btn-danger:hover, .btn-danger:active {
    background: linear-gradient(180deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
}

.btn-info,
.btn-info:focus {
    background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
    border: 1px solid #0369a1 !important;
    color: #fff !important;
}

.btn-info:hover, .btn-info:active { color: #fff !important; }

.btn-light,
.btn-default {
    background: var(--app-surface-muted) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

.btn-light:hover, .btn-default:hover {
    background: #fff !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-text) !important;
}

.btn-outline-primary { color: var(--app-primary) !important; border-color: #c7d2fe !important; }
.btn-outline-primary:hover { background: var(--app-primary-soft) !important; color: var(--app-primary-700) !important; border-color: #a5b4fc !important; }

.btn-outline-danger { color: var(--app-danger) !important; border-color: #fecaca !important; }
.btn-outline-danger:hover { background: var(--app-danger-soft) !important; color: #991b1b !important; border-color: #fca5a5 !important; }

.btn-outline-secondary { color: var(--app-text-soft) !important; border-color: var(--app-border-strong) !important; }
.btn-outline-secondary:hover { background: var(--app-surface-muted) !important; color: var(--app-text) !important; }

.btn-outline-info { color: var(--app-info) !important; border-color: #bae6fd !important; }
.btn-outline-info:hover { background: var(--app-info-soft) !important; color: #075985 !important; }

.btn-sm {
    padding: .42rem .8rem;
    font-size: .795rem;
    border-radius: 9px;
    gap: 6px;
}

.btn-xs {
    padding: .3rem .6rem;
    font-size: .735rem;
    border-radius: 8px;
    gap: 5px;
}

.btn-lg { padding: .78rem 1.4rem; font-size: .95rem; border-radius: 12px; }

.btn-block, .btn.w-100 { justify-content: center; }

.btn:disabled, .btn.disabled { opacity: .55 !important; transform: none !important; cursor: not-allowed; }

.btn-group .btn { border-radius: 9px !important; }
.btn-group .btn:not(:first-child) { margin-left: 4px; }

/* Action dropdown trigger */

td .btn-group > .btn.dropdown-toggle,
.table .btn-group > .btn.dropdown-toggle {
    background: #fff !important;
    border: 1px solid var(--app-border-strong) !important;
    color: var(--app-text-soft) !important;
    box-shadow: var(--app-shadow-xs) !important;
    font-weight: 600;
}

td .btn-group > .btn.dropdown-toggle:hover,
.table .btn-group > .btn.dropdown-toggle:hover {
    border-color: #c7d2fe !important;
    color: var(--app-primary) !important;
    background: var(--app-primary-soft) !important;
}

/* Floating action / link-as-button */

a:not(.btn).link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-muted) !important;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: rgba(255, 255, 255, .75);
}

a:not(.btn).link-btn:hover {
    background: #fff;
    color: var(--app-text) !important;
    border-color: var(--app-border-strong);
}

/* ---------- Forms ---------- */

.form-group { margin-bottom: 1rem; }

.form-label,
label,
.control-label {
    font-size: .79rem;
    font-weight: 600;
    color: var(--app-text-soft);
    margin-bottom: .38rem;
    letter-spacing: .005em;
}

.form-control,
.form-select,
select.form-control,
textarea.form-control,
input.form-control {
    min-height: 42px;
    padding: .52rem .8rem;
    font-size: .875rem;
    font-weight: 450;
    color: var(--app-text);
    background-color: #fff;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

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

.form-control::placeholder { color: var(--app-muted-2); font-weight: 400; }

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: #a5b4fc;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
    color: var(--app-text);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background: var(--app-surface-muted);
    color: var(--app-muted);
    border-color: var(--app-border);
}

.form-control-sm {
    min-height: 34px;
    padding: .32rem .55rem;
    font-size: .8rem;
    border-radius: 8px;
}

.form-check { min-height: 1.4rem; padding-left: 1.6em; }

.form-check-input {
    width: 1.05em;
    height: 1.05em;
    margin-top: .2em;
    border: 1.5px solid #c3cadd;
    border-radius: 5px;
    box-shadow: none;
}

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

.form-check-input:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}

.form-check-label { font-size: .84rem; font-weight: 500; color: var(--app-text-soft); }

.text-danger,
.field-validation-error,
.validation-summary-errors {
    color: var(--app-danger) !important;
    font-size: .77rem;
    font-weight: 500;
}

.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

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

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

form > .form-group:last-of-type,
form > .mb-3:last-child { margin-bottom: 1.2rem; }

/* Select2 */

.select2-container--default .select2-selection--single {
    height: 42px;
    padding: 5px 6px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    color: var(--app-text);
    font-size: .875rem;
    padding-left: 6px;
}

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

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}

.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    padding: 3px 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--app-primary-soft);
    border: 1px solid #e0e7ff;
    color: var(--app-primary-700);
    border-radius: 7px;
    font-size: .78rem;
    padding: 2px 8px;
}

.select2-dropdown {
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: var(--app-shadow);
    overflow: hidden;
    font-size: .875rem;
}

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

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--app-surface-muted);
    color: var(--app-text);
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--app-border-strong);
    border-radius: 8px;
    padding: 7px 9px;
    outline: 0;
}

/* ---------- Tables / DataTables ---------- */

.table-responsive {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
    padding: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.table-responsive > .table { margin-bottom: 0; }

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.table-scroll > .table { margin-bottom: 0; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: #eef1f7;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: #f8faff;
    --bs-table-hover-color: var(--app-text);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: transparent;
    box-shadow: none;
    font-family: var(--app-font);
    color: var(--app-text);
}

.table-primary,
.table-secondary,
.table-info,
.table-success,
.table-warning,
.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: #f8faff;
    background: transparent !important;
}

.table > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #f0f2f8;
    color: inherit;
}

.table > thead > tr > th,
.table thead th,
.table > thead > tr > td {
    background: #f8fafc !important;
    color: #5b667a !important;
    font-size: .69rem !important;
    font-weight: 700 !important;
    letter-spacing: .085em !important;
    text-transform: uppercase;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--app-border) !important;
    border-top: 0 !important;
    white-space: nowrap;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 2;
}

.table > thead > tr > th:first-child { border-top-left-radius: 12px; }
.table > thead > tr > th:last-child { border-top-right-radius: 12px; }

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    padding: 11px 16px !important;
    font-size: .84rem !important;
    line-height: 1.45;
    border-top: 0 !important;
    border-bottom: 1px solid #f0f2f8 !important;
    vertical-align: middle;
    color: var(--app-text-soft);
}

.table > tbody > tr:last-child > td { border-bottom: 0 !important; }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    box-shadow: none;
}

.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    background: #f8faff !important;
}

.table td a:not(.btn) { font-weight: 600; color: var(--app-primary); }
.table td a:not(.btn):hover { color: var(--app-primary-700); text-decoration: underline !important; }

.table td .badge { font-size: .69rem; }

.table .btn-group { white-space: nowrap; }

.row-clickable { cursor: pointer; }
.row-clickable:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -2px; }

.table .financial,
.table td.financial { font-variant-numeric: tabular-nums; }

.table-responsive + .card,
.table + .card { margin-top: 20px; }

.table-responsive .table-responsive { border: 0; box-shadow: none; padding: 0; }

/* Empty / no-data states */

.dataTables_empty {
    padding: 46px 20px !important;
    text-align: center !important;
    color: var(--app-muted) !important;
    font-size: .85rem !important;
}

.dataTables_empty::before {
    content: "\f0f6";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    display: block;
    font-size: 26px;
    color: var(--app-muted-2);
    margin-bottom: 8px;
}

/* DataTables wrapper */

.dataTables_wrapper {
    padding: 12px 12px 10px;
    font-size: .8rem;
    color: var(--app-muted);
}

.dataTables_wrapper .row {
    --bs-gutter-x: 0;
    align-items: center;
    margin: 0;
}

.dataTables_wrapper .row:first-child { margin-bottom: 10px; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .78rem;
    font-weight: 500;
    color: var(--app-muted);
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter { justify-content: flex-end; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 36px;
    min-height: 36px;
    border: 1px solid var(--app-border-strong);
    border-radius: 9px;
    padding: 4px 10px;
    font-size: .8rem;
    color: var(--app-text);
    background-color: #fff;
    outline: 0;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 210px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 30px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}

.dataTables_wrapper .dataTables_info {
    padding: 4px 0 0;
    font-size: .76rem;
    color: var(--app-muted);
}

.dataTables_wrapper .dataTables_paginate {
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 2px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    color: var(--app-muted) !important;
    font-size: .76rem;
    font-weight: 600;
    background: transparent !important;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -4px rgba(79, 70, 229, .6);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #cbd2e0 !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
}

.dataTables_wrapper .dataTables_paginate .ellipsis { color: var(--app-muted-2); padding: 0 4px; }

/* Old sort indicators */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
    cursor: pointer;
    position: relative;
    padding-right: 26px !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid #c3cadd;
}

table.dataTable thead .sorting_asc:after {
    border-top: 0;
    border-bottom: 4.5px solid var(--app-primary);
    margin-top: -3px;
}

table.dataTable thead .sorting_desc:after { border-top-color: var(--app-primary); }

/* ---------- Badges & chips ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: .32em .68em;
    font-size: .69rem;
    font-weight: 650;
    letter-spacing: .015em;
    line-height: 1.3;
    border: 1px solid transparent;
    text-transform: none;
}

.badge.bg-primary { background: var(--app-primary-soft) !important; color: var(--app-primary-700) !important; border-color: #e0e7ff; }
.badge.bg-secondary { background: #eef2f6 !important; color: #475467 !important; border-color: #e2e8f0; }
.badge.bg-success { background: var(--app-success-soft) !important; color: #065f46 !important; border-color: #a7f3d0; }
.badge.bg-info { background: var(--app-info-soft) !important; color: #075985 !important; border-color: #bae6fd; }
.badge.bg-warning { background: var(--app-warning-soft) !important; color: #92400e !important; border-color: #fde68a; }
.badge.bg-danger { background: var(--app-danger-soft) !important; color: #991b1b !important; border-color: #fecaca; }
.badge.bg-light { background: var(--app-surface-muted) !important; color: var(--app-muted) !important; border-color: var(--app-border); }
.badge.bg-dark, .badge.bg-black { background: #1f2937 !important; color: #f9fafb !important; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    color: var(--app-muted);
    white-space: nowrap;
}

.chip-success { background: var(--app-success-soft); border-color: #a7f3d0; color: #065f46; }
.chip-warning { background: var(--app-warning-soft); border-color: #fde68a; color: #92400e; }
.chip-danger { background: var(--app-danger-soft); border-color: #fecaca; color: #991b1b; }
.chip-info { background: var(--app-info-soft); border-color: #bae6fd; color: #075985; }

/* ---------- Alerts ---------- */

.alert {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 13px 16px;
    font-size: .83rem;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.alert p:last-child { margin-bottom: 0; }
.alert strong { font-weight: 700; }

.alert-warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.alert-info { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.alert-primary { background: var(--app-primary-soft); border-color: #e0e7ff; color: #3730a3; }

.alert .btn-close { margin-left: auto; opacity: .5; box-shadow: none; }

#system-message:empty { display: none; }

#system-message { margin-bottom: 16px; }

#system-message.alert { display: flex; }

/* ---------- Tabs ---------- */

.nav-pills,
.nav-tabs {
    gap: 4px;
    border-bottom: 0;
}

.nav-pills .nav-link,
.nav-tabs .nav-link {
    border-radius: 9px;
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-muted);
    border: 1px solid transparent;
    transition: background .16s ease, color .16s ease;
}

.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover {
    background: var(--app-surface-muted);
    color: var(--app-text-soft);
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background: var(--app-primary-soft) !important;
    color: var(--app-primary-700) !important;
    border-color: #e0e7ff;
}

.nav-tabs { border-bottom: 1px solid var(--app-border); }
.nav-tabs .nav-link { border-radius: 9px 9px 0 0; border-bottom: 0; }
.nav-tabs .nav-link.active { background: #fff !important; border-color: var(--app-border) var(--app-border) #fff !important; }

.tab-content > .tab-pane h1 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 16px 0 12px;
}

/* ---------- Modals ---------- */

.modal-content {
    border: 1px solid var(--app-border);
    border-radius: 18px;
    box-shadow: var(--app-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--app-border);
    padding: 18px 22px;
}

.modal-title { font-size: 1.02rem; font-weight: 700; }

.modal-body { padding: 22px; font-size: .88rem; }

.modal-footer { border-top: 1px solid var(--app-border); padding: 14px 22px; gap: 8px; }

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

/* Sweetalert */

.swal-modal { border-radius: 18px !important; border: 1px solid var(--app-border); box-shadow: var(--app-shadow-lg) !important; }
.swal-title { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--app-text) !important; }
.swal-text { font-size: .88rem !important; color: var(--app-muted) !important; line-height: 1.55 !important; }
.swal-button { border-radius: 10px !important; font-weight: 600 !important; font-size: .85rem !important; }
.swal-button--confirm { background: var(--app-primary) !important; }
.swal-icon--success__line, .swal-icon--success__ring { border-color: var(--app-success) !important; }
.swal-icon--success__hide-corners { background: #fff !important; }

/* ---------- Dashboard panels ---------- */

.panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.panel-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.card .chart-wrap { position: relative; min-height: 260px; }

.card .chart-wrap canvas { max-height: 300px; }

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-header h3 {
    font-size: .98rem;
    font-weight: 700;
    margin: 0 0 2px;
}

.panel-header p {
    margin: 0;
    font-size: .76rem;
    color: var(--app-muted);
}

/* Debtor / payment list */

.mini-list { display: flex; flex-direction: column; }

.mini-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid #f2f4f9;
    color: var(--app-text-soft);
    transition: background .16s ease;
}

.mini-item:last-child { border-bottom: 0; }
.mini-item:hover { background: #fafbff; color: var(--app-text); }

.mini-avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex: 0 0 38px;
}

.mini-avatar.green { background: linear-gradient(135deg, #10b981, #059669); }
.mini-avatar.amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.mini-avatar.sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.mini-main { flex: 1; min-width: 0; }
.mini-title { display: block; font-size: .82rem; font-weight: 600; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { display: block; font-size: .73rem; color: var(--app-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-end { text-align: right; flex: 0 0 auto; }

.amount-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--app-danger-soft);
    color: #991b1b;
}

.amount-pill.ok { background: var(--app-success-soft); color: #065f46; }

/* Privacy toggle: hide financial figures until the user reveals them */
.blurred .financial {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.skeleton-row {
    height: 46px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #f1f4fa 25%, #f8fafc 37%, #f1f4fa 63%);
    background-size: 400% 100%;
    animation: app-shimmer 1.3s ease infinite;
}

/* Empty state */

.empty-state {
    text-align: center;
    padding: 42px 20px;
    color: var(--app-muted);
}

.empty-state .emoji {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--app-surface-muted);
    color: var(--app-muted-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.empty-state h4 { font-size: .95rem; margin: 0 0 4px; }
.empty-state p { font-size: .8rem; margin: 0; }

/* ---------- Loading overlay ---------- */

#overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity .2s ease;
}

#overlay .spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

#overlay p {
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    margin-top: 14px;
    letter-spacing: .01em;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes app-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes app-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Notifications (bootstrap-notify) ---------- */

[data-notify="container"] {
    border-radius: 12px !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    padding: 12px 16px !important;
    background: #fff !important;
    max-width: 360px;
}

[data-notify="container"] [data-notify="title"] { font-weight: 700 !important; font-size: .82rem !important; }
[data-notify="container"] [data-notify="message"] { font-size: .78rem !important; color: var(--app-muted) !important; }
[data-notify="container"].alert-success { border-left: 3px solid var(--app-success) !important; }
[data-notify="container"].alert-danger { border-left: 3px solid var(--app-danger) !important; }
[data-notify="container"].alert-info { border-left: 3px solid var(--app-info) !important; }
[data-notify="container"].alert-warning { border-left: 3px solid var(--app-warning) !important; }

/* ---------- Command palette ---------- */

.cmdk {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 24px;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.cmdk.open { opacity: 1; pointer-events: auto; }

.cmdk-dialog {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .55);
    overflow: hidden;
    transform: translateY(-8px) scale(.985);
    transition: transform .18s ease;
}

.cmdk.open .cmdk-dialog { transform: none; }

.cmdk-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--app-border);
}

.cmdk-search i { color: var(--app-muted-2); }

.cmdk-search input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 1rem;
    color: var(--app-text);
    background: transparent;
    font-family: var(--app-font);
}

.cmdk-search input::placeholder { color: var(--app-muted-2); }

.cmdk-search kbd,
.cmdk-footer kbd {
    font-family: var(--app-font);
    font-size: .66rem;
    font-weight: 600;
    color: var(--app-muted);
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 6px;
}

.cmdk-results {
    max-height: 52vh;
    overflow: auto;
    padding: 8px;
}

.cmdk-group-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-muted-2);
    padding: 10px 12px 6px;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--app-text-soft);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}

.cmdk-item:hover,
.cmdk-item.active {
    background: var(--app-primary-soft);
    color: var(--app-primary-700);
}

.cmdk-item .cmdk-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--app-surface-muted);
    color: var(--app-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 30px;
}

.cmdk-item.active .cmdk-icon { background: #fff; color: var(--app-primary); }

.cmdk-item .cmdk-text { flex: 1; min-width: 0; }
.cmdk-item .cmdk-text small { display: block; font-size: .71rem; font-weight: 400; color: var(--app-muted); }
.cmdk-item .cmdk-hint { font-size: .7rem; color: var(--app-muted-2); }

.cmdk-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--app-muted);
    font-size: .84rem;
}

.cmdk-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    font-size: .7rem;
    color: var(--app-muted);
}

.cmdk-footer .sep { margin-left: auto; }

/* ---------- Scroll top ---------- */

#scroll-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: #fff;
    color: var(--app-text-soft);
    box-shadow: var(--app-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 900;
}

#scroll-top.show { opacity: 1; transform: none; pointer-events: auto; }
#scroll-top:hover { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }

/* ---------- Footer ---------- */

.footer {
    border-top: 1px solid var(--app-border);
    background: transparent;
    padding: 16px 32px 22px;
    margin-top: 10px;
    font-size: .76rem;
    color: var(--app-muted);
}

.footer .container-fluid { padding: 0; max-width: 1560px; margin: 0 auto; }

.footer .nav-link {
    color: var(--app-muted) !important;
    font-size: .76rem;
    padding: 0 12px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer .nav-link:hover { color: var(--app-primary) !important; }

/* ---------- Misc ---------- */

.text-muted { color: var(--app-muted) !important; }
.text-primary { color: var(--app-primary) !important; }
.bg-primary { background-color: var(--app-primary) !important; }
.bg-success { background-color: var(--app-success) !important; }
.bg-danger { background-color: var(--app-danger) !important; }
.bg-warning { background-color: var(--app-warning) !important; }
.bg-info { background-color: var(--app-info) !important; }

.rounded-4 { border-radius: 14px !important; }
.shadow-sm { box-shadow: var(--app-shadow-sm) !important; }

.pull-right { float: right; }
.pull-left { float: left; }

.page-inner > p > a:not(.btn),
.page-inner > div > p > a:not(.btn) {
    font-weight: 600;
}

.page-inner > p:has(> a.btn) { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.page-inner > p { margin-bottom: 16px; }

/* Legacy page header helper: convert plain action rows into a toolbar */
.page-inner > h1 + p,
.page-inner > h1 + div > p:first-child { margin-bottom: 18px; }

dl.row dt { font-weight: 600; color: var(--app-muted); font-size: .78rem; }
dl.row dd { color: var(--app-text); font-size: .85rem; }

/* Unit cards */

.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 16px;
}

.unit-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--app-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}

.unit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow);
    border-color: #d8def0;
}

.unit-card .unit-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 16px 12px;
}

.unit-card .unit-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--app-text);
}

.unit-card .unit-sub {
    font-size: .74rem;
    color: var(--app-muted);
    margin: 2px 0 0;
}

.unit-card .unit-body {
    padding: 0 16px 14px;
    flex: 1;
}

.unit-card .unit-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.unit-card .fact {
    background: var(--app-surface-muted);
    border: 1px solid #eef1f7;
    border-radius: 10px;
    padding: 8px 10px;
}

.unit-card .fact .k {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--app-muted);
    font-weight: 700;
    margin: 0 0 2px;
}

.unit-card .fact .v {
    font-size: .86rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.unit-card .tenant {
    border-top: 1px dashed var(--app-border);
    padding-top: 12px;
}

.unit-card .tenant .t-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.unit-card .tenant .t-meta {
    font-size: .74rem;
    color: var(--app-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.unit-card .tenant .t-meta span { display: inline-flex; align-items: center; gap: 5px; }

.unit-card .unit-actions {
    padding: 10px 12px;
    background: var(--app-surface-muted);
    border-top: 1px solid var(--app-border);
    display: flex;
    justify-content: flex-end;
}

/* Property selection cards */

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.property-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--app-border);
    background: #fff;
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.property-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow);
    border-color: #c7d2fe;
    color: var(--app-text);
}

.property-card .p-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    flex: 0 0 44px;
}

.property-card .p-body { flex: 1; min-width: 0; }
.property-card .p-name { font-size: .9rem; font-weight: 700; margin: 0 0 2px; }
.property-card .p-meta { font-size: .75rem; color: var(--app-muted); margin: 0; }
.property-card .p-arrow { color: var(--app-muted-2); transition: transform .18s ease; }
.property-card:hover .p-arrow { transform: translateX(3px); color: var(--app-primary); }

/* Summary strip */

.summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.summary-strip .item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-xs);
    font-size: .78rem;
    color: var(--app-muted);
}

.summary-strip .item strong { color: var(--app-text); font-size: .9rem; font-weight: 700; }

/* Toolbar above tables */

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.table-toolbar .left,
.table-toolbar .right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.card > .table-responsive {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0;
}

.card > .table-responsive > .table > thead > tr > th { border-radius: 0 !important; }

/* Simple pill nav for view switchers */

.view-switch {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: 9px;
    background: var(--app-surface-muted);
    border: 1px solid var(--app-border);
}

.view-switch a {
    padding: 5px 10px;
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--app-muted);
}

.view-switch a.active,
.view-switch a:hover {
    background: #fff;
    color: var(--app-text);
    box-shadow: var(--app-shadow-xs);
}

/* ---------- Auth layout ---------- */

.auth-body {
    min-height: 100vh;
    background: #eef1f8;
    margin: 0;
}

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

.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
    color: #fff;
    background:
            radial-gradient(700px 400px at 100% 0%, rgba(56, 189, 248, .28), transparent 60%),
            radial-gradient(600px 400px at 0% 100%, rgba(168, 85, 247, .30), transparent 55%),
            linear-gradient(140deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
}

.auth-brand:after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 54px solid rgba(255, 255, 255, .045);
}

.auth-brand .brand-row { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.auth-brand .brand-row img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.auth-brand .brand-row .brand-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }

.auth-brand .brand-copy { position: relative; z-index: 1; max-width: 460px; margin: 40px 0; }

.auth-brand .brand-copy h1 {
    color: #fff;
    font-size: 2.15rem;
    letter-spacing: -.035em;
    line-height: 1.15;
    margin: 0 0 14px;
}

.auth-brand .brand-copy p {
    color: rgba(224, 231, 255, .78);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}

.auth-points { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; position: relative; z-index: 1; }

.auth-point {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .84rem;
    color: rgba(238, 242, 255, .82);
}

.auth-point i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    color: #a5b4fc;
    font-size: 11px;
    flex: 0 0 26px;
    margin-top: 1px;
}

.auth-brand .brand-foot { position: relative; z-index: 1; font-size: .73rem; color: rgba(199, 210, 254, .55); }

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #f7f9fd;
}

.auth-card {
    width: 100%;
    max-width: 410px;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    box-shadow: 0 30px 60px -30px rgba(16, 24, 40, .25);
    padding: 34px 32px 30px;
}

.auth-card .auth-head { text-align: center; margin-bottom: 24px; }

.auth-card .auth-head .auth-logo {
    height: 42px;
    width: auto;
    margin-bottom: 16px;
}

.auth-card h2 { font-size: 1.4rem; margin: 0 0 5px; }
.auth-card .auth-head p { color: var(--app-muted); font-size: .84rem; margin: 0; }

.auth-card .form-group { margin-bottom: 16px; }

.auth-card .btn-primary { width: 100%; padding: .72rem 1rem; font-size: .9rem; }

.auth-hint { text-align: center; font-size: .74rem; color: var(--app-muted-2); margin: 20px 0 0; }

.password-field { position: relative; }
.password-field .form-control { padding-right: 42px; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--app-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover { background: var(--app-surface-muted); color: var(--app-text); }

/* ---------- Public layout (surveys, receipt, logout) ---------- */

.public-shell { min-height: 100vh; display: flex; flex-direction: column; }

.public-header {
    padding: 18px 0;
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.public-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.public-header img { height: 32px; width: auto; }
.public-header .public-name { font-size: .95rem; font-weight: 700; color: var(--app-text); letter-spacing: -.02em; }

.public-main { flex: 1; padding: 32px 0 48px; }

.public-footer {
    border-top: 1px solid var(--app-border);
    padding: 18px 0;
    font-size: .76rem;
    color: var(--app-muted);
    text-align: center;
}

.public-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    box-shadow: var(--app-shadow-sm);
    padding: 28px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
    .main-panel > .container { padding-left: 22px; padding-right: 22px; }
    .main-header { padding-left: 22px; padding-right: 22px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .main-panel,
    .main-header { width: 100%; left: 0; }

    .main-header { padding-top: 10px; }
    .main-panel > .container { margin-top: 82px; padding-left: 16px; padding-right: 16px; }
    .main-header { padding-left: 16px; padding-right: 16px; }

    /* KaiAdmin hides .navbar-header off-canvas on mobile because its stock
       layout reveals it from a separate .main-header-logo toggle. This theme
       uses one header, so keep the header — and its nav toggle — visible. */
    .main-header .navbar-header {
        position: relative;
        transform: none !important;
    }

    .sidebar { z-index: 1200; }
    .sidebar .sidebar-content { padding-top: 84px; }

    /* Keep a visible close/toggle control inside the mobile sidebar. */
    .sidebar .sidebar-logo { display: block; }

    .logo-header { height: 70px; }

    .search-trigger span { display: none; }
    .search-trigger { max-width: 42px; padding: 0; justify-content: center; }
    .search-trigger kbd { display: none; }

    .page-inner > h1:first-of-type { font-size: 1.42rem; }
    #main-content { padding: 16px 0 4px; }
    .hero { padding: 22px; }
    .hero h1 { font-size: 1.5rem; }

    .panel-grid-2 { grid-template-columns: minmax(0, 1fr); }

    .footer { padding: 14px 16px 20px; }

    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-main { min-height: 100vh; padding: 24px 16px; }
}

@media (max-width: 767.98px) {
    .stat-grid { grid-template-columns: 1fr; }

    .page-head { align-items: flex-start; }
    .table-responsive { border-radius: 12px; }

    .dataTables_wrapper .dataTables_filter { justify-content: flex-start; margin-top: 6px; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }

    .topbar-credits { display: none; }
    .profile-pic .profile-username { display: none; }

    .card .card-body { padding: 16px !important; }

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

    .cmdk { padding-top: 4vh; }
    .cmdk-results { max-height: 62vh; }
}

@media (max-width: 575.98px) {
    .header-right { gap: 0; }
    .topbar-nav .nav-item .nav-link { padding: 0 8px !important; min-width: 36px; }
    .search-trigger { border-color: transparent; background: transparent; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1; }
}

/* Sidebar backdrop for mobile */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1190;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

/* Keep KaiAdmin minimized sidebar usable with our styling */

@media screen and (min-width: 992px) {
    .sidebar_minimize .main-panel,
    .sidebar_minimize .main-header { width: calc(100% - 78px); }

    .sidebar_minimize .main-header { left: 78px; }

    .sidebar_minimize .sidebar,
    .sidebar_minimize .sidebar .sidebar-wrapper { width: 78px; }

    .sidebar_minimize .logo-header { width: 78px; padding: 0 12px; justify-content: center; }

    .sidebar_minimize .logo-header .logo { display: none; }

    .sidebar_minimize .sidebar .sidebar-content { padding-top: 100px; }

    .sidebar_minimize .sidebar .nav.nav-secondary { padding: 0 8px; }

    .sidebar_minimize .sidebar .nav .nav-item > a {
        justify-content: center;
        padding: 10px 0 !important;
    }

    .sidebar_minimize .sidebar .nav .nav-item > a i { margin: 0; }

    .sidebar_minimize .sidebar .nav-section,
    .sidebar_minimize .sidebar-quick,
    .sidebar_minimize .sidebar-footer { display: none; }
}

/* ---------- Print ---------- */

@media print {
    body { background: #fff !important; }

    .sidebar,
    .main-header,
    .footer,
    .public-header,
    .public-footer,
    .app-breadcrumb,
    #scroll-top,
    .page-actions,
    .btn,
    .cmdk,
    #overlay { display: none !important; }

    .main-panel,
    .main-panel > .container { width: 100% !important; margin: 0 !important; padding: 0 !important; }

    .card,
    .table-responsive { box-shadow: none !important; border: 0 !important; }

    .page-inner { padding: 0 !important; }
    #main-content { padding: 0 !important; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}