/* ═══════════════════════════════════════════════════════════════ SplitWise — Unified Modal Design System v4.1 RULES: ✅ ALL headers = WHITE background, DARK text (#1e1b4b) ✅ Only colours used: purple (#6C63FF), green (#10b981), red (#ef4444) ✅ Soft red tint ONLY for delete / leave (destructive) ✅ Logout, remove-member = white header + red icon (not tinted) ✅ Overrides ALL inline style="background:...; color:white" ═══════════════════════════════════════════════════════════════ */ /* ─── Backdrop ─────────────────────────────────────────────────── */ .modal-backdrop.show { opacity: 1 !important; background-color: rgba(15, 23, 42, 0.42) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* ─── Modal Card ────────────────────────────────────────────────── */ .modal .modal-content { border: none !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04) !important; } /* Open animation */ .modal.fade .modal-content { transform: scale(0.93) translateY(18px) !important; transition: transform 0.34s cubic-bezier(0.34,1.56,0.64,1), opacity 0.24s ease !important; } .modal.show .modal-content { transform: scale(1) translateY(0) !important; } /* ═══════════════════════════════════════════════════════════════ EXP-MODAL-HEADER — The CLEAN pattern (matches expenses.html) No !important wars. Self-contained. Guaranteed dark text. Used by: settings, groups, reports, login, signup, index ═══════════════════════════════════════════════════════════════ */ .exp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.5rem; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.07); border-radius: 0; } .exp-modal-header h5, .exp-modal-header h6 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #1e1b4b; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.02em; } .exp-modal-header h5 i, .exp-modal-header h6 i { font-size: 0.9rem; color: #6C63FF; opacity: 1; } /* Danger variant */ .exp-modal-header-danger { background: #fef2f2; border-bottom-color: rgba(239,68,68,0.10); } .exp-modal-header-danger h5, .exp-modal-header-danger h6 { color: #dc2626; } .exp-modal-header-danger h5 i, .exp-modal-header-danger h6 i { color: #ef4444; } /* Close button for exp-modal-header */ .exp-modal-header .exp-modal-close, .exp-modal-header .btn-close, .exp-modal-header .btn-close-white { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.09); background-color: rgba(0,0,0,0.04); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 10px; opacity: 1; filter: none; cursor: pointer; padding: 0; flex-shrink: 0; color: #6b7280; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .exp-modal-header .exp-modal-close:hover, .exp-modal-header .btn-close:hover { background-color: rgba(0,0,0,0.08); } .exp-modal-header-danger .exp-modal-close, .exp-modal-header-danger .btn-close { background-color: rgba(239,68,68,0.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(239,68,68,0.18); } /* Specific icon colours for named modals */ #addExpenseModal .exp-modal-header h5 i, #joinGroupModal .exp-modal-header h5 i, #phoneVerificationModal .exp-modal-header h5 i, #emailInviteModal .exp-modal-header h5 i { color: #10b981; } #logoutModal .exp-modal-header h5 i, #removeMemberModal .exp-modal-header h5 i { color: #ef4444; } /* Mobile */ @media (max-width: 576px) { .exp-modal-header { padding: 1rem 1.15rem; } .exp-modal-header h5, .exp-modal-header h6 { font-size: 0.95rem; gap: 0.4rem; } } /* ════════════════════════════════════════════════════════════════ SEMANTIC COLOUR SYSTEM v2 ▸ PURPLE — add-expense / filter / edit / settings / terms / help ▸ GREEN — create / join / verify / forgot-password (recovery) ▸ AMBER — change-password / currency / confirm-change ▸ ORANGE — leave / remove-member / remove-avatar ▸ RED — logout / delete / destroy (all destructive) ▸ WHITE — (no longer used — everything has a tint now) ════════════════════════════════════════════════════════════════ */ /* ── CSS colour tokens ─────────────────────────────────────────── */ :root { --sw-green-bg: #f0fdf4; --sw-green-border: rgba(16,185,129,.13); --sw-green-title: #065f46; --sw-green-icon: #10b981; --sw-orange-bg: #fff7ed; --sw-orange-border: rgba(249,115,22,.13); --sw-orange-title: #9a3412; --sw-orange-icon: #f97316; --sw-red-bg: #fef2f2; --sw-red-border: rgba(239,68,68,.13); --sw-red-title: #dc2626; --sw-red-icon: #ef4444; --sw-amber-bg: #fffbeb; --sw-amber-border: rgba(245,158,11,.13); --sw-amber-title: #92400e; --sw-amber-icon: #f59e0b; --sw-purple-bg: #faf5ff; --sw-purple-border: rgba(108,99,255,.13); --sw-purple-title: #3730a3; --sw-purple-icon: #6C63FF; } /* SVG ×-icon helpers (URL-encoded) */ /* green = %2310b981 | orange = %23f97316 | red = %23ef4444 */ /* amber = %23f59e0b | purple = %236C63FF */ /* ── PURPLE modals ─────────────────────────────────────────────── */ /* add-expense, filter, edit, view, settings, email, terms, privacy, needHelp */ #addExpenseModal .exp-modal-header, #filterModal .exp-modal-header, #editExpenseModal .exp-modal-header, #viewGroupModal .exp-modal-header, #changeEmailModal .exp-modal-header, #cropImageModal .exp-modal-header, #exportDateRangeModal .exp-modal-header, #emailInviteModal .exp-modal-header, #termsModal .exp-modal-header, #privacyModal .exp-modal-header, #needHelpModal .exp-modal-header { background: var(--sw-purple-bg) !important; border-bottom-color: var(--sw-purple-border) !important; border-bottom-width: 1px !important; border-bottom-style: solid !important; } #addExpenseModal .exp-modal-header h5, #addExpenseModal .exp-modal-header h4, #filterModal .exp-modal-header h5, #editExpenseModal .exp-modal-header h5, #viewGroupModal .exp-modal-header h5, #changeEmailModal .exp-modal-header h5, #cropImageModal .exp-modal-header h5, #exportDateRangeModal .exp-modal-header h5, #emailInviteModal .exp-modal-header h5, #termsModal .exp-modal-header h5, #termsModal .exp-modal-header h4, #privacyModal .exp-modal-header h5, #privacyModal .exp-modal-header h4, #needHelpModal .exp-modal-header h5 { color: #111827 !important; } #addExpenseModal .exp-modal-header h5 i, #filterModal .exp-modal-header h5 i, #editExpenseModal .exp-modal-header h5 i, #viewGroupModal .exp-modal-header h5 i, #changeEmailModal .exp-modal-header h5 i, #cropImageModal .exp-modal-header h5 i, #exportDateRangeModal .exp-modal-header h5 i, #emailInviteModal .exp-modal-header h5 i, #termsModal .exp-modal-header i, #privacyModal .exp-modal-header i, #needHelpModal .exp-modal-header h5 i, #needHelpModal .exp-modal-header .help-icon i { color: var(--sw-purple-icon) !important; } /* terms/privacy subtitle p */ #termsModal .exp-modal-header p, #privacyModal .exp-modal-header p { color: rgba(55,48,163,.65) !important; } /* terms/privacy icon box */ #termsModal .exp-modal-header [style*="background:rgba(255"], #privacyModal .exp-modal-header [style*="background:rgba(255"] { background: rgba(108,99,255,.12) !important; } /* purple close × */ #addExpenseModal .exp-modal-header .exp-modal-close, #filterModal .exp-modal-header .exp-modal-close, #editExpenseModal .exp-modal-header .exp-modal-close, #viewGroupModal .exp-modal-header .exp-modal-close, #changeEmailModal .exp-modal-header .exp-modal-close, #cropImageModal .exp-modal-header .exp-modal-close, #exportDateRangeModal .exp-modal-header .exp-modal-close, #emailInviteModal .exp-modal-header .exp-modal-close, #termsModal .exp-modal-header .exp-modal-close, #termsModal .exp-modal-header button, #privacyModal .exp-modal-header .exp-modal-close, #privacyModal .exp-modal-header button, #needHelpModal .exp-modal-header .exp-modal-close { background-color: rgba(108,99,255,.08) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236C63FF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; border-color: rgba(108,99,255,.22) !important; filter: none !important; color: transparent !important; } /* ── GREEN modals ─────────────────────────────────────────────── */ /* create / join / verify / forgotPassword (positive recovery) */ #createGroupModal .exp-modal-header, #joinGroupModal .exp-modal-header, #phoneVerificationModal .exp-modal-header, #emailVerificationModal .exp-modal-header, #forgotPasswordModal .exp-modal-header { background: var(--sw-green-bg); border-bottom-color: var(--sw-green-border); } #createGroupModal .exp-modal-header h5, #joinGroupModal .exp-modal-header h5, #phoneVerificationModal .exp-modal-header h5, #emailVerificationModal .exp-modal-header h5, #forgotPasswordModal .exp-modal-header h5, #forgotPasswordModal .exp-modal-header h4 { color: #111827 !important; } #createGroupModal .exp-modal-header h5 i, #joinGroupModal .exp-modal-header h5 i, #phoneVerificationModal .exp-modal-header h5 i, #emailVerificationModal .exp-modal-header h5 i, #forgotPasswordModal .exp-modal-header h5 i, #forgotPasswordModal .exp-modal-header h4 i { color: var(--sw-green-icon); } #createGroupModal .exp-modal-header .exp-modal-close, #joinGroupModal .exp-modal-header .exp-modal-close, #phoneVerificationModal .exp-modal-header .exp-modal-close, #emailVerificationModal .exp-modal-header .exp-modal-close, #forgotPasswordModal .exp-modal-header .exp-modal-close { background-color: rgba(16,185,129,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310b981'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(16,185,129,.20); } /* ── AMBER modals ─────────────────────────────────────────────── */ /* change-password / currency */ #changePasswordModal .exp-modal-header, #currencyConversionModal .exp-modal-header { background: var(--sw-amber-bg); border-bottom-color: var(--sw-amber-border); } #changePasswordModal .exp-modal-header h5, #currencyConversionModal .exp-modal-header h5 { color: #111827 !important; } #changePasswordModal .exp-modal-header h5 i, #currencyConversionModal .exp-modal-header h5 i { color: var(--sw-amber-icon); } #changePasswordModal .exp-modal-header .exp-modal-close, #currencyConversionModal .exp-modal-header .exp-modal-close { background-color: rgba(245,158,11,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f59e0b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(245,158,11,.20); } /* ── ORANGE modals ────────────────────────────────────────────── */ /* leave / remove-member / remove-avatar */ #leaveGroupModalNew .exp-modal-header, #removeMemberModal .exp-modal-header, #removeAvatarConfirmModal .exp-modal-header { background: var(--sw-orange-bg); border-bottom-color: var(--sw-orange-border); } #leaveGroupModalNew .exp-modal-header h5, #removeMemberModal .exp-modal-header h5, #removeAvatarConfirmModal .exp-modal-header h5 { color: #111827 !important; } #leaveGroupModalNew .exp-modal-header h5 i, #removeMemberModal .exp-modal-header h5 i, #removeAvatarConfirmModal .exp-modal-header h5 i { color: var(--sw-orange-icon); } #leaveGroupModalNew .exp-modal-header .exp-modal-close, #removeMemberModal .exp-modal-header .exp-modal-close, #removeAvatarConfirmModal .exp-modal-header .exp-modal-close { background-color: rgba(249,115,22,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f97316'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(249,115,22,.20); } /* ── RED modals ───────────────────────────────────────────────── */ /* logout + all deletes */ #logoutModal .exp-modal-header, #deleteAccountModal .exp-modal-header, #deleteGroupModal .exp-modal-header, #deleteAllGroupsModal .exp-modal-header, #deleteAllPreviousGroupsModal .exp-modal-header, #deletePreviousGroupModal .exp-modal-header, #deleteExpenseModal .exp-modal-header, #deleteConfirmModal .exp-modal-header { background: var(--sw-red-bg); border-bottom-color: var(--sw-red-border); } #logoutModal .exp-modal-header h5, #deleteAccountModal .exp-modal-header h5, #deleteGroupModal .exp-modal-header h5, #deleteAllGroupsModal .exp-modal-header h5, #deleteAllPreviousGroupsModal .exp-modal-header h5, #deletePreviousGroupModal .exp-modal-header h5, #deleteExpenseModal .exp-modal-header h5, #deleteConfirmModal .exp-modal-header h5 { color: #111827 !important; } #logoutModal .exp-modal-header h5 i, #deleteAccountModal .exp-modal-header h5 i, #deleteGroupModal .exp-modal-header h5 i, #deleteAllGroupsModal .exp-modal-header h5 i, #deleteAllPreviousGroupsModal .exp-modal-header h5 i, #deletePreviousGroupModal .exp-modal-header h5 i, #deleteExpenseModal .exp-modal-header h5 i, #deleteConfirmModal .exp-modal-header h5 i { color: var(--sw-red-icon); } #logoutModal .exp-modal-header .exp-modal-close, #deleteAccountModal .exp-modal-header .exp-modal-close, #deleteGroupModal .exp-modal-header .exp-modal-close, #deleteAllGroupsModal .exp-modal-header .exp-modal-close, #deleteAllPreviousGroupsModal .exp-modal-header .exp-modal-close, #deletePreviousGroupModal .exp-modal-header .exp-modal-close, #deleteExpenseModal .exp-modal-header .exp-modal-close, #deleteConfirmModal .exp-modal-header .exp-modal-close { background-color: rgba(239,68,68,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(239,68,68,.20); } /* Logout body icon — force red (overrides inline yellow) */ #logoutModal .modal-body i.fa-question-circle { color: #ef4444 !important; } /* ════════════════════════════════════════════════════════════════ FOOTER BUTTON SEMANTICS ════════════════════════════════════════════════════════════════ */ /* PURPLE — terms I Agree / needHelp actions */ #termsModal .modal-footer .btn-primary, #privacyModal .modal-footer .btn-primary { background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(108,99,255,.30) !important; } /* GREEN — create / join / verify / forgot-password */ #createGroupModal .modal-footer .btn-primary, #joinGroupModal .modal-footer .btn-primary, #phoneVerificationModal .modal-footer .btn-primary, #emailVerificationModal .modal-footer .btn-primary, #forgotPasswordModal .modal-footer .btn-primary, #forgotPasswordModal .modal-footer .btn-success { background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(16,185,129,.28) !important; } /* AMBER — change-password / currency */ #changePasswordModal .modal-footer .btn-primary, #changePasswordModal .modal-footer .btn-warning, #currencyConversionModal .modal-footer .btn-primary, #currencyConversionModal .modal-footer .btn-warning { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,.28) !important; } /* ORANGE — leave */ #leaveGroupModalNew .modal-footer .btn-warning, #leaveGroupModalNew .modal-footer .btn-danger { background: linear-gradient(135deg,#f97316 0%,#ea580c 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(249,115,22,.28) !important; } /* RED — logout confirm / all delete confirms */ #logoutModal .modal-footer .btn-danger, #logoutModal .modal-footer .btn-warning, #deleteAccountModal .modal-footer .btn-danger, #deleteGroupModal .modal-footer .btn-danger, #deleteAllGroupsModal .modal-footer .btn-danger, #deleteAllPreviousGroupsModal .modal-footer .btn-danger, #deletePreviousGroupModal .modal-footer .btn-danger, #deleteExpenseModal .modal-footer .btn-danger, #deleteConfirmModal .modal-footer .btn-danger { background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(239,68,68,.30) !important; } /* ── Colour tokens (reused via CSS custom props per variant) ─── */ :root { --sw-green-bg: #f0fdf4; --sw-green-border: rgba(16,185,129,.13); --sw-green-title: #065f46; --sw-green-icon: #10b981; --sw-orange-bg: #fff7ed; --sw-orange-border: rgba(249,115,22,.13); --sw-orange-title: #c2410c; --sw-orange-icon: #f97316; --sw-red-bg: #fef2f2; --sw-red-border: rgba(239,68,68,.13); --sw-red-title: #dc2626; --sw-red-icon: #ef4444; --sw-amber-bg: #fffbeb; --sw-amber-border: rgba(245,158,11,.13); --sw-amber-title: #92400e; --sw-amber-icon: #f59e0b; --sw-purple-bg: #faf5ff; --sw-purple-border: rgba(108,99,255,.13); --sw-purple-title: #3730a3; --sw-purple-icon: #6C63FF; } /* ── Helper mixin (implemented per variant below) ─────────────── */ /* ── GREEN modals ─────────────────────────────────────────────── */ #addExpenseModal .exp-modal-header, #createGroupModal .exp-modal-header, #joinGroupModal .exp-modal-header, #phoneVerificationModal .exp-modal-header, #emailVerificationModal .exp-modal-header { background: var(--sw-green-bg); border-bottom-color: var(--sw-green-border); } #addExpenseModal .exp-modal-header h5, #createGroupModal .exp-modal-header h5, #joinGroupModal .exp-modal-header h5, #phoneVerificationModal .exp-modal-header h5, #emailVerificationModal .exp-modal-header h5 { color: #111827 !important; } #addExpenseModal .exp-modal-header h5 i, #createGroupModal .exp-modal-header h5 i, #joinGroupModal .exp-modal-header h5 i, #phoneVerificationModal .exp-modal-header h5 i, #emailVerificationModal .exp-modal-header h5 i { color: var(--sw-green-icon); } #addExpenseModal .exp-modal-header .exp-modal-close, #createGroupModal .exp-modal-header .exp-modal-close, #joinGroupModal .exp-modal-header .exp-modal-close, #phoneVerificationModal .exp-modal-header .exp-modal-close, #emailVerificationModal .exp-modal-header .exp-modal-close { background-color: rgba(16,185,129,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310b981'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(16,185,129,.20); } /* ── ORANGE modals ────────────────────────────────────────────── */ #logoutModal .exp-modal-header, #leaveGroupModalNew .exp-modal-header, #removeMemberModal .exp-modal-header, #removeAvatarConfirmModal .exp-modal-header { background: var(--sw-orange-bg); border-bottom-color: var(--sw-orange-border); } #logoutModal .exp-modal-header h5, #leaveGroupModalNew .exp-modal-header h5, #removeMemberModal .exp-modal-header h5, #removeAvatarConfirmModal .exp-modal-header h5 { color: #111827 !important; } #logoutModal .exp-modal-header h5 i, #leaveGroupModalNew .exp-modal-header h5 i, #removeMemberModal .exp-modal-header h5 i, #removeAvatarConfirmModal .exp-modal-header h5 i { color: var(--sw-orange-icon); } #logoutModal .exp-modal-header .exp-modal-close, #leaveGroupModalNew .exp-modal-header .exp-modal-close, #removeMemberModal .exp-modal-header .exp-modal-close, #removeAvatarConfirmModal .exp-modal-header .exp-modal-close { background-color: rgba(249,115,22,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f97316'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(249,115,22,.20); } /* ── RED modals ───────────────────────────────────────────────── */ #deleteAccountModal .exp-modal-header, #deleteGroupModal .exp-modal-header, #deleteAllGroupsModal .exp-modal-header, #deleteAllPreviousGroupsModal .exp-modal-header, #deletePreviousGroupModal .exp-modal-header, #deleteExpenseModal .exp-modal-header, #deleteConfirmModal .exp-modal-header { background: var(--sw-red-bg); border-bottom-color: var(--sw-red-border); } #deleteAccountModal .exp-modal-header h5, #deleteGroupModal .exp-modal-header h5, #deleteAllGroupsModal .exp-modal-header h5, #deleteAllPreviousGroupsModal .exp-modal-header h5, #deletePreviousGroupModal .exp-modal-header h5, #deleteExpenseModal .exp-modal-header h5, #deleteConfirmModal .exp-modal-header h5 { color: #111827 !important; } #deleteAccountModal .exp-modal-header h5 i, #deleteGroupModal .exp-modal-header h5 i, #deleteAllGroupsModal .exp-modal-header h5 i, #deleteAllPreviousGroupsModal .exp-modal-header h5 i, #deletePreviousGroupModal .exp-modal-header h5 i, #deleteExpenseModal .exp-modal-header h5 i, #deleteConfirmModal .exp-modal-header h5 i { color: var(--sw-red-icon); } #deleteAccountModal .exp-modal-header .exp-modal-close, #deleteGroupModal .exp-modal-header .exp-modal-close, #deleteAllGroupsModal .exp-modal-header .exp-modal-close, #deleteAllPreviousGroupsModal .exp-modal-header .exp-modal-close, #deletePreviousGroupModal .exp-modal-header .exp-modal-close, #deleteExpenseModal .exp-modal-header .exp-modal-close, #deleteConfirmModal .exp-modal-header .exp-modal-close { background-color: rgba(239,68,68,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(239,68,68,.20); } /* ── AMBER modals ─────────────────────────────────────────────── */ #currencyConversionModal .exp-modal-header { background: var(--sw-amber-bg); border-bottom-color: var(--sw-amber-border); } #currencyConversionModal .exp-modal-header h5 { color: #111827 !important; } #currencyConversionModal .exp-modal-header h5 i { color: var(--sw-amber-icon); } #currencyConversionModal .exp-modal-header .exp-modal-close { background-color: rgba(245,158,11,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f59e0b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(245,158,11,.20); } /* ── PURPLE modals (settings / edit / view / info) ────────────── */ #changeEmailModal .exp-modal-header, #changePasswordModal .exp-modal-header, #cropImageModal .exp-modal-header, #editExpenseModal .exp-modal-header, #viewGroupModal .exp-modal-header, #exportDateRangeModal .exp-modal-header, #emailInviteModal .exp-modal-header, #forgotPasswordModal .exp-modal-header, #filterModal .exp-modal-header { background: var(--sw-purple-bg); border-bottom-color: var(--sw-purple-border); } #changeEmailModal .exp-modal-header h5, #changePasswordModal .exp-modal-header h5, #cropImageModal .exp-modal-header h5, #editExpenseModal .exp-modal-header h5, #viewGroupModal .exp-modal-header h5, #exportDateRangeModal .exp-modal-header h5, #emailInviteModal .exp-modal-header h5, #forgotPasswordModal .exp-modal-header h5, #filterModal .exp-modal-header h5 { color: #111827 !important; } #changeEmailModal .exp-modal-header h5 i, #changePasswordModal .exp-modal-header h5 i, #cropImageModal .exp-modal-header h5 i, #editExpenseModal .exp-modal-header h5 i, #viewGroupModal .exp-modal-header h5 i, #exportDateRangeModal .exp-modal-header h5 i, #emailInviteModal .exp-modal-header h5 i, #forgotPasswordModal .exp-modal-header h5 i, #filterModal .exp-modal-header h5 i { color: var(--sw-purple-icon); } #changeEmailModal .exp-modal-header .exp-modal-close, #changePasswordModal .exp-modal-header .exp-modal-close, #cropImageModal .exp-modal-header .exp-modal-close, #editExpenseModal .exp-modal-header .exp-modal-close, #viewGroupModal .exp-modal-header .exp-modal-close, #exportDateRangeModal .exp-modal-header .exp-modal-close, #emailInviteModal .exp-modal-header .exp-modal-close, #forgotPasswordModal .exp-modal-header .exp-modal-close, #filterModal .exp-modal-header .exp-modal-close { background-color: rgba(108,99,255,.08); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236C63FF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); border-color: rgba(108,99,255,.20); } /* ── WHITE modals (terms / privacy — info only, no action) ─────── */ #termsModal .exp-modal-header, #privacyModal .exp-modal-header { background: #ffffff; border-bottom-color: rgba(0,0,0,0.07); } /* ════════════════════════════════════════════════════════════════ FOOTER BUTTON SEMANTICS — match header context ════════════════════════════════════════════════════════════════ */ /* GREEN modal confirm buttons */ #addExpenseModal .modal-footer .btn-primary, #createGroupModal .modal-footer .btn-primary, #joinGroupModal .modal-footer .btn-primary, #phoneVerificationModal .modal-footer .btn-primary, #emailVerificationModal .modal-footer .btn-primary { background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important; box-shadow: 0 4px 14px rgba(16,185,129,.28) !important; } /* ORANGE modal confirm buttons */ #logoutModal .modal-footer .btn-warning, #leaveGroupModalNew .modal-footer .btn-warning { background: linear-gradient(135deg,#f97316 0%,#ea580c 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(249,115,22,.28) !important; } /* AMBER modal confirm */ #currencyConversionModal .modal-footer .btn-warning, #currencyConversionModal .modal-footer .btn-primary { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,.28) !important; } /* ═══════════════════════════════════════════════════════════════ LEGACY .modal-header — kept as fallback for any remaining usage ═══════════════════════════════════════════════════════════════ */ .modal .modal-header { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; padding: 1.15rem 1.5rem !important; border-radius: 0 !important; color: #1e1b4b !important; } /* Title */ /* Ultra-high specificity: beats body.dark-theme h5 { color:!important } */ body .modal .modal-header .modal-title, body .modal .modal-header h5.modal-title, body .modal .modal-header h6.modal-title, body .modal .modal-header h5, body .modal .modal-header h6, body .modal .modal-header span { margin: 0 !important; font-size: 1.05rem !important; font-weight: 800 !important; color: #1e1b4b !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; letter-spacing: -0.02em !important; } /* Default icon = purple */ body .modal .modal-header .modal-title i, body .modal .modal-header h5.modal-title i, body .modal .modal-header h6.modal-title i, body .modal .modal-header h5 i, body .modal .modal-header h6 i { color: #6C63FF !important; font-size: 0.9rem !important; opacity: 1 !important; } /* ─── Icon colours: GREEN (add / join / verify) ─────────────────── */ #addExpenseModal .modal-header .modal-title i, #joinGroupModal .modal-header .modal-title i, #phoneVerificationModal .modal-header .modal-title i, #emailInviteModal .modal-header .modal-title i { color: #10b981 !important; } /* ─── Icon colours: RED (logout / leave / remove — not delete) ─── */ #logoutModal .modal-header .modal-title i, #removeMemberModal .modal-header .modal-title i { color: #ef4444 !important; } /* ─── Icon colours: PURPLE (everything else is default purple) ─── */ #createGroupModal .modal-header .modal-title i, #editExpenseModal .modal-header .modal-title i, #viewGroupModal .modal-header .modal-title i, #cropImageModal .modal-header .modal-title i, #changeEmailModal .modal-header .modal-title i, #changePasswordModal .modal-header .modal-title i, #currencyConversionModal .modal-header .modal-title i, #exportDateRangeModal .modal-header .modal-title i, #forgotPasswordModal .modal-header .modal-title i, #emailVerificationModal .modal-header .modal-title i, #removeAvatarConfirmModal .modal-header .modal-title i { color: #6C63FF !important; } /* ═══════════════════════════════════════════════════════════════ DANGER HEADER — Soft red tint ONLY for permanent/destructive ═══════════════════════════════════════════════════════════════ */ #deleteAccountModal .modal-header, #deleteGroupModal .modal-header, #deleteAllGroupsModal .modal-header, #deleteAllPreviousGroupsModal .modal-header, #deletePreviousGroupModal .modal-header, #deleteExpenseModal .modal-header, #leaveGroupModalNew .modal-header, .modal-header-danger { background: #fef2f2 !important; border-bottom-color: rgba(239,68,68,0.10) !important; color: #dc2626 !important; } /* Danger title text = red (body prefix for highest specificity) */ body #deleteAccountModal .modal-header .modal-title, body #deleteGroupModal .modal-header .modal-title, body #deleteAllGroupsModal .modal-header .modal-title, body #deleteAllPreviousGroupsModal .modal-header .modal-title, body #deletePreviousGroupModal .modal-header .modal-title, body #deleteExpenseModal .modal-header .modal-title, body #leaveGroupModalNew .modal-header .modal-title, body #deleteAccountModal .modal-header h5, body #deleteGroupModal .modal-header h5, body #deleteAllGroupsModal .modal-header h5, body #deleteAllPreviousGroupsModal .modal-header h5, body #deletePreviousGroupModal .modal-header h5, body #deleteExpenseModal .modal-header h5, body #leaveGroupModalNew .modal-header h5, .modal-header-danger .modal-title { color: #dc2626 !important; } /* Danger icon = red */ #deleteAccountModal .modal-header .modal-title i, #deleteGroupModal .modal-header .modal-title i, #deleteAllGroupsModal .modal-header .modal-title i, #deleteAllPreviousGroupsModal .modal-header .modal-title i, #deletePreviousGroupModal .modal-header .modal-title i, #deleteExpenseModal .modal-header .modal-title i, #leaveGroupModalNew .modal-header .modal-title i, .modal-header-danger .modal-title i { color: #ef4444 !important; } /* ═══════════════════════════════════════════════════════════════ CLOSE BUTTON — Subtle grey square, works on all backgrounds Custom SVG so it is NEVER white-on-white or white-on-tint ═══════════════════════════════════════════════════════════════ */ .modal .modal-header .btn-close, .modal .modal-header .btn-close-white { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border-radius: 8px !important; border: 1px solid rgba(0,0,0,0.09) !important; background-color: rgba(0,0,0,0.04) !important; /* Grey × icon — always visible on white */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 10px !important; opacity: 1 !important; filter: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.15s ease !important; flex-shrink: 0 !important; } .modal .modal-header .btn-close:hover, .modal .modal-header .btn-close-white:hover { background-color: rgba(0,0,0,0.08) !important; } /* Danger close — red × */ #deleteAccountModal .modal-header .btn-close, #deleteGroupModal .modal-header .btn-close, #deleteAllGroupsModal .modal-header .btn-close, #deleteAllPreviousGroupsModal .modal-header .btn-close, #deletePreviousGroupModal .modal-header .btn-close, #deleteExpenseModal .modal-header .btn-close, #leaveGroupModalNew .modal-header .btn-close, #deleteAccountModal .modal-header .btn-close-white, #deleteGroupModal .modal-header .btn-close-white, #deleteAllGroupsModal .modal-header .btn-close-white, #deleteAllPreviousGroupsModal .modal-header .btn-close-white, #deletePreviousGroupModal .modal-header .btn-close-white, #deleteExpenseModal .modal-header .btn-close-white, #leaveGroupModalNew .modal-header .btn-close-white, .modal-header-danger .btn-close, .modal-header-danger .btn-close-white { background-color: rgba(239,68,68,0.08) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; border-color: rgba(239,68,68,0.18) !important; } /* ─── Body ──────────────────────────────────────────────────────── */ .modal .modal-body { padding: 1.5rem 1.5rem 1rem !important; background: #ffffff !important; font-size: 0.88rem !important; color: #374151 !important; line-height: 1.65 !important; } /* ─── Footer ────────────────────────────────────────────────────── */ .modal .modal-footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.65rem !important; padding: 1rem 1.5rem 1.25rem !important; background: #f8f9fc !important; border-top: 1px solid rgba(0,0,0,0.05) !important; border-radius: 0 !important; flex-wrap: wrap !important; } /* ─── Buttons ───────────────────────────────────────────────────── */ .modal .modal-footer .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; padding: 0.6rem 1.25rem !important; border-radius: 10px !important; font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important; letter-spacing: -0.01em !important; min-width: 100px !important; } .modal .modal-footer .btn i { font-size: 0.75rem !important; } /* Cancel / secondary — ghost outline */ .modal .modal-footer .btn-secondary, .modal .modal-footer .btn-outline-secondary { background: transparent !important; color: #6b7280 !important; border: 1.5px solid rgba(0,0,0,0.10) !important; box-shadow: none !important; } .modal .modal-footer .btn-secondary:hover, .modal .modal-footer .btn-outline-secondary:hover { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.14) !important; color: #374151 !important; transform: translateY(-1px) !important; } /* Primary — purple */ .modal .modal-footer .btn-primary { background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(108,99,255,0.28) !important; } .modal .modal-footer .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(108,99,255,0.42) !important; filter: brightness(1.06) !important; } /* Danger — red */ .modal .modal-footer .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(239,68,68,0.28) !important; } .modal .modal-footer .btn-danger:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(239,68,68,0.42) !important; filter: brightness(1.06) !important; } /* Warning (logout, etc.) — styled as red-ish orange in buttons */ .modal .modal-footer .btn-warning { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(249,115,22,0.28) !important; } .modal .modal-footer .btn-warning:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(249,115,22,0.40) !important; filter: brightness(1.06) !important; } /* Success — green */ .modal .modal-footer .btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(16,185,129,0.28) !important; } .modal .modal-footer .btn-success:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(16,185,129,0.40) !important; filter: brightness(1.06) !important; } /* Info / teal */ .modal .modal-footer .btn-info { background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(108,99,255,0.28) !important; } .modal .modal-footer .btn-info:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 22px rgba(108,99,255,0.40) !important; filter: brightness(1.06) !important; } /* Disabled */ .modal .modal-footer .btn:disabled, .modal .modal-footer .btn.disabled { opacity: 0.50 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; } /* ─── Inputs inside modals ──────────────────────────────────────── */ .modal .form-control, .modal .form-select { border-radius: 12px !important; border: 1.5px solid rgba(0,0,0,0.08) !important; padding: 0.65rem 0.9rem !important; font-size: 0.88rem !important; font-weight: 500 !important; color: #1e1b4b !important; background: #f8f9fc !important; transition: all 0.2s ease !important; box-shadow: none !important; outline: none !important; } .modal .form-control:focus, .modal .form-select:focus { border-color: rgba(108,99,255,0.40) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(108,99,255,0.08) !important; } .modal .form-label { font-size: 0.82rem !important; font-weight: 700 !important; color: #1e1b4b !important; margin-bottom: 0.45rem !important; } /* ─── Scrollbar ─────────────────────────────────────────────────── */ .modal .modal-body::-webkit-scrollbar { width: 5px; } .modal .modal-body::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .modal .modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .modal .modal-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ─── Alerts inside modals ──────────────────────────────────────── */ .modal .alert { border-radius: 12px !important; font-size: 0.86rem !important; font-weight: 500 !important; } /* ─── Mobile ────────────────────────────────────────────────────── */ @media (max-width: 576px) { .modal-dialog { margin: 0.75rem 0.65rem !important; max-width: calc(100vw - 1.3rem) !important; } .modal .modal-content { border-radius: 16px !important; } .modal .modal-header { padding: 1rem 1.15rem !important; } .modal .modal-header .modal-title { font-size: 0.95rem !important; } .modal .modal-body { padding: 1.15rem !important; } .modal .modal-footer { padding: 0.85rem 1.15rem 1rem !important; gap: 0.5rem !important; } .modal .modal-footer .btn { padding: 0.55rem 1rem !important; font-size: 0.82rem !important; min-width: 88px !important; } .modal .form-control, .modal .form-select { padding: 0.6rem 0.75rem !important; font-size: 0.84rem !important; } } @media (max-width: 400px) { .modal .modal-header .modal-title { font-size: 0.88rem !important; } } /* ═══════════════════════════════════════════════════════════════ FINAL OVERRIDES (appended last — highest source-order priority) These rules win over ALL earlier declarations in this file. 1. ALL modal header title text = BLACK (#111827) 2. forgotPasswordModal + changeEmailModal + changePasswordModal = AMBER 3. logoutModal = RED (header, icon, button) ═══════════════════════════════════════════════════════════════ */ /* ── 1. GLOBAL: All header titles are BLACK ───────────────────── Icons still carry their semantic colour — only text goes black. */ .exp-modal-header h4, .exp-modal-header h5, .exp-modal-header h6 { color: #111827 !important; } /* Sub-headings / subtitle paragraphs inside header */ .exp-modal-header h4 + p, .exp-modal-header h5 + p, .exp-modal-header > div > p, .exp-modal-header > div > div > p { color: #6b7280 !important; } /* ── 2a. AMBER — forgotPasswordModal ──────────────────────────── "Reset Your Password" = security-attention action */ #forgotPasswordModal .exp-modal-header { background: #fffbeb !important; border-bottom-color: rgba(245,158,11,.14) !important; } #forgotPasswordModal .exp-modal-header h5 i, #forgotPasswordModal .exp-modal-header h4 i { color: #f59e0b !important; } #forgotPasswordModal .exp-modal-header .exp-modal-close { background-color: rgba(245,158,11,.08) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f59e0b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; border-color: rgba(245,158,11,.22) !important; filter: none !important; } #forgotPasswordModal .modal-footer .btn:not(.btn-secondary):not(.btn-outline-secondary), #forgotPasswordModal .modal-footer .btn-primary, #forgotPasswordModal .modal-footer .btn-success { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,.30) !important; border: none !important; } /* ── 2b. AMBER — changeEmailModal ─────────────────────────────── "Change Email Address" = security-sensitive change */ #changeEmailModal .exp-modal-header { background: #fffbeb !important; border-bottom-color: rgba(245,158,11,.14) !important; } #changeEmailModal .exp-modal-header h5 i, #changeEmailModal .exp-modal-header h4 i { color: #f59e0b !important; } #changeEmailModal .exp-modal-header .exp-modal-close { background-color: rgba(245,158,11,.08) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f59e0b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; border-color: rgba(245,158,11,.22) !important; filter: none !important; } #changeEmailModal .modal-footer .btn:not(.btn-secondary):not(.btn-outline-secondary), #changeEmailModal .modal-footer .btn-primary, #changeEmailModal .modal-footer .btn-success { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,.30) !important; border: none !important; } /* ── 2c. AMBER — changePasswordModal ─────────────────────────── "Change Password" = security-sensitive */ #changePasswordModal .exp-modal-header { background: #fffbeb !important; border-bottom-color: rgba(245,158,11,.14) !important; } #changePasswordModal .exp-modal-header h5 i { color: #f59e0b !important; } #changePasswordModal .exp-modal-header .exp-modal-close { background-color: rgba(245,158,11,.08) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f59e0b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; border-color: rgba(245,158,11,.22) !important; filter: none !important; } #changePasswordModal .modal-footer .btn:not(.btn-secondary):not(.btn-outline-secondary), #changePasswordModal .modal-footer .btn-primary, #changePasswordModal .modal-footer .btn-warning { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,.30) !important; border: none !important; } /* ── 3. RED — logoutModal ──────────────────────────────────────── "Are you sure you want to logout?" = destructive / irreversible */ #logoutModal .exp-modal-header { background: #fef2f2 !important; border-bottom-color: rgba(239,68,68,.14) !important; } #logoutModal .exp-modal-header h5 i { color: #ef4444 !important; } #logoutModal .exp-modal-header .exp-modal-close { background-color: rgba(239,68,68,.08) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef4444'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; border-color: rgba(239,68,68,.22) !important; filter: none !important; } /* Logout body icon */ #logoutModal .modal-body i { color: #ef4444 !important; } /* Logout action button — RED regardless of btn class */ #logoutModal .modal-footer .btn:not(.btn-secondary):not(.btn-outline-secondary), #logoutModal .modal-footer .btn-warning, #logoutModal .modal-footer .btn-danger { background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(239,68,68,.32) !important; border: none !important; } /* Decline button in signup Terms modal — white */ #rejectTerms { background: #ffffff !important; color: #374151 !important; border: 1.5px solid #e5e7eb !important; box-shadow: none !important; } #rejectTerms:hover { background: #f9fafb !important; border-color: #d1d5db !important; } /* ═══════════════════════════════════════════════════════════════ GRP-MODAL-HEADER PROTECTION Prevent design-system.css h1–h6 color rule and [style*="color:white"] overrides from ruining the tinted headers. ═══════════════════════════════════════════════════════════════ */ /* Title text always dark — beats design-system h5 rule */ body .grp-modal-header .grp-modal-title, body .grp-modal-header h5, body .grp-modal-header h4 { color: #111827 !important; -webkit-text-fill-color: #111827 !important; } /* Icon colours per variant — beats design-system h5 i gradient rule */ body .grp-modal-header .grp-modal-title i, body .grp-modal-header h5 i { color: #6C63FF !important; -webkit-text-fill-color: #6C63FF !important; background: none !important; } body .grp-modal-header.success .grp-modal-title i, body .grp-modal-header.success h5 i { color: #10b981 !important; -webkit-text-fill-color: #10b981 !important; } body .grp-modal-header.cyan .grp-modal-title i, body .grp-modal-header.cyan h5 i { color: #06b6d4 !important; -webkit-text-fill-color: #06b6d4 !important; } body .grp-modal-header.warning .grp-modal-title i, body .grp-modal-header.warning h5 i { color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important; } body .grp-modal-header.danger .grp-modal-title i, body .grp-modal-header.danger h5 i { color: #ef4444 !important; -webkit-text-fill-color: #ef4444 !important; } /* ═══════════════════════════════════════════════════════════════ GRP-BTN MODAL ACTION BUTTON SEMANTICS Footer confirm buttons inherit the modal's contextual colour ═══════════════════════════════════════════════════════════════ */ /* grp-btn-warning (leave/remove) — amber/orange */ .grp-modal-footer .grp-btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,0.30) !important; border: none !important; } .grp-modal-footer .grp-btn-warning:hover { box-shadow: 0 6px 22px rgba(245,158,11,0.42) !important; transform: translateY(-2px) !important; color: #fff !important; } /* grp-btn-danger (delete) — red */ .grp-modal-footer .grp-btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(239,68,68,0.30) !important; border: none !important; } .grp-modal-footer .grp-btn-danger:hover { box-shadow: 0 6px 22px rgba(239,68,68,0.42) !important; transform: translateY(-2px) !important; color: #fff !important; } /* grp-btn-success (join) — green */ .grp-modal-footer .grp-btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(16,185,129,0.28) !important; border: none !important; } .grp-modal-footer .grp-btn-success:hover { box-shadow: 0 6px 22px rgba(16,185,129,0.40) !important; transform: translateY(-2px) !important; color: #fff !important; } /* grp-btn-primary (create/edit) — purple */ .grp-modal-footer .grp-btn-primary { background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(108,99,255,0.28) !important; border: none !important; } .grp-modal-footer .grp-btn-primary:hover { box-shadow: 0 6px 22px rgba(108,99,255,0.42) !important; transform: translateY(-2px) !important; color: #fff !important; } /* grp-btn-outline (cancel) — neutral */ .grp-modal-footer .grp-btn-outline { background: transparent !important; color: #6b7280 !important; border: 1.5px solid rgba(0,0,0,0.10) !important; box-shadow: none !important; } .grp-modal-footer .grp-btn-outline:hover { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.14) !important; color: #374151 !important; transform: translateY(-1px) !important; } /* All grp-modal-footer buttons — shared base */ .grp-modal-footer .grp-btn { min-width: 100px; padding: 0.6rem 1.3rem; border-radius: 10px; font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important; } .grp-modal-footer .grp-btn i { font-size: 0.78rem; }