/* =========================================================
   ORION FINANCE
   DYNAMIC THEME SYSTEM V2
   ========================================================= */


/* =========================================================
   1. GLOBAL
   ========================================================= */

html {
    background-color: var(--orion-background);
}

body {
    color: var(--orion-text) !important;
    background-color: var(--orion-background) !important;
}


/* =========================================================
   2. LINKS
   ========================================================= */

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

a:hover,
a:focus {
    color: var(--orion-primary-dark);
}


/* =========================================================
   3. PRIMARY BUTTONS
   ========================================================= */

.btn-primary {
    color: #ffffff !important;
    background-color: var(--orion-primary) !important;
    border-color: var(--orion-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #ffffff !important;
    background-color: var(--orion-primary-dark) !important;
    border-color: var(--orion-primary-dark) !important;
}


/* =========================================================
   4. INFO BUTTONS
   ========================================================= */

.btn-info {
    color: #ffffff !important;
    background-color: var(--orion-primary) !important;
    border-color: var(--orion-primary) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    color: #ffffff !important;
    background-color: var(--orion-primary-dark) !important;
    border-color: var(--orion-primary-dark) !important;
}


/* =========================================================
   5. OUTLINE BUTTONS
   ========================================================= */

.btn-outline-primary {
    color: var(--orion-primary) !important;
    border-color: var(--orion-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff !important;
    background-color: var(--orion-primary) !important;
    border-color: var(--orion-primary) !important;
}


/* =========================================================
   6. TEXT
   ========================================================= */

.text-primary {
    color: var(--orion-primary) !important;
}

.text-info {
    color: var(--orion-primary) !important;
}

.orion-theme-text {
    color: var(--orion-text) !important;
}


/* =========================================================
   7. SECONDARY
   ========================================================= */

.orion-secondary {
    color: var(--orion-secondary) !important;
}

.orion-secondary-bg {
    background-color: var(--orion-secondary) !important;
}

.orion-secondary-border {
    border-color: var(--orion-secondary) !important;
}

.orion-theme-secondary-text {
    color: var(--orion-secondary) !important;
}


/* =========================================================
   8. ACCENT
   ========================================================= */

.orion-accent {
    color: var(--orion-accent) !important;
}

.orion-accent-bg {
    background-color: var(--orion-accent) !important;
}

.orion-accent-border {
    border-color: var(--orion-accent) !important;
}

.orion-theme-accent {
    color: var(--orion-accent) !important;
}


/* =========================================================
   9. PRIMARY UTILITIES
   ========================================================= */

.orion-primary {
    color: var(--orion-primary) !important;
}

.orion-primary-bg {
    background-color: var(--orion-primary) !important;
}

.orion-primary-border {
    border-color: var(--orion-primary) !important;
}

.orion-primary-dark {
    color: var(--orion-primary-dark) !important;
}

.orion-primary-dark-bg {
    background-color: var(--orion-primary-dark) !important;
}

.orion-primary-dark-border {
    border-color: var(--orion-primary-dark) !important;
}


/* =========================================================
   10. THEME BACKGROUND
   ========================================================= */

.orion-theme-background {
    background-color: var(--orion-background) !important;
}

.orion-theme-background-soft {
    background-color: color-mix(in srgb,
            var(--orion-background) 92%,
            var(--orion-primary) 8%) !important;
}


/* =========================================================
   11. THEME BORDERS
   ========================================================= */

.orion-theme-border {
    border-color: var(--orion-primary) !important;
}

.orion-theme-secondary-border {
    border-color: var(--orion-secondary) !important;
}

.orion-theme-soft-border {
    border-color: color-mix(in srgb,
            var(--orion-secondary) 15%,
            transparent) !important;
}


/* =========================================================
   12. CARDS / PANELS
   ========================================================= */

.orion-card {
    background-color: #ffffff;
    border-color: color-mix(in srgb,
            var(--orion-secondary) 12%,
            transparent);
}

.orion-card-primary {
    background-color: color-mix(in srgb,
            var(--orion-primary) 6%,
            #ffffff) !important;

    border-color: color-mix(in srgb,
            var(--orion-primary) 18%,
            transparent) !important;
}

.orion-card-secondary {
    background-color: color-mix(in srgb,
            var(--orion-secondary) 6%,
            #ffffff) !important;

    border-color: color-mix(in srgb,
            var(--orion-secondary) 15%,
            transparent) !important;
}


/* =========================================================
   13. FORM CONTROLS
   ========================================================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--orion-primary) !important;
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(var(--orion-primary-rgb), 0.20) !important;
}


/* =========================================================
   14. CHECKBOX / RADIO
   ========================================================= */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--orion-primary);
}


/* =========================================================
   15. PROGRESS
   ========================================================= */

.progress-bar {
    background-color: var(--orion-primary) !important;
}


/* =========================================================
   16. PAGINATION
   ========================================================= */

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    color: #ffffff !important;
    background-color: var(--orion-primary) !important;
    border-color: var(--orion-primary) !important;
}


/* =========================================================
   17. BADGES
   ========================================================= */

.label-primary,
.badge-primary {
    background-color: var(--orion-primary) !important;
}


/* =========================================================
   18. DROPDOWN
   ========================================================= */

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    color: #ffffff !important;
    background-color: var(--orion-primary) !important;
}


