/* ============================================================================ CareSpend — Dark "care-fintech" theme Design system layered on top of Bootstrap 5.3's native dark color mode (the element carries data-bs-theme="dark"). This file defines the brand tokens, then retones Bootstrap components (cards, tables, forms, buttons, badges, alerts, dropdowns) plus the app shell (sidebar/header). Loaded AFTER bootstrap + the legacy inline styles so it wins. ============================================================================ */ :root { /* Brand gradient pulled from the CareSpend "C" mark: blue -> cyan -> green */ --cs-grad: linear-gradient(135deg, #006f9f 0%, #00c7c7 45%, #20e6a8 100%); --cs-grad-soft: linear-gradient(135deg, rgba(0,111,159,.35), rgba(0,199,199,.30), rgba(32,230,168,.28)); --cs-teal: #00c7c7; --cs-green: #20e6a8; --cs-blue: #006f9f; --cs-teal-strong: #00aeb3; --cs-aqua: #72f7ff; --cs-cyan: #00c7c7; /* Surfaces & ink */ --cs-bg: #07131f; /* page background */ --cs-bg-grad-1: #07131f; --cs-bg-grad-2: #06111c; --cs-sidebar: #06111c; /* nav rail */ --cs-surface: #0d1b2a; /* cards / panels */ --cs-surface-2: #102235; /* inputs / elevated */ --cs-surface-hover: #132c42; --cs-border: rgba(130, 210, 220, 0.14); --cs-border-strong: rgba(43, 238, 207, 0.45); --cs-text: #f4f8fb; --cs-text-muted: #9eb6c9; --cs-text-dim: #6A7C8E; --cs-text-soft: #c8d8e6; --cs-radius: 18px; --cs-radius-sm: 12px; --cs-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04); --cs-shadow-glow: 0 10px 24px rgba(0, 199, 199, 0.18), 0 0 22px rgba(32, 230, 168, 0.12); } /* ---- Map Bootstrap dark-mode tokens onto the brand palette ---------------- */ [data-bs-theme="dark"] { --bs-body-bg: var(--cs-bg); --bs-body-color: var(--cs-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--cs-text-muted); --bs-tertiary-color: var(--cs-text-dim); --bs-border-color: var(--cs-border); --bs-border-color-translucent: var(--cs-border); --bs-primary: var(--cs-teal); --bs-primary-rgb: 22, 199, 154; --bs-link-color: var(--cs-cyan); --bs-link-color-rgb: 56, 214, 224; --bs-link-hover-color: var(--cs-aqua); --bs-tertiary-bg: var(--cs-surface); --bs-secondary-bg: var(--cs-surface-2); } /* ---- Page shell ----------------------------------------------------------- */ body { background: radial-gradient(1200px 600px at 82% -12%, rgba(0, 199, 199, 0.09), transparent 60%), radial-gradient(700px 380px at 8% 100%, rgba(32, 230, 168, 0.055), transparent 64%), linear-gradient(180deg, var(--cs-bg-grad-1) 0%, var(--cs-bg-grad-2) 100%) !important; color: var(--cs-text); -webkit-font-smoothing: antialiased; } /* Utility recolors so legacy markup reads correctly on dark surfaces */ .bg-white { background-color: var(--cs-surface) !important; } .bg-light { background-color: var(--cs-surface-2) !important; } .text-dark { color: var(--cs-text) !important; } .text-muted, .text-secondary { color: var(--cs-text-soft) !important; } .text-primary { color: var(--cs-teal) !important; } .text-success { color: var(--cs-green) !important; } .text-info { color: var(--cs-aqua) !important; } .text-warning { color: #ffc96a !important; } .text-danger { color: #ff8898 !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--cs-border) !important; } hr { border-color: var(--cs-border); opacity: 1; } a { color: var(--cs-cyan); text-decoration: none; } a:hover { color: var(--cs-aqua); } /* ---- Cards / panels ------------------------------------------------------- */ .card { background: linear-gradient(180deg, rgba(16, 34, 53, 0.92), rgba(8, 20, 32, 0.92)); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); color: var(--cs-text); } .card-header { background-color: transparent !important; border-bottom: 1px solid var(--cs-border); color: var(--cs-text); font-weight: 600; } .card-footer { background-color: transparent; border-top: 1px solid var(--cs-border); } .shadow, .shadow-sm { box-shadow: var(--cs-shadow) !important; } .card:hover { border-color: rgba(130, 210, 220, 0.20); } /* Colored "border-*" accent cards (admin management tiles) → subtle glow edge */ .card.border-primary { border-color: rgba(32, 230, 168, 0.38) !important; } .card.border-success { border-color: rgba(0, 199, 199, 0.38) !important; } .card.border-info { border-color: rgba(56,214,224,0.40) !important; } .card.border-warning { border-color: rgba(255, 195, 40, 0.38) !important; } .card.border-danger { border-color: rgba(255, 88, 112, 0.38) !important; } /* ---- Stat cards (dashboard KPIs) ----------------------------------------- */ .stat-card { background: linear-gradient(180deg, rgba(18, 35, 52, 0.92), rgba(8, 20, 32, 0.92)) !important; border: 1px solid rgba(130, 210, 220, 0.16) !important; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05) !important; color: var(--cs-text) !important; } .stat-card .fa { color: var(--cs-teal); background: rgba(0,199,199,0.11); border: 1px solid rgba(0,199,199,0.20); border-radius: 14px; padding: 0.55rem; box-shadow: 0 0 18px rgba(0,199,199,0.08); } .card.bg-primary { background: radial-gradient(circle at 80% 10%, rgba(32,230,168,.45), transparent 35%), linear-gradient(135deg, #005b84 0%, #009c9f 50%, #20c989 100%) !important; color: #ffffff !important; border: 1px solid rgba(126, 255, 223, 0.55) !important; box-shadow: 0 18px 45px rgba(0, 199, 199, 0.24), inset 0 1px 0 rgba(255,255,255,0.12) !important; } .card.bg-primary span, .card.bg-primary h4 { color: #ffffff !important; } .card.bg-primary .fa { color: #ffffff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); } .card.bg-success, .card.bg-info, .card.bg-warning, .card.bg-danger, .card.bg-secondary { background: linear-gradient(180deg, rgba(18, 35, 52, 0.92), rgba(8, 20, 32, 0.92)) !important; color: var(--cs-text) !important; border: 1px solid rgba(130, 210, 220, 0.16) !important; } .card.bg-success { border-top-color: rgba(32, 230, 168, 0.40) !important; } .card.bg-info { border-top-color: rgba(0, 199, 199, 0.40) !important; } .card.bg-warning { border-top-color: rgba(255, 179, 38, 0.40) !important; } .card.bg-danger { border-top-color: rgba(255, 88, 112, 0.40) !important; } .card.bg-secondary { border-top-color: rgba(158, 182, 201, 0.34) !important; } .card.bg-success span, .card.bg-success h4, .card.bg-info span, .card.bg-info h4, .card.bg-warning span, .card.bg-warning h4, .card.bg-danger span, .card.bg-danger h4, .card.bg-secondary span, .card.bg-secondary h4 { color: var(--cs-text) !important; } /* ---- Tables --------------------------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--cs-text); --bs-table-border-color: var(--cs-border); --bs-table-hover-bg: rgba(0, 199, 199, 0.045); --bs-table-hover-color: var(--cs-text); color: var(--cs-text); } .table > thead th { color: var(--cs-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; border-bottom: 1px solid rgba(130, 210, 220, 0.12); } .table > tbody > tr > td { border-color: rgba(130, 210, 220, 0.10); vertical-align: middle; } /* ---- Buttons -------------------------------------------------------------- */ .btn { border-radius: var(--cs-radius-sm); font-weight: 700; } .btn-primary { background: var(--cs-grad); border: 1px solid rgba(115, 255, 225, 0.55); color: #ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 10px 24px rgba(0, 199, 199, 0.18), 0 0 22px rgba(32, 230, 168, 0.12); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { filter: brightness(1.08); color: #ffffff; border-color: rgba(115, 255, 225, 0.72); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 12px 30px rgba(0, 199, 199, 0.25), 0 0 28px rgba(32, 230, 168, 0.20); } .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger { background: rgba(10, 25, 38, 0.72); color: #d8edf2; border: 1px solid rgba(0, 199, 199, 0.36); box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 8px 20px rgba(0,0,0,0.18); } .btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover, .btn-outline-danger:hover { background: rgba(0, 199, 199, 0.10); border-color: rgba(32, 230, 168, 0.65); color: #ffffff; } .btn-success, .btn-info, .btn-warning, .btn-danger { background: rgba(8, 22, 34, 0.78) !important; border: 1px solid rgba(0, 199, 199, 0.36) !important; color: #f4f8fb !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 8px 20px rgba(0,0,0,0.18) !important; } .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover { background: rgba(0, 199, 199, 0.10) !important; border-color: rgba(32, 230, 168, 0.65) !important; color: #ffffff !important; } .btn-success i { color: var(--cs-green); } .btn-info i { color: var(--cs-aqua); } .btn-warning i { color: #ffc328; } .btn-danger i { color: #ff5870; } .btn-outline-success i { color: var(--cs-green); } .btn-outline-info i { color: var(--cs-aqua); } .btn-outline-warning i { color: #ffc328; } .btn-outline-danger i { color: #ff8898; } .btn-link { color: var(--cs-cyan); } /* Management cards: category color is an accent, not the button fill. */ .row-cols-5 .card { position: relative; overflow: hidden; } .row-cols-5 .card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: rgba(0, 199, 199, 0.55); opacity: 0.75; } .row-cols-5 .card.border-primary::before { background: var(--cs-green); } .row-cols-5 .card.border-success::before { background: var(--cs-teal); } .row-cols-5 .card.border-danger::before { background: #ff5870; } .row-cols-5 .card.border-info::before { background: #00b4ff; } .row-cols-5 .card.border-warning::before { background: #ffc328; } .row-cols-5 .card.border-primary .card-title i, .row-cols-5 .card.border-success .card-title i { color: var(--cs-green) !important; } .row-cols-5 .card.border-danger .card-title i { color: #ff5870 !important; } .row-cols-5 .card.border-info .card-title i { color: #72f7ff !important; } .row-cols-5 .card.border-warning .card-title i { color: #ffc328 !important; } .row-cols-5 .card .btn { background: rgba(8, 22, 34, 0.78) !important; border: 1px solid rgba(0, 199, 199, 0.36) !important; color: #f4f8fb !important; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important; } .row-cols-5 .card .btn:hover { background: rgba(0, 199, 199, 0.10) !important; border-color: rgba(32, 230, 168, 0.65) !important; color: #ffffff !important; } /* ---- Badges (request lifecycle pills) ------------------------------------ */ .badge { border-radius: 999px; padding: 0.4em 0.75em; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(10px); } .badge.bg-warning { background: rgba(255, 179, 38, 0.16) !important; color: #ffc96a !important; border: 1px solid rgba(255, 179, 38, 0.35); } .badge.bg-success { background: rgba(32, 230, 168, 0.16) !important; color: #68ffd4 !important; border: 1px solid rgba(32, 230, 168, 0.35); } .badge.bg-info, .badge.bg-primary { background: rgba(0, 199, 199, 0.16) !important; color: #72f7ff !important; border: 1px solid rgba(0, 199, 199, 0.35); } .badge.bg-danger { background: rgba(255, 88, 112, 0.16) !important; color: #ff8898 !important; border: 1px solid rgba(255, 88, 112, 0.35); } .badge.bg-secondary { background: rgba(158, 182, 201, 0.14) !important; color: var(--cs-text-soft) !important; border: 1px solid rgba(158, 182, 201, 0.25); } /* ---- Forms ---------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--cs-surface-2); border: 1px solid var(--cs-border-strong); color: var(--cs-text); border-radius: var(--cs-radius-sm); } .form-control:focus, .form-select:focus { background-color: var(--cs-surface-2); border-color: var(--cs-teal); color: var(--cs-text); box-shadow: 0 0 0 0.2rem rgba(0, 199, 199, 0.14), 0 0 18px rgba(32, 230, 168, 0.10); } .form-control::placeholder { color: var(--cs-text-dim); } .form-label { color: var(--cs-text-muted); font-weight: 500; } .input-group-text { background-color: var(--cs-surface-2); border-color: var(--cs-border-strong); color: var(--cs-text-muted); } /* ---- Dropdowns ------------------------------------------------------------ */ .dropdown-menu { background-color: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); box-shadow: var(--cs-shadow); } .dropdown-item { color: var(--cs-text); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(0, 199, 199, 0.08); color: #ffffff; } .dropdown-divider { border-color: var(--cs-border); } /* ---- Alerts (tinted, dark) ------------------------------------------------ */ .alert { border-radius: var(--cs-radius); border: 1px solid var(--cs-border-strong); } .alert-info { background-color: rgba(56, 214, 224, 0.10); border-color: rgba(56, 214, 224, 0.30); color: #aeeef3; } .alert-warning { background-color: rgba(245, 176, 65, 0.10); border-color: rgba(245, 176, 65, 0.30); color: #f4d59b; } .alert-success { background-color: rgba(46, 204, 113, 0.10); border-color: rgba(46, 204, 113, 0.30); color: #aef0c8; } .alert-danger { background-color: rgba(232, 84, 84, 0.10); border-color: rgba(232, 84, 84, 0.30); color: #f3b4b4; } /* ---- App shell: sidebar --------------------------------------------------- */ .sidebar { background: var(--cs-sidebar) !important; border-right: 1px solid var(--cs-border); position: relative; overflow: hidden; } /* faint brand curve in the lower rail (decorative, like the concept) */ .sidebar::after { content: ""; position: absolute; left: -40%; bottom: -10%; width: 200%; height: 220px; background: radial-gradient(closest-side, rgba(0, 199, 199, 0.16), transparent 70%); pointer-events: none; } .sidebar .sidebar-brand img { filter: drop-shadow(0 4px 12px rgba(22, 199, 154, 0.35)); } .sidebar .sidebar-brand-text { color: #ffffff; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; line-height: 1.1; margin-top: 0.35rem; } .sidebar hr { border-color: var(--cs-border); } .sidebar .nav-link { color: var(--cs-text-muted) !important; border-radius: var(--cs-radius-sm); margin-bottom: 2px; transition: background 0.15s ease, color 0.15s ease; } .sidebar .nav-link:hover { background: rgba(0, 199, 199, 0.07) !important; color: #ffffff !important; } .sidebar .nav-link.active { background: linear-gradient(135deg, rgba(0, 199, 199, 0.28), rgba(32, 230, 168, 0.20)) !important; border: 1px solid rgba(32, 230, 168, 0.55); color: #ffffff !important; font-weight: 600; box-shadow: 0 0 24px rgba(0, 199, 199, 0.16), inset 0 1px 0 rgba(255,255,255,0.08); } .sidebar .nav-link.active i { color: #ffffff !important; } /* ---- App shell: header / footer ------------------------------------------ */ .main-content header h2 { color: var(--cs-text); } #userProfileDropdown { color: var(--cs-text) !important; } #userProfileDropdown:hover { color: var(--cs-teal) !important; } .footer { background: var(--cs-sidebar) !important; border-top: 1px solid var(--cs-border); color: var(--cs-text-muted) !important; } /* ---- SweetAlert2 dark polish --------------------------------------------- */ .swal2-popup { background: var(--cs-surface) !important; color: var(--cs-text) !important; border-radius: 18px !important; border: 1px solid var(--cs-border-strong) !important; } .swal2-title, .swal2-html-container { color: var(--cs-text) !important; } .swal2-confirm { background: var(--cs-grad) !important; border: 1px solid rgba(115, 255, 225, 0.55) !important; color: #ffffff !important; box-shadow: var(--cs-shadow-glow) !important; } .swal2-cancel, .swal2-deny { background: rgba(8, 22, 34, 0.78) !important; border: 1px solid rgba(0, 199, 199, 0.36) !important; color: var(--cs-text) !important; } .swal2-actions .swal2-styled:focus { box-shadow: 0 0 0 0.2rem rgba(0, 199, 199, 0.18) !important; } /* ---- Misc ----------------------------------------------------------------- */ ::selection { background: rgba(22, 199, 154, 0.35); } .modal-content { background-color: var(--cs-surface); border: 1px solid var(--cs-border-strong); border-radius: var(--cs-radius); } .list-group-item { background-color: var(--cs-surface); border-color: var(--cs-border); color: var(--cs-text); } .page-link { background-color: var(--cs-surface); border-color: var(--cs-border); color: var(--cs-text); } .page-item.active .page-link { background: var(--cs-grad); border-color: transparent; color: #04231F; } /* ---- Screen-specific hardening: User Monitor ----------------------------- */ .filter-bar, .monitor-table-wrap, .side-drawer, .drawer-header, .stat-mini { background: linear-gradient(180deg, rgba(16, 34, 53, 0.94), rgba(8, 20, 32, 0.94)) !important; border: 1px solid var(--cs-border) !important; color: var(--cs-text) !important; box-shadow: var(--cs-shadow); } .monitor-table thead th { background: rgba(16, 34, 53, 0.98) !important; color: var(--cs-text-soft) !important; border-bottom: 1px solid rgba(130, 210, 220, 0.16) !important; } .monitor-table thead th:hover { background: rgba(0, 199, 199, 0.075) !important; } .monitor-table tbody tr { border-bottom: 1px solid rgba(130, 210, 220, 0.10) !important; } .monitor-table tbody tr:hover { background: rgba(0, 199, 199, 0.045) !important; } .monitor-table tbody td { color: var(--cs-text) !important; } .monitor-table code, .drawer-body code, .history-item code { color: var(--cs-aqua) !important; background: rgba(0, 199, 199, 0.10); border: 1px solid rgba(0, 199, 199, 0.18); border-radius: 6px; padding: 0.08rem 0.28rem; } .status-badge, .role-badge { border-radius: 999px !important; border: 1px solid rgba(130, 210, 220, 0.18); } .status-online { background: rgba(32, 230, 168, 0.16) !important; color: #68ffd4 !important; border-color: rgba(32, 230, 168, 0.35) !important; } .status-idle { background: rgba(255, 179, 38, 0.16) !important; color: #ffc96a !important; border-color: rgba(255, 179, 38, 0.35) !important; } .status-offline { background: rgba(158, 182, 201, 0.14) !important; color: var(--cs-text-soft) !important; border-color: rgba(158, 182, 201, 0.25) !important; } .role-admin { background: rgba(32, 230, 168, 0.14) !important; color: #68ffd4 !important; border-color: rgba(32, 230, 168, 0.30) !important; } .role-staff { background: rgba(0, 199, 199, 0.14) !important; color: #72f7ff !important; border-color: rgba(0, 199, 199, 0.30) !important; } .role-resident { background: rgba(255, 88, 112, 0.14) !important; color: #ff9baa !important; border-color: rgba(255, 88, 112, 0.30) !important; } .role-family { background: rgba(0, 180, 255, 0.14) !important; color: #8bdcff !important; border-color: rgba(0, 180, 255, 0.30) !important; } .role-auditor { background: rgba(255, 195, 40, 0.14) !important; color: #ffdc7a !important; border-color: rgba(255, 195, 40, 0.30) !important; } .side-drawer-overlay { background: rgba(3, 10, 18, 0.68) !important; } .drawer-header { border-bottom: 1px solid var(--cs-border) !important; } .drawer-close { color: var(--cs-text-soft) !important; } .drawer-close:hover { color: #ffffff !important; } .history-item { border-bottom: 1px solid rgba(130, 210, 220, 0.10) !important; } .skeleton { background: linear-gradient(90deg, rgba(16,34,53,0.8) 25%, rgba(0,199,199,0.16) 50%, rgba(16,34,53,0.8) 75%) !important; background-size: 200% 100% !important; } .empty-state { color: var(--cs-text-soft) !important; } /* ---- Broad legacy Bootstrap/light-theme safety net ----------------------- */ .table-responsive, .modal-body, .modal-header, .modal-footer { color: var(--cs-text); } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(0, 199, 199, 0.025); color: var(--cs-text); } .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(0, 199, 199, 0.045); color: var(--cs-text); } .card .table, .modal .table { margin-bottom: 0; } .card .list-group-item, .modal .list-group-item { background: transparent; } .input-group .bg-white, .input-group-text.bg-white { background-color: var(--cs-surface-2) !important; border-color: var(--cs-border-strong) !important; color: var(--cs-text-soft) !important; } .btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: 0.48; box-shadow: none !important; } .breadcrumb-item.active { color: var(--cs-text-soft); } .breadcrumb-item + .breadcrumb-item::before { color: var(--cs-text-muted); } /* ---- Global hardening for legacy inline light-theme styles --------------- */ [style*="background-color: white"], [style*="background-color:white"], [style*="background: white"], [style*="background:white"], [style*="background: #fff"], [style*="background:#fff"], [style*="background: #ffffff"], [style*="background:#ffffff"], [style*="background: #f8f9fa"], [style*="background:#f8f9fa"], [style*="background: #f0f4ff"], [style*="background:#f0f4ff"], [style*="background: #fffdf5"], [style*="background:#fffdf5"] { background: linear-gradient(180deg, rgba(16, 34, 53, 0.96), rgba(8, 20, 32, 0.96)) !important; color: var(--cs-text) !important; border-color: var(--cs-border) !important; } thead[style*="background-color: white"], thead[style*="background-color:white"], table[style*="background: white"], table[style*="background:white"] { background: rgba(16, 34, 53, 0.98) !important; color: var(--cs-text-soft) !important; border-color: rgba(130, 210, 220, 0.16) !important; } [style*="color: #212529"], [style*="color:#212529"], [style*="color: #333"], [style*="color:#333"], [style*="color: #424770"], [style*="color:#424770"], [style*="color: #4a5568"], [style*="color:#4a5568"], [style*="color: #6c757d"], [style*="color:#6c757d"] { color: var(--cs-text-soft) !important; } [style*="border-left:3px solid #6c8ebf"], [style*="border-left: 4px solid #ffc107"] { border-left-color: var(--cs-teal) !important; } [style*="border-color:#c0ccdf"], [style*="border-color: #ced4da"], [style*="border-color:#ced4da"], [style*="border: 1px solid #e9ecef"], [style*="border:1px solid #e9ecef"], [style*="border: 2px solid #e0e0e0"], [style*="border:2px solid #e0e0e0"] { border-color: var(--cs-border-strong) !important; } .table thead[style*="position: sticky"] th, .table-responsive thead[style*="position: sticky"] th { background: rgba(16, 34, 53, 0.98) !important; color: var(--cs-text-soft) !important; border-bottom-color: rgba(130, 210, 220, 0.18) !important; } .badge[style*="background-color:#ffc107"], .badge[style*="background-color: #ffc107"] { background: rgba(255, 179, 38, 0.16) !important; color: #ffc96a !important; border: 1px solid rgba(255, 179, 38, 0.35); } .badge[style*="background-color:#6f42c1"], .badge[style*="background-color: #6f42c1"], .badge[style*="background-color:#fd7e14"], .badge[style*="background-color: #fd7e14"] { background: rgba(0, 199, 199, 0.16) !important; color: var(--cs-aqua) !important; border: 1px solid rgba(0, 199, 199, 0.35); } .card [style*="linear-gradient(135deg, #2a5298"], .card [style*="linear-gradient(135deg, #667eea"] { background: radial-gradient(circle at 80% 10%, rgba(32,230,168,.35), transparent 35%), var(--cs-grad) !important; border: 1px solid rgba(126, 255, 223, 0.55); color: #ffffff !important; } /* ---- Screen-specific hardening: Resident dashboard ----------------------- */ .balance-card { background: linear-gradient(180deg, rgba(18, 35, 52, 0.94), rgba(8, 20, 32, 0.94)) !important; border: 1px solid rgba(130, 210, 220, 0.16) !important; box-shadow: var(--cs-shadow) !important; overflow: hidden; position: relative; } .balance-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cs-grad); } .balance-card-current { border-top-color: rgba(0, 180, 255, 0.34) !important; } .balance-card-current::before { background: #00b4ff; } .balance-card-available { border-top-color: rgba(32, 230, 168, 0.36) !important; } .balance-card-available::before { background: var(--cs-green); } .balance-card-pending { border-top-color: rgba(255, 179, 38, 0.36) !important; } .balance-card-pending::before { background: #ffc96a; } .balance-card h4, .balance-card span { color: var(--cs-text) !important; } .balance-card .opacity-50 { opacity: 0.9 !important; } .balance-card-current .fa { color: #8bdcff; } .balance-card-available .fa { color: var(--cs-green); } .balance-card-pending .fa { color: #ffc96a; }