/**
 * Owebest Admin — modern overlay for AdminLTE 2 / Bootstrap 3.
 * Keeps existing markup; improves typography, spacing, and visual hierarchy.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --ob-admin-primary: #ef6a32;
    --ob-admin-primary-dark: #d95a25;
    --ob-admin-accent: #55c9c7;
    --ob-admin-accent-dark: #28b4b0;
    --ob-admin-sidebar: #0d1528;
    --ob-admin-sidebar-hover: #16203a;
    --ob-admin-sidebar-active: #1b2746;
    --ob-admin-bg: #f4f8fb;
    --ob-admin-surface: #ffffff;
    --ob-admin-border: #dbe6ee;
    --ob-admin-text: #0f172a;
    --ob-admin-muted: #6b7a90;
    --ob-admin-radius: 10px;
    --ob-admin-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.08);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ob-admin-text);
    background: var(--ob-admin-bg) !important;
}

.main-header .logo {
    background: #030712 !important;
    border-right: 1px solid rgba(15, 23, 42, 0.4);
    border-bottom: 1px solid rgba(15, 23, 42, 0.4);
    box-shadow: var(--ob-admin-shadow);
    width: 230px;
    height: 50px;
    padding: 0 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.main-header .navbar {
    background: linear-gradient(90deg, #ffffff 0%, #f8fcff 58%, #eefbfa 100%) !important;
    border-bottom: 1px solid var(--ob-admin-border);
    box-shadow: var(--ob-admin-shadow);
}

.main-header .logo {
    color: #fff !important;
    font-weight: 700;
}

.main-header .navbar .navbar-brand {
    color: var(--ob-admin-text) !important;
    font-weight: 700;
}

.main-header .logo .logo-lg {
    display: flex !important;
    align-items: center;
    width: 100%;
    line-height: 1;
}

.main-header .logo .logo-mini {
    display: none !important;
}

.main-header .logo .logo-lg img {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    max-height: 44px;
    object-fit: contain;
    object-position: left center;
}

.main-header .logo .logo-mini img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    object-position: left center;
}

@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .main-header .logo {
        width: 50px;
        padding: 0;
        justify-content: center;
    }

    .sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .sidebar-mini.sidebar-collapse .main-header .logo .logo-lg {
        display: none !important;
    }
}

.user-header > img {
    display: none;
}

.navbar-custom-menu > .navbar-nav.ob-header-actions {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 0;
    padding: 0 12px 0 0;
    gap: 10px;
}

.navbar-custom-menu > .navbar-nav.ob-header-actions > li {
    float: none;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site,
.main-header .navbar .nav > li > a.ob-view-site {
    height: 36px !important;
    padding: 0 14px !important;
    margin: 0;
    border-radius: 999px;
    background: #0d1528 !important;
    border: 1px solid #0d1528 !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px rgba(13, 21, 40, 0.18);
    gap: 8px;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site i,
.main-header .navbar .nav > li > a.ob-view-site i {
    color: #55c9c7 !important;
    font-size: 13px;
    margin: 0;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site:hover,
.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site:focus,
.main-header .navbar .nav > li > a.ob-view-site:hover,
.main-header .navbar .nav > li > a.ob-view-site:focus {
    background: #ef6a32 !important;
    border-color: #ef6a32 !important;
    color: #ffffff !important;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site:hover i,
.main-header .navbar .nav > li > a.ob-view-site:hover i {
    color: #ffffff !important;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-user-trigger,
.main-header .navbar .nav > li > a.ob-user-trigger,
.user-menu .dropdown-toggle.ob-user-trigger {
    height: 50px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.skin-blue-light .main-header .navbar .nav > li.open > a.ob-user-trigger,
.skin-blue-light .main-header .navbar .nav > li > a.ob-user-trigger:hover,
.skin-blue-light .main-header .navbar .nav > li > a.ob-user-trigger:focus {
    background: transparent !important;
}

.ob-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 3px 12px 3px 3px;
    background: #ffffff;
    border: 1px solid #d5e2ec;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.ob-user-trigger:hover .ob-user-chip,
.user-menu.open .ob-user-chip {
    border-color: #b7c9d8;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.ob-user-chip-avatar,
.ob-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef6a32 0%, #55c9c7 100%);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(239, 106, 50, 0.35);
}

.ob-user-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 190px;
    line-height: 1.2;
    text-align: left;
}

.ob-user-chip-label {
    color: #64748b !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ob-user-chip-email {
    color: #0f172a !important;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ob-user-chip > .fa-angle-down {
    color: #64748b !important;
    font-size: 12px;
    margin: 0 2px 0 0;
}

.navbar-custom-menu > .navbar-nav > li.user-menu > .dropdown-menu.ob-user-dropdown,
.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown {
    width: 300px !important;
    min-width: 300px !important;
    padding: 0 !important;
    margin-top: 8px !important;
    right: 0 !important;
    left: auto !important;
    border: 1px solid #dbe6ee !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
    overflow: hidden !important;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown:before,
.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown:after {
    display: none !important;
}

.ob-user-dropdown > .ob-user-card {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: auto !important;
}

.ob-user-card-inner {
    background: #ffffff;
    overflow: hidden;
}

.ob-user-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, #f8fbfc 0%, #ffffff 100%);
    border-bottom: 1px solid #e6eef5;
}

.ob-user-avatar {
    width: 44px;
    height: 44px;
    font-size: 14px;
}

.ob-user-meta {
    min-width: 0;
    display: block;
}

.ob-user-meta strong {
    display: block;
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

.ob-user-meta em,
.ob-user-meta small {
    display: block;
    margin-top: 3px;
    color: #64748b !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    word-break: break-all;
}

.ob-user-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown .ob-user-btn,
.skin-blue-light .main-header .navbar .dropdown-menu .ob-user-btn,
.skin-blue-light .main-header .navbar .dropdown-menu.ob-user-dropdown a.ob-user-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown .ob-user-btn-light,
.skin-blue-light .main-header .navbar .dropdown-menu .ob-user-btn-light,
.skin-blue-light .main-header .navbar .dropdown-menu.ob-user-dropdown a.ob-user-btn-light {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #d5e2ec !important;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown .ob-user-btn-light:hover,
.skin-blue-light .main-header .navbar .dropdown-menu .ob-user-btn-light:hover,
.skin-blue-light .main-header .navbar .dropdown-menu.ob-user-dropdown a.ob-user-btn-light:hover {
    background: #eefbfa !important;
    border-color: #55c9c7 !important;
    color: #0f172a !important;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown .ob-user-btn-primary,
.skin-blue-light .main-header .navbar .dropdown-menu .ob-user-btn-primary,
.skin-blue-light .main-header .navbar .dropdown-menu.ob-user-dropdown a.ob-user-btn-primary {
    background: #ef6a32 !important;
    color: #ffffff !important;
    border: 1px solid #ef6a32 !important;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown .ob-user-btn-primary:hover,
.skin-blue-light .main-header .navbar .dropdown-menu .ob-user-btn-primary:hover,
.skin-blue-light .main-header .navbar .dropdown-menu.ob-user-dropdown a.ob-user-btn-primary:hover {
    background: #d95a25 !important;
    color: #ffffff !important;
}

.navbar-nav > .user-menu > .dropdown-menu.ob-user-dropdown .ob-user-btn i {
    color: inherit !important;
    width: auto;
    margin: 0;
}

@media (max-width: 991px) {
    .navbar-custom-menu > .navbar-nav > li.user-menu {
        position: relative !important;
    }

    .navbar-custom-menu > .navbar-nav > li.user-menu > .dropdown-menu.ob-user-dropdown {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        width: 300px !important;
        background: #ffffff !important;
    }
}

.main-sidebar,
.left-side {
    background: var(--ob-admin-sidebar) !important;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.12);
}

.main-sidebar {
    padding-top: 6px;
}

.sidebar-menu > li.header {
    color: #94a3b8 !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent !important;
    padding: 16px 18px 8px;
}

.sidebar-menu > li > a {
    border-left: 3px solid transparent;
    color: #d9e2f1 !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 14px 16px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background: var(--ob-admin-sidebar-hover) !important;
    color: #fff !important;
    border-left-color: var(--ob-admin-accent);
    transform: translateX(1px);
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    width: 22px;
    margin-right: 8px;
    color: #edf4ff;
    text-align: center;
}

.sidebar-menu .treeview-menu {
    background: #15203a !important;
    padding: 8px 0 10px;
    margin: 0 !important;
}

/* Keep open menus visible after navigating to a submenu page */
.sidebar-menu li.treeview.active > .treeview-menu,
.sidebar-menu li.treeview.menu-open > .treeview-menu,
.skin-blue-light .sidebar-menu li.treeview.active > .treeview-menu,
.skin-blue-light .sidebar-menu li.treeview.menu-open > .treeview-menu {
    display: block !important;
}