/* =========================================================
   19. NAVIGATION
   ========================================================= */

.nav>li.active>a,
.nav>li>a.active {
    color: var(--orion-primary) !important;
}

.nav>li.active>a::before,
.nav>li>a.active::before {
    background-color: var(--orion-primary);
}


/* =========================================================
   20. GLOBAL FOCUS
   ========================================================= */

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline-color: var(--orion-primary);
}


/* =========================================================
   21. SELECTION
   ========================================================= */

::selection {
    background-color: var(--orion-primary);
    color: #ffffff;
}


/* =========================================================
   22. LINKS / BOOTSTRAP LEGACY
   ========================================================= */

.btn-link {
    color: var(--orion-primary) !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--orion-primary-dark) !important;
}


/* =========================================================
   23. ACCENT HELPERS
   ========================================================= */

.orion-accent-soft {
    background-color: rgba(var(--orion-accent-rgb), 0.10) !important;
}

.orion-accent-soft-border {
    border-color: rgba(var(--orion-accent-rgb), 0.30) !important;
}


/* =========================================================
   24. PRIMARY SOFT HELPERS
   ========================================================= */

.orion-primary-soft {
    background-color: rgba(var(--orion-primary-rgb), 0.08) !important;
}

.orion-primary-soft-border {
    border-color: rgba(var(--orion-primary-rgb), 0.20) !important;
}

.orion-primary-soft-text {
    color: var(--orion-primary) !important;
}


/* =========================================================
   25. SECONDARY SOFT HELPERS
   ========================================================= */

.orion-secondary-soft {
    background-color: rgba(var(--orion-secondary-rgb), 0.08) !important;
}

.orion-secondary-soft-border {
    border-color: rgba(var(--orion-secondary-rgb), 0.20) !important;
}


/* =========================================================
   26. TEXT HELPERS
   ========================================================= */

.orion-text {
    color: var(--orion-text) !important;
}

.orion-text-muted {
    color: color-mix(in srgb,
            var(--orion-text) 65%,
            transparent) !important;
}


/* =========================================================
   27. BACKGROUND HELPERS
   ========================================================= */

.orion-background {
    background-color: var(--orion-background) !important;
}

.orion-background-soft {
    background-color: color-mix(in srgb,
            var(--orion-background) 94%,
            var(--orion-primary) 6%) !important;
}


/* =========================================================
   ORION FINANCE
   CLIENT LAYOUT THEME OVERRIDES
   ========================================================= */


/* =========================================================
   28. CLIENT GLOBAL SURFACES
   ========================================================= */

.orion-client-body {
    background-color: var(--orion-background) !important;
    color: var(--orion-text) !important;
}

.orion-dashboard {
    background-color: var(--orion-background) !important;
}


/* =========================================================
   29. CLIENT SIDEBAR
   ========================================================= */

.orion-sidebar {
    background-color: var(--orion-secondary) !important;
    color: #ffffff !important;
}

