:root {
    --portal-max-width: 100%;
    --portal-sidebar-width: 280px;
    --portal-primary: #e61b50;
    --portal-primary-rgb: 230, 27, 80;
    --portal-primary-hover: #c61745;
    --portal-primary-active: #ab143b;
    --portal-secondary: #012168;
    --portal-secondary-rgb: 1, 33, 104;
    --portal-sidebar-bg: #012168;
    --portal-sidebar-active: rgba(255, 255, 255, 0.12);
    --portal-surface: #ffffff;
    --portal-surface-muted: #f4f7fb;
    --portal-border: #e8edf5;
    --portal-text: #11203b;
    --portal-text-muted: #6f7f9b;
    --portal-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
    --bs-primary: #e61b50;
    --bs-primary-rgb: 230, 27, 80;
    --bs-dark: #012168;
    --bs-dark-rgb: 1, 33, 104;
    --bs-body-color: #11203b;
    --bs-body-bg: #f4f7fb;
    --bs-border-color: #e8edf5;
    --bs-secondary-color: #6f7f9b;
}

/* Brand overrides for Dashly components that hardcode their primary palette. */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --bs-primary: #e61b50;
    --bs-primary-rgb: 230, 27, 80;
    --bs-link-color: #e61b50;
    --bs-link-hover-color: var(--portal-primary-hover);
    --bs-link-color-rgb: 230, 27, 80;
    --bs-link-hover-color-rgb: 198, 23, 69;
    --bs-focus-ring-color: rgba(230, 27, 80, 0.25);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e61b50;
    --bs-btn-border-color: #e61b50;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--portal-primary-hover);
    --bs-btn-hover-border-color: var(--portal-primary-hover);
    --bs-btn-focus-shadow-rgb: 230, 27, 80;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--portal-primary-active);
    --bs-btn-active-border-color: var(--portal-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e61b50;
    --bs-btn-disabled-border-color: #e61b50;
}

.btn-outline-primary {
    --bs-btn-color: #e61b50;
    --bs-btn-border-color: #e61b50;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e61b50;
    --bs-btn-hover-border-color: #e61b50;
    --bs-btn-focus-shadow-rgb: 230, 27, 80;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--portal-primary-hover);
    --bs-btn-active-border-color: var(--portal-primary-hover);
}

a,
.link-primary {
    color: #e61b50 !important;
}

a:hover,
a:focus,
.link-primary:hover,
.link-primary:focus {
    color: var(--portal-primary-hover) !important;
}

.form-control:focus,
.form-select:focus,
.input-group-merge:focus-within > .form-control,
.input-group-merge:focus-within > .input-group-text,
.ql-editor:focus,
.focus .ts-control,
.plugin-dropdown_input.focus .ts-dropdown .dropdown-input,
.ts-wrapper.form-control.focus,
.ts-wrapper.form-select.focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 transparent, 0 0 0.75rem 0 rgba(var(--portal-primary-rgb), 0.25);
    outline: 0;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-switch .form-check-input:checked,
.steps .nav-item.visited .nav-link,
.steps .nav-item.visited::before,
.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.today:focus,
.flatpickr-calendar .flatpickr-day.today:hover,
.overlay-primary::before,
.progress-bar,
.ts-wrapper.multi .ts-control > div.active {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.nav-tabs {
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--portal-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--portal-primary);
}

.accordion {
    --bs-accordion-btn-focus-border-color: var(--portal-primary);
    --bs-accordion-btn-focus-box-shadow: 0 4px 12px rgba(var(--portal-primary-rgb), 0.35);
    --bs-accordion-active-color: var(--portal-primary-hover);
    --bs-accordion-active-bg: rgba(var(--portal-primary-rgb), 0.1);
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0.75rem 0.25rem rgba(var(--portal-primary-rgb), 0.25);
    --bs-pagination-active-bg: var(--portal-primary);
    --bs-pagination-active-border-color: var(--portal-primary);
}

.alert-primary {
    --bs-alert-color: #fff;
    --bs-alert-bg: var(--portal-primary);
    --bs-alert-border-color: var(--portal-primary);
}

.text-bg-primary-soft,
.text-bg-primary-soft .alert-link,
[data-theme="dark"] .text-bg-primary-soft {
    color: var(--portal-primary) !important;
}

