:root {
    --as-sidebar-width: 260px;
    --as-orange: #fd7e14;

    /* AccessSolar brand color */
    --as-primary: #8b1c43;
    --as-primary-rgb: 139, 28, 67;
    --as-primary-hover: #761839;
    --as-primary-active: #681532;
    --as-primary-subtle: #f3e8ec;
    --as-primary-subtle-rgb: 243, 232, 236;
    --as-primary-emphasis: #611330;
    --as-primary-border-subtle: #dcbac6;

    /* Re-point Bootstrap's own theme variables at the brand color */
    --bs-primary: var(--as-primary);
    --bs-primary-rgb: var(--as-primary-rgb);
    --bs-primary-text-emphasis: var(--as-primary-emphasis);
    --bs-primary-bg-subtle: var(--as-primary-subtle);
    --bs-primary-bg-subtle-rgb: var(--as-primary-subtle-rgb);
    --bs-primary-border-subtle: var(--as-primary-border-subtle);
    --bs-link-color: var(--as-primary);
    --bs-link-color-rgb: var(--as-primary-rgb);
    --bs-link-hover-color: var(--as-primary-hover);
    --bs-link-hover-color-rgb: 118, 24, 57;
    --bs-focus-ring-color: rgba(var(--as-primary-rgb), .25);
}

/*
 * Bootstrap's CDN build bakes literal color values into each component's
 * own --bs-btn-*/--bs-*-bg variables at compile time, so redefining
 * --bs-primary above doesn't reach them. These explicit overrides make the
 * brand color apply to every primary-colored element in the app.
 */
.btn-primary {
    --bs-btn-bg: var(--as-primary);
    --bs-btn-border-color: var(--as-primary);
    --bs-btn-hover-bg: var(--as-primary-hover);
    --bs-btn-hover-border-color: var(--as-primary-hover);
    --bs-btn-active-bg: var(--as-primary-active);
    --bs-btn-active-border-color: var(--as-primary-active);
    --bs-btn-disabled-bg: var(--as-primary);
    --bs-btn-disabled-border-color: var(--as-primary);
    --bs-btn-focus-shadow-rgb: var(--as-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--as-primary);
    --bs-btn-border-color: var(--as-primary);
    --bs-btn-hover-bg: var(--as-primary);
    --bs-btn-hover-border-color: var(--as-primary);
    --bs-btn-active-bg: var(--as-primary-active);
    --bs-btn-active-border-color: var(--as-primary-active);
    --bs-btn-disabled-color: var(--as-primary);
    --bs-btn-disabled-border-color: var(--as-primary);
    --bs-btn-focus-shadow-rgb: var(--as-primary-rgb);
}

.bg-primary { background-color: var(--as-primary) !important; }
.bg-primary-subtle { background-color: var(--as-primary-subtle) !important; }
.text-primary { color: var(--as-primary) !important; }
.text-primary-emphasis { color: var(--as-primary-emphasis) !important; }
.border-primary { border-color: var(--as-primary) !important; }
.border-primary-subtle { border-color: var(--as-primary-border-subtle) !important; }
.link-primary { color: var(--as-primary) !important; }
.link-primary:hover, .link-primary:focus { color: var(--as-primary-hover) !important; }

a { color: var(--as-primary); }
a:hover { color: var(--as-primary-hover); }

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

.form-control:focus,
.form-select:focus {
    border-color: var(--as-primary-border-subtle);
    box-shadow: 0 0 0 .25rem rgba(var(--as-primary-rgb), .25);
}

.page-link {
    color: var(--as-primary);
}

.page-link:hover {
    color: var(--as-primary-hover);
}

.page-item.active .page-link {
    background-color: var(--as-primary);
    border-color: var(--as-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--as-primary);
}

.list-group-item.active {
    background-color: var(--as-primary);
    border-color: var(--as-primary);
}

.nav-tabs .nav-link.active {
    color: var(--as-primary-emphasis);
    border-color: var(--as-primary-border-subtle) var(--as-primary-border-subtle) var(--bs-body-bg);
}

.progress-bar {
    background-color: var(--as-primary);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--as-primary) !important;
}

/* Sidebar becomes a solid brand-color surface, with every text/link state
   adjusted for contrast against the dark background. */
.as-sidebar {
    background-color: var(--as-primary) !important;
    border-right: none;
}

.as-sidebar .as-brand {
    background-color: var(--as-primary-active) !important;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .15) !important;
}

.as-sidebar .nav-link {
    color: rgba(255, 255, 255, .82);
}

.as-sidebar .nav-link:hover,
.as-sidebar .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

.as-sidebar .nav-link.active,
.as-sidebar .nav-link.active.bg-primary-subtle {
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    font-weight: 600;
}

.as-sidebar .text-body,
.as-sidebar .text-body-secondary {
    color: rgba(255, 255, 255, .82) !important;
}

.as-sidebar .nav-link.text-body-secondary {
    color: rgba(255, 255, 255, .62) !important;
}

.as-sidebar .text-uppercase.text-body-secondary {
    color: rgba(255, 255, 255, .5) !important;
}

.as-sidebar hr {
    border-color: rgba(255, 255, 255, .15);
    opacity: 1;
}

.as-sidebar .bi-chevron-down {
    color: rgba(255, 255, 255, .6);
}

.bg-orange-subtle {
    background-color: rgba(253, 126, 20, .15);
}

.text-orange-emphasis {
    color: var(--as-orange);
}

.bg-orange {
    background-color: var(--as-orange) !important;
}

.progress-bar.bg-orange {
    background-color: var(--as-orange) !important;
}

body {
    min-height: 100vh;
}

.as-sidebar {
    width: var(--as-sidebar-width);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    overflow-y: auto;
    transition: margin-left .2s ease-in-out;
}

.as-sidebar .as-brand {
    height: 64px;
}

.as-brand-logo {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: .5rem;
    padding: .25rem .4rem;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.as-brand-logo img {
    height: 26px;
    width: auto;
    display: block;
}

.as-sidebar .nav-link {
    border-radius: .375rem;
    font-size: .92rem;
}

.as-sidebar .nav-link.active {
    font-weight: 600;
}

.as-sidebar .submenu .nav-link {
    padding-left: 2.25rem;
    font-size: .86rem;
}

.as-content {
    margin-left: var(--as-sidebar-width);
    min-height: 100vh;
    transition: margin-left .2s ease-in-out;
}

.as-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
}

body.as-sidebar-collapsed .as-sidebar {
    margin-left: calc(var(--as-sidebar-width) * -1);
}

body.as-sidebar-collapsed .as-content {
    margin-left: 0;
}

@media (max-width: 991.98px) {
    .as-sidebar {
        margin-left: calc(var(--as-sidebar-width) * -1);
    }

    .as-content {
        margin-left: 0;
    }

    body.as-sidebar-open .as-sidebar {
        margin-left: 0;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
    }
}

.as-stat-card {
    border: none;
    border-radius: .75rem;
}

.as-stat-card .as-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.as-stat-clickable {
    cursor: pointer;
}

.as-stat-clickable:hover {
    background-color: var(--bs-tertiary-bg);
}

.as-stat-chevron {
    transition: transform .2s ease;
}

.as-stat-clickable[aria-expanded="true"] .as-stat-chevron {
    transform: rotate(180deg);
}

.badge.as-badge-vip {
    background-color: #7c3aed;
}

.badge.as-badge-vvip {
    background-color: #db2777;
}

.as-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bs-secondary-bg);
}

.as-login-wrapper {
    min-height: 100vh;
}

.as-login-card {
    max-width: 420px;
    width: 100%;
}