/* ============================================
   GLOBAL CONTRAST & DESIGN IMPROVEMENTS
   ============================================ */

/* Enhanced Color Variables with Better Contrast */
:root {
    /* Text Colors - WCAG AA Compliant */
    --text-primary-light: #0f172a;        /* High contrast on white */
    --text-primary-dark: #f9fafb;         /* High contrast on dark */
    --text-secondary-light: #475569;      /* 4.5:1 contrast ratio */
    --text-secondary-dark: #e2e8f0;      /* 4.5:1 contrast ratio */
    --text-tertiary-light: #64748b;       /* 3:1 contrast ratio */
    --text-tertiary-dark: #cbd5e1;       /* 3:1 contrast ratio */
    
    /* Background Colors */
    --bg-primary-light: #ffffff;
    --bg-primary-dark: #0f172a;
    --bg-secondary-light: #f8fafc;
    --bg-secondary-dark: #1e293b;
    --bg-tertiary-light: #f1f5f9;
    --bg-tertiary-dark: #334155;
    
    /* Border Colors - Better Visibility */
    --border-light: #cbd5e1;
    --border-dark: #475569;
    
    /* Shadow with Better Definition */
    --shadow-contrast: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-contrast-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
}

[data-bs-theme="dark"] {
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-tertiary: var(--text-tertiary-dark);
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --border-color: var(--border-dark);
}

/* ============================================
   TEXT CONTRAST IMPROVEMENTS
   ============================================ */

/* Replace all text-muted with better contrast */
.text-muted {
    color: var(--text-secondary-light) !important;
    font-weight: 500 !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--text-secondary-dark) !important;
}

/* Font Awesome 6 Free Solid maps icons to font-weight 900; our .text-muted uses font-weight:500
   and would otherwise show missing/tofu glyphs on any <i class="fas … text-muted"> */
i.fas.text-muted {
    font-weight: 900 !important;
}

/* Small text - ensure minimum contrast (but don't clobber inside buttons/badges/alerts) */
small:not(.btn small):not(.badge small):not(.alert small):not([class*="btn-"] small),
.small:not(.btn .small):not(.badge .small):not(.alert .small) {
    color: var(--text-secondary-light) !important;
    font-weight: 500 !important;
}

[data-bs-theme="dark"] small:not(.btn small):not(.badge small):not(.alert small):not([class*="btn-"] small),
[data-bs-theme="dark"] .small:not(.btn .small):not(.badge .small):not(.alert .small) {
    color: var(--text-secondary-dark) !important;
}

/* Secondary text */
.text-secondary {
    color: var(--text-secondary-light) !important;
    font-weight: 500 !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--text-secondary-dark) !important;
}

/* Headings - Ensure strong contrast (but preserve gradient-text + colored card headers) */
h1:not(.gradient-text):not([class*="gradient"]),
h2:not(.gradient-text):not([class*="gradient"]),
h3:not(.gradient-text):not([class*="gradient"]),
h4:not(.gradient-text):not([class*="gradient"]),
h5:not(.gradient-text):not([class*="gradient"]),
h6:not(.gradient-text):not([class*="gradient"]) {
    font-weight: 700 !important;
}

h1:not(.gradient-text):not([class*="gradient"]):not(.card-header h1):not(.alert h1):not([class*="page-header"] h1),
h2:not(.gradient-text):not([class*="gradient"]):not(.card-header h2):not(.alert h2):not([class*="page-header"] h2),
h3:not(.gradient-text):not([class*="gradient"]):not(.card-header h3):not(.alert h3):not([class*="page-header"] h3),
h4:not(.gradient-text):not([class*="gradient"]):not(.card-header h4):not(.alert h4):not([class*="page-header"] h4),
h5:not(.gradient-text):not([class*="gradient"]):not(.card-header h5):not(.alert h5):not([class*="page-header"] h5),
h6:not(.gradient-text):not([class*="gradient"]):not(.card-header h6):not(.alert h6):not([class*="page-header"] h6) {
    color: var(--text-primary-light);
}