.skin-blue-light .sidebar-menu li.treeview > .treeview-menu,
.skin-blue-light .sidebar-menu li.active > .treeview-menu,
.skin-blue-light .sidebar-menu li.menu-open > .treeview-menu,
.sidebar-menu li.treeview > .treeview-menu {
    background: #15203a !important;
}

.sidebar-menu .treeview-menu > li > a {
    color: #d6e3f6 !important;
    padding: 11px 16px 11px 46px;
    font-size: 14px;
    font-weight: 500;
    background: transparent !important;
}

.sidebar-menu .treeview-menu > li > a .fa {
    color: var(--ob-admin-accent) !important;
}

.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.menu-open > a {
    background: rgba(85, 201, 199, 0.14) !important;
    color: #fff !important;
}

.sidebar-menu .treeview-menu > li.active > a .fa,
.sidebar-menu .treeview-menu > li > a:hover .fa {
    color: #8bf0ee !important;
}

.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu > li.active > .treeview-menu {
    background: #15203a !important;
}

.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    color: #d6e3f6 !important;
}

.skin-blue-light .sidebar-menu .treeview-menu > li,
.skin-blue-light .sidebar-menu .treeview-menu > li > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a span,
.skin-blue-light .sidebar-menu .treeview-menu > li > a i {
    background: transparent !important;
    color: #d6e3f6 !important;
}

