:root {
    --portal-sidebar: #111827;
    --portal-sidebar-muted: #9aa6bd;
    --portal-accent: #4f6df5;
    --portal-accent-hover: #3f5add;
    --portal-accent-soft: #edf2ff;
    --portal-teal: #12a594;
    --portal-amber: #d89022;
    --portal-rose: #e05264;
    --portal-green: #1fa66a;
    --portal-ink: #182033;
    --portal-muted: #697388;
    --portal-line: #e5e9f2;
    --portal-line-strong: #d7ddea;
    --portal-bg: #f4f7fb;
    --portal-panel: #ffffff;
    --portal-panel-soft: #f8faff;
    --portal-shadow: 0 18px 42px rgba(25, 33, 58, .08);
    --portal-shadow-soft: 0 10px 26px rgba(25, 33, 58, .06);
}

body {
    background: linear-gradient(180deg, #f7f9ff 0, var(--portal-bg) 280px);
    color: var(--portal-ink);
}

a {
    color: var(--portal-accent);
}

a:hover {
    color: var(--portal-accent-hover);
}

:focus-visible {
    outline: 3px solid rgba(79, 109, 245, .18);
    outline-offset: 2px;
}

.portal-sidebar {
    background: linear-gradient(180deg, #171f36 0, var(--portal-sidebar) 100%);
    box-shadow: 18px 0 42px rgba(17, 24, 39, .14);
}

.portal-brand {
    background: rgba(255, 255, 255, .04);
    min-height: 76px;
}

.portal-brand-mark,
.brand-mark {
    background: var(--portal-accent);
    color: #fff;
    box-shadow: 0 12px 22px rgba(79, 109, 245, .22);
}

.portal-brand-logo,
.brand-logo {
    border-color: rgba(79, 109, 245, .18);
    box-shadow: 0 8px 18px rgba(24, 32, 51, .08);
}

.portal-nav a {
    color: var(--portal-sidebar-muted);
    font-weight: 650;
}

.portal-nav a.active,
.portal-nav a:hover {
    background: rgba(79, 109, 245, .16);
    color: #fff;
}

.portal-nav a.active {
    box-shadow: inset 3px 0 0 var(--portal-accent);
}

.portal-nav-label {
    color: rgba(255, 255, 255, .42);
}

.portal-topbar {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--portal-line);
    box-shadow: 0 8px 20px rgba(24, 32, 51, .035);
}

.portal-topbar h1 {
    color: var(--portal-ink);
    font-weight: 720;
}

.user-chip,
.content-wrap > .d-flex.justify-content-end.mb-3,
.content-wrap > .panel.mb-3.text-end {
    border-color: var(--portal-line);
    background: #fff;
    box-shadow: var(--portal-shadow-soft);
}

.metric-card,
.panel,
.login-panel,
.register-client-shell > section,
.register-partner-shell > section {
    border-color: var(--portal-line);
    border-radius: 8px;
    box-shadow: var(--portal-shadow-soft);
}

.panel,
.login-panel,
.register-client-shell > section,
.register-partner-shell > section {
    background: var(--portal-panel);
}

.panel-title,
.login-heading h1,
.register-client-shell h1,
.register-partner-shell h1 {
    color: var(--portal-ink);
    font-weight: 720;
}

.metric-card {
    background: linear-gradient(180deg, #fff 0, var(--portal-panel-soft) 100%);
}

.metric-card:hover {
    box-shadow: var(--portal-shadow);
}

.metric-icon {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .52);
}

.metric-teal .metric-icon,
.metric-green .metric-icon {
    background: #def8f3;
    color: #0d8578;
}

.metric-amber .metric-icon {
    background: #fff1d8;
    color: #a86712;
}

.metric-indigo .metric-icon,
.metric-blue .metric-icon {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-hover);
}

.metric-rose .metric-icon {
    background: #ffe6ea;
    color: #be3348;
}

.metric-label,
.text-secondary {
    color: var(--portal-muted) !important;
}

.metric-value {
    color: var(--portal-ink);
}

.btn {
    border-radius: 8px;
    font-weight: 650;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--portal-accent);
    border-color: var(--portal-accent);
    box-shadow: 0 12px 22px rgba(79, 109, 245, .22);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--portal-accent-hover) !important;
    border-color: var(--portal-accent-hover) !important;
}

.btn-outline-secondary {
    color: #4d5870;
    border-color: var(--portal-line-strong);
    background: #fff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    color: var(--portal-accent-hover) !important;
    background: var(--portal-accent-soft) !important;
    border-color: rgba(79, 109, 245, .28) !important;
}

.btn-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.form-label {
    color: #4f5b70;
    font-size: .76rem;
    font-weight: 720;
    margin-bottom: 6px;
}

.form-control,
.form-select,
.form-check-input {
    border-color: #d8deeb;
}

.form-control,
.form-select {
    background-color: #fbfcff;
    border-radius: 8px;
    color: var(--portal-ink);
}

.form-control:hover,
.form-select:hover {
    background-color: #fff;
    border-color: #cbd3e4;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 .2rem rgba(79, 109, 245, .14);
}

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

.table {
    color: var(--portal-ink);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--portal-line);
}

.table thead th {
    background: #f6f8fd;
    color: #515d74;
    font-size: .76rem;
    font-weight: 760;
    text-transform: uppercase;
}

.table-hover > tbody > tr:hover > * {
    background: #f9fbff;
}

.badge {
    border-radius: 8px;
    font-weight: 700;
}

.alert {
    border-radius: 8px;
    border: 1px solid transparent;
}

.alert-success {
    background: #e8faf4;
    border-color: #c8f0e3;
    color: #0f6e56;
}

.alert-danger {
    background: #fff0f2;
    border-color: #ffd3da;
    color: #b12c3f;
}

.alert-warning {
    background: #fff7e8;
    border-color: #ffe5b8;
    color: #8d5b11;
}

.login-shell {
    background: linear-gradient(180deg, #f7f9ff 0, #eef3fb 100%);
}

.login-panel {
    width: min(100%, 480px);
}

.login-heading {
    background: #f8faff;
    border-bottom-color: var(--portal-line);
}

.login-body {
    background: #fff;
}

.portal-link {
    color: var(--portal-muted);
}

.portal-link:hover {
    color: var(--portal-accent-hover);
}

.bg-light {
    background-color: var(--portal-bg) !important;
}

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

.shadow-sm {
    box-shadow: var(--portal-shadow-soft) !important;
}

@media (max-width: 991.98px) {
    .portal-sidebar {
        width: 248px;
    }

    .portal-main {
        margin-left: 248px;
    }
}

@media (max-width: 767.98px) {
    .portal-sidebar {
        position: static;
        width: 100%;
        min-height: auto;
        box-shadow: none;
    }

    .portal-main {
        margin-left: 0;
    }

    .portal-topbar {
        position: static;
    }

    .content-wrap.container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .login-shell {
        padding: 16px;
    }
}