[data-bs-theme="dark"] h1:not(.gradient-text):not([class*="gradient"]):not(.card-header h1):not(.alert h1):not([class*="page-header"] h1),
[data-bs-theme="dark"] h2:not(.gradient-text):not([class*="gradient"]):not(.card-header h2):not(.alert h2):not([class*="page-header"] h2),
[data-bs-theme="dark"] h3:not(.gradient-text):not([class*="gradient"]):not(.card-header h3):not(.alert h3):not([class*="page-header"] h3),
[data-bs-theme="dark"] h4:not(.gradient-text):not([class*="gradient"]):not(.card-header h4):not(.alert h4):not([class*="page-header"] h4),
[data-bs-theme="dark"] h5:not(.gradient-text):not([class*="gradient"]):not(.card-header h5):not(.alert h5):not([class*="page-header"] h5),
[data-bs-theme="dark"] h6:not(.gradient-text):not([class*="gradient"]):not(.card-header h6):not(.alert h6):not([class*="page-header"] h6) {
    color: var(--text-primary-dark);
}

/* Paragraphs - readable, but don't clobber colored contexts */
p {
    line-height: 1.6;
}

p:not(.btn p):not(.badge p):not(.alert p):not([class*="btn-"] p):not([class*="hero"] p):not([class*="gradient"] p) {
    color: var(--text-primary-light);
}

[data-bs-theme="dark"] p:not(.btn p):not(.badge p):not(.alert p):not([class*="btn-"] p):not([class*="hero"] p):not([class*="gradient"] p) {
    color: var(--text-primary-dark);
}

/* ============================================
   CARD & CONTAINER IMPROVEMENTS
   ============================================ */

/* All cards - Better borders and shadows */
.card,
.card-modern {
    background: var(--bg-primary-light) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-contrast) !important;
    border-radius: 16px !important;
}

[data-bs-theme="dark"] .card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light):not([class*="bg-gradient"]),
[data-bs-theme="dark"] .card-modern:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-light):not([class*="bg-gradient"]) {
    background: var(--bg-primary-dark) !important;
    border-color: var(--border-dark) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Colored stat cards (bg-primary/success/info/warning/danger) - keep vivid colors in dark mode
   so the white heading/number text remains readable. */
[data-bs-theme="dark"] .card.bg-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .card.bg-success {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .card.bg-info {
    background: linear-gradient(135deg, #0e7490 0%, #0ea5e9 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .card.bg-warning {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .card.bg-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .card.bg-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Force readable white text inside colored stat cards */
[data-bs-theme="dark"] .card.bg-primary,
[data-bs-theme="dark"] .card.bg-success,
[data-bs-theme="dark"] .card.bg-info,
[data-bs-theme="dark"] .card.bg-warning,
[data-bs-theme="dark"] .card.bg-danger,
[data-bs-theme="dark"] .card.bg-dark {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .card.bg-primary .card-body,
[data-bs-theme="dark"] .card.bg-success .card-body,
[data-bs-theme="dark"] .card.bg-info .card-body,
[data-bs-theme="dark"] .card.bg-warning .card-body,
[data-bs-theme="dark"] .card.bg-danger .card-body,
[data-bs-theme="dark"] .card.bg-dark .card-body,
[data-bs-theme="dark"] .card.bg-primary .card-body *,
[data-bs-theme="dark"] .card.bg-success .card-body *,
[data-bs-theme="dark"] .card.bg-info .card-body *,
[data-bs-theme="dark"] .card.bg-warning .card-body *,
[data-bs-theme="dark"] .card.bg-danger .card-body *,
[data-bs-theme="dark"] .card.bg-dark .card-body * {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .card.bg-primary .opacity-75,
[data-bs-theme="dark"] .card.bg-success .opacity-75,
[data-bs-theme="dark"] .card.bg-info .opacity-75,
[data-bs-theme="dark"] .card.bg-warning .opacity-75,
[data-bs-theme="dark"] .card.bg-danger .opacity-75,
[data-bs-theme="dark"] .card.bg-dark .opacity-75 {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
}

/* Card headers - Better contrast (do not clobber gradient/colored card headers
   or cards in .budgets-list / .families-list which have custom designs) */
.card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]):not(.budgets-list .card-header):not(.families-list .card-header),
.card-modern-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]) {
    background: var(--bg-secondary-light);
    border-bottom: 2px solid var(--border-light);
    padding: 1.25rem 1.5rem;
}

[data-bs-theme="dark"] .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]):not(.budgets-list .card-header):not(.families-list .card-header),
[data-bs-theme="dark"] .card-modern-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]) {
    background: var(--bg-secondary-dark);
    border-bottom-color: var(--border-dark);
}

