/* ========================================================= Acacia Dark Mode - Dark mode is indicated by either: 1) (FOUC-safe early apply) 2) (runtime apply) - Assumes your light theme uses the `.theme` token system ========================================================= */ /* ---------------------------- 1) Token overrides (the win) ---------------------------- */ html.dark-theme body.theme, body.theme.dark-theme { color-scheme: dark; /* Core tokens (override light defaults from AcaciaTheme.css) */ --bg: #0b1220; --surface: #0f172a; --border: rgba(255, 255, 255, 0.10); --text: #e5e7eb; --muted: #9ca3af; /* Optional extras used by the overrides below */ --surface-2: #111c33; /* raised surface / table header / profile hero */ --border-strong: rgba(255, 255, 255, 0.16); --shadow: 0 18px 50px rgba(0, 0, 0, 0.55); /* Brands come from AcaciaTheme.css; keep unless you want to override here */ /* --brand: #0F766E; */ } /* ---------------------------- Page background + pusher ---------------------------- */ html.dark-theme body.theme, body.theme.dark-theme, html.dark-theme body.theme .pusher, body.theme.dark-theme .pusher { background: var(--bg) !important; color: var(--text) !important; } /* ---------------------------- 2) Global typography + icons ---------------------------- */ html.dark-theme body.theme .ui.header, body.theme.dark-theme .ui.header { color: var(--text) !important; } html.dark-theme body.theme p, body.theme.dark-theme p { color: var(--muted) !important; } html.dark-theme body.theme .ui.header .sub.header, body.theme.dark-theme .ui.header .sub.header { color: var(--muted) !important; } /* ---------------------------- 3) Surfaces: segments / cards ---------------------------- */ html .dark-theme body.theme .ui.segment, html.dark-theme body.theme .ui.segments, html.dark-theme body.theme .ui.card, body.theme.dark-theme .ui.segment, body.theme.dark-theme .ui.segments, body.theme.dark-theme .ui.card { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; box-shadow: var(--shadow); } /* ---------------------------- 4) Menus / sidebar (Acacia uses app-topbar/app-sidebar) ---------------------------- */ html.dark-theme body.theme .app-topbar.ui.menu, body.theme.dark-theme .app-topbar.ui.menu { background: var(--surface) !important; border-bottom-color: var(--border) !important; } html.dark-theme body.theme .app-topbar .item, body.theme.dark-theme .app-topbar .item { color: var(--text) !important; } /* Sidebar */ html.dark-theme body.theme .app-sidebar.ui.vertical.menu, body.theme.dark-theme .app-sidebar.ui.vertical.menu { background: var(--surface) !important; border-right-color: var(--border) !important; } html.dark-theme body.theme .app-sidebar .item, body.theme.dark-theme .app-sidebar .item { color: var(--text) !important; } /* Profile hero */ html.dark-theme body.theme .profile-hero, body.theme.dark-theme .profile-hero { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; } html.dark-theme body.theme .profile-hero .name, body.theme.dark-theme .profile-hero .name { color: var(--muted) !important; } /* Generic .ui.menu fallback (for legacy menus) */ html.dark-theme body.theme .ui.menu, body.theme.dark-theme .ui.menu { border-color: var(--border) !important; } html.dark-theme body.theme .ui.menu .item, html.dark-theme body.theme .ui.menu .dropdown.item, body.theme.dark-theme .ui.menu .item, body.theme.dark-theme .ui.menu .dropdown.item { color: var(--text) !important; } /* Submenu bar items (Acacia uses `.submen.ui.menu`) */ html.dark-theme body.theme .app-menubar .submen.ui.menu .item:not(.active), body.theme.dark-theme .app-menubar .submen.ui.menu .item:not(.active) { color: rgba(255, 255, 255, 0.88) !important; } /* ---------------------------- 5) Buttons ---------------------------- */ html.dark-theme body.theme .ui.button, body.theme.dark-theme .ui.button { color: var(--text) !important; } /* Primary buttons stay brand-colored from AcaciaTheme.css; ensure readable text */ html.dark-theme body.theme .ui.primary.button, html.dark-theme body.theme .ui.primary.buttons .button, body.theme.dark-theme .ui.primary.button, body.theme.dark-theme .ui.primary.buttons .button { color: #fff !important; } html.dark-theme body.theme .ui.button, body.theme.dark-theme .qo-summary-card .ui.button { color: rgba(0,0,0,.6) !important; } html.dark-theme body.theme .ui.button, body.theme.dark-theme .qo-summary-card .ui.button { color: rgba(0,0,0,.6) !important; } html.dark-theme body.theme .ui.black.black.button, body.theme.dark-theme .ui.black.buttons .button.button { color: var(--surface) !important; } a[name="saveandclosequote"] { background-color: #e5e7eb !important; } a[name="saveandclosequote2"] { background-color: #e5e7eb !important; } /* ---------------------------- 6) Forms / inputs / dropdowns ---------------------------- */ html.dark-theme body.theme .ui.input > input, html.dark-theme body.theme input[type="text"], html.dark-theme body.theme input[type="email"], html.dark-theme body.theme input[type="tel"], html.dark-theme body.theme input[type="time"], html.dark-theme body.theme input[type="password"], html.dark-theme body.theme input[type="url"], html.dark-theme body.theme input[type="number"], html.dark-theme body.theme input[type="date"], html.dark-theme body.theme textarea, html.dark-theme body.theme select, html.dark-theme body.theme .ui.selection.dropdown, body.theme.dark-theme .ui.input > input, body.theme.dark-theme input[type="text"], body.theme.dark-theme input[type="email"], body.theme.dark-theme input[type="password"], body.theme.dark-theme input[type="url"], body.theme.dark-theme input[type="number"], body.theme.dark-theme input[type="date"], body.theme.dark-theme textarea, body.theme.dark-theme select, body.theme.dark-theme .ui.selection.dropdown { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Placeholders */ html.dark-theme body.theme input::placeholder, html.dark-theme body.theme textarea::placeholder, body.theme.dark-theme input::placeholder, body.theme.dark-theme textarea::placeholder { color: rgba(156, 163, 175, 0.85) !important; } /* Dropdown menu panels */ html.dark-theme body.theme .ui.dropdown .menu, body.theme.dark-theme .ui.dropdown .menu { background: var(--surface-2) !important; border-color: var(--border) !important; } html.dark-theme body.theme .ui.dropdown .menu > .item, body.theme.dark-theme .ui.dropdown .menu > .item { color: var(--text) !important; } html.dark-theme body.theme .ui.dropdown .menu > .item:hover, body.theme.dark-theme .ui.dropdown .menu > .item:hover { background: rgba(255, 255, 255, 0.06) !important; } /* ---------------------------- 7) Tables ---------------------------- */ html.dark-theme body.theme .ui.table, body.theme.dark-theme .ui.table { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } html.dark-theme body.theme .ui.table thead th, body.theme.dark-theme .ui.table thead th { background: var(--surface-2) !important; color: var(--text) !important; border-bottom-color: var(--border) !important; } html.dark-theme body.theme .ui.table td, html.dark-theme body.theme .ui.table th, body.theme.dark-theme .ui.table td, body.theme.dark-theme .ui.table th { border-color: var(--border) !important; } /* ---------------------------- 8) Accordions ---------------------------- */ html.dark-theme body.theme .ui.styled.accordion, body.theme.dark-theme .ui.styled.accordion { background: var(--surface) !important; border-color: var(--border) !important; } html.dark-theme body.theme .ui.styled.accordion .title, body.theme.dark-theme .ui.styled.accordion .title { color: var(--text) !important; } html.dark-theme body.theme .ui.styled.accordion .content, body.theme.dark-theme .ui.styled.accordion .content { color: var(--muted) !important; } /* ---------------------------- 9) App modals ---------------------------- */ html.dark-theme body.theme .ui.modal.app-modal > .content, html.dark-theme body.theme .ui.modal.app-modal > .actions, body.theme.dark-theme .ui.modal.app-modal > .content, body.theme.dark-theme .ui.modal.app-modal > .actions { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Sticky header/actions (some light themes force #fff !important) */ html.dark-theme body.theme .ui.dimmer.modals.page.visible.active .ui.modal.app-modal.visible.active > .header, html.dark-theme body.theme .ui.dimmer.modals.page.visible.active .ui.modal.app-modal.visible.active > .actions, body.theme.dark-theme .ui.dimmer.modals.page.visible.active .ui.modal.app-modal.visible.active > .header, body.theme.dark-theme .ui.dimmer.modals.page.visible.active .ui.modal.app-modal.visible.active > .actions { background: var(--surface) !important; color: var(--text) !important; } /* Modal divider */ html.dark-theme body.theme .ui.modal.app-modal .ui.divider, body.theme.dark-theme .ui.modal.app-modal .ui.divider { border-top-color: var(--border) !important; } /* Dimmer overlay for dark mode */ html.dark-theme body.theme .ui.dimmer.modals.page.visible.active, body.theme.dark-theme .ui.dimmer.modals.page.visible.active { background: rgba(0, 0, 0, 0.60) !important; } /* ---------------------------- 10) Tabs / tabular menu tweaks ---------------------------- */ html.dark-theme body.theme .ui.tabular.menu .active.item, body.theme.dark-theme .ui.tabular.menu .active.item { background: none !important; } /* ---------------------------- 11) Chrome autofill fix ---------------------------- */ html.dark-theme body.theme .ui.form input:-webkit-autofill, html.dark-theme body.theme .ui.form textarea:-webkit-autofill, html.dark-theme body.theme .ui.form select:-webkit-autofill, body.theme.dark-theme .ui.form input:-webkit-autofill, body.theme.dark-theme .ui.form textarea:-webkit-autofill, body.theme.dark-theme .ui.form select:-webkit-autofill { -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important; /* Override the "ivory inset" background */ -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important; box-shadow: 0 0 0 1000px var(--surface) inset !important; border-color: var(--border) !important; } html.dark-theme body.theme .ui.form input:-webkit-autofill:focus, body.theme.dark-theme .ui.form input:-webkit-autofill:focus { border-color: var(--border-strong) !important; } /* ---------------------------- 12) Toggle checkbox (dark visibility + brand) ---------------------------- */ html.dark-theme body.theme .ui.toggle.checkbox label, body.theme.dark-theme .ui.toggle.checkbox label { color: var(--text) !important; } /* Track (OFF state) */ html.dark-theme body.theme .ui.toggle.checkbox label:before, body.theme.dark-theme .ui.toggle.checkbox label:before { background: rgba(255, 255, 255, 0.14) !important; border: 1px solid var(--border) !important; } /* Knob (OFF state) */ html.dark-theme body.theme .ui.toggle.checkbox label:after, body.theme.dark-theme .ui.toggle.checkbox label:after { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important; } /* Track (ON state) */ html.dark-theme body.theme .ui.toggle.checkbox input:checked ~ label:before, body.theme.dark-theme .ui.toggle.checkbox input:checked ~ label:before { background-color: var(--brand) !important; border-color: transparent !important; } /* Knob (ON state) */ html.dark-theme body.theme .ui.toggle.checkbox input:checked ~ label:after, body.theme.dark-theme .ui.toggle.checkbox input:checked ~ label:after { background: #ffffff !important; } /* Hover / focus visibility */ html.dark-theme body.theme .ui.toggle.checkbox label:hover:before, body.theme.dark-theme .ui.toggle.checkbox label:hover:before { background: rgba(255, 255, 255, 0.20) !important; } html.dark-theme body.theme .ui.toggle.checkbox input:focus ~ label:before, body.theme.dark-theme .ui.toggle.checkbox input:focus ~ label:before { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25) !important; } /* Dark mode: form field labels must be readable */ html.dark-theme body.theme .ui.form:not(.inverted) .field > label:not(.button), body.theme.dark-theme .ui.form:not(.inverted) .field > label:not(.button) { color: var(--text) !important; /* or var(--muted) if you prefer softer */ } html.dark-theme body.theme .ui.dropdown .menu .selected.item, .ui.dropdown.selected { background: var(--brand) !important; } /* Dark mode: cards */ html.dark-theme body.theme .ui.card, html.dark-theme body.theme .ui.cards > .card, body.theme.dark-theme .ui.card, body.theme.dark-theme .ui.cards > .card { background: var(--surface) !important; color: var(--text) !important; /* Semantic sets border:none; give it a subtle dark border */ border: 1px solid var(--border) !important; /* Replace the light drop shadow */ box-shadow: var(--shadow) !important; } /* Card content text */ html.dark-theme body.theme .ui.card .header, html.dark-theme body.theme .ui.cards > .card .header, body.theme.dark-theme .ui.card .header, body.theme.dark-theme .ui.cards > .card .header { color: var(--text) !important; } html.dark-theme body.theme .ui.card .meta, html.dark-theme body.theme .ui.card .description, html.dark-theme body.theme .ui.cards > .card .meta, html.dark-theme body.theme .ui.cards > .card .description, body.theme.dark-theme .ui.card .meta, body.theme.dark-theme .ui.card .description, body.theme.dark-theme .ui.cards > .card .meta, body.theme.dark-theme .ui.cards > .card .description { color: var(--muted) !important; } /* If cards have extra sections */ html.dark-theme body.theme .ui.card > .content, html.dark-theme body.theme .ui.cards > .card > .content, body.theme.dark-theme .ui.card > .content, body.theme.dark-theme .ui.cards > .card > .content { background: transparent !important; border-top-color: var(--border) !important; } /* Dark mode: buttons inside cards use --muted background */ html.dark-theme body.theme .ui.card .ui.button, html.dark-theme body.theme .ui.cards > .card .ui.button, body.theme.dark-theme .ui.card .ui.button, body.theme.dark-theme .ui.cards > .card .ui.button { background: var(--muted) !important; color: #fff !important; /* readable on muted gray */ border-color: transparent !important; } /* Hover: slightly lighter (simple + consistent) */ html.dark-theme body.theme .ui.card .ui.button:hover, html.dark-theme body.theme .ui.cards > .card .ui.button:hover, body.theme.dark-theme .ui.card .ui.button:hover, body.theme.dark-theme .ui.cards > .card .ui.button:hover { filter: brightness(1.08); } /* Focus ring (optional) */ html.dark-theme body.theme .ui.card .ui.button:focus, html.dark-theme body.theme .ui.cards > .card .ui.button:focus, body.theme.dark-theme .ui.card .ui.button:focus, body.theme.dark-theme .ui.cards > .card .ui.button:focus { box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.25) !important; /* based on muted */ } html.dark-theme body.theme .qo-effective { background: #9ca3af !important; } /* Dark mode: Steps (Fomantic UI) */ html.dark-theme body.theme .ui.steps, body.theme.dark-theme .ui.steps { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: none !important; } html.dark-theme body.theme .ui.steps .step, body.theme.dark-theme .ui.steps .step { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* The connector "diamond" between steps */ html.dark-theme body.theme .ui.steps .step:after, body.theme.dark-theme .ui.steps .step:after { background: var(--surface) !important; /* overrides #fff */ border-color: var(--border) !important; /* overrides rgba(34,36,38,.15) */ } /* Titles / descriptions */ html.dark-theme body.theme .ui.steps .step .title, body.theme.dark-theme .ui.steps .step .title { color: var(--text) !important; } html.dark-theme body.theme .ui.steps .step .description, html.dark-theme body.theme .ui.steps .step .meta, body.theme.dark-theme .ui.steps .step .description, body.theme.dark-theme .ui.steps .step .meta { color: var(--muted) !important; } /* Active step */ html.dark-theme body.theme .ui.steps .active.step, body.theme.dark-theme .ui.steps .active.step { background: var(--surface-2) !important; color: var(--text) !important; } html.dark-theme body.theme .ui.steps .active.step:after, body.theme.dark-theme .ui.steps .active.step:after { background: var(--surface-2) !important; border-color: var(--border) !important; } /* Completed step (optional: keep readable but distinct) */ html.dark-theme body.theme .ui.steps .completed.step, body.theme.dark-theme .ui.steps .completed.step { background: var(--surface) !important; color: var(--text) !important; } html.dark-theme body.theme .ui.steps .completed.step .icon, body.theme.dark-theme .ui.steps .completed.step .icon { color: var(--brand) !important; } /* Disabled step */ html.dark-theme body.theme .ui.steps .disabled.step, body.theme.dark-theme .ui.steps .disabled.step { color: rgba(229, 231, 235, 0.45) !important; } html.dark-theme body.theme .ui.steps .disabled.step .title, body.theme.dark-theme .ui.steps .disabled.step .title, html.dark-theme body.theme .ui.steps .disabled.step .description, body.theme.dark-theme .ui.steps .disabled.step .description { color: rgba(229, 231, 235, 0.45) !important; } body.theme .admin-menu-page.sticky-header::before { background: none !important; } body.theme .sticky-header::before { background: none !important; } .ui.checkbox label, .ui.checkbox + label { color: var(--text) !important; } body.theme .ui.list .list > .item > .content, .ui.list > .item > .content { color: var(--text) !important; } body.theme .ui.list .list > .item .header, .ui.list > .item .header { color: var(--text) !important; } body.theme .ui.list .list > .item .description, .ui.list > .item .description { color: var(--muted) !important; } body.theme .ad-tabs.ui.top.attached.tabular.menu { overflow: initial !important; background: none !important; } body.theme .eft-tabs.ui.top.attached.tabular.menu { overflow: initial !important; background: none !important; } body.theme .ui.compact.menu { background-color: var(--bg) !important; } body.theme .ui.tiny.buttons .button, .ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .or, .ui.ui.ui.ui.tiny.button { background-color: none !important; } body.theme .ui.items > .item > .content > .header { color: var(--text) !important; } body.theme .ui.items > .item > .content > .description { color: #86a3a6 !important; } body.theme .ui.divided.items > .item { border-top: 1px solid var(--text) !important; } body.theme .ui.divided.items > .item:first-child { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; } body.theme .item.ph-row.ph-card { background: var(--surface-2) !important; } body.theme .item.ph-row.ph-card content.header { color: black !important; } body.theme #ph-list .item.ph-card .selectedUWRow { border: 2px solid var(--brand2) !important; } body.theme .ui.modal.app-modal > .actions .ui.black.button { background: var(--text) !important; } body.theme .ui.dimmer.modals.page.visible.active #LetterModal > .header, body.theme .ui.dimmer.modals.page.visible.active #LetterModal > .actions { background: var(--surface) !important; } body.theme .doc-dropzone-inner .sub { color: var(--text) !important; } body.theme .doc-dropzone-inner .meta { color: var(--text) !important; } body.theme .char-counter { color: var(--text) !important; } body.theme .ui.card > .extra, .ui.cards > .card > .extra { color: var(--text) !important; } html.dark-theme body.theme td form input.ui.secondary.small.button[name="claimdetails"] { background-color: var(--text) !important; background-image: none !important; box-shadow: none !important; } body.theme #claimMetricsPage .metric-card .header { color: #2185d0 !important; } body.theme :is(#ReserveModal, #NewRecoveryModal) .toggle-side { color: var(--brand) !important; } body.theme .ui.dimmer.modals.page.visible.active #NewRecoveryModal > .header, body.theme .ui.dimmer.modals.page.visible.active #NewRecoveryModal > .actions { background-color: var(--surface) !important; } body.theme .ui.dimmer.modals.page.visible.active #LetterModal #letterTabs { background-color: var(--surface) !important; } body.theme .ui.items > .item .meta { color: #86a3a6; } body.theme .ui.dimmer.modals.page.visible.active #bankAccountModal .ui.segment.modal-panel { background-color: var(--surface) !important; } body.theme .wizard-card .wizard-actions { background: var(--surface) !important; } .company-files-category-header .count { color: var(--text); } html.dark-theme .ui.toast-container .ui.toast .content p, html.dark-theme .ui.toast-container .ui.toast .content .ui.header { color: var(--text) !important; } body.theme .ui.items > .item > .content { color: var(--text) !important; } html.dark-theme body.theme .ui.input > input, html.dark-theme body.theme .ui.left.icon.input > input { background: #0F172A !important; color: #E5E7EB !important; border: 1px solid rgba(255,255,255,0.10) !important; } html.dark-theme body.theme .ui.input > input:-webkit-autofill, html.dark-theme body.theme .ui.input > input:-webkit-autofill:hover, html.dark-theme body.theme .ui.input > input:-webkit-autofill:focus, html.dark-theme body.theme .ui.left.icon.input > input:-webkit-autofill, html.dark-theme body.theme .ui.left.icon.input > input:-webkit-autofill:hover, html.dark-theme body.theme .ui.left.icon.input > input:-webkit-autofill:focus { -webkit-text-fill-color: #E5E7EB !important; caret-color: #E5E7EB !important; -webkit-box-shadow: 0 0 0 1000px #0F172A inset !important; box-shadow: 0 0 0 1000px #0F172A inset !important; border: 1px solid rgba(255,255,255,0.10) !important; } body.theme .alert-row .cell-heading .alert-heading { white-space: break-spaces; overflow: visible; } .dark-button-red { color: red !important; } .dark-button-blue { color: #2185d0 !important; } .dark-button-white { color: #fff !important; } html.dark-theme .theme .app-menubar.ui.menu { background: var(--surface) !important; border-bottom: 1px solid #2185d0; border-radius: 0; min-height: 44px; box-shadow: none; margin-bottom: 1rem; } /* Divider line (use ::after to avoid Fomantic's ::before rules) */ .theme .app-menubar .submen.ui.menu .item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 28px; /* or 70% */ width: 1px; background: rgba(255, 255, 255, 0.22); pointer-events: none; } /*Edit Profile button */ html.dark-theme #editProfile { margin-top: .35rem; margin-bottom: .45rem; color: #fff !important; background-color: transparent; } html.dark-theme .ui.basic.button.dropdown.violations { background: #fff !important; } html.dark-theme .ui.basic.button.dropdown.DAVE { background: #fff !important; } html.dark-theme .ui.basic.button.dropdown.lien { background: #fff !important; } html.dark-theme .ui.basic.button.dropdown.attributes { background: #fff !important; } html.dark-theme .right.floated.doc-timestamp { color: #fff !important; } html.dark-theme body.theme .count-badge { background: lightslategray; } html.dark-theme .ph-btn-ghost.ui.button { background: #e0e1e2 !important; } .alerts-table-header { background-color: var(--brand2) !important; }