/* ═══════════════════════════════════════════════════════════════════════════
   BeautyPro Bootstrap Fixes v1.0
   Ensures all Bootstrap components use BeautyPro tokens consistently.
   MUST be loaded AFTER Bootstrap and beautypro-tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */

 :root,
 [data-bs-theme=light] {
     --bs-primary: var(--brand-500, #D4A5A5);
     --bs-primary-rgb: 212, 165, 165;
     --bs-link-color: var(--brand-700, #A07070);
     --bs-link-color-rgb: 160, 112, 112;
     --bs-link-hover-color: var(--brand-800, #8B5E5E);
     --bs-link-hover-color-rgb: 139, 94, 94;
 }

/* ============================================
   1. Cards - CRITICAL FIX for white-on-white
   ============================================ */
.card {
    background: var(--card-bg, #FFFFFF) !important;
    color: var(--color-text-primary, #1A202C) !important;
    border: 1px solid var(--card-border, rgba(212, 165, 165, 0.15)) !important;
    border-radius: var(--card-radius, 16px) !important;
    box-shadow: var(--card-shadow, 0 4px 20px rgba(0, 0, 0, 0.04)) !important;
}

.card-header {
    background: var(--card-header-bg, linear-gradient(135deg, rgba(212, 165, 165, 0.05) 0%, rgba(212, 165, 165, 0.08) 100%)) !important;
    color: var(--color-text-primary, #1A202C) !important;
    border-bottom: 1px solid var(--card-header-border, rgba(212, 165, 165, 0.15)) !important;
    padding: var(--card-padding, 1.5rem) !important;
    font-weight: var(--font-semibold, 600) !important;
}

.card-body {
    background: transparent !important;
    color: var(--color-text-primary, #1A202C) !important;
    padding: var(--card-padding, 1.5rem) !important;
}

.card-footer {
    background: var(--color-bg-secondary, #EDF2F7) !important;
    color: var(--color-text-primary, #1A202C) !important;
    border-top: 1px solid var(--color-border-light, #E2E8F0) !important;
    padding: var(--card-padding-sm, 1rem) var(--card-padding, 1.5rem) !important;
}

.card-title {
    color: var(--color-text-primary, #1A202C) !important;
    font-weight: var(--font-semibold, 600) !important;
    margin-bottom: 0.5rem !important;
}

.card-subtitle {
    color: var(--color-text-secondary, #4A5568) !important;
}

.card-text {
    color: var(--color-text-primary, #1A202C) !important;
}

/* Card icons should use accent color */
.card-header i,
.card-header .bi,
.card-header svg {
    color: var(--color-accent, #D4A5A5) !important;
}

/* ============================================
   2. Text Colors - Ensure visibility
   ============================================ */
body {
    color: var(--color-text-primary, #1A202C) !important;
    background: var(--color-bg-body, #F7FAFC) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-text-primary, #1A202C) !important;
}

p, span, div, li, td, th, label {
    color: inherit;
}

.text-muted {
    color: var(--color-text-muted, #718096) !important;
}

.text-secondary {
    color: var(--color-text-secondary, #4A5568) !important;
}

.text-primary {
    color: var(--color-accent, #D4A5A5) !important;
}

.text-success {
    color: var(--brand-600, #C08B8B) !important;
}

.text-dark {
    color: var(--color-text-primary, #1A202C) !important;
}

.text-body {
    color: var(--color-text-primary, #1A202C) !important;
}

/* ============================================
   3. Buttons - Consistent styling
   ============================================ */
.btn {
    border-radius: var(--btn-radius, 10px) !important;
    font-weight: var(--btn-font-weight, 600) !important;
    padding: var(--btn-padding-y, 0.625rem) var(--btn-padding-x, 1.25rem) !important;
    transition: all var(--transition-base, 200ms) !important;
}

.btn-primary {
    background: var(--gradient-accent, linear-gradient(135deg, #D4A5A5 0%, #D4A5A5 100%)) !important;
    border-color: var(--color-accent, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
    box-shadow: var(--btn-shadow, 0 4px 15px rgba(212, 165, 165, 0.3)) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--gradient-accent-bold, linear-gradient(135deg, #D4A5A5 0%, #A07070 100%)) !important;
    border-color: var(--color-accent-hover, #A07070) !important;
    color: var(--white, #FFFFFF) !important;
    box-shadow: var(--btn-shadow-hover, 0 6px 20px rgba(212, 165, 165, 0.4)) !important;
}

.btn-outline-primary {
    background: transparent !important;
    border-color: var(--color-accent, #D4A5A5) !important;
    color: var(--color-accent, #D4A5A5) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-accent, #D4A5A5) !important;
    border-color: var(--color-accent, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
}

.btn-secondary {
    background: var(--color-bg-secondary, #EDF2F7) !important;
    border-color: var(--color-border, #E2E8F0) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--color-bg-tertiary, #E2E8F0) !important;
    border-color: var(--color-border-medium, #CBD5E0) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.btn-light {
    background: var(--white, #FFFFFF) !important;
    border-color: var(--color-border, #E2E8F0) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.btn-light:hover,
.btn-light:focus {
    background: var(--color-bg-secondary, #EDF2F7) !important;
    border-color: var(--color-border-medium, #CBD5E0) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.btn-success {
    background: var(--gradient-accent, linear-gradient(135deg, #D4A5A5 0%, #A07070 100%)) !important;
    border-color: var(--brand-500, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
}

.btn-danger {
    background: var(--gradient-danger, linear-gradient(135deg, #FC8181 0%, #E53E3E 100%)) !important;
    border-color: var(--color-danger, #E53E3E) !important;
    color: var(--white, #FFFFFF) !important;
}

.btn-warning {
    background: var(--gradient-warning, linear-gradient(135deg, #ECC94B 0%, #D69E2E 100%)) !important;
    border-color: var(--color-warning, #D69E2E) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.btn-info {
    background: var(--gradient-info, linear-gradient(135deg, #63B3ED 0%, #3182CE 100%)) !important;
    border-color: var(--color-info, #3182CE) !important;
    color: var(--white, #FFFFFF) !important;
}

/* Small buttons */
.btn-sm {
    padding: var(--btn-padding-y-sm, 0.375rem) var(--btn-padding-x-sm, 0.875rem) !important;
    font-size: var(--text-sm, 0.875rem) !important;
}

/* Large buttons */
.btn-lg {
    padding: var(--btn-padding-y-lg, 0.875rem) var(--btn-padding-x-lg, 2rem) !important;
}

/* ============================================
   4. Forms - Input styling
   ============================================ */
.form-control,
.form-select {
    background: var(--input-bg, #FFFFFF) !important;
    border: 1px solid var(--input-border, #E2E8F0) !important;
    border-radius: var(--input-radius, 10px) !important;
    color: var(--color-text-primary, #1A202C) !important;
    padding: var(--input-padding-y, 0.75rem) var(--input-padding-x, 1rem) !important;
    transition: border-color var(--transition-base), box-shadow var(--transition-base) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--input-border-focus, #D4A5A5) !important;
    box-shadow: var(--input-shadow-focus, 0 0 0 3px rgba(212, 165, 165, 0.35)) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--input-placeholder, #A0AEC0) !important;
}

.form-label {
    color: var(--color-text-primary, #1A202C) !important;
    font-weight: var(--font-medium, 500) !important;
    margin-bottom: 0.5rem !important;
}

.form-text {
    color: var(--color-text-muted, #718096) !important;
}

.input-group-text {
    background: var(--color-bg-secondary, #EDF2F7) !important;
    border: 1px solid var(--input-border, #E2E8F0) !important;
    color: var(--color-text-secondary, #4A5568) !important;
}

/* ============================================
   5. Tables - Consistent styling
   ============================================ */
.table {
    color: var(--color-text-primary, #1A202C) !important;
    border-radius: var(--table-radius, 12px) !important;
    overflow: hidden;
}

.table > thead {
    background: var(--table-header-bg, linear-gradient(135deg, rgba(212, 165, 165, 0.08) 0%, rgba(212, 165, 165, 0.12) 100%)) !important;
}

.table > thead > tr > th {
    color: var(--table-header-color, #1A202C) !important;
    font-weight: var(--font-semibold, 600) !important;
    border-bottom: 1px solid var(--table-header-border, rgba(212, 165, 165, 0.15)) !important;
    padding: 1rem !important;
}

.table > tbody > tr > td {
    color: var(--color-text-primary, #1A202C) !important;
    border-bottom: 1px solid var(--table-border, #EDF2F7) !important;
    padding: 1rem !important;
    vertical-align: middle !important;
}

.table > tbody > tr:hover {
    background: var(--table-row-hover, rgba(212, 165, 165, 0.04)) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--color-bg-secondary, #F7FAFC) !important;
}

/* ============================================
   6. Modals - Consistent styling
   ============================================ */
.modal-content {
    background: var(--color-bg-primary, #FFFFFF) !important;
    border: none !important;
    border-radius: var(--modal-radius, 16px) !important;
    box-shadow: var(--modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.2)) !important;
}

.modal-header {
    background: var(--modal-header-bg, linear-gradient(135deg, #D4A5A5 0%, #D4A5A5 100%)) !important;
    color: var(--modal-header-color, #FFFFFF) !important;
    border-bottom: none !important;
    border-radius: var(--modal-radius, 16px) var(--modal-radius, 16px) 0 0 !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-header .modal-title {
    color: var(--white, #FFFFFF) !important;
    font-weight: var(--font-semibold, 600) !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

.modal-body {
    background: var(--color-bg-primary, #FFFFFF) !important;
    color: var(--color-text-primary, #1A202C) !important;
    padding: var(--modal-body-padding, 1.75rem) !important;
}

.modal-footer {
    background: var(--modal-footer-bg, #F7FAFC) !important;
    border-top: 1px solid var(--color-border-light, #E2E8F0) !important;
    border-radius: 0 0 var(--modal-radius, 16px) var(--modal-radius, 16px) !important;
    padding: 1rem 1.5rem !important;
}

/* ============================================
   7. Alerts - Consistent styling
   ============================================ */
.alert {
    border-radius: var(--alert-radius, 12px) !important;
    padding: var(--alert-padding, 1rem 1.25rem) !important;
    border-width: 0 !important;
    border-inline-start-width: var(--alert-border-width, 4px) !important;
    border-inline-start-style: solid !important;
}

.alert-primary {
    background: var(--color-accent-subtle, #E8F4F4) !important;
    color: var(--brand-800, #8B5E5E) !important;
    border-color: var(--color-accent, #D4A5A5) !important;
}

.alert-success {
    background: var(--color-success-subtle, #F0FFF4) !important;
    color: var(--color-success-text, #276749) !important;
    border-color: var(--color-success, #38A169) !important;
}

.alert-warning {
    background: var(--color-warning-subtle, #FFFFF0) !important;
    color: var(--color-warning-text, #975A16) !important;
    border-color: var(--color-warning, #D69E2E) !important;
}

.alert-danger {
    background: var(--color-danger-subtle, #FFF5F5) !important;
    color: var(--color-danger-text, #9B2C2C) !important;
    border-color: var(--color-danger, #E53E3E) !important;
}

.alert-info {
    background: var(--color-info-subtle, #EBF8FF) !important;
    color: var(--color-info-text, #2C5282) !important;
    border-color: var(--color-info, #3182CE) !important;
}

/* ============================================
   8. Badges - Consistent styling
   ============================================ */
.badge {
    border-radius: var(--badge-radius, 8px) !important;
    padding: var(--badge-padding-y, 0.35rem) var(--badge-padding-x, 0.75rem) !important;
    font-size: var(--badge-font-size, 0.8125rem) !important;
    font-weight: var(--badge-font-weight, 600) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background: var(--color-accent, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    background: var(--color-bg-tertiary, #E2E8F0) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.badge.bg-success,
.badge.text-bg-success {
    background: var(--brand-700, #A07070) !important;
    color: var(--white, #FFFFFF) !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background: var(--color-danger, #E53E3E) !important;
    color: var(--white, #FFFFFF) !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background: var(--color-warning, #D69E2E) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background: var(--color-info, #3182CE) !important;
    color: var(--white, #FFFFFF) !important;
}

.badge.bg-light,
.badge.text-bg-light {
    background: var(--color-bg-secondary, #EDF2F7) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.badge.bg-dark,
.badge.text-bg-dark {
    background: var(--color-text-primary, #1A202C) !important;
    color: var(--white, #FFFFFF) !important;
}

/* ============================================
   9. Dropdowns - Consistent styling
   ============================================ */
.dropdown-menu {
    background: var(--dropdown-bg, #FFFFFF) !important;
    border: 1px solid var(--dropdown-border, rgba(212, 165, 165, 0.15)) !important;
    border-radius: var(--dropdown-radius, 12px) !important;
    box-shadow: var(--dropdown-shadow, 0 8px 30px rgba(0, 0, 0, 0.1)) !important;
    padding: 0.5rem !important;
}

.dropdown-menu.bp-dropdown-portal {
    position: fixed !important;
    inset: auto !important;
    margin: 0 !important;
    z-index: 2000 !important;
}

.dropdown-item {
    color: var(--color-text-primary, #1A202C) !important;
    border-radius: 8px !important;
    padding: 0.625rem 1rem !important;
    transition: background var(--transition-fast) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--dropdown-hover, rgba(212, 165, 165, 0.08)) !important;
    color: var(--dropdown-active-color, #D4A5A5) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--color-accent, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
}

.dropdown-divider {
    border-color: var(--color-border-light, #E2E8F0) !important;
}

/* ============================================
   10. Pagination - Consistent styling
   ============================================ */
.pagination {
    gap: 0.25rem !important;
}

.page-link {
    color: var(--pagination-color, #D4A5A5) !important;
    background: var(--white, #FFFFFF) !important;
    border: 1px solid var(--pagination-border, rgba(212, 165, 165, 0.2)) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.875rem !important;
    transition: all var(--transition-fast) !important;
}

.page-link:hover {
    background: var(--color-accent-subtle, #E8F4F4) !important;
    border-color: var(--color-accent, #D4A5A5) !important;
    color: var(--color-accent, #D4A5A5) !important;
}

.page-item.active .page-link {
    background: var(--pagination-active-bg, linear-gradient(135deg, #D4A5A5 0%, #D4A5A5 100%)) !important;
    border-color: var(--pagination-active-border, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
}

.page-item.disabled .page-link {
    background: var(--color-bg-secondary, #EDF2F7) !important;
    border-color: var(--color-border-light, #E2E8F0) !important;
    color: var(--color-text-muted, #A0AEC0) !important;
}

/* ============================================
   11. Nav Tabs - Consistent styling
   ============================================ */
.nav-tabs {
    border-bottom: 2px solid var(--color-border-light, #E2E8F0) !important;
}

.nav-tabs .nav-link {
    color: var(--color-text-secondary, #4A5568) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: var(--font-medium, 500) !important;
    transition: all var(--transition-fast) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--tab-hover-border, rgba(212, 165, 165, 0.3)) !important;
    color: var(--color-accent, #D4A5A5) !important;
}

.nav-tabs .nav-link.active {
    color: var(--tab-active-color, #D4A5A5) !important;
    border-color: var(--tab-active-border, #D4A5A5) !important;
    background: transparent !important;
    font-weight: var(--font-semibold, 600) !important;
}

/* ============================================
   12. List Groups - Consistent styling
   ============================================ */
.list-group-item {
    background: var(--color-bg-primary, #FFFFFF) !important;
    color: var(--color-text-primary, #1A202C) !important;
    border-color: var(--color-border-light, #E2E8F0) !important;
    padding: 1rem 1.25rem !important;
}

.list-group-item:first-child {
    border-top-left-radius: var(--card-radius, 16px) !important;
    border-top-right-radius: var(--card-radius, 16px) !important;
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--card-radius, 16px) !important;
    border-bottom-right-radius: var(--card-radius, 16px) !important;
}

.list-group-item.active {
    background: var(--color-accent, #D4A5A5) !important;
    border-color: var(--color-accent, #D4A5A5) !important;
    color: var(--white, #FFFFFF) !important;
}

.list-group-item-action:hover {
    background: var(--color-bg-secondary, #F7FAFC) !important;
    color: var(--color-accent, #D4A5A5) !important;
}

/* ============================================
   13. Progress Bars - Consistent styling
   ============================================ */
.progress {
    background: var(--color-bg-tertiary, #E2E8F0) !important;
    border-radius: var(--radius-full, 9999px) !important;
    height: 0.625rem !important;
}

.progress-bar {
    background: var(--gradient-accent, linear-gradient(135deg, #D4A5A5 0%, #D4A5A5 100%)) !important;
    border-radius: var(--radius-full, 9999px) !important;
}

.progress-bar.bg-success {
    background: var(--gradient-accent, linear-gradient(135deg, #D4A5A5 0%, #A07070 100%)) !important;
}

.progress-bar.bg-danger {
    background: var(--gradient-danger, linear-gradient(135deg, #FC8181 0%, #E53E3E 100%)) !important;
}

.progress-bar.bg-warning {
    background: var(--gradient-warning, linear-gradient(135deg, #ECC94B 0%, #D69E2E 100%)) !important;
}

.progress-bar.bg-info {
    background: var(--gradient-info, linear-gradient(135deg, #63B3ED 0%, #3182CE 100%)) !important;
}

/* ============================================
   14. Breadcrumbs - Consistent styling
   ============================================ */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}

.breadcrumb-item {
    color: var(--color-text-secondary, #4A5568) !important;
}

.breadcrumb-item a {
    color: var(--color-accent, #D4A5A5) !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover {
    color: var(--color-accent-hover, #A07070) !important;
    text-decoration: underline !important;
}

.breadcrumb-item.active {
    color: var(--color-text-muted, #718096) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-muted, #A0AEC0) !important;
}

/* ============================================
   15. Tooltips & Popovers - Consistent styling
   ============================================ */
.tooltip-inner {
    background: var(--color-bg-inverse, #2C3E50) !important;
    color: var(--white, #FFFFFF) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.875rem !important;
    font-size: var(--text-sm, 0.875rem) !important;
}

.popover {
    background: var(--color-bg-primary, #FFFFFF) !important;
    border: 1px solid var(--color-border-accent, rgba(212, 165, 165, 0.2)) !important;
    border-radius: var(--card-radius, 16px) !important;
    box-shadow: var(--dropdown-shadow, 0 8px 30px rgba(0, 0, 0, 0.1)) !important;
}

.popover-header {
    background: var(--color-bg-secondary, #F7FAFC) !important;
    color: var(--color-text-primary, #1A202C) !important;
    border-bottom: 1px solid var(--color-border-light, #E2E8F0) !important;
    font-weight: var(--font-semibold, 600) !important;
}

.popover-body {
    color: var(--color-text-primary, #1A202C) !important;
}

/* ============================================
   16. Accordion - Consistent styling
   ============================================ */
.accordion-item {
    background: var(--color-bg-primary, #FFFFFF) !important;
    border: 1px solid var(--color-border-light, #E2E8F0) !important;
}

.accordion-button {
    background: var(--color-bg-primary, #FFFFFF) !important;
    color: var(--color-text-primary, #1A202C) !important;
    font-weight: var(--font-medium, 500) !important;
    padding: 1rem 1.25rem !important;
}

.accordion-button:not(.collapsed) {
    background: var(--color-accent-subtle, #E8F4F4) !important;
    color: var(--color-accent, #D4A5A5) !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: var(--input-shadow-focus, 0 0 0 3px rgba(212, 165, 165, 0.35)) !important;
    border-color: var(--color-accent, #D4A5A5) !important;
}

.accordion-body {
    color: var(--color-text-primary, #1A202C) !important;
    padding: 1.25rem !important;
}

/* ============================================
   17. Spinners - Consistent styling
   ============================================ */
.spinner-border {
    color: var(--color-accent, #D4A5A5) !important;
}

.spinner-grow {
    color: var(--color-accent, #D4A5A5) !important;
}

/* ============================================
   18. Close Button - Consistent styling
   ============================================ */
.btn-close {
    opacity: 0.5 !important;
    transition: opacity var(--transition-fast) !important;
}

.btn-close:hover {
    opacity: 1 !important;
}

/* ============================================
   19. Offcanvas - Consistent styling
   ============================================ */
.offcanvas {
    background: var(--color-bg-primary, #FFFFFF) !important;
    color: var(--color-text-primary, #1A202C) !important;
}

.offcanvas-header {
    background: var(--modal-header-bg, linear-gradient(135deg, #D4A5A5 0%, #D4A5A5 100%)) !important;
    color: var(--white, #FFFFFF) !important;
}

.offcanvas-title {
    color: var(--white, #FFFFFF) !important;
    font-weight: var(--font-semibold, 600) !important;
}

.offcanvas-header .btn-close {
    filter: brightness(0) invert(1) !important;
}

/* ============================================
   20. Background Utilities Fix
   ============================================ */
.bg-primary {
    background: var(--color-accent, #D4A5A5) !important;
}

.bg-secondary {
    background: var(--color-bg-secondary, #EDF2F7) !important;
}

.bg-success {
    background: var(--brand-500, #D4A5A5) !important;
}

.bg-danger {
    background: var(--color-danger, #E53E3E) !important;
}

.bg-warning {
    background: var(--color-warning, #D69E2E) !important;
}

.bg-info {
    background: var(--color-info, #3182CE) !important;
}

.bg-light {
    background: var(--color-bg-secondary, #F7FAFC) !important;
}

.bg-dark {
    background: var(--color-bg-inverse, #2C3E50) !important;
}

.bg-white {
    background: var(--white, #FFFFFF) !important;
}

.bg-body {
    background: var(--color-bg-body, #F7FAFC) !important;
}

/* ============================================
   21. Border Utilities Fix
   ============================================ */
.border {
    border-color: var(--color-border, #E2E8F0) !important;
}

.border-primary {
    border-color: var(--color-accent, #D4A5A5) !important;
}

.border-secondary {
    border-color: var(--color-border-medium, #CBD5E0) !important;
}

.border-success {
    border-color: var(--color-success, #38A169) !important;
}

.border-danger {
    border-color: var(--color-danger, #E53E3E) !important;
}

.border-warning {
    border-color: var(--color-warning, #D69E2E) !important;
}

.border-info {
    border-color: var(--color-info, #3182CE) !important;
}

.border-light {
    border-color: var(--color-border-light, #EDF2F7) !important;
}

/* ============================================
   22. Shadow Utilities Fix
   ============================================ */
.shadow-sm {
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)) !important;
}

.shadow {
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.08)) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.1)) !important;
}

/* ============================================
   23. Focus States - Accessibility
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--color-accent, #D4A5A5) !important;
    outline-offset: 2px !important;
}

/* ============================================
   24. Links - Consistent styling
   ============================================ */
a {
    color: var(--color-accent, #D4A5A5);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover, #A07070);
}

/* Ensure links inside cards/tables inherit properly */
.card a:not(.btn),
.table a:not(.btn),
.list-group-item a:not(.btn) {
    color: var(--color-accent, #D4A5A5) !important;
}

.card a:not(.btn):hover,
.table a:not(.btn):hover,
.list-group-item a:not(.btn):hover {
    color: var(--color-accent-hover, #A07070) !important;
}