.card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]) h5,
.card-modern-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]) h5 {
    color: var(--text-primary-light);
    font-weight: 700;
    font-size: 1.1rem;
}

[data-bs-theme="dark"] .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]) h5,
[data-bs-theme="dark"] .card-modern-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark):not([class*="bg-gradient"]) h5 {
    color: var(--text-primary-dark);
}

/* Card body */
.card-body,
.card-modern-body {
    padding: 1.5rem !important;
    color: var(--text-primary-light) !important;
}

[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-modern-body {
    color: var(--text-primary-dark) !important;
}

/* ============================================
   BUTTON IMPROVEMENTS
   ============================================ */

/* Primary buttons - Better contrast */
.btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

/* Outline buttons - Better visibility */
.btn-outline-primary {
    border: 2px solid #6366f1 !important;
    color: #6366f1 !important;
    background: transparent !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* Secondary buttons */
.btn-secondary {
    background: var(--bg-tertiary-light) !important;
    border: 2px solid var(--border-light) !important;
    color: var(--text-primary-light) !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary-dark) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

/* Form labels - Better contrast */
.form-label {
    color: var(--text-primary-light) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

[data-bs-theme="dark"] .form-label {
    color: var(--text-primary-dark) !important;
}

/* Form controls - Better borders */
.form-control,
.form-select {
    border: 2px solid var(--border-light) !important;
    background: var(--bg-primary-light) !important;
    color: var(--text-primary-light) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-color: var(--border-dark) !important;
    background: var(--bg-primary-dark) !important;
    color: var(--text-primary-dark) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
    outline: none !important;
}

/* ============================================
   BADGES & LABELS
   ============================================ */

/* Badges - Better contrast */
.badge {
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}

.badge.bg-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
}

.badge.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
}

/* ============================================
   TABLES
   ============================================ */

/* Table headers - Better contrast */
.table thead th {
    background: var(--bg-secondary-light) !important;
    color: var(--text-primary-light) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--border-light) !important;
    padding: 1rem !important;
}

[data-bs-theme="dark"] .table thead th {
    background: var(--bg-secondary-dark) !important;
    color: var(--text-primary-dark) !important;
    border-bottom-color: var(--border-dark) !important;
}

/* Table rows */
.table tbody td {
    color: var(--text-primary-light) !important;
    padding: 1rem !important;
    border-bottom: 1px solid var(--border-light) !important;
}

[data-bs-theme="dark"] .table tbody td {
    color: var(--text-primary-dark) !important;
    border-bottom-color: var(--border-dark) !important;
}

.table tbody tr:hover {
    background: var(--bg-secondary-light) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background: var(--bg-secondary-dark) !important;
}

/* ============================================
   LINKS
   ============================================ */

/* Links - Better contrast (but DO NOT clobber button-styled anchors, nav links,
   dropdown items, pagination, logo, flags, any custom btn/action/cta/quick-action
   component, or anchors that use [role="button"]).
   Note: we broadened "btn-" to "btn" so classes like "chat-send-btn" or
   "badges-action-btn" are also excluded. */
a:not(.btn):not([class*="btn"]):not([class*="action-btn"]):not([class*="action-primary"]):not([class*="action-secondary"]):not([class*="action-danger"]):not([class*="-cta"]):not([class*="cta-"]):not(.cta):not(.quick-action):not(.quick-action-primary):not(.hero-cta):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.page-link):not(.language-flag-item):not(.app-logo-link):not(.navbar-brand):not(.badge):not(.list-group-item):not(.dashboard-action-card):not(.app-onboarding-btn):not(.app-sidebar__link):not(.app-sidebar__brand):not([role="button"]) {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

a:not(.btn):not([class*="btn"]):not([class*="action-btn"]):not([class*="action-primary"]):not([class*="action-secondary"]):not([class*="action-danger"]):not([class*="-cta"]):not([class*="cta-"]):not(.cta):not(.quick-action):not(.quick-action-primary):not(.hero-cta):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.page-link):not(.language-flag-item):not(.app-logo-link):not(.navbar-brand):not(.badge):not(.list-group-item):not(.app-sidebar__link):not(.app-sidebar__brand):not([role="button"]):hover {
    color: #4f46e5;
    text-decoration: none;
}

