/**
 * Client Portal - Brand Colors Override
 * Custom brand colors for Lukman Trust Fund client portal
 */

:root {
    /* Brand Colors */
    --brand-charcoal-black: #222626;
    --brand-lush-green: #37A626;
    --brand-amber-orange: #F29727;
    --brand-burnt-orange: #D95D30;
    --brand-soft-white: #F2F2F2;
    
    /* Override Falcon UI / Bootstrap primary colors */
    --falcon-primary: var(--brand-lush-green);
    --falcon-primary-rgb: 55, 166, 38;
    --falcon-primary-dark: #2d851d;
    --falcon-primary-darker: #226614;
    --falcon-primary-light: #4fb83a;
    --falcon-primary-lighter: #67ca4d;
    
    /* Secondary/Warning colors */
    --falcon-warning: var(--brand-amber-orange);
    --falcon-warning-rgb: 242, 151, 39;
    --falcon-danger: var(--brand-burnt-orange);
    --falcon-danger-rgb: 217, 93, 48;
    
    /* Background colors */
    --falcon-black: var(--brand-charcoal-black);
    --falcon-white: var(--brand-soft-white);
}

/* Primary color overrides */
.btn-primary,
.btn-falcon-primary {
    background-color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-falcon-primary:hover,
.btn-falcon-primary:focus,
.btn-falcon-primary:active {
    background-color: #2d851d !important;
    border-color: #2d851d !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
}

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

/* Primary text colors */
.text-primary {
    color: var(--brand-lush-green) !important;
}

/* Primary background colors */
.bg-primary {
    background-color: var(--brand-lush-green) !important;
}

.bg-soft-primary {
    background-color: rgba(55, 166, 38, 0.1) !important;
}

/* Badge colors */
.badge-soft-primary {
    background-color: rgba(55, 166, 38, 0.1) !important;
    color: var(--brand-lush-green) !important;
}

.badge-primary {
    background-color: var(--brand-lush-green) !important;
    color: #ffffff !important;
}

/* Link colors */
a {
    color: var(--brand-lush-green);
}

a:hover,
a:focus {
    color: #2d851d;
}

/* Navbar active states */
.nav-link.active {
    color: var(--brand-lush-green) !important;
}

.nav-link:hover {
    color: var(--brand-lush-green) !important;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-lush-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(55, 166, 38, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
}

/* Alert colors */
.alert-success {
    background-color: rgba(55, 166, 38, 0.1) !important;
    border-color: var(--brand-lush-green) !important;
    color: #155724 !important;
}

.alert-warning {
    background-color: rgba(242, 151, 39, 0.1) !important;
    border-color: var(--brand-amber-orange) !important;
    color: #856404 !important;
}

.alert-danger {
    background-color: rgba(217, 93, 48, 0.1) !important;
    border-color: var(--brand-burnt-orange) !important;
    color: #721c24 !important;
}

/* Warning button colors */
.btn-warning {
    background-color: var(--brand-amber-orange) !important;
    border-color: var(--brand-amber-orange) !important;
    color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e0881e !important;
    border-color: #e0881e !important;
    color: #ffffff !important;
}

/* Danger button colors */
.btn-danger {
    background-color: var(--brand-burnt-orange) !important;
    border-color: var(--brand-burnt-orange) !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c04a1f !important;
    border-color: #c04a1f !important;
    color: #ffffff !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--brand-lush-green) !important;
}

/* Dropdown active states */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-lush-green) !important;
}

/* Pagination */
.page-link {
    color: var(--brand-lush-green) !important;
}

.page-item.active .page-link {
    background-color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
}

.page-link:hover {
    color: #2d851d !important;
}

/* Table hover states */
.table-hover > tbody > tr:hover {
    background-color: rgba(55, 166, 38, 0.05) !important;
}

/* Card borders and accents */
.card-header {
    border-bottom-color: rgba(55, 166, 38, 0.1) !important;
}

/* Dark theme overrides */
.dark .bg-primary {
    background-color: var(--brand-lush-green) !important;
}

.dark .text-primary {
    color: var(--brand-lush-green) !important;
}

.dark .btn-primary {
    background-color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
}

.dark .nav-link.active {
    color: var(--brand-lush-green) !important;
}

/* Avatar primary background */
.avatar-name.bg-primary {
    background-color: var(--brand-lush-green) !important;
}

/* Dot indicators */
.dot.bg-primary {
    background-color: var(--brand-lush-green) !important;
}

/* Theme toggle and other UI elements */
.theme-control-toggle-input:checked {
    background-color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
}

/* Focus states for accessibility */
.btn-primary:focus-visible,
.btn-falcon-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(55, 166, 38, 0.5) !important;
}

/* Custom brand color utilities */
.bg-brand-charcoal {
    background-color: var(--brand-charcoal-black) !important;
}

.bg-brand-green {
    background-color: var(--brand-lush-green) !important;
}

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

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

.bg-brand-soft-white {
    background-color: var(--brand-soft-white) !important;
}

.text-brand-charcoal {
    color: var(--brand-charcoal-black) !important;
}

.text-brand-green {
    color: var(--brand-lush-green) !important;
}

.text-brand-amber {
    color: var(--brand-amber-orange) !important;
}

.text-brand-burnt {
    color: var(--brand-burnt-orange) !important;
}

/* Additional UI element overrides */

/* Border colors */
.border-primary {
    border-color: var(--brand-lush-green) !important;
}

/* Spinner/Loading states */
.spinner-border-primary {
    border-color: var(--brand-lush-green) !important;
    border-right-color: transparent !important;
}

.spinner-grow-primary {
    background-color: var(--brand-lush-green) !important;
}

/* List group items */
.list-group-item-primary {
    background-color: rgba(55, 166, 38, 0.1) !important;
    color: var(--brand-lush-green) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    /* background-color: rgba(55, 166, 38, 0.05) !important; */
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: var(--brand-lush-green) !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--brand-charcoal-black) !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--brand-charcoal-black) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--brand-charcoal-black) !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--brand-charcoal-black) !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--brand-charcoal-black) !important;
}

/* Popovers */
.popover-header {
    background-color: var(--brand-lush-green) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* Range inputs */
.form-range::-webkit-slider-thumb {
    background-color: var(--brand-lush-green) !important;
}

.form-range::-moz-range-thumb {
    background-color: var(--brand-lush-green) !important;
}

/* Switch/Toggle states */
.form-switch .form-check-input:checked {
    background-color: var(--brand-lush-green) !important;
    border-color: var(--brand-lush-green) !important;
}

/* Text muted with brand colors */
.text-600 {
    color: rgba(34, 38, 38, 0.6) !important;
}

.dark .text-600 {
    color: rgba(242, 242, 242, 0.6) !important;
}

/* Chart/Graph colors */
[data-echarts] {
    --chart-primary: var(--brand-lush-green);
    --chart-secondary: var(--brand-amber-orange);
}

/* Selection highlight */
::selection {
    background-color: rgba(55, 166, 38, 0.3) !important;
}

::-moz-selection {
    background-color: rgba(55, 166, 38, 0.3) !important;
}