/* WaDesk shared styles — used across every page. Tailwind theme tokens are configured in app.js (window.tailwind.config). */ /* fonts moved to app.css to satisfy CSS @import ordering rules */ /* hairline border helper used in older markup */ .hairline { box-shadow: inset 0 0 0 1px #E5DFD0; } .hairline-b { box-shadow: inset 0 -1px 0 #E5DFD0; } /* shared toggle switch — used across admin settings, devices, etc. */ .toggle { position:relative; display:inline-block; width:36px; height:20px; flex:none; } .toggle input { opacity:0; width:0; height:0; } .toggle .track { position:absolute; inset:0; background:#E5DFD0; border-radius:999px; transition:.18s; cursor:pointer; } .toggle .thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; background:#FBFAF6; border-radius:50%; transition:.18s; box-shadow: 0 1px 3px rgba(11,31,28,.2); pointer-events:none; } .toggle input:checked ~ .track { background:#075E54; } .toggle input:checked ~ .thumb { left:18px; } /* shared scrollbar */ ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-thumb { background: rgba(11,31,28,0.18); border-radius:999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(11,31,28,0.32); } /* In-app paywall bottom sheet — slide up from the bottom edge. Used by resources/views/components/plan-paywall.blade.php. */ @keyframes plan-paywall-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes plan-paywall-fade { from { opacity: 0; } to { opacity: 1; } } .plan-paywall-overlay { animation: plan-paywall-fade .2s ease-out both; } .plan-paywall-sheet { animation: plan-paywall-rise .28s cubic-bezier(.22,1,.36,1) both; } /* ───────────────────────────────────────────────────────────── intl-tel-input — paper palette overrides. Library ships with its own CSS that styles a drop-shadow box; we tighten the borders and colours so the picker fits inside our rounded-xl inputs without looking like a foreign component. ───────────────────────────────────────────────────────────── */ .wa-iti-wrap .iti { width: 100%; } /* Generous left-pad so the dial-code badge and the number have real breathing room — default 88px leaves them touching. */ .wa-iti-wrap .iti__tel-input, .wa-iti-wrap input[type="tel"] { padding-left: 108px !important; padding-top: 10px !important; padding-bottom: 10px !important; } .wa-iti-wrap .iti--separate-dial-code .iti__selected-flag { background-color: #F5F3EC; border-right: 1px solid #E5DFD0; border-radius: 12px 0 0 12px; padding: 0 10px 0 12px; gap: 6px; } .wa-iti-wrap .iti--separate-dial-code .iti__selected-dial-code { margin-left: 4px; font-weight: 600; letter-spacing: 0.01em; } /* When dropdownContainer:document.body portals the country list out of the modal, it's positioned absolutely against so the parent .wa-iti-wrap selector no longer matches. Style by the iti--container class the package adds to the portaled element instead, and force a z-index above the modal (z-50). */ .iti--container, .wa-iti-wrap .iti__country-list, .iti__country-list { background: #FBFAF6; border: 1px solid #E5DFD0; border-radius: 12px; box-shadow: 0 8px 24px -12px rgba(7, 94, 84, 0.18); font-size: 12.5px; z-index: 80; } .iti__country.iti__highlight, .iti__country:hover { background: #DCF8C6; } .wa-iti-wrap .iti__divider { border-bottom: 1px dashed #E5DFD0; } .wa-iti-wrap .iti__search-input { border: 1px solid #E5DFD0; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; outline: none; } .wa-iti-wrap .iti__search-input:focus { border-color: #075E54; box-shadow: 0 0 0 4px rgba(7,94,84,0.1); } html[data-theme="dark"] .wa-iti-wrap .iti--separate-dial-code .iti__selected-flag { background-color: #173631; border-right-color: #2D5A53; } html[data-theme="dark"] .iti--container, html[data-theme="dark"] .wa-iti-wrap .iti__country-list, html[data-theme="dark"] .iti__country-list { background: #13312D; border-color: #2D5A53; color: #F0EBE0; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.55); } html[data-theme="dark"] .iti__country.iti__highlight, html[data-theme="dark"] .iti__country:hover { background: #1F4540; } html[data-theme="dark"] .wa-iti-wrap .iti__divider { border-bottom-color: #2D5A53; } html[data-theme="dark"] .wa-iti-wrap .iti__search-input { background: #1F4540; border-color: #2D5A53; color: #F0EBE0; } /* Tom Select searchable selects, used by timezone fields. */ html .ts-wrapper { width: 100%; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } html .ts-control, html .ts-wrapper.single .ts-control { min-height: 42px !important; padding: 8px 10px !important; border: 1px solid #E5DFD0 !important; border-radius: 8px !important; background: #FBFAF6 !important; color: #0B1F1C !important; font-size: 13px !important; line-height: 1.45 !important; box-shadow: none !important; } html .ts-control input, html .ts-dropdown input { color: #0B1F1C !important; font-size: 13px !important; } html .ts-control input::placeholder, html .ts-dropdown input::placeholder { color: #6B807C !important; opacity: 1; } html .ts-wrapper.focus .ts-control { border-color: #075E54 !important; box-shadow: 0 0 0 4px rgba(7, 94, 84, 0.10) !important; } html .ts-wrapper.single .ts-control:after { border-color: #6B807C transparent transparent transparent; } html .ts-wrapper.single.dropdown-active .ts-control:after { border-color: transparent transparent #6B807C transparent; } html .ts-dropdown { z-index: 80 !important; margin-top: 6px !important; overflow: hidden !important; border: 1px solid #E5DFD0 !important; border-radius: 10px !important; background: #FBFAF6 !important; color: #0B1F1C !important; font-size: 12.5px !important; box-shadow: 0 8px 24px -12px rgba(7, 94, 84, 0.18) !important; } html .ts-dropdown .option, html .ts-dropdown .create, html .ts-dropdown .no-results { padding: 7px 10px !important; color: #1F4540 !important; } html .ts-dropdown .active, html .ts-dropdown .option:hover { background: #DCF8C6 !important; color: #075E54 !important; } html .ts-dropdown .selected { font-weight: 600; } html[data-theme="bright"] .ts-control, html[data-theme="bright"] .ts-wrapper.single .ts-control, html[data-theme="bright"] .ts-dropdown { background: #FFFFFF !important; border-color: #E6E6E6 !important; } html[data-theme="dark"] .ts-control, html[data-theme="dark"] .ts-wrapper.single .ts-control { background: #1F4540 !important; border-color: #2D5A53 !important; color: #F0EBE0 !important; } html[data-theme="dark"] .ts-control input, html[data-theme="dark"] .ts-dropdown input { color: #F0EBE0 !important; } html[data-theme="dark"] .ts-control input::placeholder, html[data-theme="dark"] .ts-dropdown input::placeholder { color: #92A29E !important; } html[data-theme="dark"] .ts-wrapper.focus .ts-control { border-color: #25D366 !important; box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.12) !important; } html[data-theme="dark"] .ts-wrapper.single .ts-control:after { border-color: #A8B7B2 transparent transparent transparent; } html[data-theme="dark"] .ts-wrapper.single.dropdown-active .ts-control:after { border-color: transparent transparent #A8B7B2 transparent; } html[data-theme="dark"] .ts-dropdown { background: #13312D !important; border-color: #2D5A53 !important; color: #F0EBE0 !important; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.55) !important; } html[data-theme="dark"] .ts-dropdown .option, html[data-theme="dark"] .ts-dropdown .create, html[data-theme="dark"] .ts-dropdown .no-results { color: #E5DFD0 !important; } html[data-theme="dark"] .ts-dropdown .active, html[data-theme="dark"] .ts-dropdown .option:hover { background: #1F4540 !important; color: #7BFFB1 !important; } /* ───────────────────────────────────────────────────────────── emoji-picker-element web component — force light theme and restyle to match the WaDesk paper palette. The package auto- switches based on prefers-color-scheme by default; we always want the WA-paper look. ───────────────────────────────────────────────────────────── */ .chat-emoji-picker { --background: #FBFAF6; --border-color: #E5DFD0; --border-size: 1px; --indicator-color: #075E54; --button-active-background: #DCF8C6; --button-hover-background: #DCF8C6; --input-border-color: #E5DFD0; --input-font-color: #0B1F1C; --input-placeholder-color: #6B807C; --input-padding: .35rem .6rem; --category-emoji-padding: .25rem; --emoji-padding: .35rem; --num-columns: 8; --outline-color: #075E54; --outline-size: 2px; width: 320px; height: 380px; border: 0; } .chat-emoji-picker::part(picker) { background: #FBFAF6; } /* ───────────────────────────────────────────────────────────── Shimmer skeletons (queue list + thread loading state) ───────────────────────────────────────────────────────────── */ @keyframes wa-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } } .skeleton { background-color: #EFEBE0; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(251,250,246,.85) 50%, rgba(255,255,255,0) 100%); background-size: 240px 100%; background-repeat: no-repeat; animation: wa-shimmer 1.4s ease-in-out infinite; border-radius: 6px; } html[data-theme="dark"] .skeleton { background-color: #1F4540; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 100%); } html[data-theme="doodle"] .skeleton { background-color: #D7E7D6; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,253,245,0.85) 50%, rgba(255,255,255,0) 100%); } /* avoid layout shift while header injects */ [data-site-header] { min-height: 64px; background: #FBFAF6; border-bottom: 1px solid #E5DFD0; } [data-site-header]:not(:empty) { min-height: 0; border-bottom: 0; background: transparent; } /* ───────────────────────────────────────────────────────────── THEMES — apply data-theme on default = paper (warm cream). bright = clean white. dark = forest. ───────────────────────────────────────────────────────────── */ html { transition: background-color .25s ease, color .25s ease; } /* ════════════════════════════════════════════════════════════ BRIGHT ════════════════════════════════════════════════════════════ */ html[data-theme="bright"] body { background-color: #FFFFFF !important; } html[data-theme="bright"] .bg-paper-50, html[data-theme="bright"] .bg-paper-50\/40, html[data-theme="bright"] .bg-paper-50\/60 { background-color: #F8F8F8 !important; } html[data-theme="bright"] .bg-paper-0, html[data-theme="bright"] .bg-paper-0\/95, html[data-theme="bright"] .bg-paper-0\/40, html[data-theme="bright"] .bg-white { background-color: #FFFFFF !important; } html[data-theme="bright"] .bg-paper-100 { background-color: #F0F0F0 !important; } html[data-theme="bright"] .bg-paper-200 { background-color: #E6E6E6 !important; } html[data-theme="bright"] .border-paper-200, html[data-theme="bright"] .border-paper-100 { border-color: #E6E6E6 !important; } html[data-theme="bright"] .divide-paper-200 > * + * { border-color: #E6E6E6 !important; } html[data-theme="bright"] [data-site-header], html[data-theme="bright"] header { background:#FFFFFF !important; border-color:#E6E6E6 !important; } html[data-theme="bright"] .hairline-b { box-shadow: inset 0 -1px 0 #E6E6E6; } html[data-theme="bright"] .hairline { box-shadow: inset 0 0 0 1px #E6E6E6; } /* ════════════════════════════════════════════════════════════ DARK palette: #0B1F1C page bg #13312D card bg #1F4540 tint / hover #2D5A53 border / divider #FBFAF6 primary text #D6CDB6 secondary #92A29E muted text #6B807C faintest ════════════════════════════════════════════════════════════ */ /* ── BODY + DEFAULT TEXT ─────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { background-color:#0B1F1C !important; color:#F0EBE0 !important; } /* ── BACKGROUNDS ─────────────────────────────────────────── */ html[data-theme="dark"] .bg-paper-50, html[data-theme="dark"] .bg-paper-50\/40, html[data-theme="dark"] .bg-paper-50\/50, html[data-theme="dark"] .bg-paper-50\/60 { background-color:#0F2723 !important; } /* Pagination/table-footer strip — lift it one shade brighter so the * "Showing 0 most recent · Prev / Next" row reads against the canvas. * Without this it sits at near-canvas contrast and the disabled buttons * (opacity-50 on muted text) are functionally invisible. */ html[data-theme="dark"] .border-t.bg-paper-50\/40, html[data-theme="dark"] .border-t.bg-paper-50\/50, html[data-theme="dark"] .border-t.bg-paper-50\/60 { background-color:#15302C !important; } /* Pagination's disabled "Prev / Next" buttons use opacity-50 on top of * already-muted ink + faint border. Halve the opacity drop in dark so * the buttons remain readable as "this is here but disabled". */ html[data-theme="dark"] .opacity-50 { opacity: 0.75; } html[data-theme="dark"] .bg-paper-0, html[data-theme="dark"] .bg-paper-0\/95, html[data-theme="dark"] .bg-paper-0\/40, html[data-theme="dark"] .bg-paper-0\/15, html[data-theme="dark"] .bg-white { background-color:#13312D !important; } html[data-theme="dark"] .bg-paper-100 { background-color:#1F4540 !important; } html[data-theme="dark"] .bg-paper-200, html[data-theme="dark"] .bg-paper-300 { background-color:#2D5A53 !important; } /* hover bg-paper-50 / 100 over rows */ html[data-theme="dark"] .hover\:bg-paper-50:hover { background-color:#1F4540 !important; } html[data-theme="dark"] .hover\:bg-paper-100:hover { background-color:#2D5A53 !important; } /* Partial-alpha variants (paper-50/40 etc) — without these overrides * Tailwind keeps the light-mode value and the hovered surface lifts to * a near-white tone in dark mode, destroying contrast for the text * sitting on it (e.g. /admin/payment-gateways gateway-card head). */ html[data-theme="dark"] .hover\:bg-paper-50\/40:hover, html[data-theme="dark"] .hover\:bg-paper-50\/50:hover, html[data-theme="dark"] .hover\:bg-paper-50\/60:hover { background-color:#1A3A35 !important; } /* ── BORDERS / DIVIDERS ─────────────────────────────────── */ html[data-theme="dark"] .border-paper-100, html[data-theme="dark"] .border-paper-200, html[data-theme="dark"] .border-paper-300, html[data-theme="dark"] .divide-paper-200 > * + *, html[data-theme="dark"] .divide-paper-100 > * + * { border-color:#2D5A53 !important; } /* keep the green accent borders visible */ html[data-theme="dark"] .border-wa-deep { border-color:#25D366 !important; } /* ── TEXT ───────────────────────────────────────────────── */ html[data-theme="dark"] .text-ink-900 { color:#FBFAF6 !important; } html[data-theme="dark"] .text-ink-800 { color:#F0EBE0 !important; } html[data-theme="dark"] .text-ink-700 { color:#E5DFD0 !important; } html[data-theme="dark"] .text-ink-600 { color:#C9D2CE !important; } html[data-theme="dark"] .text-ink-500 { color:#A8B7B2 !important; } html[data-theme="dark"] .text-ink-400 { color:#92A29E !important; } html[data-theme="dark"] .text-wa-deep { color:#34D87A !important; } html[data-theme="dark"] .text-wa-teal { color:#3BD4C7 !important; } /* placeholders */ html[data-theme="dark"] ::placeholder { color:#92A29E !important; opacity:1; } /* ── HEADER ─────────────────────────────────────────────── */ html[data-theme="dark"] header, html[data-theme="dark"] [data-site-header] { background:#13312D !important; border-color:#2D5A53 !important; } html[data-theme="dark"] .hairline-b { box-shadow: inset 0 -1px 0 #2D5A53; } html[data-theme="dark"] .hairline { box-shadow: inset 0 0 0 1px #2D5A53; } /* ── INPUTS / SELECTS / TEXTAREAS ───────────────────────── */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color:#1F4540 !important; color:#F0EBE0 !important; border-color:#2D5A53 !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color:#25D366 !important; } /* ── BUTTONS ────────────────────────────────────────────── */ html[data-theme="dark"] button.bg-paper-0, html[data-theme="dark"] a.bg-paper-0 { background-color:#1F4540 !important; color:#F0EBE0 !important; } /* keep brand-deep buttons visually consistent */ html[data-theme="dark"] .bg-wa-deep { background-color:#0F8556 !important; } html[data-theme="dark"] .hover\:bg-wa-teal:hover { background-color:#15A074 !important; } html[data-theme="dark"] .hover\:bg-wa-deep:hover { background-color:#0F8556 !important; } /* ── ACCENT SURFACES ────────────────────────────────────── */ /* Selected/active button surfaces. * * Previously these set color:#34D87A on a 0.18-alpha green bg — light green * text on light green became completely unreadable (the "Female", "Existing * user", "No plan / Free" pills in dark mode all disappeared on click). * * Fix: keep the green bg as the selected affordance, but force readable * paper-tone text inside. The .text-wa-deep override below ensures any * nested text-wa-deep also flips to the readable tone instead of staying * light green. */ html[data-theme="dark"] .bg-wa-mint { background-color: rgba(37,211,102,0.28) !important; color:#FBFAF6 !important; } html[data-theme="dark"] .bg-wa-bubble, html[data-theme="dark"] .bg-wa-bubble\/40, html[data-theme="dark"] .bg-wa-bubble\/50, html[data-theme="dark"] .bg-wa-bubble\/60 { background-color: rgba(37,211,102,0.18) !important; color:#FBFAF6 !important; } html[data-theme="dark"] .bg-wa-mint\/30, html[data-theme="dark"] .bg-wa-mint\/40 { background-color: rgba(37,211,102,0.20) !important; color:#FBFAF6 !important; } /* Inside a selected pill / card, ANY text node should flip to readable * paper tone — without this, child .text-wa-deep / .text-ink-* shows * the original light-green / muted color and stays invisible on the * selected bg. */ html[data-theme="dark"] .bg-wa-mint .text-wa-deep, html[data-theme="dark"] .bg-wa-bubble .text-wa-deep, html[data-theme="dark"] .bg-wa-mint\/30 .text-wa-deep, html[data-theme="dark"] .bg-wa-mint\/40 .text-wa-deep { color:#FBFAF6 !important; } /* Tailwind's `has-[:checked]:bg-wa-bubble` variant — used on the * "Existing user" / "No plan / Free" radio cards on /admin/workspaces/create * and many other admin pages — compiles to a DIFFERENT CSS class than * plain .bg-wa-bubble, so the override above doesn't match. Mirror * the same readable-text rule onto the variant selector. */ html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-bubble:has(:checked), html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-mint:has(:checked) { background-color: rgba(37,211,102,0.28) !important; color:#FBFAF6 !important; } html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-bubble:has(:checked) *, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-mint:has(:checked) *, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-bubble:has(:checked) .text-wa-deep, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-mint:has(:checked) .text-wa-deep, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-bubble:has(:checked) .text-ink-500, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-bubble:has(:checked) .text-ink-700, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-mint:has(:checked) .text-ink-500, html[data-theme="dark"] .has-\[\:checked\]\:bg-wa-mint:has(:checked) .text-ink-700 { color:#FBFAF6 !important; } /* Same fix for any peer-checked variant (radios that toggle a sibling) */ html[data-theme="dark"] .peer-checked\:bg-wa-bubble, html[data-theme="dark"] .peer-checked\:bg-wa-mint { background-color: rgba(37,211,102,0.28) !important; color:#FBFAF6 !important; } html[data-theme="dark"] .border-wa-green\/30, html[data-theme="dark"] .border-wa-green\/40 { border-color: rgba(37,211,102,0.40) !important; } html[data-theme="dark"] .text-wa-deep.font-semibold, html[data-theme="dark"] .text-wa-deep.font-bold { color:#34D87A !important; } /* tinted brand surfaces (blue / amber / coral / purple) */ html[data-theme="dark"] .bg-\[\#D9E5F2\] { background-color: rgba(91,160,242,0.15) !important; } html[data-theme="dark"] .bg-\[\#E0EBF7\] { background-color: rgba(91,160,242,0.18) !important; } html[data-theme="dark"] .bg-\[\#FFF4E0\] { background-color: rgba(229,160,78,0.18) !important; } html[data-theme="dark"] .bg-\[\#FFF6E0\] { background-color: rgba(229,160,78,0.18) !important; } html[data-theme="dark"] .bg-\[\#F3E9FF\] { background-color: rgba(123,87,199,0.20) !important; } html[data-theme="dark"] .bg-\[\#FBE9E7\] { background-color: rgba(232,122,93,0.20) !important; } html[data-theme="dark"] .bg-\[\#E8F5E9\] { background-color: rgba(37,211,102,0.18) !important; } html[data-theme="dark"] .bg-\[\#F1F9EC\] { background-color: rgba(37,211,102,0.15) !important; } html[data-theme="dark"] .bg-\[\#F3ECFA\] { background-color: rgba(127,84,179,0.22) !important; } html[data-theme="dark"] .bg-\[\#E0F4F1\] { background-color: rgba(46,201,192,0.18) !important; } html[data-theme="dark"] .bg-\[\#F0F8F6\] { background-color: rgba(37,211,102,0.10) !important; } html[data-theme="dark"] .bg-\[\#E7FFDB\] { background-color: rgba(37,211,102,0.18) !important; } html[data-theme="dark"] .bg-\[\#DFF1ED\] { background-color: rgba(7,94,84,0.30) !important; } html[data-theme="dark"] .bg-\[\#F0EBFB\] { background-color: rgba(123,87,199,0.20) !important; } /* coral / amber accents stay legible */ html[data-theme="dark"] .text-accent-coral { color:#FF8E70 !important; } html[data-theme="dark"] .text-accent-amber { color:#FFC07A !important; } html[data-theme="dark"] .text-\[\#7B5A14\], html[data-theme="dark"] .text-\[\#8B5A14\], html[data-theme="dark"] .text-\[\#8B5A1F\] { color:#FFC07A !important; } html[data-theme="dark"] .text-\[\#A1431F\], html[data-theme="dark"] .text-\[\#A1731F\] { color:#FF8E70 !important; } html[data-theme="dark"] .text-\[\#13478A\] { color:#7BB8FF !important; } html[data-theme="dark"] .text-\[\#5B3D8A\] { color:#B49AED !important; } html[data-theme="dark"] .text-\[\#5E8E3E\] { color:#7BD66F !important; } /* ── KBD / CODE / MISC ──────────────────────────────────── */ html[data-theme="dark"] kbd { background:#1F4540 !important; color:#D6CDB6 !important; border-color:#2D5A53 !important; } html[data-theme="dark"] code { background:#1F4540 !important; color:#F0EBE0 !important; } /* shadows pop more on dark */ html[data-theme="dark"] .shadow-card { box-shadow: 0 1px 0 rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.18) !important; } html[data-theme="dark"] .shadow-soft { box-shadow: 0 12px 28px -10px rgba(0,0,0,0.50) !important; } /* scrollbar */ html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20) !important; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.32) !important; } /* selected row / row hover for tables */ html[data-theme="dark"] tr.hover\:bg-paper-50\/60:hover, html[data-theme="dark"] tr:hover { background-color:#173631 !important; } /* avatar gradients keep their punch — no override needed */ /* search modal blurred backdrop */ html[data-theme="dark"] #wa-search-modal { background: rgba(0,0,0,0.55) !important; } /* card-style strong borders for danger */ html[data-theme="dark"] .border-accent-coral\/40, html[data-theme="dark"] .border-accent-coral\/30 { border-color: rgba(232,122,93,0.55) !important; } /* ───────────────────────────────────────────────────────── THEME PICKER POPOVER ───────────────────────────────────────────────────────── */ .theme-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:200px; background:#FBFAF6; border:1px solid #E5DFD0; border-radius:10px; box-shadow:0 8px 24px -10px rgba(11,31,28,0.18); padding:4px; z-index:60; } .theme-menu button { width:100%; text-align:left; padding:7px 10px; border-radius:8px; font-size:12px; display:flex; align-items:center; gap:8px; color:#3A5A55; } .theme-menu button:hover { background:#F5F3EC; } .theme-menu button.active { background:#075E54; color:#FBFAF6; } .theme-menu .swatch { width:14px; height:14px; border-radius:4px; border:1px solid #E5DFD0; flex-shrink:0; } html[data-theme="dark"] .theme-menu { background:#13312D !important; border-color:#2D5A53 !important; } html[data-theme="dark"] .theme-menu button { color:#E5DFD0 !important; } html[data-theme="dark"] .theme-menu button:hover { background:#1F4540 !important; } html[data-theme="dark"] .theme-menu button.active { background:#0F8556 !important; } html[data-theme="dark"] .theme-menu .swatch { border-color:#2D5A53 !important; } html[data-theme="bright"] .theme-menu { background:#FFFFFF !important; border-color:#E6E6E6 !important; } /* ───────────────────────────────────────────────────────── PROFILE DROPDOWN + SEARCH MODAL THEME-AWARE ───────────────────────────────────────────────────────── */ html[data-theme="dark"] #wa-profile-menu { background:#13312D !important; border-color:#2D5A53 !important; } html[data-theme="dark"] #wa-profile-menu a:hover { background:#1F4540 !important; } /* universal smooth transitions */ body, header, [class*="bg-paper"], [class*="bg-white"], [class*="text-ink"], [class*="border-paper"], input, textarea, select { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* ───────────────────────────────────────────────────────── PER-PAGE CUSTOM CLASSES — dark overrides These classes are defined in individual page