/* Only underline on hover for anchors inside prose/content areas */
.prose a:hover,
article a:not(.btn):not([role="button"]):hover,
.text-content a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

[data-bs-theme="dark"] a:not(.btn):not([class*="btn"]):not([class*="action-btn"]):not([class*="action-primary"]):not([class*="action-secondary"]):not([class*="action-danger"]):not([class*="-cta"]):not([class*="cta-"]):not(.cta):not(.quick-action):not(.quick-action-primary):not(.hero-cta):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.page-link):not(.language-flag-item):not(.app-logo-link):not(.navbar-brand):not(.badge):not(.list-group-item):not(.dashboard-action-card):not(.app-onboarding-btn):not(.app-sidebar__link):not(.app-sidebar__brand):not([role="button"]) {
    color: #a5b4fc;
}

[data-bs-theme="dark"] a:not(.btn):not([class*="btn"]):not([class*="action-btn"]):not([class*="action-primary"]):not([class*="action-secondary"]):not([class*="action-danger"]):not([class*="-cta"]):not([class*="cta-"]):not(.cta):not(.quick-action):not(.quick-action-primary):not(.hero-cta):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.page-link):not(.language-flag-item):not(.app-logo-link):not(.navbar-brand):not(.badge):not(.list-group-item):not(.app-sidebar__link):not(.app-sidebar__brand):not([role="button"]):hover {
    color: #c7d2fe;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert {
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    padding: 1rem 1.5rem !important;
    font-weight: 500 !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
    color: #059669 !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;
    color: #d97706 !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
    color: #2563eb !important;
}

