/* Shared screen-only night palette. Do not change command/grid geometry, saved appearance preferences, document printing, or the light theme. */ @media screen and (forced-colors: none) { :root[data-theme="dark"] { color-scheme: dark; --canvas: #101827; --paper: #182438; --ink: #edf2f8; --muted: #b4c0d0; --line: #40516a; --soft: #202e43; --surface: var(--paper); --surface-soft: var(--soft); --border: var(--line); --erp-surface: var(--paper); --erp-surface-muted: var(--soft); --erp-border: var(--line); --erp-text: var(--ink); --erp-accent: #8bd9d3; --brand-turquoise-pale: #223e49; --green-pale: var(--brand-turquoise-pale); --erp-focus-border: #b3a2ff; --erp-row-hover-text: var(--ink); --erp-row-hover-surface: #303e59; --erp-success: #8bdab4; --erp-warning: #f5ce83; --erp-danger: #ffada7; --erp-info: #a8ceff; --document-header-bg: #34385f; --document-header-fg: #f4f5ff; --document-form-header-bg: #252f4a; --document-form-header-fg: var(--ink); --shadow: 0 14px 40px rgb(0 0 0 / 24%); --erp-list-search-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' rx='9' fill='%23223e49'/%3E%3Cg fill='none' stroke='%238bd9d3' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='9.5' cy='9.5' r='4.5'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/g%3E%3C/svg%3E"); } /* Shell and corporate sidebar keep the same navigation and icon themes. */ :root[data-theme="dark"] :is(body,.content,.app-page) { color: var(--ink); background-color: var(--canvas); } :root[data-theme="dark"] :is(.topbar,.workspace-tabs) { background: var(--canvas); border-color: var(--line); } :root[data-theme="dark"] .sidebar { background: linear-gradient(165deg,#202944,#161e34); border-color: var(--line); } :root[data-theme="dark"] .sidebar::before { opacity: .14; } :root[data-theme="dark"] .sidebar::after { opacity: .12; } :root[data-theme="dark"] .brand { background: transparent; } :root[data-theme="dark"] .sidebar .nav-tree:not(.nav-tree-nested)[open] > .nav-tree-children { background: #19263d; border-color: #3a536c; border-left-color: #78c9c5; } :root[data-theme="dark"] .sidebar .nav-tree .nav-item.active { background: #263e50; color: var(--ink); box-shadow: inset 3px 0 #78c9c5; } :root[data-theme="dark"] :is(.brand-copy,.brand-copy strong) { color: var(--ink); } :root[data-theme="dark"] :is(.workspace-company strong,.workspace-identity-details strong,.workspace-identity-details dd) { color: var(--ink); } :root[data-theme="dark"] :is(.topbar .menu-button,.company-switcher select,.user-settings-shortcut) { color: var(--ink); } :root[data-theme="dark"] :is(.user-settings-shortcut,#screenDatabaseInfoButton,[data-screen-database-command]) { color: var(--ink); background-color: var(--paper); border-color: var(--line); } :root[data-theme="dark"] .workspace-tab { color: var(--muted); background: var(--paper); border-color: var(--line); box-shadow: inset 0 2px #506079; } :root[data-theme="dark"] .workspace-tab.active { color: var(--ink); background: #243c49; box-shadow: inset 0 3px #78c9c5; } :root[data-theme="dark"] .workspace-tab-home { color: var(--ink); background: #213344; } :root[data-theme="dark"] .content::before { opacity: .08; } /* Legacy cards and editors share surface aliases with newer modules. */ :root[data-theme="dark"] :is(.master-list-toolbar,.bank-master-toolbar,.cash-master-toolbar, .document-list-heading,.sales-hub-heading,.invoice-workspace-heading,.invoice-info-card, .invoice-lines-card,.invoice-summary-card,.invoice-head,.invoice-history,.form-card, .purchase-form-card,.purchase-policy-card,.record-card-header,.record-card-section, .master-list-footer,.document-workspace,.dw-toolbar,.dw-footer,.dashboard-card, .quick-create,.currency-form-card,.currency-list-card,.exchange-rate-card) { background-color: var(--paper); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] :is(.purchase-hub,.purchase-editor-heading,.cash-page-heading, .invoice-panel,.purchase-editor-layout,.currency-layout) { background: var(--paper); color: var(--ink); } :root[data-theme="dark"] :is(.app-page,dialog) :is(h1,h2,h3,h4,legend) { color: var(--ink); } :root[data-theme="dark"] :is(.eyebrow,.screen-database-header .eyebrow,.calendar-dialog-caption small) { color: var(--erp-accent); } :root[data-theme="dark"] :is(.master-list-toolbar,.record-card-section,.invoice-info-card,.document-appearance-form) label { color: var(--ink); } :root[data-theme="dark"] .accounting-visibility-choice { color: var(--ink); } :root[data-theme="dark"] :is(.document-list-summary strong,.document-grid-totals-band > b,.document-grid-total-chip strong) { color: var(--ink); } :root[data-theme="dark"] .document-draft-summary { background: #422c37 !important; border-color: #b96962 !important; } :root[data-theme="dark"] .document-draft-summary :is(small,strong) { color: var(--erp-danger); } /* Only colors are overridden. Native disabled states, command icons and Excel artwork remain intact; background-color preserves their images. */ :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command,.button-secondary,.erp-button-secondary,.invoice-action,.dialog-close) { color: var(--ink) !important; background-color: var(--paper) !important; border-color: var(--line) !important; } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command) :is(b,.command-label) { color: inherit !important; } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command) :is(.command-icon,.button-icon), :root[data-theme="dark"] .erp-bank-command[data-erp-command-icon]::before { color: var(--erp-accent) !important; background-color: var(--brand-turquoise-pale) !important; } /* Generated icon images contain legacy dark strokes. Brighten the image together with its small pill, without changing the button's label. */ :root[data-theme="dark"] .erp-bank-command[data-erp-command-icon]:not(.erp-close-command)::before { filter: brightness(1.65); } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command):is(.primary,.button-primary,.erp-button-primary) { color: #fff !important; background: #28666d !important; border-color: #5ca3a8 !important; } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command):is(.danger,.button-danger,.erp-button-danger):not(:disabled) { color: var(--erp-danger) !important; } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command):is(.danger,.button-danger,.erp-button-danger) :is(.command-icon,.button-icon) { color: var(--erp-danger) !important; background-color: #4a303b !important; } :root[data-theme="dark"] .erp-close-command { color: #fff !important; background: #873e3b !important; border-color: #b96962 !important; } :root[data-theme="dark"] .erp-close-command :is(.command-icon,.button-icon) { color: #fff !important; background: transparent !important; } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command):hover:not(:disabled):not([aria-disabled="true"]) { border-color: #8bd9d3 !important; } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command):focus-visible { outline-color: var(--erp-focus-border); } :root[data-theme="dark"] :is(.standard-icon-command,.erp-bank-command):disabled { opacity: .48; } :root[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]),select,textarea) { color: var(--ink); background-color: var(--paper); border-color: var(--line); } :root[data-theme="dark"] :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; } :root[data-theme="dark"] :is(input,select,textarea):is(:disabled,[readonly]) { color: var(--muted); background-color: var(--soft); } :root[data-theme="dark"] :is(input,select,textarea):focus-visible { outline-color: var(--erp-focus-border); } :root[data-theme="dark"] :is(input,select,textarea)[aria-invalid="true"] { border-color: var(--erp-danger); } /* Standard indigo headers retain their 7 pt and saved per-column colors. */ :root[data-theme="dark"] :is(.document-list-table,.stock-document-line-grid,.instrument-line-grid,.document-entry-grid,.document-appearance-grid,.dw-grid,#productWorkspaceTable,#partnerWorkspaceTable,#quickStockGrid,#quickPartnerTable,.screen-database-fields table) thead th:not(.grid-appearance-header-colored) { color: var(--document-header-fg) !important; background: var(--document-header-bg) !important; border-color: var(--line); } /* The appearance editor serializes its default indigo as an inline token too. Remap only that default; an actual custom header color is untouched. */ :root[data-theme="dark"] th.grid-appearance-header-colored[style*="--grid-appearance-header-bg: #2d2b83;"] { background: var(--document-header-bg) !important; } :root[data-theme="dark"] :is(.document-appearance-grid,.dw-grid,#productWorkspaceTable,#partnerWorkspaceTable,#quickStockGrid,#quickPartnerTable) tbody td:not(.grid-appearance-colored) { color: var(--ink); background-color: var(--paper); border-color: var(--line); } :root[data-theme="dark"] :is(.document-appearance-grid,.dw-grid,#productWorkspaceTable,#partnerWorkspaceTable,#quickStockGrid,#quickPartnerTable) tbody tr:is(:hover,.selected,.is-selected,[aria-selected="true"]) td:not(.grid-appearance-colored) { color: var(--ink); background-color: var(--erp-row-hover-surface); } :root[data-theme="dark"] dialog { color: var(--ink); background-color: var(--paper); border-color: var(--line); } :root[data-theme="dark"] dialog::backdrop { background: rgb(4 9 18 / 68%); } :root[data-theme="dark"] :is(.ivmego-message-dialog,.app-confirm-dialog,.conversion-dialog) { color: var(--ink); background: var(--paper); } :root[data-theme="dark"] .ivmego-message-dialog header { background: linear-gradient(110deg,#28344f,#28525c); color: #fff; } :root[data-theme="dark"] .ivmego-message-dialog header h2 { color: inherit; } :root[data-theme="dark"] .screen-database-sql { color: var(--ink); background: var(--canvas); } :root[data-theme="dark"] :is(.screen-database-tables label,.screen-database-detail > label) { color: var(--ink); } :root[data-theme="dark"] .document-workspace-window-chrome { background: #24384b; } :root[data-theme="dark"] #documentWorkspaceWindowTitle { color: var(--ink); } :root[data-theme="dark"] .document-workspace { --dw-text: var(--ink); --dw-muted: var(--muted); --dw-surface: var(--paper); --dw-surface-soft: var(--soft); --dw-border: var(--line); --dw-border-strong: var(--line); --dw-danger: var(--erp-danger); } :root[data-theme="dark"] .document-workspace :is(.dw-total-row,.dw-totals-footer,.dw-action-bar,.dw-tab[aria-selected="true"],.dw-grid-command,.dw-icon-button) { background: var(--paper); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .document-workspace .dw-tab[aria-selected="true"] { background: #243c49; border-color: #78c9c5; } :root[data-theme="dark"] .document-workspace .dw-total-row.is-grand strong { color: var(--erp-accent); } :root[data-theme="dark"] .document-workspace .dw-grid-command.dw-danger { color: var(--erp-danger); } :root[data-theme="dark"] .calendar-event { color: var(--ink); background: color-mix(in srgb,var(--event-accent) 20%,var(--paper)); border-color: color-mix(in srgb,var(--event-accent) 70%,var(--line)); } :root[data-theme="dark"] .calendar-event small { color: color-mix(in srgb,var(--event-accent) 25%,white); } :root[data-theme="dark"] :is(.calendar-field-error,.calendar-form-section .calendar-field-error) { color: var(--erp-danger); } :root[data-theme="dark"] :is(.calendar-more,.calendar-add-day,.calendar-dialog-mark) { color: var(--erp-accent); } /* Native and custom scroll tracks must not leave white strips in lists. */ :root[data-theme="dark"] * { scrollbar-color: #6b899a #1b293c; } :root[data-theme="dark"] .product-workspace-top-scroll { background: #1b293c; border-color: var(--line); scrollbar-color: #6b899a #1b293c; } :root[data-theme="dark"] .product-workspace-top-scroll::-webkit-scrollbar-thumb { border-color: #1b293c; background: #6b899a; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: #1b293c; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #6b899a; } }