.text-bg-primary-soft {
    background-color: rgba(var(--portal-primary-rgb), 0.12) !important;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-active,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button:focus,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button:focus,
.ql-snow.ql-toolbar button:hover {
    color: var(--portal-primary);
}

html[data-navigation-color="inverted"] body {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
}

body.portal-app {
    color: var(--portal-text);
    min-height: 100vh;
}

.portal-layout {
    min-height: 100vh;
}

.portal-shell {
    max-width: var(--portal-max-width);
    padding-bottom: 3rem;
}

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.portal-sidebar {
    width: min(100%, var(--portal-sidebar-width));
    background: var(--portal-sidebar-bg);
    color: rgba(255, 255, 255, 0.86);
}

.portal-sidebar .container-fluid {
    min-height: 100%;
}

.portal-sidebar .navbar-brand {
    padding-top: 0.25rem;
}

.portal-sidebar .navbar-brand img {
    height: 28px;
    width: auto;
}

.portal-sidebar .navbar-collapse {
    align-items: stretch;
}

.portal-nav {
    background: transparent;
    box-shadow: none;
}

.portal-nav .card-body {
    padding-inline: 0;
}

.portal-nav .nav-link {
    align-items: center;
    border-radius: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    font-weight: 600;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
}

.portal-nav .nav-link:hover,
.portal-nav .nav-link:focus,
.portal-nav .nav-link.active {
    background: var(--portal-sidebar-active);
    color: #fff;
}

.portal-nav .nav-link.active .portal-nav-icon {
    background: #fff;
    color: var(--portal-primary);
}

.portal-nav-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.portal-sidenav-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: auto;
    padding-top: 1rem;
}

.portal-topbar-actions .dropdown-toggle,
.portal-topbar-actions .portal-topbar-button {
    align-items: center;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
    color: var(--portal-text-muted);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    width: 40px;
}

.portal-search .form-control,
.portal-search .input-group-text {
    background: #ecf3ff;
    border-color: #ecf3ff;
}

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

.portal-search .btn:hover,
.portal-search .btn:focus {
    background: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}

.portal-auth-wrap {
    min-height: 100vh;
}

.portal-auth-scene {
    border-radius: 1.5rem;
    overflow: hidden;
}

.portal-auth-aside {
    min-height: 100%;
}

.portal-auth-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 320px;
    position: relative;
}

.portal-auth-cover::after {
    background: linear-gradient(180deg, rgba(var(--portal-secondary-rgb), 0.12), rgba(var(--portal-secondary-rgb), 0.88));
    content: "";
    inset: 0;
    position: absolute;
}

.portal-auth-cover-content {
    inset: auto 0 0 0;
    position: absolute;
    z-index: 1;
}

.portal-topbar {
    backdrop-filter: blur(10px);
}

.portal-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 35%),
        linear-gradient(135deg, #012168 0%, #173a90 60%, #e61b50 145%);
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
}

.portal-avatar {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 700;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.portal-card,
.portal-kpi,
.portal-table-card,
.portal-list-item {
    border-radius: 1.25rem;
    box-shadow: var(--portal-shadow);
}

.portal-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.portal-table-card .table > :not(caption) > * > * {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.portal-table-card .table thead th {
    color: var(--portal-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.portal-stat-list li + li,
.portal-simple-list li + li {
    margin-top: 0.5rem;
}

.portal-pre {
    background: #09162e;
    border-radius: 1rem;
    color: #f5f8ff;
    font-size: 0.9rem;
    margin: 0;
    overflow: auto;
    padding: 1rem;
}

.portal-illustration {
    max-height: 220px;
    width: auto;
}

.portal-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-list-compact li + li {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.portal-mini-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.portal-mini-label {
    color: var(--portal-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-mini-value {
    color: var(--portal-secondary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.portal-summary-card {
    background: linear-gradient(135deg, rgba(230, 27, 80, 0.08), rgba(1, 33, 104, 0.08));
}

.portal-summary-card .btn-primary {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
}

.portal-summary-card .btn-primary:hover,
.portal-summary-card .btn-primary:focus {
    background: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}

.portal-empty-state {
    background:
        radial-gradient(circle at top right, rgba(var(--portal-primary-rgb), 0.12), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8f3f5 100%);
    border-radius: 1.5rem;
    overflow: hidden;
}

.portal-empty-state-icon {
    align-items: center;
    background: rgba(var(--portal-primary-rgb), 0.12);
    border-radius: 1.25rem;
    color: var(--portal-primary);
    display: inline-flex;
    font-size: 2rem;
    height: 4.5rem;
    justify-content: center;
    width: 4.5rem;
}

.portal-empty-state-copy {
    max-width: 36rem;
}

@media (min-width: 992px) {
    .portal-sidebar {
        flex: 0 0 var(--portal-sidebar-width);
        position: sticky;
        top: 0;
    }
}