/* Kolmadia theme contract
   This file is intentionally loaded last. Legacy component styles use literal
   light colors, so the active theme must own every reusable UI primitive. */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app {
    color-scheme: dark;
    background: var(--km2-canvas, #0b1018) !important;
    color: var(--km2-text, #edf3f0) !important;
}

/* Remove literal white paint from legacy structural wrappers first. */
html[data-theme="dark"] .app-layout .page-content :is(
    div, section, article, aside, header, footer, form, label, main, nav
) {
    background-color: transparent !important;
    border-color: var(--km2-border, #2b3541);
}

/* Reapply intentional surfaces using the naming conventions used app-wide. */
html[data-theme="dark"] .app-layout .page-content :is(
    .panel, .card, .modal-content, .settings-panel, .settings-plan-item,
    .subscription-plan-option, .module-chip, .warehouse-workspace-toggle,
    .dashboard-setup-callout, .dashboard-alert-item, .dashboard-panel,
    .stat-card, .metric-card, .summary-card, .empty, .notice,
    .ticket-toolbar, .ticket-row, .ticket-table, .report-block,
    .employee-panel, .employee-stats > *, .inventorydetails-panel,
    .inventory-purpose-guide, .inventory-add-panel, .inventory-table-wrap,
    .inventory-expanded-filters, .records-table, .table-wrap,
    .logistics-panel, .logistics-modal, .line-builder, .record-meta > span,
    .confirmation-lines article, .logistics-audit, .decision-modal,
    .jobdetails-assignee-picker, .assigned-team, .checkbox-list,
    .users-module-access, .users-module-option, .users-table-wrap,
    .customer-activity-popout, .page-help-panel, .whats-new-panel,
    [class$="-panel"], [class*="-panel "],
    [class$="-card"], [class*="-card "],
    [class$="-modal"], [class*="-modal "],
    [class$="-dialog"], [class*="-dialog "],
    [class$="-drawer"], [class*="-drawer "],
    [class$="-popout"], [class*="-popout "],
    [class$="-quickview"], [class*="-quickview "],
    [class$="-table-wrap"], [class*="-table-wrap "],
    [class$="-toolbar"], [class*="-toolbar "],
    [class$="-filters"], [class*="-filters "]
) {
    background: var(--km2-surface, #171c25) !important;
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: initial;
    border-color: var(--km2-border, #2b3541) !important;
    box-shadow: none !important;
}

/* Secondary rows and grouped controls need separation without becoming white. */
html[data-theme="dark"] .app-layout .page-content :is(
    .form-grid, .form-row, .line-builder, .quote-line-edit,
    .table-row, .history-row, .customer-file-row, .job-row,
    .mytime-status-banner, .time-entry-row, .timemgmt-row,
    .settings-detail-card, .module-choice, .record-meta > span,
    .confirmation-lines article, .direct-labor-grid > label,
    .direct-labor-grid > .direct-duration
) {
    background: var(--km2-surface-2, #1c222d) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}

/* Typography contract. No legacy dark ink may survive on a dark surface. */
html[data-theme="dark"] .app-layout .page-content :is(h1, h2, h3, h4, h5, h6, legend, label, dt, strong, b) {
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(p, small, dd, time, .settings-muted, [class*="subtitle"], [class*="meta"]) {
    color: var(--km2-muted, #9aa9a3) !important;
    -webkit-text-fill-color: var(--km2-muted, #9aa9a3) !important;
}

/* Native controls and selection lists. */
html[data-theme="dark"] .app-layout :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, option, optgroup) {
    background: var(--km2-surface-2, #1c222d) !important;
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border-strong, #3a4654) !important;
    caret-color: var(--km2-text, #edf3f0);
}
html[data-theme="dark"] .app-layout :is(input, textarea)::placeholder {
    color: var(--km2-muted, #9aa9a3) !important;
    -webkit-text-fill-color: var(--km2-muted, #9aa9a3) !important;
    opacity: .82;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .jobdetails-assignee-picker, .assigned-team, .assignee-picker,
    .checkbox-list, .selection-list
) :is(label, .option, .item) {
    background: var(--km2-surface-2, #1c222d) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border-strong, #3a4654) !important;
}

/* Buttons are dark secondary controls unless their semantic class says otherwise. */
html[data-theme="dark"] .app-layout .page-content :is(button, .btn, [role="button"]) {
    background: var(--km2-surface-3, #222a35) !important;
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border-strong, #3a4654) !important;
}
/* Primary styling must only target interactive controls. Never infer a
   control from a container class such as `jobcalendar-create-form` or
   `customer-add-form`; doing so paints the entire form with the accent. */
html[data-theme="dark"] .app-layout .page-content :is(
    button.primary, a.primary, input.primary,
    button.btn-primary, a.btn-primary, input.btn-primary,
    button[class*="primary"], a[class*="primary"], input[class*="primary"],
    button[class*="create"], a[class*="create"], input[class*="create"],
    button[class*="save"], a[class*="save"], input[class*="save"],
    button[class*="add-"], a[class*="add-"], input[class*="add-"],
    [role="button"][class*="primary"], [role="button"][class*="create"],
    [role="button"][class*="save"], [role="button"][class*="add-"]
):not([class*="secondary"]):not([class*="danger"]):not([class*="cancel"]) {
    background: var(--km2-accent, #35c795) !important;
    color: #071a13 !important;
    -webkit-text-fill-color: #071a13 !important;
    border-color: var(--km2-accent, #35c795) !important;
}

/* Tabs: selected state is an accent, never a white cut-out. */
html[data-theme="dark"] .app-layout .page-content :is(
    .tabs, .jobcalendar-view-tabs, .it-tabs, .logistics-tabs,
    .jobs-tabs, .report-tabs, .ticket-tabs, .message-tabs,
    [class*="-tabs"]
) :is(button, a) {
    background: var(--km2-surface-2, #1c222d) !important;
    color: var(--km2-muted, #9aa9a3) !important;
    -webkit-text-fill-color: var(--km2-muted, #9aa9a3) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .tabs, .jobcalendar-view-tabs, .it-tabs, .logistics-tabs,
    .jobs-tabs, .report-tabs, .ticket-tabs, .message-tabs,
    [class*="-tabs"]
) :is(.active, [aria-selected="true"], [aria-current="page"]) {
    background: var(--km2-accent-soft, #123a30) !important;
    color: var(--km2-accent, #35c795) !important;
    -webkit-text-fill-color: var(--km2-accent, #35c795) !important;
    border-color: var(--km2-accent, #35c795) !important;
    box-shadow: inset 0 -2px 0 var(--km2-accent, #35c795) !important;
}

/* Tables and all of their sticky/mobile variants. */
html[data-theme="dark"] .app-layout .page-content :is(table, thead, tbody, tr, th, td, .table-head, .table-row, .ticket-head, .directory-columns) {
    background-color: var(--km2-surface, #171c25) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(thead, th, .table-head, .ticket-head, .directory-columns) {
    background-color: var(--km2-surface-3, #222a35) !important;
    color: var(--km2-muted, #9aa9a3) !important;
}
html[data-theme="dark"] .app-layout .page-content tbody tr:nth-child(even) { background-color: var(--km2-surface-2, #1c222d) !important; }

/* Status chips always have contrast, including class combinations such as
   mytime-badge-closed and timemgmt-badge-out. */
html[data-theme="dark"] .app-layout .page-content :is(
    .badge, [class*="-badge"], [class*="badge-"],
    .status, [class*="status-"], [class*="-status"]
) {
    background: #27313d !important;
    color: #e7edf0 !important;
    -webkit-text-fill-color: #e7edf0 !important;
    border-color: #3a4654 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .status-new, .status-open, .status-active, .badge-active,
    .mytime-badge-open, .timemgmt-badge-in, .timemgmt-badge-active
) { background:#123f32 !important; color:#9cf4d1 !important; -webkit-text-fill-color:#9cf4d1 !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .status-in-progress, .status-scheduled, .status-sent
) { background:#1b3152 !important; color:#b7d2ff !important; -webkit-text-fill-color:#b7d2ff !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .status-closed, .status-resolved, .status-archived, .status-inactive,
    .mytime-badge-closed, .timemgmt-badge-out, .timemgmt-badge-inactive
) { background:#303945 !important; color:#edf2f4 !important; -webkit-text-fill-color:#edf2f4 !important; }

/* High-visibility page outliers reported during dark-theme QA. */
html[data-theme="dark"] .app-layout .page-content .dashboard-setup-callout {
    background: var(--km2-surface, #171c25) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border-strong, #3a4654) !important;
    border-left-color: var(--km2-accent, #35c795) !important;
}
html[data-theme="dark"] .app-layout .page-content .dashboard-setup-callout > :is(strong, span, a) {
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.settings-plan-item, .subscription-plan-option, .module-chip, .warehouse-workspace-toggle) {
    background: var(--km2-surface-2, #1c222d) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border-strong, #3a4654) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.settings-plan-label, .module-chip-status) {
    color: var(--km2-muted, #9aa9a3) !important;
    -webkit-text-fill-color: var(--km2-muted, #9aa9a3) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.settings-plan-value, .subscription-plan-option h3, .module-chip strong, .warehouse-workspace-toggle h4) {
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
}

/* Workforce security navigation stays visible and actionable in both themes. */
html[data-theme="dark"] .app-layout .page-content .people-access-note {
    background: var(--km2-surface, #171c25) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}
html[data-theme="dark"] .app-layout .page-content .manage-login-access {
    background: var(--km2-accent, #35c795) !important;
    color: #071b15 !important;
    -webkit-text-fill-color: #071b15 !important;
    border-color: var(--km2-accent, #35c795) !important;
}

/* Keep profile content transparent over the gradient hero. */
html[data-theme="dark"] .myprofile-hero :is(.myprofile-identity, .myprofile-badges, .myprofile-contact-line) {
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .myprofile-hero .myprofile-badges > * {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Ticket counts and quick actions must not become pale-on-pale in dark mode. */
html[data-theme="dark"] .technician-ticket-group > header > b {
    background: #0c4b3b !important;
    color: #78f1c8 !important;
    -webkit-text-fill-color: #78f1c8 !important;
    border: 1px solid #24745e !important;
}
html[data-theme="dark"] .quick-ticket-close {
    background: #123c31 !important;
    color: #7cf1cb !important;
    -webkit-text-fill-color: #7cf1cb !important;
    border-color: #28745f !important;
}

/* Login is outside the authenticated app shell. */
.login-page {
    background: radial-gradient(circle at 15% 10%, rgba(53,199,149,.13), transparent 32%), var(--km2-canvas, #f4f7f6) !important;
}
.login-container { border-color: var(--km2-border, #d9e2de) !important; overflow: hidden; }
.login-left { background: radial-gradient(circle at 80% 10%, rgba(53,199,149,.22), transparent 36%), #0d2f25 !important; }
.login-right { background: var(--km2-surface, #fff) !important; color: var(--km2-text, #16241f) !important; }
.login-card :is(h2, label) { color: var(--km2-text, #16241f) !important; -webkit-text-fill-color: var(--km2-text, #16241f) !important; }
.login-card :is(.login-subtext, .login-help) { color: var(--km2-muted, #66756f) !important; }
.login-card input { background: var(--km2-surface-2, #f7f9f8) !important; color: var(--km2-text, #16241f) !important; -webkit-text-fill-color: var(--km2-text, #16241f) !important; border-color: var(--km2-border-strong, #c8d3ce) !important; }
html[data-theme="dark"] .login-container { box-shadow: 0 30px 90px rgba(0,0,0,.42) !important; }

/* Ticket identity must remain obvious in both compact and expanded views. */
.ticket-client-context {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: .35rem 0 0;
}
.ticket-client-context span { display: inline-flex; gap: .3rem; align-items: baseline; }
html[data-theme="dark"] .ticket-client-context,
html[data-theme="dark"] .ticket-client-context :is(span, strong) {
    color: var(--km2-muted, #9aa9a3) !important;
    -webkit-text-fill-color: var(--km2-muted, #9aa9a3) !important;
}
html[data-theme="dark"] .ticket-client-context strong {
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
}

/* One modal contract for every feature.  Individual pages may add layout,
   but may not trap the scroll area or push actions below a phone viewport. */
:is(.quick-modal-backdrop, .setup-modal-backdrop, .modal-backdrop,
    .quote-modal-backdrop, .timemgmt-modal-backdrop,
    .jobcalendar-modal-overlay, .jobcalendar-modal-backdrop,
    .logistics-backdrop, .customer-activity-backdrop) {
    overscroll-behavior: contain;
}
:is(.quick-modal, .setup-modal, .manual-invoice-modal, .it-modal,
    .quote-editor, .decision-modal, .timemgmt-modal,
    .jobcalendar-modal-panel, .logistics-modal, .customer-activity-popout) {
    max-height: min(92dvh, 920px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html[data-theme="dark"] :is(.quick-modal, .setup-modal, .manual-invoice-modal,
    .it-modal, .quote-editor, .decision-modal, .timemgmt-modal,
    .jobcalendar-modal-panel, .logistics-modal, .customer-activity-popout) {
    background: var(--km2-surface, #171c25) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}
html[data-theme="dark"] :is(.quick-modal, .setup-modal, .manual-invoice-modal,
    .it-modal, .quote-editor, .decision-modal, .timemgmt-modal,
    .jobcalendar-modal-panel, .logistics-modal, .customer-activity-popout)
    :is(header, footer, form, section, article, label, .form-section, .form-grid,
        .line-builder, .record-meta > span, .labor-form, .ticket-controls) {
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}

/* Employee creation is a form surface, never an accent action.  Older theme
   generations inferred "add" from the container name and could paint the
   complete drop-down/modal green.  Keep every structural layer neutral and
   reserve the accent for the actual Add employee button. */
.app-layout .page-content .employee-add-form,
.app-layout .page-content .employee-add-form:is(.panel, .compact-form, .is-workspace-modal) {
    background: var(--km2-surface, #fff) !important;
    color: var(--km2-text, #16241f) !important;
    -webkit-text-fill-color: initial !important;
    border-color: var(--km2-border, #d9e2de) !important;
}
.app-layout .page-content .employee-add-form :is(
    .section-heading, .form-grid, .actions, label
) {
    background: transparent !important;
    color: var(--km2-text, #16241f) !important;
    -webkit-text-fill-color: initial !important;
    border-color: var(--km2-border, #d9e2de) !important;
}
.app-layout .page-content .employee-add-form .form-grid > label {
    padding: 0 !important;
}
.app-layout .page-content .employee-add-form :is(input, select, textarea) {
    background: var(--km2-surface-2, #f7f9f8) !important;
    color: var(--km2-text, #16241f) !important;
    -webkit-text-fill-color: var(--km2-text, #16241f) !important;
    border-color: var(--km2-border-strong, #c8d3ce) !important;
}
.app-layout .page-content .employee-add-form button.primary {
    background: var(--km2-accent, #35c795) !important;
    color: #071a13 !important;
    -webkit-text-fill-color: #071a13 !important;
}
.app-layout .page-content .employee-add-form button.secondary {
    background: var(--km2-accent-soft, #e3f4ee) !important;
    color: var(--km2-accent-strong, #0c6c53) !important;
    -webkit-text-fill-color: var(--km2-accent-strong, #0c6c53) !important;
}

@media (max-width: 760px) {
    :is(.quick-modal-backdrop, .setup-modal-backdrop, .modal-backdrop,
        .quote-modal-backdrop, .timemgmt-modal-backdrop,
        .jobcalendar-modal-overlay, .jobcalendar-modal-backdrop,
        .logistics-backdrop, .customer-activity-backdrop) {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: end !important;
        justify-items: stretch !important;
        overflow: hidden !important;
        touch-action: none;
    }

    :is(.quick-modal, .setup-modal, .manual-invoice-modal, .it-modal,
        .it-modal.expanded, .quote-editor, .decision-modal, .timemgmt-modal,
        .jobcalendar-modal-panel, .logistics-modal, .logistics-modal.wide,
        .customer-activity-popout) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y;
    }

    :is(.quick-modal, .setup-modal, .manual-invoice-modal, .it-modal,
        .quote-editor, .decision-modal, .timemgmt-modal,
        .jobcalendar-modal-panel, .logistics-modal, .customer-activity-popout) > header {
        position: static !important;
        flex: 0 0 auto;
        background: inherit !important;
    }

    :is(.quick-modal, .setup-modal, .manual-invoice-modal, .it-modal,
        .quote-editor, .decision-modal, .timemgmt-modal,
        .jobcalendar-modal-panel, .logistics-modal, .customer-activity-popout) > footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 12 !important;
        flex: 0 0 auto;
        flex-wrap: wrap !important;
        gap: .5rem !important;
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
        background: inherit !important;
    }

    :is(.quick-modal, .setup-modal, .manual-invoice-modal, .it-modal,
        .quote-editor, .decision-modal, .timemgmt-modal,
        .jobcalendar-modal-panel, .logistics-modal, .customer-activity-popout) > footer button {
        min-height: 42px;
        flex: 1 1 130px;
    }

    .ticket-client-context { display: grid; gap: .2rem; }
}

/* Invoice documents intentionally use a paper palette in both application
   themes. This prevents global dark-theme selectors from producing white
   fields with white text and keeps the on-screen invoice consistent with PDF. */
.app-layout .invoice-paper,
html[data-theme="dark"] .app-layout .invoice-paper {
    background: #ffffff !important;
    color: #203129 !important;
    -webkit-text-fill-color: initial !important;
    border-color: #ccd8d3 !important;
}
.app-layout .invoice-paper :is(.invoice-document-header, .invoice-information,
    .invoice-bill-to, .invoice-address-block, .invoice-meta-grid,
    .invoice-lines, .invoice-line-row, .invoice-bottom, .invoice-message) {
    background-color: transparent !important;
    color: #203129 !important;
    -webkit-text-fill-color: initial !important;
}
.app-layout .invoice-paper :is(h1, h2, h3, p, span, strong, label, small) {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}
.app-layout .invoice-paper :is(.invoice-section-bar, .invoice-line-head, .invoice-meta-grid span) {
    background: #176f53 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.app-layout .invoice-paper :is(input, textarea) {
    color: #172a22 !important;
    -webkit-text-fill-color: #172a22 !important;
    caret-color: #176f53 !important;
}
.app-layout .invoice-paper :is(input, textarea):not(:disabled) {
    background: #fff8d9 !important;
    border-color: #c9a948 !important;
    box-shadow: inset 0 0 0 1px rgba(201,169,72,.2) !important;
}
.app-layout .invoice-paper :is(input, textarea):disabled {
    opacity: 1 !important;
    background: #ffffff !important;
}
.app-layout .invoice-paper .invoice-totals {
    background: #edf4f1 !important;
    color: #203129 !important;
}
.app-layout .invoice-paper .invoice-totals :is(p, label, strong, span, b) {
    color: #203129 !important;
    -webkit-text-fill-color: #203129 !important;
}

/* The invoice editor follows the active application palette.  The calculated
   cells used to retain the paper/PDF whites in dark mode, which made subtotal,
   tax, paid, and balance values look like blank white boxes. */
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals {
    background: var(--km2-surface-2, #1c222d) !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals :is(p, label) {
    background: transparent !important;
    color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border, #2b3541) !important;
}
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals :is(span, strong, b) {
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
}
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals strong,
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals input,
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals input:disabled,
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals input:not(:disabled) {
    background: var(--km2-surface-3, #222a35) !important;
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
    border-color: var(--km2-border-strong, #3a4654) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals :is(.total, .balance),
html[data-theme="dark"] .app-layout .invoice-paper .invoice-totals :is(.total, .balance) strong {
    background: var(--km2-accent-soft, #123a30) !important;
    color: var(--km2-text, #edf3f0) !important;
    -webkit-text-fill-color: var(--km2-text, #edf3f0) !important;
}
.invoice-tax-rate > div,
.manual-tax-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.invoice-tax-rate > div b,
.manual-tax-rate b {
    padding: 0 .7rem;
    font-weight: 800;
}
.invoice-tax-rate input { border-right: 0 !important; }

/* Standalone invoice editor follows the application theme while preserving
   strong field contrast and visible editable text. */
.manual-invoice-modal {
    background: var(--km2-surface, #ffffff) !important;
    color: var(--km2-text, #16241f) !important;
    border: 1px solid var(--km2-border, #d9e2de) !important;
}
.manual-invoice-modal :is(header, footer, .manual-invoice-fields, .manual-lines,
    .manual-line, .manual-invoice-bottom, label) {
    background: transparent !important;
    color: var(--km2-text, #16241f) !important;
    -webkit-text-fill-color: initial !important;
}
.manual-invoice-modal :is(h2, h3, p, span, strong, small, label, b) {
    color: var(--km2-text, #16241f) !important;
    -webkit-text-fill-color: var(--km2-text, #16241f) !important;
}
.manual-invoice-modal :is(input, select, textarea) {
    background: var(--km2-surface-2, #f7f9f8) !important;
    color: var(--km2-text, #16241f) !important;
    -webkit-text-fill-color: var(--km2-text, #16241f) !important;
    border-color: var(--km2-border-strong, #c8d3ce) !important;
    caret-color: var(--km2-accent-strong, #0c6c53) !important;
}
.manual-invoice-bottom small {
    color: var(--km2-muted, #66756f) !important;
    -webkit-text-fill-color: var(--km2-muted, #66756f) !important;
}

/* Rich document editors deliberately render as a light paper page in both
   themes. This final override prevents broad dark-theme typography rules from
   making typed content, formatting, and the caret disappear. */
html[data-theme="dark"] .app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper),
.app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #18231f !important;
    -webkit-text-fill-color: #18231f !important;
    caret-color: #18231f !important;
    color-scheme: light !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper) *,
.app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper) * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper):empty::before,
.app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper):empty::before {
    color: #718078 !important;
    -webkit-text-fill-color: #718078 !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper)::selection,
html[data-theme="dark"] .app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper) *::selection,
.app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper)::selection,
.app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper) *::selection {
    background: #b8e7d8 !important;
    color: #10251e !important;
    -webkit-text-fill-color: #10251e !important;
}