body {
    background: #f4f7fb;
}

.auth-bg {
    min-height: 100vh;
}

.auth-fluid {
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    min-height: 100vh;
}

.auth-fluid-form-box {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 32px;
}

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

.auth-fluid-right {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(16, 24, 40, .82), rgba(25, 70, 118, .76)),
        url("../images/auth.jpg") center/cover;
    display: flex;
    justify-content: center;
    padding: 48px;
}

.auth-user-testimonial {
    max-width: 520px;
}

.hc-auth-mark {
    align-items: center;
    background: #2563eb;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 52px;
}

.hc-logo-text,
.hc-logo-mark {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.hc-logo-text {
    font-size: 17px;
}

.hc-logo-mark {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border-radius: 7px;
    display: inline-flex;
    font-size: 13px;
    height: 34px;
    justify-content: center;
    width: 38px;
}

[data-bs-theme="light"] .app-topbar .hc-logo-text,
[data-bs-theme="light"] .app-topbar .hc-logo-mark,
[data-menu-color="light"] .sidenav-menu .hc-logo-text,
[data-menu-color="light"] .sidenav-menu .hc-logo-mark {
    color: #1b2a3d;
}

.hc-page-eyebrow {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

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

.hc-span-8 {
    grid-column: span 8;
}

.hc-span-4 {
    grid-column: span 4;
}

.card-box {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #e7ebf0);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(28, 39, 60, .05);
    margin-bottom: 18px;
    padding: 18px;
}

.header-title {
    color: #1f2937;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}

.widget-inline .widget-inline-box {
    border-right: 1px solid var(--bs-border-color, #e7ebf0);
    padding: 12px 8px;
}

.widget-inline .row > [class*="col-"]:last-child .widget-inline-box {
    border-right: 0;
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5e36a6;
    --bs-btn-hover-border-color: #5e36a6;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-default {
    --bs-btn-color: #334155;
    --bs-btn-bg: #eef2f7;
    --bs-btn-border-color: #dbe3ef;
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-bg: #e2e8f0;
    --bs-btn-hover-border-color: #cbd5e1;
}

.label,
.badge-primary,
.badge-success,
.badge-info,
.badge-warning,
.badge-danger,
.badge-purple,
.badge-default {
    border-radius: 999px;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
}

.badge-primary,
.label-primary {
    background: rgba(102, 88, 221, .12);
    color: #6658dd;
}

.badge-success,
.label-success {
    background: rgba(26, 188, 156, .12);
    color: #0f8f78;
}

.badge-info,
.label-info {
    background: rgba(67, 191, 229, .14);
    color: #157a98;
}

.badge-warning,
.label-warning {
    background: rgba(247, 184, 75, .18);
    color: #9a650e;
}

.badge-danger,
.label-danger {
    background: rgba(241, 85, 108, .14);
    color: #b4233a;
}

.badge-purple,
.label-purple {
    background: rgba(111, 66, 193, .14);
    color: #5b35a3;
}

.badge-default,
.label-default {
    background: #eef2f7;
    color: #475569;
}

.pull-left,
.float-left {
    float: left !important;
}

.pull-right,
.float-right {
    float: right !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.text-purple {
    color: #6658dd !important;
}

.text-custom {
    color: #43bfe5 !important;
}

.bg-custom {
    background-color: #43bfe5 !important;
}

.bg-purple {
    background-color: #6658dd !important;
}

.b-0 {
    border: 0 !important;
}

.p-lg {
    padding: 24px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-16 {
    font-size: 16px !important;
}

.m-t-0 { margin-top: 0 !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-30 { margin-top: 30px !important; }
.m-t-40 { margin-top: 40px !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-b-5 { margin-bottom: 5px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.m-l-5 { margin-left: 5px !important; }
.m-l-10 { margin-left: 10px !important; }
.m-l-15 { margin-left: 15px !important; }
.m-r-5 { margin-right: 5px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-r-15 { margin-right: 15px !important; }

.content-page > .content {
    padding: 24px 0 0;
}

#wrapper.wrapper,
#wrapper {
    min-height: 100vh;
}

.page-title,
.page-main-title {
    color: #1f2937;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
}

.page-title-alt {
    margin-bottom: 0;
}

.panel-heading {
    border-bottom: 1px solid var(--bs-border-color, #e7ebf0);
    padding: 18px 18px 0;
}

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

.form-group-custom {
    margin-bottom: 22px;
    position: relative;
}

.form-group-custom input,
.form-group-custom select,
.form-group-custom textarea {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    color: var(--bs-body-color);
    display: block;
    padding: .55rem .75rem;
    width: 100%;
}

.form-group-custom label {
    color: #64748b;
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    position: static;
}

.form-group-custom .bar {
    display: none;
}

.widget-bg-color-icon {
    min-height: 118px;
}

.bg-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.bg-icon i {
    font-size: 24px;
}

.profile-detail {
    text-align: inherit;
}

.status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-left: 0;
}

.status-list li {
    list-style: none;
}

.portlet {
    background: transparent;
    border: 0;
    margin-bottom: 18px;
}

.portlet-heading {
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color, #e7ebf0);
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.portlet-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.modal .close,
.close {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 22px;
    opacity: .65;
}

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

.dataTables_wrapper .row {
    align-items: center;
    row-gap: 10px;
}

.dataTables_filter {
    text-align: right;
}

.dataTables_filter input,
.dataTables_length select {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: .35rem .55rem;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .auth-fluid {
        grid-template-columns: 1fr;
    }

    .auth-fluid-right {
        display: none;
    }

    .hc-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hc-span-8,
    .hc-span-4 {
        grid-column: span 1;
    }
}

/* ------------------------------------------------------------------
 * Legacy body / wrapper neutralizers
 * Templates from the previous theme still emit <body class="fixed-left">
 * and <div id="wrapper">. V8 owns the layout via .wrapper (class) and
 * the data-layout-* attributes on <html>. The rules below make the
 * legacy id-based wrapper inherit V8's container behavior so .sidenav-menu
 * (position:fixed) and .content-page (margin-inline-start) work together.
 * ----------------------------------------------------------------*/
body.fixed-left {
    background: var(--theme-body-bg, #f4f7fb);
}

#wrapper {
    height: 100%;
    width: 100%;
}

/* Bootstrap 4's panel-collapse equivalent. Many .tpls render
 * <div id="portletN" class="panel-collapse collapse show"> and expect
 * Bootstrap's collapse styling. Map the legacy class to .collapse so
 * V8's collapse logic applies. */
.panel-collapse {
    display: block;
}
.panel-collapse:not(.show) {
    /* leave default; BS5 .collapse already hides via display:none. */
}

/* .bg-icon.bg-info.pull-left was a header icon helper in the old skin.
 * Keep it visually centered now that pull-left was removed in BS5. */
.bg-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
}

/* ------------------------------------------------------------------
 * DataTables BS4 -> V8 visual reconciliation
 * 27 templates still pull dataTables.bootstrap4.min.css for sorting
 * arrows and pagination. The BS4 CSS expects BS4 utilities + colors;
 * the following overrides keep V8 typography/spacing winning.
 * ----------------------------------------------------------------*/
.dataTables_wrapper {
    color: var(--bs-body-color);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--bs-body-color) !important;
    font-size: 13px;
    padding-top: 10px;
}

.dataTables_wrapper .dataTables_filter input {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    color: var(--bs-body-color);
    margin-left: 8px;
    padding: .35rem .65rem;
}

.dataTables_wrapper .dataTables_length select {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    color: var(--bs-body-color);
    padding: .25rem 1.5rem .25rem .5rem;
    margin: 0 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 0 !important;
    border-radius: 6px;
    color: var(--bs-body-color) !important;
    margin: 0 2px;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--bs-primary, #4f6cf7) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(79, 108, 247, .08) !important;
    border-color: transparent !important;
    color: var(--bs-primary, #4f6cf7) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: #9aa5b8 !important;
    cursor: not-allowed;
    opacity: .6;
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

table.dataTable thead > tr > th {
    background: #f6f8fc;
    border-bottom: 1px solid var(--bs-border-color);
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

table.dataTable tbody > tr > td {
    border-top: 1px solid var(--bs-border-color);
    vertical-align: middle;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--bs-border-color);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

/* Hide stray empty action rows used by legacy templates as form anchors. */
table.dataTable tbody > tr.dataTables_empty + tr[style*="display:none"],
table.dataTable tbody > tr[style*="display:none"]:not(.shown) {
    display: none !important;
}

/* ------------------------------------------------------------------
 * Misc legacy utility shims
 * ----------------------------------------------------------------*/
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-top-20    { margin-top: 20px !important; }
.margin-top-10    { margin-top: 10px !important; }

.btn-redbrown {
    background-color: #c0392b;
    border-color: #a93226;
    color: #fff;
}
.btn-redbrown:hover,
.btn-redbrown:focus,
.btn-redbrown:active {
    background-color: #a93226;
    border-color: #922b21;
    color: #fff;
}

/* Sweetalert/dropdown/menu host fixes for V8 z-index */
.swal2-container { z-index: 2000; }
.modal-backdrop  { z-index: 1040; }
.modal           { z-index: 1050; }