:root {
    --crm-theme-primary: var(--portal-accent, var(--taplox-primary, #1a80f8));
    --crm-theme-primary-soft: color-mix(in srgb, var(--crm-theme-primary) 12%, #ffffff);
    --crm-theme-border: var(--taplox-border-color, var(--portal-line, #eaedf1));
    --crm-theme-muted: var(--taplox-secondary-color, var(--portal-muted, #687d92));
    --crm-theme-heading: var(--taplox-heading-color, var(--portal-ink, #313b5e));
    --crm-theme-panel: var(--taplox-secondary-bg, var(--portal-panel, #ffffff));
    --crm-theme-shadow: var(--taplox-box-shadow, 0 3px 4px rgba(0, 0, 0, .03));
}

body {
    background: var(--taplox-body-bg, #f8f7fa);
    color: var(--taplox-body-color, #5d7186);
}

.portal-sidebar {
    width: var(--taplox-sidebar-width, 250px);
    background: var(--portal-sidebar, var(--taplox-sidebar-bg, #393f4a));
    box-shadow: 0 0 32px rgba(33, 37, 46, .08);
}

.portal-main {
    margin-left: var(--taplox-sidebar-width, 250px);
}

.portal-brand {
    min-height: var(--taplox-topbar-height, 70px);
}

.portal-topbar {
    min-height: var(--taplox-topbar-height, 70px);
    background: var(--taplox-topbar-bg, rgba(255, 255, 255, .96));
    border-bottom-color: var(--crm-theme-border);
    box-shadow: var(--crm-theme-shadow);
}

.portal-topbar h1,
.login-heading h1,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel h5 {
    color: var(--crm-theme-heading);
}

.metric-card,
.panel,
.login-panel,
.register-client-shell > section,
.register-partner-shell > section,
.card {
    background: var(--crm-theme-panel);
    border-color: var(--crm-theme-border) !important;
    border-radius: var(--taplox-border-radius-lg, 8px) !important;
    box-shadow: var(--crm-theme-shadow) !important;
}

.portal-nav a {
    border-radius: var(--taplox-border-radius, 6px);
    color: var(--portal-sidebar-muted, var(--taplox-sidebar-item-color, #afb9cf));
}

.portal-nav a.active,
.portal-nav a:hover {
    background: color-mix(in srgb, var(--crm-theme-primary) 18%, transparent);
    color: #ffffff;
}

.portal-nav a.active {
    box-shadow: inset 3px 0 0 var(--portal-brand-mark-bg, var(--crm-theme-primary));
}

.btn {
    border-radius: var(--taplox-border-radius, 6px);
    font-weight: 600;
}

.btn-primary {
    background: var(--crm-theme-primary);
    border-color: var(--crm-theme-primary);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--crm-theme-primary) 20%, transparent);
}

.btn-primary:hover,
.btn-primary:focus {
    background: color-mix(in srgb, var(--crm-theme-primary) 86%, #000000);
    border-color: color-mix(in srgb, var(--crm-theme-primary) 86%, #000000);
}

.btn-outline-secondary {
    border-color: var(--crm-theme-border);
    color: var(--crm-theme-muted);
    background: var(--crm-theme-panel);
}

.btn-outline-secondary:hover {
    background: var(--crm-theme-primary-soft);
    border-color: color-mix(in srgb, var(--crm-theme-primary) 24%, var(--crm-theme-border));
    color: var(--crm-theme-primary);
}

.form-control,
.form-select,
.form-check-input {
    border-color: var(--taplox-input-border-color, var(--crm-theme-border));
    border-radius: var(--taplox-border-radius, 6px);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--crm-theme-primary);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--crm-theme-primary) 24%, transparent);
}

.form-check-input:checked {
    background-color: var(--crm-theme-primary);
    border-color: var(--crm-theme-primary);
}

.table {
    --bs-table-color: var(--taplox-body-color, #5d7186);
    --bs-table-border-color: var(--crm-theme-border);
    --bs-table-hover-bg: var(--crm-theme-primary-soft);
}

.table thead th {
    color: var(--crm-theme-heading);
    background: rgba(var(--taplox-light-rgb, 238, 242, 247), .65);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge {
    border-radius: var(--taplox-border-radius-pill, 50rem);
    font-weight: 700;
}

.alert {
    border-radius: var(--taplox-border-radius, 6px);
    border: 1px solid transparent;
}

.login-shell {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--crm-theme-primary) 14%, transparent), transparent 32rem),
        var(--taplox-body-bg, #f8f7fa);
}

.login-heading {
    background: rgba(var(--taplox-light-rgb, 238, 242, 247), .45);
}

.brand-logo,
.portal-brand-logo,
.brand-mark,
.portal-brand-mark {
    border-radius: var(--taplox-border-radius, 6px);
}

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

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