.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
    background: rgba(85, 201, 199, 0.14) !important;
    color: #fff !important;
}

.sidebar-menu .pull-right-container,
.sidebar-menu .fa-angle-right,
.sidebar-menu .pull-right {
    color: #a9bdd8 !important;
}

.sidebar-menu li.treeview > a .fa-angle-right {
    display: inline-block !important;
    width: auto;
    margin-right: 8px;
    transition: transform 0.2s ease, color 0.2s ease;
    transform: rotate(0deg);
    transform-origin: center;
}

.sidebar-menu li.treeview.active > a .fa-angle-right,
.sidebar-menu li.treeview.menu-open > a .fa-angle-right,
.sidebar-menu li.treeview:has(> .treeview-menu.menu-open) > a .fa-angle-right,
.sidebar-menu li.treeview:has(> .treeview-menu[style*="display: block"]) > a .fa-angle-right {
    color: var(--ob-admin-accent) !important;
    transform: rotate(90deg) !important;
}

.content-wrapper {
    background: var(--ob-admin-bg) !important;
}

.content-header > h1,
.content-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ob-admin-text);
    margin: 0;
}

.content-header {
    background: transparent;
    padding: 20px 24px 8px;
}

section.content {
    padding: 0 24px 24px;
}

.box {
    border: 1px solid var(--ob-admin-border);
    border-radius: var(--ob-admin-radius);
    box-shadow: var(--ob-admin-shadow);
    background: var(--ob-admin-surface);
}

.box.box-success,
.box.box-primary,
.box.box-solid {
    border-top: none !important;
}

.box-header {
    border-bottom: 1px solid var(--ob-admin-border);
    padding: 16px 20px;
}

.box-header .box-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ob-admin-text);
}

.box-body {
    padding: 20px;
}

.box-footer {
    background: #f8fafc;
    border-top: 1px solid var(--ob-admin-border);
    border-radius: 0 0 var(--ob-admin-radius) var(--ob-admin-radius);
}

.btn-primary {
    background: var(--ob-admin-primary) !important;
    border-color: var(--ob-admin-primary) !important;
    border-radius: 8px;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--ob-admin-primary-dark) !important;
    border-color: var(--ob-admin-primary-dark) !important;
}

.btn-info {
    background: var(--ob-admin-accent) !important;
    border-color: var(--ob-admin-accent) !important;
    border-radius: 8px;
}

.btn-success {
    background: #128c7e !important;
    border-color: #128c7e !important;
    border-radius: 8px;
    font-weight: 600;
}

.btn-success:hover,
.btn-success:focus {
    background: #0f7a6e !important;
    border-color: #0f7a6e !important;
}

