:root {
    --nx-bg: #f5f7fb;
    --nx-surface: #ffffff;
    --nx-surface-soft: #f8fafc;
    --nx-border: #dfe6ef;
    --nx-text: #172033;
    --nx-muted: #667085;
    --nx-primary: #2563eb;
    --nx-primary-soft: #eaf1ff;
    --nx-success: #159a68;
    --nx-success-soft: #e7f7ef;
    --nx-warning: #b7791f;
    --nx-warning-soft: #fff5dc;
    --nx-danger: #d14343;
    --nx-danger-soft: #ffecec;
    --nx-info: #0f8da8;
    --nx-info-soft: #e5f7fb;
    --nx-shadow: 0 14px 40px rgba(23, 32, 51, .08);
    --nx-shadow-soft: 0 8px 24px rgba(23, 32, 51, .06);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0;
}

#wrapper,
#content-wrapper,
#content {
    background: var(--nx-bg);
}

a {
    color: var(--nx-primary);
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.me-2 {
    margin-right: .5rem !important;
}

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

.align-middle,
.table.align-middle td,
.table.align-middle th {
    vertical-align: middle !important;
}

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

.text-gray-800 {
    color: var(--nx-text) !important;
}

.sidebar.sidebar-light {
    background: var(--nx-surface);
    border-right: 1px solid var(--nx-border);
    box-shadow: 8px 0 30px rgba(23, 32, 51, .04);
}

.sidebar .sidebar-brand {
    min-height: 82px;
    padding: 18px 16px;
    background: var(--nx-surface) !important;
}

.sidebar .sidebar-brand-icon img {
    max-width: 152px;
    max-height: 54px;
    object-fit: contain;
}

.sidebar .sidebar-divider {
    border-top: 1px solid var(--nx-border);
    margin: .75rem 1rem;
}

.sidebar .sidebar-heading {
    color: #8a94a6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0 1.25rem .35rem;
    text-transform: uppercase;
}

.sidebar .nav-item .nav-link {
    align-items: center;
    border-radius: 8px;
    color: #526174;
    display: flex;
    font-weight: 600;
    margin: 4px 12px;
    padding: .82rem 1rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar .nav-item .nav-link i {
    color: inherit !important;
    font-size: 15px;
    margin-right: .75rem;
    text-align: center;
    width: 20px;
}

.sidebar .nav-item .nav-link:hover {
    background: var(--nx-surface-soft);
    color: var(--nx-text);
    transform: translateX(2px);
}

.sidebar .nav-item.active .nav-link {
    background: var(--nx-primary-soft);
    color: var(--nx-primary);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--nx-primary);
}


/*.sidebar .nav-item.active .nav-link {*/
/*    background: transparent !important;*/
/*    box-shadow: none !important;*/
/*}*/

/*.sidebar .nav-item.active .nav-link i {*/
/*    width: 42px;*/
/*    height: 42px;*/
/*    line-height: 42px;*/
/*    text-align: center;*/
/*    border-radius: 50%;*/
/*    background: #edf2ff;*/
/*    color: #2f5cff !important;*/
/*    display: inline-block;*/
/*}*/


/*.sidebar .nav-link:hover {*/
/*    background: transparent !important;*/
/*}*/

/*.sidebar .nav-link:hover i {*/
/*    width: 42px;*/
/*    height: 42px;*/
/*    line-height: 42px;*/
/*    border-radius: 50%;*/
/*    background: #f4f6fb;*/
/*}*/


.sidebar .version {
    background: var(--nx-surface-soft);
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    color: var(--nx-muted);
    font-size: 12px;
    margin: .5rem 1rem 1rem;
    padding: .65rem .75rem;
}

.topbar,
.bg-navbar {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid var(--nx-border);
    box-shadow: none;
}

.topbar {
    min-height: 72px;
    position: sticky;
    top: 0;
    z-index: 990;
}

.topbar .btn-link {
    color: var(--nx-text);
}

.topbar .dropdown-menu {
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    box-shadow: var(--nx-shadow-soft);
}

.profile-trigger {
    align-items: center;
    background: var(--nx-surface-soft);
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    color: var(--nx-text);
    display: flex;
    gap: .65rem;
    padding: .35rem .55rem;
}

.profile-trigger .img-profile {
    height: 36px;
    width: 36px;
    object-fit: contain;
}

.profile-trigger .profile-name {
    color: var(--nx-text);
    font-weight: 700;
    line-height: 1;
}

.profile-trigger .profile-role {
    color: var(--nx-muted);
    display: block;
    font-size: 11px;
    line-height: 1.2;
}

.container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.page-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-kicker {
    color: var(--nx-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.page-title {
    color: var(--nx-text);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.page-subtitle {
    color: var(--nx-muted);
    font-size: 14px;
    margin: .4rem 0 0;
}

.pro-card,
.card,
.premium-card,
.premium-section {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--nx-shadow-soft) !important;
}

.pro-card {
    overflow: hidden;
}

.pro-card-header,
.card-header {
    background: var(--nx-surface) !important;
    border-bottom: 1px solid var(--nx-border) !important;
    padding: 1rem 1.25rem;
}

.pro-card-body {
    padding: 1.25rem;
}

.metric-card {
    display: flex;
    gap: 1rem;
    height: 100%;
    justify-content: space-between;
    padding: 1.25rem;
}

.metric-label {
    color: var(--nx-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-value {
    color: var(--nx-text);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    margin-top: .5rem;
}

.metric-note {
    color: var(--nx-muted);
    font-size: 13px;
    margin-top: .55rem;
}

.metric-icon,
.device-icon {
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex: 0 0 auto;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.metric-icon i,
.device-icon i {
    font-size: 21px;
}

.tone-primary {
    background: var(--nx-primary-soft);
    color: var(--nx-primary);
}

.tone-success {
    background: var(--nx-success-soft);
    color: var(--nx-success);
}

.tone-warning {
    background: var(--nx-warning-soft);
    color: var(--nx-warning);
}

.tone-danger {
    background: var(--nx-danger-soft);
    color: var(--nx-danger);
}

.tone-info {
    background: var(--nx-info-soft);
    color: var(--nx-info);
}

.badge,
.premium-badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .42rem .7rem;
}

.badge-success,
.badge-active {
    background: var(--nx-success-soft) !important;
    color: #116448 !important;
}

.badge-danger,
.badge-inactive {
    background: var(--nx-danger-soft) !important;
    color: #a33232 !important;
}

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

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

.btn {
    border-radius: 7px;
    font-weight: 700;
}

.btn-primary {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.btn-success {
    background: var(--nx-success);
    border-color: var(--nx-success);
}

.btn-warning {
    background: #f2b84b;
    border-color: #f2b84b;
    color: #3f2a08;
}

.btn-dark {
    background: var(--nx-text);
    border-color: var(--nx-text);
}

.form-control {
    border-color: var(--nx-border);
    border-radius: 7px;
    color: var(--nx-text);
    min-height: 42px;
}

.form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

.table {
    color: var(--nx-text);
}

.table thead th {
    background: var(--nx-surface-soft);
    border-bottom: 1px solid var(--nx-border);
    color: #475467;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.table td,
.table th {
    border-top-color: #eef2f7;
    padding: .9rem .85rem;
}

.table-hover tbody tr:hover {
    background: #f8fbff;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: var(--nx-muted);
    font-size: 13px;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important;
}

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

.switch,
.app-toggle {
    display: inline-block;
    height: 26px;
    margin-bottom: 0;
    position: relative;
    width: 50px;
}

.switch input,
.app-toggle input {
    height: 0;
    opacity: 0;
    width: 0;
}

.slider,
.app-slider {
    background: #cbd5e1;
    border-radius: 30px;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .2s;
}

.slider:before,
.app-slider:before {
    background: #fff;
    border-radius: 50%;
    bottom: 3px;
    content: "";
    height: 20px;
    left: 3px;
    position: absolute;
    transition: .2s;
    width: 20px;
}

.switch input:checked + .slider,
.app-toggle input:checked + .app-slider {
    background: var(--nx-success);
}

.switch input:checked + .slider:before,
.app-toggle input:checked + .app-slider:before {
    transform: translateX(24px);
}

.chart-box {
    height: 340px;
}

.empty-state {
    align-items: center;
    color: var(--nx-muted);
    display: flex;
    flex-direction: column;
    gap: .65rem;
    justify-content: center;
    min-height: 180px;
    text-align: center;
}

.empty-state-icon {
    align-items: center;
    background: var(--nx-surface-soft);
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    color: var(--nx-muted);
    display: flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.sticky-footer {
    border-top: 1px solid var(--nx-border);
}

.login-page {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(21, 154, 104, .05) 1px, transparent 1px),
        var(--nx-bg);
    background-size: 36px 36px;
    display: flex;
    min-height: 100vh;
    padding: 32px 16px;
}

.login-shell {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: 8px;
    box-shadow: var(--nx-shadow);
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 620px;
    overflow: hidden;
    width: 100%;
}

.login-brand-panel {
    background: #172033;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px;
}

.login-brand-mark {
    background: #fff;
    border-radius: 8px;
    display: inline-flex;
    padding: 12px 16px;
}

.login-brand-mark img {
    height: 54px;
    max-width: 210px;
    object-fit: contain;
}

.login-brand-panel h1 {
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    margin: 32px 0 14px;
}

.login-brand-panel p {
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.login-signal-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 36px;
}

.login-signal {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    padding: 14px;
}

.login-signal strong {
    color: #fff;
    display: block;
    font-size: 20px;
    font-weight: 800;
}

.login-signal span {
    color: rgba(255, 255, 255, .68);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.login-form-panel {
    align-items: center;
    display: flex;
    padding: 44px;
}

.login-form-wrap {
    margin: 0 auto;
    max-width: 410px;
    width: 100%;
}

.login-form-wrap h2 {
    color: var(--nx-text);
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 .5rem;
}

.login-form-wrap .lead {
    color: var(--nx-muted);
    font-size: 15px;
    margin-bottom: 2rem;
}

.input-shell {
    position: relative;
}

.input-shell .input-icon {
    color: #98a2b3;
    left: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.login-form .form-control {
    height: 52px;
    padding-left: 44px;
}

.login-form .btn {
    height: 52px;
}

.login-mini-logo {
    display: none;
    margin-bottom: 1.25rem;
}

.login-mini-logo img {
    max-height: 54px;
    max-width: 210px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .page-header {
        flex-direction: column;
    }

    .login-shell {
        grid-template-columns: 1fr;
        max-width: 560px;
        min-height: auto;
    }

    .login-brand-panel {
        display: none;
    }

    .login-mini-logo {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-title {
        font-size: 24px;
    }

    .metric-value {
        font-size: 30px;
    }

    .topbar {
        min-height: 64px;
    }

    .profile-trigger .profile-copy {
        display: none;
    }

    .login-page {
        padding: 16px;
    }

    .login-form-panel {
        padding: 28px 22px;
    }

    .login-form-wrap h2 {
        font-size: 26px;
    }
}