.orion-sidebar-brand,
.orion-sidebar-user {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.orion-sidebar-close {
    color: #ffffff !important;
}


/* =========================================================
   30. CLIENT BRAND
   ========================================================= */

.orion-brand-icon {
    background-color: var(--orion-primary) !important;
    color: #ffffff !important;
}

.orion-brand-subtitle {
    color: var(--orion-primary) !important;
}


/* =========================================================
   31. CLIENT USER AREA
   ========================================================= */

.orion-avatar {
    background-color: rgba(var(--orion-primary-rgb), 0.16) !important;
    color: var(--orion-primary) !important;
    border-color: rgba(var(--orion-primary-rgb), 0.25) !important;
}

.orion-user-info strong {
    color: #ffffff !important;
}

.orion-user-info span {
    color: rgba(255, 255, 255, 0.62) !important;
}


/* =========================================================
   32. CLIENT NAVIGATION
   ========================================================= */

.orion-nav-label {
    color: rgba(255, 255, 255, 0.48) !important;
}

.orion-nav-link {
    color: rgba(255, 255, 255, 0.62) !important;
}

.orion-nav-link:hover,
.orion-nav-link.active {
    background-color: rgba(var(--orion-primary-rgb), 0.12) !important;
    color: #ffffff !important;
}

.orion-nav-link.active {
    box-shadow: inset 3px 0 0 var(--orion-primary) !important;
}


/* =========================================================
   33. CLIENT SIDEBAR FOOTER
   ========================================================= */

.orion-sidebar-footer {
    border-color: rgba(255, 255, 255, 0.10) !important;
}


/* =========================================================
   34. CLIENT MAIN AREA
   ========================================================= */

.orion-main {
    background-color: var(--orion-background) !important;
}

.orion-content {
    background-color: var(--orion-background) !important;
}


/* =========================================================
   35. CLIENT ACCOUNT CARD
   ========================================================= */

.orion-account-card {
    background: linear-gradient(135deg,
            var(--orion-secondary) 0%,
            var(--orion-primary-dark) 100%) !important;

    color: #ffffff !important;
}

.orion-account-glow {
    background: rgba(var(--orion-primary-rgb), 0.15) !important;
}


/* =========================================================
   36. ACCOUNT CARD TEXT
   ========================================================= */

.orion-account-label {
    color: rgba(255, 255, 255, 0.62) !important;
}

.orion-balance span {
    color: rgba(255, 255, 255, 0.62) !important;
}

.orion-account-detail span {
    color: rgba(255, 255, 255, 0.50) !important;
}

.orion-account-detail strong {
    color: #ffffff !important;
}


/* =========================================================
   37. ACCOUNT CARD DIVIDER
   ========================================================= */

.orion-account-divider {
    background-color: rgba(255, 255, 255, 0.12) !important;
}


/* =========================================================
   38. ACTION CARDS
   ========================================================= */

.orion-action-card {
    background-color: #ffffff !important;

    border-color: color-mix(in srgb,
            var(--orion-secondary) 12%,
            transparent) !important;
}

.orion-action-card:hover {
    border-color: rgba(var(--orion-primary-rgb), 0.35) !important;
}

.orion-action-icon {
    background-color: rgba(var(--orion-primary-rgb), 0.10) !important;
    color: var(--orion-primary) !important;
}


/* =========================================================
   39. CLIENT SECTION TITLES
   ========================================================= */

.orion-section-heading h3,
.orion-panel-header h3 {
    color: var(--orion-text) !important;
}


/* =========================================================
   40. CLIENT MOBILE HEADER
   ========================================================= */

.orion-mobile-header {
    background-color: var(--orion-secondary) !important;
    color: #ffffff !important;
}

.orion-mobile-brand strong {
    color: var(--orion-primary) !important;
}

.orion-brand-mark {
    background-color: var(--orion-primary) !important;
}

.orion-mobile-menu-toggle {
    color: #ffffff !important;
}


/* =========================================================
   41. CLIENT SOFT ELEMENTS
   ========================================================= */

.orion-primary-soft {
    background-color: rgba(var(--orion-primary-rgb), 0.08) !important;
}

.orion-primary-soft-border {
    border-color: rgba(var(--orion-primary-rgb), 0.20) !important;
}


/* =========================================================
   42. CLIENT THEME HOVER
   ========================================================= */

.orion-action-card:hover .orion-action-icon {
    background-color: rgba(var(--orion-primary-rgb), 0.14) !important;
}


/* =========================================================
   43. CLIENT OVERLAY
   ========================================================= */

.orion-sidebar-overlay.is-visible {
    background: rgba(var(--orion-secondary-rgb),
            0.55) !important;
}