.form-control {
    border: 1px solid var(--ob-admin-border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: var(--ob-admin-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.table {
    margin-bottom: 0;
}

.ob-admin-table > thead > tr > th {
    background: #f8fafc;
    border-bottom: 2px solid var(--ob-admin-border) !important;
    color: var(--ob-admin-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ob-admin-table > tbody > tr:hover {
    background: #f8fafc;
}

.ob-admin-toolbar h4 {
    margin: 8px 0 0;
    font-weight: 600;
}

.main-footer {
    background: var(--ob-admin-surface) !important;
    border-top: 1px solid var(--ob-admin-border);
    color: var(--ob-admin-muted);
}

.user-menu .dropdown-menu {
    border-radius: var(--ob-admin-radius);
    box-shadow: var(--ob-admin-shadow);
    border: 1px solid var(--ob-admin-border);
}

.breadcrumb {
    background: transparent;
    padding-left: 0;
    margin-bottom: 0;
}

.breadcrumb > li + li:before {
    color: var(--ob-admin-muted);
}

.label {
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 10px;
}

.label-info {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.label-default {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

.direct-chat-primary .right > .direct-chat-text {
    background: var(--ob-admin-primary);
    border-color: var(--ob-admin-primary);
}

.direct-chat-text {
    border-radius: 12px;
}

.ob-chat-thread {
    min-height: 320px;
    max-height: 70vh;
    overflow-y: auto;
}

.ob-session-meta .dl-horizontal dt {
    width: 110px;
    color: var(--ob-admin-muted);
    font-weight: 500;
}

.ob-session-meta .dl-horizontal dd {
    margin-left: 130px;
    margin-bottom: 10px;
}

.ob-session-meta code {
    background: #f1f5f9;
    color: #334155;
    border-radius: 6px;
    padding: 2px 6px;
    word-break: break-all;
    white-space: normal;
}

.skin-blue-light .main-header .navbar .sidebar-toggle:hover,
.skin-blue-light .main-header .navbar .nav > li > a:hover {
    background: #f1f5f9 !important;
}

.skin-blue-light .main-header .navbar .nav > li > a {
    color: var(--ob-admin-text) !important;
    font-weight: 600;
}

.main-header .sidebar-toggle {
    color: var(--ob-admin-text) !important;
}

.main-header .navbar .nav > li > a {
    height: 50px;
    display: flex;
    align-items: center;
}

.main-header .navbar .nav > li > a i {
    color: var(--ob-admin-primary);
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site,
.main-header .navbar .nav > li > a.ob-view-site {
    background: #0d1528 !important;
    color: #ffffff !important;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site:hover,
.skin-blue-light .main-header .navbar .nav > li > a.ob-view-site:focus,
.main-header .navbar .nav > li > a.ob-view-site:hover {
    background: #ef6a32 !important;
    color: #ffffff !important;
}

.skin-blue-light .main-header .navbar .nav > li > a.ob-user-trigger,
.skin-blue-light .main-header .navbar .nav > li > a.ob-user-trigger:hover,
.skin-blue-light .main-header .navbar .nav > li.open > a.ob-user-trigger {
    background: transparent !important;
    color: #0f172a !important;
}

.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    margin-top: 0;
}

.navbar-brand.hidden-xs {
    letter-spacing: 0.02em;
}

.ob-password-lead {
    color: var(--ob-admin-muted);
    margin: 0 0 18px;
}

.box.box-solid.box-success > .box-header,
.box.box-solid.box-primary > .box-header {
    background: var(--ob-admin-surface) !important;
    color: var(--ob-admin-text) !important;
}

.box.box-solid.box-success > .box-header .box-title,
.box.box-solid.box-primary > .box-header .box-title {
    color: var(--ob-admin-text);
}

.content .table > thead > tr > th {
    background: #f8fafc;
    border-bottom: 2px solid var(--ob-admin-border) !important;
    color: var(--ob-admin-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.content .table > tbody > tr:hover {
    background: #f8fafc;
}

.content .table > tbody > tr > td {
    vertical-align: middle;
}

.form-group > label,
.content label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

select.form-control,
textarea.form-control {
    border-radius: 8px;
}

.checkbox label,
.radio label {
    font-weight: 500;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 8px !important;
    margin: 0 3px;
    border-color: var(--ob-admin-border);
    color: var(--ob-admin-text);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--ob-admin-primary) !important;
    border-color: var(--ob-admin-primary) !important;
}

.content .message,
.content .alert,
.ob-login-card .message {
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    cursor: pointer;
}

.content .message.success,
.content .alert-success {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.content .message.error,
.content .alert-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.content .message.hidden {
    display: none;
}

.btn-danger {
    border-radius: 8px;
}

.btn-sm,
.btn-xs {
    border-radius: 7px;
}

.box-body h4 {
    font-weight: 600;
    margin-top: 0;
}

.ob-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ob-dash-subtitle {
    color: var(--ob-admin-muted);
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 400;
}

.ob-stat-row {
    margin-left: -8px;
    margin-right: -8px;
}

.ob-stat-row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.ob-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--ob-admin-surface);
    border: 1px solid var(--ob-admin-border);
    border-radius: var(--ob-admin-radius);
    box-shadow: var(--ob-admin-shadow);
    padding: 18px 16px;
    margin-bottom: 16px;
    min-height: 118px;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ob-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}

.ob-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.ob-stat-blue .ob-stat-icon { background: #2563eb; }
.ob-stat-teal .ob-stat-icon { background: #0d9488; }
.ob-stat-indigo .ob-stat-icon { background: #4f46e5; }
.ob-stat-green .ob-stat-icon { background: #16a34a; }
.ob-stat-amber .ob-stat-icon { background: #d97706; }
.ob-stat-rose .ob-stat-icon { background: #e11d48; }
.ob-stat-slate .ob-stat-icon { background: #475569; }
.ob-stat-violet .ob-stat-icon { background: #7c3aed; }

.ob-stat-label {
    display: block;
    color: var(--ob-admin-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ob-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ob-admin-text);
}

.ob-stat-meta {
    display: block;
    margin-top: 4px;
    color: var(--ob-admin-muted);
    font-size: 12px;
}

.ob-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbd5e1;
    margin: 0 6px 2px;
}

.ob-trend {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 220px;
    padding-top: 8px;
}

.ob-trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.ob-trend-bar-wrap {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ob-trend-bar {
    width: 70%;
    max-width: 28px;
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    border-radius: 8px 8px 4px 4px;
    display: block;
}

.ob-trend-count {
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    color: var(--ob-admin-text);
}

.ob-trend-label {
    font-size: 10px;
    color: var(--ob-admin-muted);
    white-space: nowrap;
}

.ob-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ob-quick-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--ob-admin-border);
    border-radius: 8px;
    color: var(--ob-admin-text);
    font-weight: 600;
    font-size: 13px;
    background: #f8fafc;
}

.ob-quick-link:hover {
    background: #eff6ff;
    color: var(--ob-admin-primary);
    text-decoration: none;
}

.ob-quick-link i {
    color: var(--ob-admin-primary);
    width: 16px;
}

.ob-secondary-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ob-secondary-stats span {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.box-header .box-tools a {
    font-weight: 600;
    color: var(--ob-admin-primary);
}

.ob-login-page {
    background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, #0ea5e9 140%) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ob-login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ob-login-brand {
    text-align: center;
    margin-bottom: 20px;
}

.ob-login-brand img {
    display: block;
    margin: 0 auto;
    max-width: 220px;
    height: auto;
    background: #030712;
    padding: 10px 14px;
    border-radius: 12px;
}

.ob-login-brand p {
    color: rgba(255, 255, 255, 0.8);
    margin: 10px 0 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.ob-login-page .login-box {
    width: 400px;
    margin: 0;
}

.ob-login-card {
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
    padding: 28px 28px 20px !important;
}

.ob-login-card h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
}

.ob-login-card .login-box-msg {
    padding: 0 0 16px;
    color: #64748b;
}

.ob-login-card .btn-lg {
    margin-top: 8px;
    height: 44px;
    font-weight: 600;
}

.ob-login-back {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #64748b;
}

@media (max-width: 767px) {
    section.content {
        padding: 0 12px 16px;
    }

    .content-header {
        padding: 16px 12px 8px;
    }

    .ob-trend {
        overflow-x: auto;
    }

    .ob-quick-grid {
        grid-template-columns: 1fr;
    }

    .ob-login-page .login-box {
        width: 100%;
        max-width: 400px;
    }
}

.ob-wa {
    display: flex;
    min-height: calc(100vh - 170px);
    background: #fff;
    border: 1px solid var(--ob-admin-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ob-admin-shadow);
}

.ob-wa-list {
    width: 340px;
    max-width: 38%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #d8e0e8;
    background: #fff;
}

.ob-wa-list-head {
    padding: 14px 14px 12px;
    background: #f0f2f5;
    border-bottom: 1px solid #d8e0e8;
}

.ob-wa-list-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ob-wa-list-title strong {
    font-size: 18px;
    color: #111b21;
}

.ob-wa-list-title span {
    color: #667781;
    font-size: 12px;
    font-weight: 600;
}

.ob-wa-search {
    position: relative;
}

.ob-wa-search i {
    position: absolute;
    left: 12px;
    top: 10px;
    color: #8696a0;
}

.ob-wa-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #d5e0ea;
}

.ob-wa-people {
    overflow-y: auto;
    flex: 1;
}

.ob-wa-person {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
}

.ob-wa-person:hover {
    background: #f5f6f6;
}

.ob-wa-person.is-active {
    background: #e9edef;
}

.ob-wa-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef6a32 0%, #55c9c7 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.ob-wa-person-body {
    min-width: 0;
    flex: 1;
}

.ob-wa-person-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.ob-wa-name {
    color: #111b21 !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
}

.ob-wa-name:hover {
    color: #ef6a32 !important;
    text-decoration: underline !important;
}

.ob-wa-time {
    color: #667781;
    font-size: 11px;
    white-space: nowrap;
}

.ob-wa-preview {
    display: block;
    color: #667781;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.ob-wa-meta {
    display: block;
    margin-top: 3px;
    color: #8696a0;
    font-size: 11px;
}

.ob-wa-meta em {
    font-style: normal;
    color: #0d9488;
    font-weight: 600;
    margin-left: 6px;
}

.ob-wa-pane {
    flex: 1;
    min-width: 0;
    background: #efeae2;
    position: relative;
}

.ob-wa-pane.is-loading:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.35);
}

.ob-wa-chat {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ob-wa-chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f0f2f5;
    border-bottom: 1px solid #d8e0e8;
}

.ob-wa-chat-who {
    min-width: 0;
    flex: 1;
}

.ob-wa-chat-who .ob-wa-name {
    display: block;
    line-height: 1.2;
}

.ob-wa-chat-who span {
    display: block;
    color: #667781;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-wa-open {
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d5e0ea;
    color: #0f172a !important;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
}

.ob-wa-open:hover {
    background: #0d1528;
    border-color: #0d1528;
    color: #fff !important;
}

.ob-wa-thread {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px 28px;
    background-color: #ece5dd;
    background-image: radial-gradient(rgba(0,0,0,0.05) 0.7px, transparent 0.7px);
    background-size: 16px 16px;
}

.ob-wa-row {
    display: flex;
    margin-bottom: 8px;
}

.ob-wa-row.is-user {
    justify-content: flex-start;
}

.ob-wa-row.is-bot {
    justify-content: flex-end;
}

.ob-wa-bubble {
    max-width: min(74%, 560px);
    padding: 7px 9px 5px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    position: relative;
}

.ob-wa-row.is-user .ob-wa-bubble {
    background: #fff;
    border-top-left-radius: 0;
}

.ob-wa-row.is-bot .ob-wa-bubble {
    background: #d9fdd3;
    border-top-right-radius: 0;
}

.ob-wa-bubble-text {
    color: #111b21;
    font-size: 14.2px;
    line-height: 1.45;
    word-wrap: break-word;
}

.ob-wa-stamp {
    display: block;
    text-align: right;
    color: #667781;
    font-size: 11px;
    margin-top: 4px;
}

.ob-wa-blank,
.ob-wa-empty-list,
.ob-wa-empty-chat {
    padding: 48px 24px;
    text-align: center;
    color: #667781;
}

.ob-wa-blank i {
    font-size: 42px;
    color: #55c9c7;
    margin-bottom: 12px;
}

.ob-inbox-actions {
    margin-bottom: 12px;
}

@media (max-width: 991px) {
    .ob-wa {
        flex-direction: column;
        min-height: 0;
    }

    .ob-wa-list {
        width: 100%;
        max-width: none;
        max-height: 320px;
        border-right: 0;
        border-bottom: 1px solid #d8e0e8;
    }

    .ob-wa-pane {
        min-height: 480px;
    }
}