/* Databetrix-inspired backoffice skin over Metronic.
   Tokens match https://backoffice.aggregator.databetrix.com/ (dark default, cyan accent). */

:root,
[data-theme="dark"] {
    --dbo-surface-0: #0a0e13;
    --dbo-surface-1: #11161d;
    --dbo-surface-2: #181e27;
    --dbo-surface-3: #222a35;
    --dbo-accent: #2dd4e8;
    --dbo-accent-dim: #1cb8cc;
    --dbo-ink: #f4f7fb;
    --dbo-muted: #a0aab8;
    --dbo-border: rgba(255, 255, 255, 0.08);
    --dbo-danger: #f87171;
    --dbo-warn: #fbbf24;
    --dbo-success: #34d399;
    --dbo-hover: rgba(255, 255, 255, 0.05);
    --dbo-accent-text: #d5eef1;
    --dbo-accent-text-soft: #9fd8df;
    --dbo-accent-icon-bg: rgba(45, 212, 232, 0.14);
    --dbo-nav-active-bg: rgba(45, 212, 232, 0.12);
    --dbo-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.28);
    --dbo-body-glow-1: rgba(45, 212, 232, 0.07);
    --dbo-body-glow-2: rgba(28, 184, 204, 0.05);
    --kt-primary: #2dd4e8;
    --kt-primary-active: #1cb8cc;
    --kt-primary-light: rgba(45, 212, 232, 0.14);
    --kt-success: #34d399;
    --kt-info: #2dd4e8;
    --kt-warning: #fbbf24;
    --kt-danger: #f87171;
}

[data-theme="light"] {
    --dbo-surface-0: #f5f7fa;
    --dbo-surface-1: #ffffff;
    --dbo-surface-2: #f0f3f7;
    --dbo-surface-3: #e6ebf1;
    --dbo-accent: #0e7490;
    --dbo-accent-dim: #155e75;
    --dbo-ink: #020617;
    --dbo-muted: #475569;
    --dbo-border: rgba(15, 23, 42, 0.1);
    --dbo-danger: #dc2626;
    --dbo-warn: #d97706;
    --dbo-success: #059669;
    --dbo-hover: rgba(15, 23, 42, 0.04);
    --dbo-accent-text: #155e75;
    --dbo-accent-text-soft: #0e7490;
    --dbo-accent-icon-bg: rgba(14, 116, 144, 0.1);
    --dbo-nav-active-bg: rgba(14, 116, 144, 0.1);
    --dbo-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
    --dbo-body-glow-1: rgba(14, 116, 144, 0.05);
    --dbo-body-glow-2: rgba(14, 116, 144, 0.03);
    --kt-primary: #0e7490;
    --kt-primary-active: #155e75;
    --kt-primary-light: rgba(14, 116, 144, 0.1);
}

html,
body#kt_body {
    font-family: "DM Sans", "Open Sans", system-ui, sans-serif !important;
    background: var(--dbo-surface-0) !important;
    color: var(--dbo-ink);
}

body#kt_body {
    background-image:
        radial-gradient(1200px 600px at 12% -10%, var(--dbo-body-glow-1), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, var(--dbo-body-glow-2), transparent 50%) !important;
    background-attachment: fixed !important;
}

#preloader {
    background: var(--dbo-surface-0) !important;
}

/* ----- Sidebar ----- */
#kt_aside.aside,
.aside {
    background: var(--dbo-surface-0) !important;
    border-right: 1px solid var(--dbo-border) !important;
}

.aside-toolbar {
    border-bottom: 1px solid var(--dbo-border);
    padding-bottom: 0.75rem !important;
}

.dbo-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1rem 0.35rem;
}

.dbo-brand-mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dbo-accent-icon-bg);
    color: var(--dbo-accent-text-soft);
    flex-shrink: 0;
}

.dbo-brand-mark svg {
    width: 1.35rem;
    height: 1.35rem;
}

.dbo-brand-title {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--dbo-ink);
    line-height: 1.2;
}

.dbo-brand-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--dbo-muted);
    margin-top: 0.1rem;
}

.aside-user {
    padding-top: 0.65rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.6rem !important;
}

.aside-user .symbol {
    display: none;
}

.aside-user-info #agentCode,
.aside-user-info a#agentCode {
    color: var(--dbo-ink) !important;
    font-size: 0.8rem !important;
}