[data-bs-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .alert-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Nav items - Better contrast */
.nav-link {
    color: var(--text-secondary-light) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.nav-link:hover,
.nav-link.active {
    color: #6366f1 !important;
    font-weight: 600 !important;
}

/* Bootstrap nav-pills: active tab uses primary background — indigo text is unreadable */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
    color: #fff !important;
}

[data-bs-theme="dark"] .nav-link {
    color: var(--text-secondary-dark) !important;
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link.active {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .nav-pills .nav-link.active:hover,
[data-bs-theme="dark"] .nav-pills .nav-link.active:focus {
    color: #fff !important;
}

/* ============================================
   ICONS
   ============================================ */

/* Icons - Better visibility */
i.fas,
i.far,
i.fal,
i.fab {
    opacity: 0.9 !important;
}

/* Icon in buttons */
.btn i {
    opacity: 1 !important;
}

/* ============================================
   EMPTY STATES
   ============================================ */

.empty-state {
    padding: 3rem 2rem !important;
    text-align: center !important;
}

.empty-state i {
    color: var(--text-secondary-light) !important;
    opacity: 0.6 !important;
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
}

[data-bs-theme="dark"] .empty-state i {
    color: var(--text-secondary-dark) !important;
}

.empty-state h4,
.empty-state h5 {
    color: var(--text-primary-light) !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

[data-bs-theme="dark"] .empty-state h4,
[data-bs-theme="dark"] .empty-state h5 {
    color: var(--text-primary-dark) !important;
}

.empty-state p {
    color: var(--text-secondary-light) !important;
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
}

[data-bs-theme="dark"] .empty-state p {
    color: var(--text-secondary-dark) !important;
}

/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    .card-body,
    .card-modern-body {
        padding: 1rem !important;
    }
    
    .card-header,
    .card-modern-header {
        padding: 1rem 1.25rem !important;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus indicators - Better visibility */
*:focus-visible {
    outline: 3px solid #6366f1 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card,
    .card-modern {
        border: 2px solid currentColor !important;
    }
    
    .btn {
        border: 2px solid currentColor !important;
    }
    
    .text-muted {
        color: currentColor !important;
        opacity: 0.8 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   CONTRAST SAFETY NET - v2
   Ensures all gradient/filled buttons have solid white text with a subtle
   text-shadow for depth. This section ships AFTER the broad rules above so it
   always wins, and it uses both tag + class specificity so !important isn't
   required.
   ============================================================================ */

/* Any anchor styled as a Bootstrap solid button must have white text */
a.btn-primary,
a.btn-success,
a.btn-danger,
a.btn-warning,
a.btn-info,
a.btn-dark,
a.btn-secondary,
button.btn-primary,
button.btn-success,
button.btn-danger,
button.btn-warning,
button.btn-info,
button.btn-dark {
    color: #ffffff;
}

a.btn-primary:hover,
a.btn-success:hover,
a.btn-danger:hover,
a.btn-warning:hover,
a.btn-info:hover,
a.btn-dark:hover,
a.btn-secondary:hover,
button.btn-primary:hover,
button.btn-success:hover,
button.btn-danger:hover,
button.btn-warning:hover,
button.btn-info:hover,
button.btn-dark:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Custom gradient buttons - force legible white text. Only list classes whose
   default state is always on a saturated / dark background. Never add a class
   here for a control drawn on white or near-white (same bug as “invisible”
   settings on a white pill). */
.btn-create-budget,
.btn-create-budget:link,
.btn-create-budget:visited,
.btn-create-budget:hover,
.btn-create-budget:focus,
.btn-create-budget:active,
.btn-create-budget-text,
.btn-create-budget-icon,
.btn-create-budget .btn-create-budget-text,
.btn-create-budget .btn-create-budget-icon,
.btn-create-budget i,
.btn-create-session,
.btn-create-session:link,
.btn-create-session:visited,
.btn-create-session:hover,
.btn-create-session:focus,
.btn-create-session:active,
.btn-create-session *,
.btn-family-details,
.btn-family-details:link,
.btn-family-details:visited,
.btn-family-details:hover,
.btn-family-details:focus,
.btn-family-details:active,
.btn-family-details *,
.btn-add-item-modern,
.btn-add-item-modern:link,
.btn-add-item-modern:visited,
.btn-add-item-modern:hover,
.btn-add-item-modern:focus,
.btn-add-item-modern:active,
.btn-add-item-modern *,
.btn-analytics-basic,
.btn-analytics-basic:link,
.btn-analytics-basic:visited,
.btn-analytics-basic:hover,
.btn-analytics-basic:focus,
.btn-analytics-basic:active,
.btn-analytics-basic *,
.btn-analytics-advanced,
.btn-analytics-advanced:link,
.btn-analytics-advanced:visited,
.btn-analytics-advanced:hover,
.btn-analytics-advanced:focus,
.btn-analytics-advanced:active,
.btn-analytics-advanced *,
/* Primary/gradient CTAs on empty states, dashboards, badges, challenges,
   hero sections, and admin/support screens */
.badges-action-btn.badges-action-primary,
.badges-action-btn.badges-action-primary:link,
.badges-action-btn.badges-action-primary:visited,
.badges-action-btn.badges-action-primary:hover,
.badges-action-btn.badges-action-primary:focus,
.badges-action-btn.badges-action-primary:active,
.badges-action-btn.badges-action-primary *,
.btn-primary-modern,
.btn-primary-modern:link,
.btn-primary-modern:visited,
.btn-primary-modern:hover,
.btn-primary-modern:focus,
.btn-primary-modern:active,
.btn-primary-modern *,
.btn-empty-state-primary,
.btn-empty-state-primary:link,
.btn-empty-state-primary:visited,
.btn-empty-state-primary:hover,
.btn-empty-state-primary:focus,
.btn-empty-state-primary:active,
.btn-empty-state-primary *,
.btn-hero-primary,
.btn-hero-primary:link,
.btn-hero-primary:visited,
.btn-hero-primary:hover,
.btn-hero-primary:focus,
.btn-hero-primary:active,
.btn-hero-primary *,
.btn-nav-primary,
.btn-nav-primary:link,
.btn-nav-primary:visited,
.btn-nav-primary:hover,
.btn-nav-primary:focus,
.btn-nav-primary:active,
.btn-nav-primary *,
.btn-cta,
.btn-cta:link,
.btn-cta:visited,
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active,
.btn-cta *,
.btn-newsletter,
.btn-newsletter:link,
.btn-newsletter:visited,
.btn-newsletter:hover,
.btn-newsletter:focus,
.btn-newsletter:active,
.btn-newsletter *,
.btn-support-new,
.btn-support-new:link,
.btn-support-new:visited,
.btn-support-new:hover,
.btn-support-new:focus,
.btn-support-new:active,
.btn-support-new *,
.btn-invite-modern,
.btn-invite-modern:link,
.btn-invite-modern:visited,
.btn-invite-modern:hover,
.btn-invite-modern:focus,
.btn-invite-modern:active,
.btn-invite-modern *,
.btn-member-action-primary,
.btn-member-action-primary:link,
.btn-member-action-primary:visited,
.btn-member-action-primary:hover,
.btn-member-action-primary:focus,
.btn-member-action-primary:active,
.btn-member-action-primary *,
.btn-member-action-danger,
.btn-member-action-danger:link,
.btn-member-action-danger:visited,
.btn-member-action-danger:hover,
.btn-member-action-danger:focus,
.btn-member-action-danger:active,
.btn-member-action-danger *,
.btn-copy-enhanced,
.btn-copy-enhanced:link,
.btn-copy-enhanced:visited,
.btn-copy-enhanced:hover,
.btn-copy-enhanced:focus,
.btn-copy-enhanced:active,
.btn-copy-enhanced *,
.btn-danger-delete,
.btn-danger-delete:link,
.btn-danger-delete:visited,
.btn-danger-delete:hover,
.btn-danger-delete:focus,
.btn-danger-delete:active,
.btn-danger-delete *,
.chat-send-btn,
.chat-send-btn:hover,
.chat-send-btn:focus,
.chat-send-btn:active,
.chat-send-btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Dashboard hero quick-actions: the non-primary pills live on top of a dark
   purple hero background, so they keep white text. The "primary" pill has a
   WHITE background to stand out, so it must use dark text - its own component
   styles in dashboard.blade.php define the correct colors and are left alone. */
.quick-action:not(.quick-action-primary),
.quick-action:not(.quick-action-primary):link,
.quick-action:not(.quick-action-primary):visited,
.quick-action:not(.quick-action-primary):hover,
.quick-action:not(.quick-action-primary):focus,
.quick-action:not(.quick-action-primary):active,
.quick-action:not(.quick-action-primary) strong,
.quick-action:not(.quick-action-primary) small,
.quick-action:not(.quick-action-primary) i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.quick-action-primary,
.quick-action-primary:link,
.quick-action-primary:visited,
.quick-action-primary:hover,
.quick-action-primary:focus,
.quick-action-primary:active {
    color: #1e1b4b !important;
    -webkit-text-fill-color: #1e1b4b !important;
    text-shadow: none !important;
}

.quick-action-primary .quick-action-text strong {
    color: #1e1b4b !important;
    -webkit-text-fill-color: #1e1b4b !important;
    text-shadow: none !important;
}

.quick-action-primary .quick-action-text small,
.quick-action-primary .quick-action-kbd {
    color: #4f46e5 !important;
    -webkit-text-fill-color: #4f46e5 !important;
    text-shadow: none !important;
}

.quick-action-primary .quick-action-icon,
.quick-action-primary .quick-action-icon i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Secondary / outline custom buttons on light backgrounds - keep the original
   accent colour readable (don't force white). These are the "companion"
   buttons to the gradient primaries above. */
.badges-action-btn.badges-action-secondary,
.badges-action-btn.badges-action-secondary:link,
.badges-action-btn.badges-action-secondary:visited {
    color: #6366f1 !important;
    -webkit-text-fill-color: #6366f1 !important;
    text-shadow: none;
}

.badges-action-btn.badges-action-secondary:hover,
.badges-action-btn.badges-action-secondary:focus,
.badges-action-btn.badges-action-secondary:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Back / ghost buttons on gradient hero headers - must stay white */
.badges-back-btn,
.badges-back-btn:link,
.badges-back-btn:visited,
.badges-back-btn:hover,
.badges-back-btn:focus,
.badges-back-btn:active,
.badges-back-btn *,
.btn-back-modern,
.btn-back-modern *,
.btn-back,
.btn-back * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Keep the rotating icon-circle's background opacity readable on hover */
.btn-create-budget .btn-create-budget-icon,
.btn-create-session .btn-create-session-icon,
.btn-add-item-modern .btn-add-item-icon {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure outline / back buttons remain visible on white surfaces */
.btn-back,
.btn-back-modern {
    color: var(--text-primary-light);
}

[data-bs-theme="dark"] .btn-back,
[data-bs-theme="dark"] .btn-back-modern {
    color: var(--text-primary-dark);
}

/* Bootstrap button anchors (btn-link excluded): force-dark text on pale buttons */
a.btn-light,
a.btn-outline-primary,
a.btn-outline-secondary,
a.btn-outline-success,
a.btn-outline-danger,
a.btn-outline-warning,
a.btn-outline-info {
    /* inherit the base .btn-outline-* color rules, don't override */
}

a.btn-link {
    color: #6366f1;
}

a.btn-link:hover {
    color: #4f46e5;
}

/* ============================================================================
   DESIGN POLISH - uniform spacing, radii, focus rings, readable defaults
   ============================================================================ */

/* WCAG-safe placeholder contrast */
::placeholder {
    color: #64748b;
    opacity: 1;
}
[data-bs-theme="dark"] ::placeholder {
    color: #94a3b8;
}

/* Unified focus ring on interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.55);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Slightly softer shadow on cards (layered look) */
.card,
.card-modern {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-modern {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/* Muted text must still pass 4.5:1 even on tinted surfaces */
.text-muted,
.small.text-muted {
    color: #475569 !important;
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .small.text-muted {
    color: #cbd5e1 !important;
}

/* Text on colored card headers must stay white */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-dark,
.card-header[class*="bg-gradient"],
.card-header.bg-primary *,
.card-header.bg-success *,
.card-header.bg-danger *,
.card-header.bg-warning *,
.card-header.bg-info *,
.card-header.bg-dark *,
.card-header[class*="bg-gradient"] * {
    color: #ffffff !important;
}

/*
 * The universal rule above forces white on every descendant. Light controls
 * (.btn-light, badges on light bg) then become white-on-white. Restore dark
 * foreground on those surfaces (including icons/spans inside the button).
 */
.card-header.bg-primary .btn-light,
.card-header.bg-primary .btn-light *,
.card-header.bg-success .btn-light,
.card-header.bg-success .btn-light *,
.card-header.bg-danger .btn-light,
.card-header.bg-danger .btn-light *,
.card-header.bg-info .btn-light,
.card-header.bg-info .btn-light *,
.card-header.bg-dark .btn-light,
.card-header.bg-dark .btn-light *,
.card-header[class*="bg-gradient"] .btn-light,
.card-header[class*="bg-gradient"] .btn-light *,
.card-header.bg-primary .badge.bg-light,
.card-header.bg-primary .badge.bg-light *,
.card-header.bg-success .badge.bg-light,
.card-header.bg-success .badge.bg-light *,
.card-header.bg-danger .badge.bg-light,
.card-header.bg-danger .badge.bg-light *,
.card-header.bg-info .badge.bg-light,
.card-header.bg-info .badge.bg-light *,
.card-header.bg-dark .badge.bg-light,
.card-header.bg-dark .badge.bg-light *,
.card-header[class*="bg-gradient"] .badge.bg-light,
.card-header[class*="bg-gradient"] .badge.bg-light *,
.card-header.bg-primary .badge.bg-white,
.card-header.bg-primary .badge.bg-white *,
.card-header.bg-success .badge.bg-white,
.card-header.bg-success .badge.bg-white *,
.card-header.bg-danger .badge.bg-white,
.card-header.bg-danger .badge.bg-white *,
.card-header.bg-info .badge.bg-white,
.card-header.bg-info .badge.bg-white *,
.card-header.bg-dark .badge.bg-white,
.card-header.bg-dark .badge.bg-white *,
.card-header[class*="bg-gradient"] .badge.bg-white,
.card-header[class*="bg-gradient"] .badge.bg-white * {
    color: #1f2937 !important;
}

.card-header.bg-warning,
.card-header.bg-warning * {
    color: #1f2937 !important; /* dark text reads better on yellow */
}

/* Alerts: keep icon/text legible in both themes */
.alert .btn-close {
    filter: none;
}

/* Badges: always white text on solid colors (already overridden above, this is
   the safety net for any custom badge wrappers) */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-dark,
.badge.bg-secondary,
.badge[class*="bg-gradient"] {
    color: #ffffff !important;
}
.badge.bg-warning,
.badge.bg-light {
    color: #1f2937 !important;
}

/* Tables: zebra rows + readable borders */
.table {
    --bs-table-hover-bg: rgba(99, 102, 241, 0.06);
}
[data-bs-theme="dark"] .table {
    --bs-table-hover-bg: rgba(129, 140, 248, 0.10);
}

/* Dropdown menus: readable items, proper hover */
.dropdown-menu {
    border: 1px solid var(--border-light);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 0.5rem;
}
[data-bs-theme="dark"] .dropdown-menu {
    background: var(--bg-secondary-dark);
    border-color: var(--border-dark);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.dropdown-item {
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary-light);
    font-weight: 500;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(99, 102, 241, 0.10);
    color: #4338ca;
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-primary-dark);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background: rgba(129, 140, 248, 0.18);
    color: #c7d2fe;
}

/* Modal: ensure body text is readable */
.modal-title {
    color: var(--text-primary-light);
    font-weight: 700;
}
[data-bs-theme="dark"] .modal-title {
    color: var(--text-primary-dark);
}

/* Progress labels readable on bar */
.progress-bar {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Forms: help text readable */
.form-text {
    color: #475569;
}
[data-bs-theme="dark"] .form-text {
    color: #cbd5e1;
}

/* Selection colour */
::selection {
    background: rgba(99, 102, 241, 0.25);
    color: inherit;
}

/* Scrollbars (WebKit) - readable in both themes */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.35);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 140, 248, 0.6);
}

/* ========== Dark mode: light surfaces (bg-light / bg-white) must not keep light text ==========
   Bootstrap .bg-white uses !important; cards with bg-light were excluded from dark card rules,
   leaving a light panel with body text still forced to light colours - unreadable. */
[data-bs-theme="dark"] .card.bg-light {
    background: var(--bg-secondary-dark) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-primary-dark) !important;
}

[data-bs-theme="dark"] .card.bg-light .card-body,
[data-bs-theme="dark"] .card.bg-light .card-body .fw-bold,
[data-bs-theme="dark"] .card.bg-light .fs-5 {
    color: var(--text-primary-dark) !important;
}

[data-bs-theme="dark"] .card.bg-light .text-muted,
[data-bs-theme="dark"] .card.bg-light small.text-muted,
[data-bs-theme="dark"] .card.bg-light .small.text-muted {
    color: var(--text-secondary-dark) !important;
}

[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-footer.bg-white {
    background: var(--bg-secondary-dark) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--border-dark) !important;
}

[data-bs-theme="dark"] .card-header.bg-white strong,
[data-bs-theme="dark"] .card-header.bg-white i {
    color: inherit;
}

[data-bs-theme="dark"] .list-group-item.bg-light {
    background: var(--bg-tertiary-dark) !important;
    color: var(--text-primary-dark) !important;
    border-color: var(--border-dark) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background: #334155 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

[data-bs-theme="dark"] .list-group-item .text-muted {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .list-group-item > span:not(.badge):not(.text-muted) {
    color: var(--text-primary-dark);
}

[data-bs-theme="dark"] thead.table-light th {
    background-color: rgba(30, 41, 59, 0.95) !important;
    color: #e2e8f0 !important;
    border-color: var(--border-dark) !important;
}