/* * SEPL (Stock Advance) ivory light theme overrides. * * • Loaded on every SEPL page. Only activates when * . * • Flips the repurposed local tokens (--cream, --white, --green-dark, * --green-primary, --green-darkest, --tan, --brown, --light-gray, * --mid-gray, --dark-text) back to their literal "light theme" meanings * so all SEPL pages get a consistent ivory pass without per-page * re-styling. * • Targeted rule overrides handle the hardcoded rgba(255,255,255,X) and * hex colours that the dark theme uses for surfaces, forms, tables, * drawers and badges. * • Principle: gold-in-dark → deep aged gold in light, cream surfaces on * ivory ground, white form fields, borderless cards with paper shadows. */ :root[data-theme="ivory"] { --tan: rgba(14,36,27,0.62); --brown: rgba(14,36,27,0.72); --green-dark: #8E6F22; --green-primary: #8E6F22; --green-darkest: #4A3610; --cream: #FBF5E2; --light-gray: rgba(142,111,34,0.22); --white: #0E241B; --dark-text: #0E241B; --mid-gray: rgba(14,36,27,0.55); } /* PAGE BG + BODY TEXT ============================================ */ :root[data-theme="ivory"] body { background: linear-gradient(180deg, #FBF6E8 0%, #F5EBD3 60%, #F1E6CA 100%); color: #0E241B; } /* INTAKE custom client/care-of dropdowns — inline-styled divs with cream text on near-white bg were invisible. Force white surface + dark ink for both the trigger button and the dropdown list. */ :root[data-theme="ivory"] #clientDropBtn, :root[data-theme="ivory"] #careOfDropBtn { background: #FFFFFF !important; color: #07120A !important; border-color: rgba(142,111,34,0.40) !important; } :root[data-theme="ivory"] #clientList, :root[data-theme="ivory"] #careOfList { background: #FFFFFF !important; color: #07120A !important; border-color: rgba(142,111,34,0.40) !important; box-shadow: 0 14px 36px rgba(60,45,15,0.25) !important; } :root[data-theme="ivory"] #clientList > div, :root[data-theme="ivory"] #careOfList > div { color: #07120A !important; } :root[data-theme="ivory"] #clientList > div[data-cid]:hover, :root[data-theme="ivory"] #careOfList > div:hover { background: rgba(142,111,34,0.12) !important; } /* HEADINGS + LABELS ============================================ */ :root[data-theme="ivory"] h1, :root[data-theme="ivory"] h2, :root[data-theme="ivory"] h3, :root[data-theme="ivory"] .h1, :root[data-theme="ivory"] .h2, :root[data-theme="ivory"] .h3, :root[data-theme="ivory"] .sepl-h1, :root[data-theme="ivory"] .sepl-h2, :root[data-theme="ivory"] .sepl-h.h1, :root[data-theme="ivory"] .sepl-h.h2 { color: #07120A !important; } :root[data-theme="ivory"] label { color: rgba(14,36,27,0.72); } /* CARDS + KPI TILES — borderless paper surfaces ================= */ :root[data-theme="ivory"] .card, :root[data-theme="ivory"] .kpi, :root[data-theme="ivory"] .panel, :root[data-theme="ivory"] .sepl-card { background: #FBF5E2 !important; border: 0 !important; box-shadow: 0 10px 28px rgba(92,69,21,0.10), 0 2px 6px rgba(92,69,21,0.06) !important; color: #07120A; } :root[data-theme="ivory"] .card h1, :root[data-theme="ivory"] .card h2, :root[data-theme="ivory"] .card h3 { color: #07120A; } :root[data-theme="ivory"] .kpi .lbl, :root[data-theme="ivory"] .kpi .label, :root[data-theme="ivory"] .kpi-lbl { color: rgba(14,36,27,0.55); } :root[data-theme="ivory"] .kpi .val, :root[data-theme="ivory"] .kpi .value, :root[data-theme="ivory"] .kpi-val { color: #07120A; } :root[data-theme="ivory"] .kpi .sub2, :root[data-theme="ivory"] .kpi .sub, :root[data-theme="ivory"] .kpi-sub { color: rgba(14,36,27,0.55); } /* FILTER ROW + FORM SURFACES =================================== */ :root[data-theme="ivory"] .filter-row, :root[data-theme="ivory"] .filter-card, :root[data-theme="ivory"] .form-card, :root[data-theme="ivory"] .field-card { background: #FBF5E2 !important; border: 0 !important; box-shadow: 0 10px 28px rgba(92,69,21,0.10), 0 2px 6px rgba(92,69,21,0.06) !important; } /* FORM FIELDS — white surfaces, dark text, light color-scheme === */ :root[data-theme="ivory"] input, :root[data-theme="ivory"] select, :root[data-theme="ivory"] textarea { background: #FFFFFF !important; color: #07120A !important; border-color: rgba(142,111,34,0.30) !important; color-scheme: light !important; } :root[data-theme="ivory"] input::placeholder, :root[data-theme="ivory"] textarea::placeholder { color: rgba(14,36,27,0.40) !important; } :root[data-theme="ivory"] input:focus, :root[data-theme="ivory"] select:focus, :root[data-theme="ivory"] textarea:focus { border-color: #8E6F22 !important; } :root[data-theme="ivory"] select option { background: #FFFFFF !important; color: #07120A !important; } :root[data-theme="ivory"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } /* BUTTONS — gold action box stays gold (works on both themes). Apply the thumb rule: UPPERCASE, lighter weight 400, spaced. Secondary becomes dark-ink-on-cream with gold hover. */ :root[data-theme="ivory"] button.btn, :root[data-theme="ivory"] button.btn-primary, :root[data-theme="ivory"] .edit-form button, :root[data-theme="ivory"] .close-btn, :root[data-theme="ivory"] .save, :root[data-theme="ivory"] button[type="submit"] { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 400; color: #14210d !important; } :root[data-theme="ivory"] .edit-form button.secondary, :root[data-theme="ivory"] .btn-secondary { background: transparent !important; color: #07120A !important; border: 1px solid rgba(142,111,34,0.30) !important; } :root[data-theme="ivory"] .edit-form button.secondary:hover, :root[data-theme="ivory"] .btn-secondary:hover { background: rgba(142,111,34,0.10) !important; border-color: #8E6F22 !important; color: #8E6F22 !important; } :root[data-theme="ivory"] .del-btn { background: #9B2B22 !important; color: #FCEAE5 !important; } :root[data-theme="ivory"] .del-btn:hover { background: #7C1F18 !important; } :root[data-theme="ivory"] .edit-btn, :root[data-theme="ivory"] .pdf-link { background: #FFFFFF !important; border: 1px solid rgba(142,111,34,0.30) !important; color: #07120A !important; } :root[data-theme="ivory"] .edit-btn:hover, :root[data-theme="ivory"] .pdf-link:hover { background: #F5EBD3 !important; border-color: #8E6F22 !important; color: #8E6F22 !important; } /* TABLES — white surface, hairline gold grid, dark ink ========== */ :root[data-theme="ivory"] table, :root[data-theme="ivory"] .data-table, :root[data-theme="ivory"] .grid-table { color: #07120A; } :root[data-theme="ivory"] th { background: rgba(159,124,41,0.08) !important; color: rgba(14,36,27,0.68) !important; border-bottom-color: rgba(142,111,34,0.30) !important; } :root[data-theme="ivory"] td { border-bottom-color: rgba(142,111,34,0.16) !important; color: #07120A; } :root[data-theme="ivory"] tbody tr:hover td { background: rgba(159,124,41,0.05) !important; } :root[data-theme="ivory"] .grand-total, :root[data-theme="ivory"] tr.grand-total, :root[data-theme="ivory"] tr.tot td { background: #F1E6CA !important; color: #07120A !important; } /* LTV / STATUS BADGES — softer cream tints with deeper inks ===== */ :root[data-theme="ivory"] .ltv, :root[data-theme="ivory"] .badge { background: rgba(159,124,41,0.10) !important; color: #8E6F22 !important; } :root[data-theme="ivory"] .ltv.green { background: #DCE9DE !important; color: #1B5E20 !important; border-color: rgba(46,160,90,0.45) !important; } :root[data-theme="ivory"] .ltv.yellow { background: #F4E7C5 !important; color: #8C6915 !important; border-color: rgba(159,124,41,0.40) !important; } :root[data-theme="ivory"] .ltv.orange { background: #F4DDC0 !important; color: #8C4A15 !important; border-color: rgba(220,140,50,0.45) !important; } :root[data-theme="ivory"] .ltv.red { background: #F0D5CE !important; color: #8C2A1A !important; border-color: rgba(220,80,70,0.45) !important; } :root[data-theme="ivory"] .ltv.forced { background: #9B2B22 !important; color: #FCEAE5 !important; border-color: #9B2B22 !important; } /* Approval-state row tints + badges (intake) */ :root[data-theme="ivory"] .approval-pending td { background: #FFF4D2 !important; color: #5A4500 !important; } :root[data-theme="ivory"] .approval-rejected td { background: #FCE0DA !important; color: #7A1A12 !important; } :root[data-theme="ivory"] .closure-pending td { background: #DCEFE3 !important; color: #0E3A1F !important; } :root[data-theme="ivory"] .intake-awaiting-sign td { background: #E5DAF2 !important; color: #3A2A60 !important; } :root[data-theme="ivory"] .approval-badge.pending { background: #FFF4D2 !important; color: #7A5A00 !important; } :root[data-theme="ivory"] .approval-badge.rejected { background: #FCE0DA !important; color: #9B2B22 !important; } /* DRAWER OVERLAY + PANEL — cream paper, soft shadow ============= */ :root[data-theme="ivory"] .drawer-overlay { background: rgba(20,30,15,0.42) !important; } :root[data-theme="ivory"] .drawer-panel, :root[data-theme="ivory"] .drawer { background: #FBF5E2 !important; color: #07120A !important; border-left: 1px solid rgba(142,111,34,0.20) !important; } :root[data-theme="ivory"] .drawer-panel h1, :root[data-theme="ivory"] .drawer-panel h2, :root[data-theme="ivory"] .drawer-panel h3 { color: #07120A; } :root[data-theme="ivory"] .drawer-panel label { color: rgba(14,36,27,0.72); } /* SUB-NAV TABS (Intake · Portfolio etc.) — dark ink with gold underline */ :root[data-theme="ivory"] .nav-sub a { color: rgba(14,36,27,0.62) !important; border-bottom-color: rgba(142,111,34,0.35) !important; } :root[data-theme="ivory"] .nav-sub a:hover, :root[data-theme="ivory"] .nav-sub a.active { color: #8E6F22 !important; border-bottom-color: #8E6F22 !important; } /* CARDAMOM RATE BANNER — promoted to a proper gold action box in ivory. Gold gradient fill, dark ink text, struck-medal depth recipe. */ :root[data-theme="ivory"] .rate-banner { background: linear-gradient(to right, #EAD08C 0%, #CBA24A 50%, #9A7A2E 100%) !important; border: 0 !important; color: #14210d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(60,42,12,0.20), 0 10px 24px rgba(106,80,24,0.30) !important; } :root[data-theme="ivory"] .rate-banner > div, :root[data-theme="ivory"] .rate-banner > span, :root[data-theme="ivory"] .rate-banner span { color: #14210d !important; } :root[data-theme="ivory"] .rate-banner b { color: #14210d !important; } :root[data-theme="ivory"] .rate-banner button { background: rgba(0,0,0,0.10) !important; color: #14210d !important; border: 1px solid rgba(0,0,0,0.22) !important; } :root[data-theme="ivory"] .rate-banner button:hover { background: rgba(0,0,0,0.18) !important; } /* GRADE BENCHMARK STRIP — dark ink on cream */ :root[data-theme="ivory"] #gradeBench { color: rgba(14,36,27,0.72) !important; } :root[data-theme="ivory"] #gradeBench b { color: #8E6F22 !important; } /* SAMPLE TEST GRADE ROW LABELS — make the per-grade labels readable */ :root[data-theme="ivory"] .grade-rows { border-color: rgba(142,111,34,0.28) !important; } :root[data-theme="ivory"] .grade-row { border-top-color: rgba(142,111,34,0.20) !important; } :root[data-theme="ivory"] .grade-row .grade-grams label, :root[data-theme="ivory"] .grade-row label { color: #07120A !important; font-weight: 500; } :root[data-theme="ivory"] .photo-tap { background: #FFFFFF !important; border-color: rgba(142,111,34,0.40) !important; color: rgba(14,36,27,0.55) !important; } :root[data-theme="ivory"] .photo-tap:hover { border-color: #8E6F22 !important; color: #8E6F22 !important; } :root[data-theme="ivory"] .photo-tap.has-photo { border-color: #8E6F22 !important; } /* SEPL CARD heading + section h2 */ :root[data-theme="ivory"] .sepl-card, :root[data-theme="ivory"] .sepl-h { background: #FBF5E2 !important; color: #07120A !important; } :root[data-theme="ivory"] .sepl-h.h1, :root[data-theme="ivory"] .sepl-h.h2 { color: #07120A !important; } :root[data-theme="ivory"] .commit-warning { color: #8C6915 !important; } /* MUTED / SECONDARY TEXT ======================================== */ :root[data-theme="ivory"] .muted, :root[data-theme="ivory"] .small, :root[data-theme="ivory"] .hint, :root[data-theme="ivory"] .sub { color: rgba(14,36,27,0.62); } /* LINKS ======================================================== */ :root[data-theme="ivory"] a { color: #8E6F22; } :root[data-theme="ivory"] a:hover { color: #4A3610; } /* NAVBAR — cream-tinted frosted strip in ivory so the brand sits on its own surface and the page heading underneath doesn't bleed through. */ :root[data-theme="ivory"] .navbar, :root[data-theme="ivory"] nav.nav { background: rgba(247,241,226,0.88) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgba(142,111,34,0.18) !important; } :root[data-theme="ivory"] .brand-name { color: #07120A !important; } :root[data-theme="ivory"] .brand-name small { color: #8E6F22 !important; } :root[data-theme="ivory"] .nav-links a { color: rgba(14,36,27,0.78) !important; } :root[data-theme="ivory"] .nav-links a:hover, :root[data-theme="ivory"] .nav-links a.active { color: #8E6F22 !important; } :root[data-theme="ivory"] .dropdown-trigger, :root[data-theme="ivory"] .dropdown-trigger.active { color: #8E6F22 !important; } :root[data-theme="ivory"] .dropdown-arrow { color: #8E6F22 !important; } /* ================================================================ PORTFOLIO + INTAKE — every hardcoded #F1EAD8 / #E8CD87 / cream-rgba text colour rewritten for cream-on-cream legibility. ================================================================ */ /* Base text + headings */ :root[data-theme="ivory"] .card { color: #07120A !important; } :root[data-theme="ivory"] .card h1, :root[data-theme="ivory"] .card h2, :root[data-theme="ivory"] .card h3, :root[data-theme="ivory"] .card .h1, :root[data-theme="ivory"] .card .h2 { color: #07120A !important; } :root[data-theme="ivory"] .sub, :root[data-theme="ivory"] .card .sub { color: rgba(14,36,27,0.65) !important; } /* KPI tiles — every label, value and sub. The :not([style*="linear-gradient"]) guard lets the inline-styled gold "Total Interest Earned" tile keep its gold background instead of being painted over. */ :root[data-theme="ivory"] .kpi:not([style*="linear-gradient"]) { color: #07120A; background: #FBF5E2 !important; border: 0 !important; box-shadow: 0 8px 22px rgba(92,69,21,0.10), 0 2px 5px rgba(92,69,21,0.06) !important; } :root[data-theme="ivory"] .kpi:not([style*="linear-gradient"]) .lbl { color: rgba(14,36,27,0.65) !important; } :root[data-theme="ivory"] .kpi:not([style*="linear-gradient"]) .val { color: #07120A !important; } :root[data-theme="ivory"] .kpi:not([style*="linear-gradient"]) .sub2 { color: rgba(14,36,27,0.55) !important; } /* TOTAL INTEREST EARNED — the inline-gold tile needs a deeper gold in ivory (the bright top-left of the dark-mode 135deg gradient blends with cream) and slightly stronger label opacity for "TOTAL INTEREST EARNED" itself. */ :root[data-theme="ivory"] .kpi[style*="linear-gradient"] { background: linear-gradient(135deg,#D9A949 0%,#B0892F 50%,#7E631C 100%) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(60,42,12,0.22), 0 12px 28px rgba(92,69,21,0.35), 0 2px 6px rgba(74,54,16,0.20) !important; } :root[data-theme="ivory"] .kpi[style*="linear-gradient"] .lbl { color: rgba(20,33,13,0.88) !important; } :root[data-theme="ivory"] .kpi[style*="linear-gradient"] .val { color: #14210d !important; } :root[data-theme="ivory"] .kpi[style*="linear-gradient"] .sub2 { color: rgba(20,33,13,0.72) !important; } /* TABLES — all text dark on white */ :root[data-theme="ivory"] table { color: #07120A !important; background: #FFFFFF; } :root[data-theme="ivory"] th { color: rgba(14,36,27,0.62) !important; background: rgba(159,124,41,0.08) !important; } :root[data-theme="ivory"] th:hover { color: #07120A !important; } :root[data-theme="ivory"] td { color: #07120A !important; } :root[data-theme="ivory"] .sum-row td, :root[data-theme="ivory"] tr.sum-row td, :root[data-theme="ivory"] tr.grand-total td { background: #F1E6CA !important; color: #07120A !important; } :root[data-theme="ivory"] .sum-row td:first-child, :root[data-theme="ivory"] tr.sum-row td:first-child { color: rgba(14,36,27,0.70) !important; } /* PRICE BANNER (portfolio version) — same gold action-box treatment as rate-banner */ :root[data-theme="ivory"] .price-banner { background: linear-gradient(to right, #EAD08C 0%, #CBA24A 50%, #9A7A2E 100%) !important; border: 0 !important; color: #14210d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(60,42,12,0.20), 0 10px 24px rgba(106,80,24,0.30) !important; } :root[data-theme="ivory"] .price-banner span, :root[data-theme="ivory"] .price-banner b { color: #14210d !important; } /* PF-PANEL (Today's rates strip) — dark text on cream surface, visible Reset */ :root[data-theme="ivory"] .pf-panel { background: #FBF5E2 !important; border: 0 !important; box-shadow: 0 6px 18px rgba(92,69,21,0.08) !important; color: #07120A !important; } :root[data-theme="ivory"] .pf-panel .pf-title { color: #8E6F22 !important; } :root[data-theme="ivory"] .pf-panel .pf-sub { color: #5C4A1F !important; } :root[data-theme="ivory"] .pf-panel .pf-sub b { color: #07120A !important; } :root[data-theme="ivory"] .pf-panel .pf-cell { background: #FFFFFF !important; border: 1px solid rgba(142,111,34,0.22) !important; box-shadow: 0 2px 6px rgba(92,69,21,0.05) !important; } :root[data-theme="ivory"] .pf-panel .pf-grade { color: #8E6F22 !important; } :root[data-theme="ivory"] .pf-panel .pf-arrow { color: #7A6943 !important; } :root[data-theme="ivory"] .pf-panel .pf-rate { color: #07120A !important; } :root[data-theme="ivory"] .pf-panel .pf-meta { color: #7A6943 !important; } :root[data-theme="ivory"] .pf-panel .pf-msg { color: #5C4A1F !important; } :root[data-theme="ivory"] .pf-panel label { color: rgba(14,36,27,0.72) !important; } :root[data-theme="ivory"] .pf-panel input { background: #FFFFFF !important; border-color: rgba(142,111,34,0.30) !important; color: #07120A !important; } :root[data-theme="ivory"] .pf-panel input:focus { border-color: #8E6F22 !important; } :root[data-theme="ivory"] .pf-panel input:disabled { background: #F1E9D3 !important; color: #5C4A1F !important; } :root[data-theme="ivory"] .pf-panel button { background: transparent !important; border: 1px solid rgba(142,111,34,0.40) !important; color: #8E6F22 !important; } :root[data-theme="ivory"] .pf-panel button:hover { background: rgba(142,111,34,0.10) !important; color: #4A3610 !important; border-color: #8E6F22 !important; } :root[data-theme="ivory"] .pf-panel button.primary { background: linear-gradient(135deg,#EAD08C 0%,#CBA24A 48%,#9A7A2E 100%) !important; color: #14210d !important; border: 0 !important; } :root[data-theme="ivory"] .pf-panel button.primary:hover { filter: brightness(1.04) !important; } /* CLIENT-LINK (rows in positions table — critical visibility item). Bumped dashed underline opacity 0.30 → 0.60 so the gold dashes register. */ :root[data-theme="ivory"] .client-link { color: #07120A !important; border-bottom: 1px dashed rgba(142,111,34,0.60) !important; } :root[data-theme="ivory"] .client-link:hover { color: #8E6F22 !important; border-bottom-color: #8E6F22 !important; } /* CALC-ROW (intake's Advance Value Calculation) */ :root[data-theme="ivory"] .calc-row { color: rgba(14,36,27,0.72) !important; border-bottom-color: rgba(142,111,34,0.18) !important; } :root[data-theme="ivory"] .calc-row span, :root[data-theme="ivory"] .calc-row b { color: #07120A !important; } :root[data-theme="ivory"] .calc-row b { font-weight: 600 !important; } :root[data-theme="ivory"] .calc-box, :root[data-theme="ivory"] .calc-wrap { background: rgba(159,124,41,0.06) !important; border-color: rgba(142,111,34,0.30) !important; } /* DRAWER — all text dark */ :root[data-theme="ivory"] .drawer { background: #FBF5E2 !important; color: #07120A !important; border-left-color: rgba(142,111,34,0.20) !important; } :root[data-theme="ivory"] .drawer h2 { color: #07120A !important; } :root[data-theme="ivory"] .drawer h3 { color: rgba(14,36,27,0.72) !important; } :root[data-theme="ivory"] .drawer .meta { color: rgba(14,36,27,0.62) !important; } :root[data-theme="ivory"] .drawer .close { color: rgba(14,36,27,0.55) !important; } :root[data-theme="ivory"] .drawer .close:hover { color: #8E6F22 !important; } /* Definition lists — bank details, IFSC, etc. */ :root[data-theme="ivory"] .drawer dl { color: #07120A !important; } :root[data-theme="ivory"] .drawer dt { color: rgba(14,36,27,0.62) !important; } :root[data-theme="ivory"] .drawer dd { color: #07120A !important; } /* Lot transaction list rows inside the drawer */ :root[data-theme="ivory"] .drawer .txn-list, :root[data-theme="ivory"] .drawer .txn-list .row, :root[data-theme="ivory"] .drawer .txn-list .amt { color: #07120A !important; } :root[data-theme="ivory"] .drawer .txn-list .row { border-bottom-color: rgba(142,111,34,0.18) !important; } /* Drawer inputs (date / number / text) */ :root[data-theme="ivory"] .drawer input[type="date"], :root[data-theme="ivory"] .drawer input[type="number"], :root[data-theme="ivory"] .drawer input[type="text"] { background: #FFFFFF !important; border-color: rgba(142,111,34,0.30) !important; color: #07120A !important; color-scheme: light !important; } /* CLOSED LOTS — proper grey-out in ivory */ :root[data-theme="ivory"] .closed-row td { background: rgba(14,36,27,0.05) !important; color: rgba(14,36,27,0.42) !important; } :root[data-theme="ivory"] .closed-row td .client-link { color: rgba(14,36,27,0.45) !important; border-bottom-color: rgba(142,111,34,0.30) !important; } :root[data-theme="ivory"] .status-closed { background: rgba(14,36,27,0.10) !important; color: rgba(14,36,27,0.55) !important; } :root[data-theme="ivory"] tr.row-exited td, :root[data-theme="ivory"] tr.closed-row td { opacity: 1; } /* not opacity-based — use bg/color */ /* TOOLBAR BUTTONS — EXPORT EXCEL needs visible border + dark ink on cream */ :root[data-theme="ivory"] .xbtn-export { background: #FFFFFF !important; color: #07120A !important; border: 1px solid rgba(142,111,34,0.40) !important; } :root[data-theme="ivory"] .xbtn-export:hover { background: #F5EBD3 !important; color: #8E6F22 !important; border-color: #8E6F22 !important; } :root[data-theme="ivory"] .xbtn { border-color: rgba(142,111,34,0.40) !important; } /* DRAWER add-pending button + override checkbox label — inline styles need attribute selectors to win over the JS-set color/border. */ :root[data-theme="ivory"] .topup-pending-btn, :root[data-theme="ivory"] button[class*="pending-btn"] { background: #FFFFFF !important; color: #8E6F22 !important; border: 1px solid #8E6F22 !important; font-weight: 500 !important; } :root[data-theme="ivory"] .topup-pending-btn:hover, :root[data-theme="ivory"] button[class*="pending-btn"]:hover { background: #F5EBD3 !important; color: #4A3610 !important; } /* "Override 70% cap (admin — special case)" — inline label with color:#E8CD87. Force dark ink via attribute selector. */ :root[data-theme="ivory"] .drawer label[style*="E8CD87"], :root[data-theme="ivory"] .drawer label[style*="e8cd87"] { color: #07120A !important; } :root[data-theme="ivory"] .drawer label[style*="E8CD87"] input, :root[data-theme="ivory"] .drawer label[style*="e8cd87"] input { accent-color: #8E6F22; } /* INLINE STYLE COLOUR FALLBACKS — for spots where JS or inline style still sets style="color:var(--white)" / style="color:rgba(241,234,216,...)" the token flip already catches them. These rules catch any remaining widget. */ :root[data-theme="ivory"] .who, :root[data-theme="ivory"] #who { color: rgba(14,36,27,0.62) !important; } /* COPY TO G-SHEET & EXPORT EXCEL buttons in toolbars — keep canonical look */ :root[data-theme="ivory"] button[id*="gsheet" i], :root[data-theme="ivory"] button.copy-gsheet { background: linear-gradient(to right, #EAD08C 0%, #CBA24A 50%, #9A7A2E 100%) !important; color: #14210d !important; border: 0 !important; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 400; } /* CONSIGNOR DASHBOARD ========================================== */ :root[data-theme="ivory"] .txn-card { background: #FBF5E2 !important; border: 0 !important; box-shadow: 0 10px 28px rgba(92,69,21,0.10), 0 2px 6px rgba(92,69,21,0.06) !important; color: #07120A !important; } :root[data-theme="ivory"] .txn-card .txnId, :root[data-theme="ivory"] .txnId { color: #07120A !important; } :root[data-theme="ivory"] .txn-card .status { background: rgba(46,160,90,0.16) !important; color: #1B5E20 !important; border-color: rgba(46,160,90,0.40) !important; } :root[data-theme="ivory"] .txn-card .status.closed { background: rgba(14,36,27,0.08) !important; color: rgba(14,36,27,0.55) !important; } :root[data-theme="ivory"] .txn-card .meta { color: rgba(14,36,27,0.78) !important; } :root[data-theme="ivory"] .txn-card .meta span b { color: #07120A !important; } :root[data-theme="ivory"] .who { color: rgba(14,36,27,0.62) !important; } :root[data-theme="ivory"] .logout { color: rgba(14,36,27,0.78) !important; } :root[data-theme="ivory"] .logout:hover { color: #8E6F22 !important; } :root[data-theme="ivory"] .calc { background: #FBF5E2 !important; border: 1px solid rgba(142,111,34,0.20) !important; } :root[data-theme="ivory"] .calc-row { color: rgba(14,36,27,0.78) !important; } :root[data-theme="ivory"] .calc-row b { color: #07120A !important; } :root[data-theme="ivory"] .fine { color: rgba(14,36,27,0.62) !important; } :root[data-theme="ivory"] .empty { color: rgba(14,36,27,0.55) !important; } :root[data-theme="ivory"] .pdf-link { background: #FFFFFF !important; border: 1px solid rgba(142,111,34,0.30) !important; color: #07120A !important; } :root[data-theme="ivory"] .pdf-link:hover { background: #F5EBD3 !important; color: #8E6F22 !important; } /* FILTER CHIPS (ALL / ACTIVE / CLOSED) */ :root[data-theme="ivory"] .filter-chip { background: transparent !important; border: 1px solid rgba(142,111,34,0.40) !important; color: rgba(14,36,27,0.72) !important; } :root[data-theme="ivory"] .filter-chip:hover { color: #07120A !important; border-color: #8E6F22 !important; } :root[data-theme="ivory"] .filter-chip.active { background: rgba(142,111,34,0.14) !important; color: #8E6F22 !important; border-color: #8E6F22 !important; } /* INLINE-STYLE FALLBACKS — catches any JS-rendered element that bakes in a cream colour via inline style attribute (e.g. the consignor stock-summary sumCell labels + values, the Reset hint, etc.) */ :root[data-theme="ivory"] [style*="color:#F1EAD8"], :root[data-theme="ivory"] [style*="color: #F1EAD8"] { color: #07120A !important; } :root[data-theme="ivory"] [style*="color:rgba(241,234,216"] { color: rgba(14,36,27,0.7) !important; } :root[data-theme="ivory"] [style*="rgba(203,162,74,0.06)"] { background: #FBF5E2 !important; border-color: rgba(142,111,34,0.30) !important; } /* Keep the gold accent labels in the consignor summary readable on cream — they used #CBA24A which is fine but lifting saturation helps a touch. */ :root[data-theme="ivory"] [style*="color:#CBA24A"] { color: #8E6F22 !important; } /* SEPL HEADER BAR (signed-in topbar) — themed for ivory ======== */ :root[data-theme="ivory"] #sepl-header-bar { background: rgba(245,235,211,0.92) !important; color: #07120A !important; border-bottom-color: rgba(142,111,34,0.28) !important; box-shadow: 0 2px 10px rgba(60,45,15,0.15) !important; } :root[data-theme="ivory"] #sepl-header-bar span:first-child { color: rgba(14,36,27,0.70) !important; } :root[data-theme="ivory"] #sepl-header-bar button { color: #8E6F22 !important; border-color: rgba(142,111,34,0.45) !important; } :root[data-theme="ivory"] #sepl-header-bar button:hover { background: rgba(142,111,34,0.12) !important; border-color: #8E6F22 !important; }