.aside-user-info .text-gray-600,
.aside-user-info .text-primary,
.aside-user-info .text-success {
    color: var(--dbo-muted) !important;
}

#kt_aside_menu.menu,
.aside-menu .menu {
    padding: 0.25rem 0.35rem 1rem;
}

.aside-menu .menu-link {
    border-radius: 0.55rem !important;
    color: var(--dbo-ink) !important;
    padding: 0.45rem 0.55rem !important;
}

.aside-menu .menu-title {
    color: inherit !important;
    font-weight: 500 !important;
}

.aside-menu .menu-icon .svg-icon,
.aside-menu .menu-arrow:after {
    color: var(--dbo-muted) !important;
}

.aside-menu .menu-link:hover,
.aside-menu .menu-link:hover .menu-title {
    background: var(--dbo-hover) !important;
    color: var(--dbo-ink) !important;
}

.aside-menu .menu-link.active,
.aside-menu .menu-item .menu-link.active {
    background: var(--dbo-nav-active-bg) !important;
    color: var(--dbo-accent-text-soft) !important;
}

.aside-menu .menu-link.active .menu-title,
.aside-menu .menu-link.active .svg-icon {
    color: var(--dbo-accent-text-soft) !important;
}

.aside-menu .dbo-menu-group > .menu-link {
    padding: 0.4rem 0.5rem !important;
    background: transparent !important;
}

.aside-menu .dbo-menu-group > .menu-link .menu-title {
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dbo-muted) !important;
}

.aside-menu .dbo-menu-group.hover.show > .menu-link .menu-title,
.aside-menu .dbo-menu-group > .menu-link:hover .menu-title {
    color: var(--dbo-accent-text-soft) !important;
}

.aside-menu .menu-sub-accordion {
    border-left: 1px solid var(--dbo-border);
    margin-left: 0.85rem;
    padding-left: 0.35rem;
}

/* ----- Header / content shell ----- */
#kt_header.header,
.header {
    background: rgba(17, 22, 29, 0.86) !important;
    border-bottom: 1px solid var(--dbo-border) !important;
    backdrop-filter: blur(10px);
}

[data-theme="light"] #kt_header.header,
[data-theme="light"] .header {
    background: rgba(255, 255, 255, 0.88) !important;
}

.header-brand {
    background: transparent !important;
    border-right: 1px solid var(--dbo-border) !important;
}

.toolbar,
.page-title,
.breadcrumb-item,
.breadcrumb-item a {
    color: var(--dbo-ink) !important;
}

.content,
#kt_content,
#kt_post,
.wrapper,
#kt_wrapper {
    background: transparent !important;
}

#kt_content_container.container-xxl {
    padding-top: 0.5rem;
}

.footer,
#kt_footer {
    background: transparent !important;
    border-top: 1px solid var(--dbo-border) !important;
}

.footer .text-dark,
.footer .text-gray-800,
.footer a {
    color: var(--dbo-muted) !important;
}

/* ----- Cards / tables / forms ----- */
.card {
    background: var(--dbo-surface-1) !important;
    border: 1px solid var(--dbo-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: var(--dbo-card-shadow) !important;
    color: var(--dbo-ink);
}

.card-header,
.card-footer {
    background: transparent !important;
    border-color: var(--dbo-border) !important;
}

.card-title,
.card .text-gray-800,
.card .text-gray-700,
.card .text-dark {
    color: var(--dbo-ink) !important;
}

.card .text-muted,
.card .text-gray-600,
.card .text-gray-500 {
    color: var(--dbo-muted) !important;
}

.dbo-stat-card.card,
#kt_content_container > .row > [class*="col-"] > a.card {
    background: var(--dbo-surface-1) !important;
    border: 1px solid var(--dbo-border) !important;
    position: relative;
    overflow: hidden;
}

.dbo-stat-card.card::before,
#kt_content_container > .row > [class*="col-"] > a.card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--dbo-accent);
}

#kt_content_container > .row > [class*="col-"] > a.card .svg-icon,
#kt_content_container > .row > [class*="col-"] > a.card .text-white,
#kt_content_container > .row > [class*="col-"] > a.card .fw-semibold {
    color: var(--dbo-ink) !important;
}

#kt_content_container > .row > [class*="col-"] > a.card .fw-semibold {
    color: var(--dbo-muted) !important;
}

.table,
table.dataTable,
.table > :not(caption) > * > * {
    color: var(--dbo-ink) !important;
    border-color: var(--dbo-border) !important;
    background-color: transparent !important;
}

.table thead th,
table.dataTable thead th,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollHead table {
    background: var(--dbo-surface-2) !important;
    color: var(--dbo-muted) !important;
}

.table tbody tr:hover > * {
    background: var(--dbo-hover) !important;
}

.form-control,
.form-select,
.form-control-solid,
.select2-container--bootstrap5 .select2-selection {
    background-color: var(--dbo-surface-2) !important;
    border: 1px solid var(--dbo-border) !important;
    color: var(--dbo-ink) !important;
    border-radius: 0.55rem !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dbo-accent) !important;
    box-shadow: 0 0 0 3px var(--dbo-accent-icon-bg) !important;
}

.form-control::placeholder {
    color: var(--dbo-muted) !important;
}

.btn-primary,
.btn-success,
.btn.btn-success {
    background: var(--dbo-accent) !important;
    border-color: var(--dbo-accent) !important;
    color: #042026 !important;
    font-weight: 600 !important;
    border-radius: 0.55rem !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn.btn-success:hover {
    background: var(--dbo-accent-dim) !important;
    border-color: var(--dbo-accent-dim) !important;
    color: #042026 !important;
}

.btn-light,
.btn-light-primary,
.btn-secondary {
    background: var(--dbo-surface-2) !important;
    border-color: var(--dbo-border) !important;
    color: var(--dbo-ink) !important;
}

.nav-tabs .nav-link {
    color: var(--dbo-muted) !important;
    border: none !important;
}

.nav-tabs .nav-link.active {
    color: var(--dbo-accent-text-soft) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--dbo-accent);
}

.modal-content,
.dropdown-menu,
.menu-sub-dropdown,
.select2-dropdown {
    background: var(--dbo-surface-1) !important;
    border: 1px solid var(--dbo-border) !important;
    color: var(--dbo-ink) !important;
    box-shadow: var(--dbo-card-shadow) !important;
}

.page-title h1,
.dbo-page-title {
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--dbo-ink);
}

.dbo-page-sub {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--dbo-muted);
}

.dbo-page-head {
    margin: 0 0 1.25rem;
}

/* ----- Login ----- */
body.app-blank.dbo-login-body {
    background-image:
        radial-gradient(900px 500px at 50% -10%, var(--dbo-body-glow-1), transparent 55%),
        radial-gradient(700px 420px at 90% 10%, var(--dbo-body-glow-2), transparent 50%) !important;
}

.dbo-login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.dbo-login-inner {
    width: 100%;
    max-width: 24rem;
}

.dbo-login-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.dbo-login-hero .dbo-brand-mark {
    margin: 0 auto 1rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.85rem;
}

.dbo-login-hero .dbo-brand-mark svg {
    width: 2rem;
    height: 2rem;
}

.dbo-login-hero h1 {
    font-size: 1.25rem;
    font-weight: 650;
    color: var(--dbo-ink);
    margin: 0;
}

.dbo-login-hero p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--dbo-muted);
}

.dbo-login-hero a {
    color: var(--dbo-muted);
    text-decoration: underline;
}

.dbo-login-card {
    border: 1px solid var(--dbo-border);
    background: color-mix(in srgb, var(--dbo-surface-1) 82%, transparent);
    backdrop-filter: blur(8px);
    border-radius: 0.85rem;
    padding: 1.5rem;
    box-shadow: var(--dbo-card-shadow);
}

.dbo-login-card label span {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--dbo-muted);
}

.dbo-login-card .form-control {
    background: var(--dbo-surface-0) !important;
}

.dbo-login-card .btn {
    margin-top: 0.25rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.raise-hybrid-agent {
    background-color: color-mix(in srgb, var(--dbo-warn) 16%, var(--dbo-surface-1)) !important;
}

[data-theme="dark"] .apexcharts-menu-item {
    color: var(--dbo-ink) !important;
}

.dbo-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    border: 1px solid var(--dbo-border);
    background: var(--dbo-surface-1);
    color: var(--dbo-muted);
    border-radius: 0.55rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.dbo-theme-toggle:hover {
    background: var(--dbo-hover);
    color: var(--dbo-ink);
}