/* Kolmadia next-generation application shell.
   This file is intentionally last so the shared experience wins over legacy page CSS.
   --km2-*/--km-* tokens now live in css/tokens.css (single source of truth). */

html, body { background: var(--km2-canvas); color: var(--km2-text); }
body { font-size: 14px; }

/* Branded first paint */
.km-boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--km2-canvas);
    opacity: 1;
    visibility: visible;
    transition: opacity .38s ease, visibility .38s ease;
}
.km-boot-overlay.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.km-boot {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--km2-accent) 12%, transparent), transparent 36%),
        var(--km2-canvas);
}
.km-boot > img { width: min(360px, 68vw); height: auto; filter: drop-shadow(0 10px 28px rgba(11, 104, 79, .14)); }
.km-boot p { margin: 0; color: var(--km2-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.km-boot-spinner { display: flex; gap: 7px; align-items: center; height: 16px; }
.km-boot-spinner i { width: 8px; height: 8px; border-radius: 50%; background: var(--km2-accent); animation: km-boot-pulse 1s ease-in-out infinite; }
.km-boot-spinner i:nth-child(2) { animation-delay: .13s; }
.km-boot-spinner i:nth-child(3) { animation-delay: .26s; }
@keyframes km-boot-pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-5px); } }

/* Shell */
.app-layout { background: var(--km2-canvas) !important; grid-template-columns: 224px minmax(0, 1fr) !important; }
.app-layout.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr) !important; }
.desktop-sidebar,
.mobile-menu-panel,
.horizontal-navigation { background: var(--km2-sidebar) !important; }
.desktop-sidebar { border-right: 1px solid rgba(255, 255, 255, .055); }
.workspace { background: var(--km2-canvas); }
.topbar {
    height: 62px !important;
    padding: 0 22px !important;
    background: color-mix(in srgb, var(--km2-surface) 92%, transparent) !important;
    border-color: var(--km2-border) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--km2-accent) 16%, transparent);
}
.topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--km2-blue), var(--km2-accent), transparent 78%); }
.topbar-mark { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: var(--km2-accent-soft) !important; color: var(--km2-accent) !important; }
.topbar-kicker { color: var(--km2-muted) !important; font-size: .61rem !important; }
.topbar-title { color: var(--km2-text) !important; font-size: .88rem !important; }
.topbar-search,
.notification-button,
.theme-button,
.mobile-menu-trigger,
.desktop-sidebar-toggle {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border: 1px solid var(--km2-border) !important;
    box-shadow: none !important;
}
.topbar-search { height: 36px !important; min-width: 178px !important; font-size: .78rem !important; color: var(--km2-muted) !important; }
.notification-button,
.theme-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 9px; cursor: pointer; }
.theme-button { font-size: 1rem; }
.theme-button:hover,
.notification-button:hover { color: var(--km2-accent) !important; border-color: color-mix(in srgb, var(--km2-accent) 48%, var(--km2-border)) !important; }
.create-button { height: 36px !important; padding: 0 13px !important; border-radius: 9px !important; background: linear-gradient(135deg, var(--km2-accent), color-mix(in srgb, var(--km2-accent) 72%, var(--km2-blue))) !important; font-size: .8rem !important; }
.notification-menu,
.create-menu,
.page-help-panel,
.whats-new-panel { background: var(--km2-surface) !important; color: var(--km2-text) !important; border-color: var(--km2-border) !important; box-shadow: var(--km2-shadow-menu) !important; }
.notification-menu > header,
.notification-row,
.whats-new-panel > footer { border-color: var(--km2-border) !important; background: var(--km2-surface) !important; }
.notification-row:hover,
.notification-row.unread,
.notification-all,
.create-menu a:hover,
.whats-new-list article { background: var(--km2-surface-2) !important; }
.notification-menu :is(strong, small), .create-menu a, .whats-new-panel :is(h2, strong) { color: var(--km2-text) !important; }
.page-content { padding: 22px clamp(16px, 2.1vw, 30px) 48px !important; background: var(--km2-canvas); color: var(--km2-text); }
.global-back-button { margin-bottom: 14px !important; background: var(--km2-surface) !important; color: var(--km2-accent) !important; border-color: var(--km2-border) !important; }
.page-help-button { width: 42px !important; height: 42px !important; background: linear-gradient(135deg, var(--km2-accent), var(--km2-blue)) !important; }

/* Navigation: four paired categories with restrained submenus */
.nav-menu { background: var(--km2-sidebar) !important; color: #d6dfe8 !important; }
.nav-header { min-height: 110px; padding: 19px 16px 14px !important; border-color: rgba(255,255,255,.065) !important; }
.nav-wordmark { width: 126px; max-height: 38px; display: block; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .96; }
.nav-header h2 { margin-top: 8px !important; color: #eef4f2 !important; font-size: .8rem !important; font-weight: 680 !important; }
.nav-header h2::before { display: none !important; }
.nav-role-text { margin: 4px 0 0 !important; color: #7f938d !important; font-size: .57rem !important; }
.nav-scroll { padding: 12px 9px 18px !important; }
.nav-group { margin-bottom: 5px !important; border-radius: 10px; }
.nav-group-title { padding: 9px 10px !important; display: flex; align-items: center; gap: 8px; color: #8fa19c !important; font-size: .63rem !important; letter-spacing: .11em !important; border-radius: 8px; }
.nav-group-title:hover { background: rgba(255,255,255,.045); color: #dfe7e4 !important; }
.nav-group-title::after { margin-left: auto; }
.nav-group-icon { width: 18px; color: #5aa990; font-size: .86rem; text-align: center; }
.nav-group-links { gap: 2px !important; }
.nav-menu .nav-item,
.nav-menu .nav-link { min-height: 34px !important; padding: 0 10px 0 34px !important; border-radius: 7px !important; color: #b7c4c0 !important; font-size: .77rem !important; font-weight: 570 !important; }
.nav-menu .nav-item::before,
.nav-menu .nav-link::before { left: 13px !important; width: 6px !important; height: 6px !important; border-color: #647a73 !important; border-radius: 50% !important; }
.nav-menu .nav-item:hover,
.nav-menu .nav-link:hover { background: rgba(255,255,255,.055) !important; color: #fff !important; }
.nav-menu .nav-item.active,
.nav-menu .nav-link.active { background: linear-gradient(90deg, rgba(44, 192, 145, .2), rgba(44, 192, 145, .06)) !important; color: #fff !important; box-shadow: inset 3px 0 var(--km2-accent) !important; }
.nav-menu .nav-item.active::before,
.nav-menu .nav-link.active::before { background: var(--km2-accent) !important; border-color: var(--km2-accent) !important; }
.nav-footer { display: grid; gap: 6px; padding: 10px !important; border-color: rgba(255,255,255,.065) !important; }
.nav-help,
.nav-support,
.nav-logout { min-height: 34px !important; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 8px !important; background: rgba(255,255,255,.025) !important; color: #aebdb8 !important; text-decoration: none; font-size: .7rem !important; font-weight: 650; }
.nav-help:hover, .nav-support:hover, .nav-logout:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.sidebar-collapsed .nav-header { min-height: 64px; padding: 14px 9px !important; }
.sidebar-collapsed .nav-wordmark { width: 48px; object-position: left; }
.sidebar-collapsed .nav-header :is(h2, .nav-role-text),
.sidebar-collapsed .nav-group-title { font-size: 0 !important; justify-content: center; }
.sidebar-collapsed .nav-group-icon { font-size: .9rem; }
.sidebar-collapsed .nav-menu .nav-item { padding: 0 !important; justify-content: center; font-size: 0 !important; }
.sidebar-collapsed .nav-menu .nav-item::before { position: static !important; }
.sidebar-collapsed .nav-footer :is(.nav-help, .nav-support, .nav-logout) { font-size: 0 !important; }
.sidebar-collapsed .nav-footer :is(.nav-help, .nav-support, .nav-logout)::after { content: "•"; font-size: .9rem; }

/* Horizontal navigation */
.horizontal-navigation { top: 62px !important; height: 42px !important; }
.nav-horizontal { height: 42px !important; min-height: 42px !important; }
.nav-horizontal .nav-scroll { padding: 0 18px !important; }
.nav-horizontal .nav-group-title { height: 42px !important; padding: 0 14px !important; color: #c0cdc9 !important; font-size: .72rem !important; }
.nav-horizontal .nav-group-links { top: 39px !important; width: 230px !important; padding: 7px !important; border-color: rgba(255,255,255,.09) !important; background: var(--km2-sidebar-2) !important; box-shadow: var(--km2-shadow-menu) !important; }

/* A consistent advanced application surface across every module. */
.app-layout .page-content :is(h1, h2, h3, h4, strong, label) { color: var(--km2-text); }
.app-layout .page-content h1 { font-size: clamp(1.65rem, 2.25vw, 2.15rem) !important; line-height: 1.08 !important; letter-spacing: -.035em !important; }
.app-layout .page-content h2 { font-size: clamp(1.12rem, 1.55vw, 1.42rem) !important; line-height: 1.16 !important; }
.app-layout .page-content h3 { font-size: .98rem !important; }
.app-layout .page-content :is(p, small, .subtitle, [class*="-subtitle"], [class*="-meta"]) { color: var(--km2-muted); }
.app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"], [class$="-card"], .card, .modal-content, [class*="-modal"], [class*="-dialog"]) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
    box-shadow: var(--km2-shadow) !important;
}
.app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"]) { border-radius: 12px !important; }
.app-layout .page-content :is([class$="-card"], .card) { border-radius: 10px !important; }
.app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"], section, article) + :is(.panel, .dashboard-panel, [class$="-panel"], section, article) { margin-top: 16px; }
.app-layout .page-content :is(.stats, [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]) { gap: 12px !important; }
.app-layout .page-content :is(.stat-card, [class$="-stat-card"], [class*="metric-card"], .stats > article) { min-height: 0 !important; padding: 12px 14px !important; background: var(--km2-surface) !important; border-color: var(--km2-border) !important; }
.app-layout .page-content :is(.stat-value, [class$="-stat-value"], [class*="metric-value"]) { font-size: 1.45rem !important; }

.app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border: 1px solid var(--km2-border-strong) !important;
    box-shadow: none !important;
}
.app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 37px !important; }
.app-layout .page-content :is(input, select, textarea):focus { border-color: var(--km2-accent) !important; outline: 3px solid color-mix(in srgb, var(--km2-accent) 16%, transparent) !important; }
.app-layout .page-content ::placeholder { color: color-mix(in srgb, var(--km2-muted) 76%, transparent); }

.app-layout .page-content :is(button, a.btn, input.btn, [role="button"], button[class*="-button"], a[class*="-button"], button[class*="-btn"], a[class*="-btn"], a.primary, a.secondary) { min-height: 34px; border-radius: 8px !important; font-size: .78rem !important; font-weight: 720 !important; }
.app-layout .page-content :is(button, a.btn, input.btn, [role="button"], button[class*="-button"], a[class*="-button"], button[class*="-btn"], a[class*="-btn"], a.primary, a.secondary):not(.danger):not([class*="danger"]):not([class*="delete"]):not([class*="archive"]) { border-color: color-mix(in srgb, var(--km2-accent) 26%, var(--km2-border)) !important; }
.app-layout .page-content :is(button.primary, a.primary, button[class*="primary"], a[class*="primary"], button[class*="save"], a[class*="save"], button[class*="create"], a[class*="create"], button[class*="add-"], a[class*="add-"]) { background: var(--km2-accent) !important; color: #fff !important; }
.app-layout .page-content :is(button.secondary, a.secondary, button[class*="secondary"], a[class*="secondary"], button[class*="outline"], a[class*="outline"], [role="button"][class*="secondary"], [role="button"][class*="outline"]) { background: var(--km2-accent-soft) !important; color: var(--km2-accent) !important; }
.app-layout .page-content button:hover { filter: brightness(1.04); transform: translateY(-1px); }

.app-layout .page-content table { color: var(--km2-text); border-color: var(--km2-border); }
.app-layout .page-content table :is(th, td) { border-color: var(--km2-border) !important; }
.app-layout .page-content table th { background: var(--km2-surface-3) !important; color: var(--km2-muted) !important; }
.app-layout .page-content table tbody tr { background: var(--km2-surface); }
.app-layout .page-content table tbody tr:nth-child(even) { background: var(--km2-surface-2); }
.app-layout .page-content table tbody tr:hover { background: var(--km2-accent-soft) !important; }
.app-layout .page-content :is(.empty, [class*="-empty"], .alert, [class*="-notice"]):not([role="alert"], .error, .success, .warn) { background: var(--km2-surface-2) !important; color: var(--km2-muted) !important; border-color: var(--km2-border) !important; }

/* Dark mode catches older pages that hard-coded white surfaces. */
html[data-theme="dark"] .app-layout .page-content :is(div, section, article, aside, header, footer)[style*="background: white"],
html[data-theme="dark"] .app-layout .page-content :is(div, section, article, aside, header, footer)[style*="background:#fff"] { background: var(--km2-surface) !important; }
html[data-theme="dark"] .app-layout .page-content :is(.badge, [class*="badge"]) { color: var(--km2-text); }
html[data-theme="dark"] #blazor-error-ui { background: #352d17; color: #f4e7be; }

/* Complete dark-theme compatibility layer.
   The application grew over several design generations. These rules cover
   their shared visual vocabulary so every module receives readable surfaces,
   typography and controls without changing business behavior. */
html[data-theme="dark"] .app-layout .page-content {
    --bs-body-color: var(--km2-text);
    --bs-body-bg: var(--km2-canvas);
    --bs-border-color: var(--km2-border);
    --bs-secondary-color: var(--km2-muted);
    --bs-tertiary-bg: var(--km2-surface-2);
    --bs-light-rgb: 28, 34, 45;
    --bs-dark-rgb: 237, 243, 240;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .km-panel, .panel, .card, .dashboard-panel, .stat-card,
    [class$="-panel"], [class$="-card"], [class$="-workspace"],
    [class$="-section"], [class$="-container"], [class$="-drawer"],
    [class$="-popover"], [class$="-dropdown"], [class$="-content"],
    [class*="summary-card"], [class*="metric-card"], [class*="stat-card"],
    .table-wrap, .table-responsive, .modal-content
) {
    background-color: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .toolbar, [class$="-toolbar"], [class$="-header"], [class$="-head"],
    [class$="-filters"], [class$="-filter-panel"], [class$="-form"],
    [class$="-form-grid"], [class$="-row"], [class$="-item"],
    [class$="-empty"], [class$="-preview"], [class$="-details"],
    [class$="-detail-grid"] > div
) {
    border-color: var(--km2-border) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    h1, h2, h3, h4, h5, h6, legend, strong, b,
    dt, dd, td, .name-link, .record-name-button,
    [class$="-name"], [class$="-title"], [class$="-value"],
    [class*="stat-value"], [class*="metric-value"]
) { color: var(--km2-text) !important; }

html[data-theme="dark"] .app-layout .page-content :is(
    p, small, time, figcaption, .text-muted, .km-muted, .activity,
    [class$="-subtitle"], [class$="-subtext"], [class$="-description"],
    [class$="-meta"], [class$="-caption"], [class$="-hint"],
    [class$="-label"], [class$="-muted"]
) { color: var(--km2-muted) !important; }

html[data-theme="dark"] .app-layout .page-content :is(input, select, textarea, option) {
    background-color: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
}
html[data-theme="dark"] .app-layout .page-content input:is([type="checkbox"], [type="radio"]) { accent-color: var(--km2-accent); }
html[data-theme="dark"] .app-layout .page-content :is(input, textarea)::placeholder { color: var(--km2-muted) !important; opacity: .8; }

html[data-theme="dark"] .app-layout .page-content table,
html[data-theme="dark"] .app-layout .page-content .records-table {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content table :is(thead, th),
html[data-theme="dark"] .app-layout .page-content .records-table th:first-child {
    background: var(--km2-surface-3) !important;
    color: var(--km2-muted) !important;
}
html[data-theme="dark"] .app-layout .page-content table :is(tbody, tr, td),
html[data-theme="dark"] .app-layout .page-content .records-table td:first-child {
    background-color: var(--km2-surface) !important;
    color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content table tbody tr:nth-child(even) td,
html[data-theme="dark"] .app-layout .page-content table tbody tr:nth-child(even) td:first-child {
    background-color: var(--km2-surface-2) !important;
}
html[data-theme="dark"] .app-layout .page-content table tbody tr:hover td,
html[data-theme="dark"] .app-layout .page-content table tbody tr:hover td:first-child {
    background-color: var(--km2-accent-soft) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.name-link, .open-link, .record-name-button) { color: var(--km2-accent) !important; }

/* Time, employee profile and customer account surfaces exposed the remaining
   contrast failures because their original component CSS used literal colors. */
html[data-theme="dark"] .app-layout .page-content :is(
    .mytime-panel, .mytime-stat-card, .myprofile-stat, .myprofile-panel,
    .myprofile-job, .myprofile-detail-grid > div, .customer-card,
    .customer-quick-grid > div, .customer-add-form, .customer-form-header,
    .customer-form-sections, .customer-form-actions
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .mytime-account-info, .mytime-account-info div,
    .mytime-stat-value, .myprofile-stat strong,
    .myprofile-time-list, .myprofile-time-list strong,
    .customer-card, .customer-card strong
) { color: var(--km2-text) !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .mytime-account-info div:last-child, .mytime-stat-label, .mytime-stat-meta,
    .myprofile-stat span, .myprofile-stat small, .myprofile-job-main span,
    .myprofile-hours-caption, .myprofile-empty
) { color: var(--km2-muted) !important; }
html[data-theme="dark"] .app-layout .page-content .mytime-status-banner-in {
    background: #143c2b !important;
    color: #c9f7df !important;
    border-color: #286748 !important;
}
html[data-theme="dark"] .app-layout .page-content .mytime-status-banner-in :is(strong, div) { color: #c9f7df !important; }
html[data-theme="dark"] .app-layout .page-content .mytime-status-banner-out {
    background: var(--km2-surface-3) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content .myprofile-stat.live { background: var(--km2-accent-soft) !important; }
html[data-theme="dark"] .app-layout .page-content .myprofile-hours-bar { background: var(--km2-surface-3) !important; }
html[data-theme="dark"] .app-layout .page-content .myprofile-job:hover { background: var(--km2-accent-soft) !important; }

/* Alerts retain meaning while remaining readable in both themes. */
html[data-theme="dark"] .app-layout .page-content :is(.success, [class*="success"], [class*="status-banner-in"]) {
    background-color: #143c2b !important;
    color: #c9f7df !important;
    border-color: #286748 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.warning, [class*="warning"]) {
    background-color: #3a2d15 !important;
    color: #f7d993 !important;
    border-color: #6b5324 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.error, [class*="error"], [class*="danger"]) {
    background-color: #3d2022 !important;
    color: #ffb4b0 !important;
    border-color: #71393c !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.success, [class*="success"], .warning, [class*="warning"], .error, [class*="error"]) :is(strong, b, span, div, p) { color: inherit !important; }

/* Legacy surface bridge: older modules used literal white/black colors.
   These selectors intentionally sit in the final stylesheet so every module
   follows the active workspace theme without rewriting each page. */
.app-layout .page-content :is(
    .jobcalendar-range-card, .jobcalendar-stat-card, .jobcalendar-toolbar, .jobcalendar-panel,
    .jobcalendar-day-focus, .jobcalendar-day-column, .jobcalendar-month-grid, .jobcalendar-month-day,
    .jobcalendar-gantt, .jobcalendar-gantt-row,
    .msp-metrics > button, .msp-queue, .msp-actions, .msp-ticket,
    .it-stats > article, .ticket-workspace, .ticket-row, .technician-ticket-group,
    .labor-ledger, .ledger-totals > article, .report-command-bar, .report-block,
    .client-labor-group, .employee-ledger-row, .labor-detail-row,
    .mailbox-status, .mailbox-explainer, .msp-tools-menu, .msp-tools-menu > div,
    .it-modal, .it-modal > header, .it-modal > footer, .ticket-controls,
    .message-list > article, .labor-form, .direct-labor-grid > label, .direct-labor-grid > .direct-duration
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
.app-layout .page-content :is(
    .jobcalendar-range-card, .jobcalendar-stat-card, .jobcalendar-panel,
    .msp-metrics > button, .it-stats > article, .msp-ticket, .ticket-row,
    .ledger-totals > article, .client-labor-group, .employee-ledger-row, .labor-detail-row
):nth-child(even) { background: var(--km2-surface-2) !important; }
.app-layout .page-content :is(
    .jobcalendar-range-card, .jobcalendar-stat-card, .jobcalendar-panel,
    .msp-metrics > button, .msp-ticket, .ticket-row, .report-block, .client-labor-group
) { box-shadow: var(--km2-shadow) !important; }
.app-layout .page-content :is(
    .jobcalendar-range-card, .jobcalendar-stat-card, .jobcalendar-day-focus,
    .msp-metrics > button, .msp-queue, .msp-actions, .msp-ticket,
    .it-stats > article, .ticket-row, .report-block, .client-labor-group
) :is(h1, h2, h3, h4, strong, b) { color: var(--km2-text) !important; }
.app-layout .page-content :is(
    .jobcalendar-range-card, .jobcalendar-stat-card, .jobcalendar-day-focus,
    .msp-metrics > button, .msp-queue, .msp-actions, .msp-ticket,
    .it-stats > article, .ticket-row, .report-block, .client-labor-group
) :is(p, small, time, .jobcalendar-range-label, .jobcalendar-stat-label) { color: var(--km2-muted) !important; }
.app-layout .page-content :is(.ticket-head, .jobcalendar-month-weekday, .jobcalendar-gantt-head, .report-block-header, .technician-ticket-group > header) {
    background: var(--km2-surface-3) !important;
    color: var(--km2-muted) !important;
    border-color: var(--km2-border) !important;
}
.app-layout .page-content :is(.msp-actions > button, .msp-tools-menu button, .report-action, .report-block-actions button, .client-actions button) {
    background: var(--km2-accent-soft) !important;
    color: var(--km2-accent) !important;
    border-color: color-mix(in srgb, var(--km2-accent) 32%, var(--km2-border)) !important;
}
.app-layout .page-content :is(.msp-actions > button, .msp-tools-menu button) :is(b, small) { color: inherit !important; }
html[data-theme="dark"] .jobcalendar-workspace.is-expanded,
html[data-theme="dark"] .jobcalendar-help-drawer { background: var(--km2-canvas) !important; color: var(--km2-text) !important; }
html[data-theme="dark"] .jobcalendar-month-job { background: var(--km2-accent-soft) !important; color: var(--km2-text) !important; }
html[data-theme="dark"] .jobcalendar-gantt-track { background-color: var(--km2-surface-2) !important; }

/* Reminders live in a focused notepad drawer instead of consuming dashboard space. */
.dashboard-reminder-launcher {
    position: fixed;
    right: 4.5rem;
    bottom: 1.1rem;
    z-index: 1200;
    width: 42px;
    height: 42px;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--km2-accent) 42%, var(--km2-border)) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f0b34b, #e27648) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(85, 50, 18, .24) !important;
    cursor: pointer;
}
.dashboard-reminder-launcher > span { font-size: 1.25rem; line-height: 1; }
.dashboard-reminder-launcher > b {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid var(--km2-canvas);
    border-radius: 999px;
    background: var(--km2-danger);
    color: #fff;
    font-size: .6rem;
}
.dashboard-reminder-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: grid;
    justify-items: end;
    background: rgba(4, 13, 11, .58);
    backdrop-filter: blur(3px);
}
.dashboard-reminder-drawer {
    width: min(410px, 94vw);
    height: 100dvh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    background: var(--km2-surface);
    color: var(--km2-text);
    border-left: 1px solid var(--km2-border);
    box-shadow: -20px 0 64px rgba(0, 0, 0, .34);
}
.dashboard-reminder-drawer > header { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--km2-border); }
.dashboard-reminder-drawer > header span { color: #d88b2f; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-reminder-drawer h2 { margin: 3px 0 2px; color: var(--km2-text); font-size: 1.35rem; }
.dashboard-reminder-drawer p { margin: 0; color: var(--km2-muted); font-size: .78rem; }
.dashboard-reminder-close { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px !important; padding: 0 !important; border: 1px solid color-mix(in srgb, var(--km2-danger) 34%, var(--km2-border)) !important; background: color-mix(in srgb, var(--km2-danger) 10%, var(--km2-surface-2)) !important; color: var(--km2-danger) !important; font-size: 1.2rem !important; }
.dashboard-reminder-entry { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dashboard-reminder-entry input { min-width: 0; }
.dashboard-reminder-entry button { background: linear-gradient(135deg, #d88b2f, #dc6448) !important; color: #fff !important; border-color: transparent !important; }
.dashboard-reminder-summary { display: flex; gap: 8px; color: var(--km2-muted); font-size: .72rem; }
.dashboard-reminder-summary strong { color: var(--km2-text); }
.dashboard-reminder-list { display: grid; gap: 7px; overflow-y: auto; padding-right: 3px; }
.dashboard-reminder-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px; gap: 9px; align-items: center; min-height: 46px; padding: 8px 9px; border: 1px solid var(--km2-border); border-left: 3px solid #d88b2f; border-radius: 9px; background: var(--km2-surface-2); }
.dashboard-reminder-row input { width: 16px; height: 16px; margin: 0; accent-color: #d88b2f; }
.dashboard-reminder-row > span { overflow-wrap: anywhere; }
.dashboard-reminder-row > button { width: 28px; height: 28px; min-height: 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--km2-danger) !important; font-size: 1rem !important; }
.dashboard-reminder-row.done { opacity: .62; border-left-color: var(--km2-muted); }
.dashboard-reminder-row.done > span { text-decoration: line-through; }
.dashboard-reminder-empty { margin: auto 0; display: grid; justify-items: center; gap: 7px; color: var(--km2-muted); }
.dashboard-reminder-empty > span { font-size: 2rem; color: #d88b2f; }

/* Mobile is an intentional compact product rather than squeezed desktop. */

/* Final compatibility pass for framework and browser-painted controls.
   These utilities appear across many older pages and must inherit the active theme. */
html[data-theme="dark"] .app-layout .page-content :is(input, select, textarea) {
    -webkit-text-fill-color: var(--km2-text) !important;
    caret-color: var(--km2-text) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(input, textarea)::placeholder {
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] .app-layout .page-content :is(.bg-white, .bg-light, .table-light, .list-group-item, .card, .modal-content, .offcanvas, .dropdown-menu) {
    background-color: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.text-dark, .text-body, .link-dark, .form-label, .lead, .card-title, .modal-title) {
    color: var(--km2-text) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.text-secondary, .text-muted, .form-text, .card-subtitle) {
    color: var(--km2-muted) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.alert-success, .bg-success-subtle) {
    background: color-mix(in srgb, var(--km2-success) 15%, var(--km2-surface)) !important;
    color: #b9f6dc !important;
    border-color: color-mix(in srgb, var(--km2-success) 40%, var(--km2-border)) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.alert-warning, .bg-warning-subtle) {
    background: color-mix(in srgb, var(--km2-warning) 14%, var(--km2-surface)) !important;
    color: #f9d5a4 !important;
    border-color: color-mix(in srgb, var(--km2-warning) 40%, var(--km2-border)) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(.alert-danger, .bg-danger-subtle) {
    background: color-mix(in srgb, var(--km2-danger) 14%, var(--km2-surface)) !important;
    color: #ffc2c2 !important;
    border-color: color-mix(in srgb, var(--km2-danger) 40%, var(--km2-border)) !important;
}

@media (max-width: 900px) {
    .app-layout,
    .app-layout.sidebar-collapsed { grid-template-columns: 1fr !important; }
    .topbar { height: 56px !important; padding: 0 9px !important; gap: 7px !important; }
    .topbar::before { height: 1px; }
    .topbar-context { gap: 7px !important; max-width: calc(100vw - 142px) !important; }
    .mobile-menu-trigger { width: 36px !important; height: 36px !important; }
    .desktop-sidebar-toggle { display: none !important; }
    .topbar-mark { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
    .topbar-title { max-width: 34vw !important; font-size: .78rem !important; }
    .topbar-actions { gap: 5px !important; }
    .theme-button, .notification-button { width: 36px !important; height: 36px !important; min-height: 36px !important; }
    /* MainLayout.razor.css already collapses create-button to an icon-only
       40px square at this same breakpoint (font-size:0, padding:0) - that's
       the intended mobile treatment. But it's a plain (non-!important) rule,
       so this file's own unconditional ".create-button{...font-size:.8rem
       !important}" (further up, outside any media query) was winning at
       every width, forcing the full "Create new" label back on and
       clipping it off the right edge of a 390px viewport. Restate the
       collapse here with matching !important so it actually wins. */
    .create-button { width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; font-size: 0 !important; justify-content: center !important; }
    .create-button span { font-size: 1.1rem !important; }
    .theme-button { font-size: .9rem; }
    .page-content,
    .density-compact .page-content { padding: 14px 9px calc(66px + env(safe-area-inset-bottom)) !important; }
    .app-layout .page-content h1 { font-size: 1.5rem !important; }
    .app-layout .page-content h2 { font-size: 1.08rem !important; }
    .app-layout .page-content h3 { font-size: .92rem !important; }
    .app-layout .page-content :is(p, label, input, select, textarea, button, a) { font-size: .79rem; }
    .app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"]) { padding: 12px !important; border-radius: 10px !important; }
    .app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"], section, article) + :is(.panel, .dashboard-panel, [class$="-panel"], section, article) { margin-top: 12px; }
    .app-layout .page-content :is(.stats, [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
    .app-layout .page-content :is(.stat-card, [class$="-stat-card"], [class*="metric-card"], .stats > article) { padding: 9px 10px !important; }
    .app-layout .page-content :is(.stat-value, [class$="-stat-value"], [class*="metric-value"]) { font-size: 1.18rem !important; }
    .app-layout .page-content :is(.actions, [class*="-actions"], .button-row, [class*="-buttons"]) { gap: 6px !important; flex-wrap: wrap !important; }
    .app-layout .page-content :is(button, .btn, [class*="-button"], [class*="-btn"], a.primary, a.secondary) { min-height: 32px !important; padding: 6px 9px !important; font-size: .73rem !important; }
    .app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 36px !important; padding: 6px 9px !important; }
    .app-layout .page-content :is(.form-grid, [class*="-form-grid"]) { grid-template-columns: 1fr !important; column-gap: 8px !important; row-gap: 20px !important; }
    .app-layout .page-content [class*="filters-grid"] { grid-template-columns: 1fr !important; gap: 8px !important; }
    .app-layout .page-content table :is(th, td) { padding: 7px 8px !important; font-size: .75rem !important; }
    .app-layout .page-content table th { font-size: .61rem !important; }
    .mobile-menu-panel { width: min(282px, 88vw) !important; background: var(--km2-sidebar) !important; }
    .mobile-menu-header { background: var(--km2-sidebar); }
    .mobile-menu-panel .nav-header { display: none !important; }
    .mobile-menu-panel .nav-scroll { padding-top: 8px !important; }
    .mobile-menu-panel .nav-group-title { min-height: 38px; }
    .mobile-menu-panel .nav-menu .nav-item { min-height: 38px !important; font-size: .8rem !important; }
    .notification-menu { top: 60px !important; right: 8px !important; left: 8px !important; }
    .dashboard-reminder-drawer { padding: 16px 14px; }
}

@media (max-width: 480px) {
    .topbar-context .topbar-mark { display: none; }
    .topbar-context { max-width: calc(100vw - 130px) !important; }
    .topbar-title { max-width: 38vw !important; }
    .app-layout .page-content :is(.stats, [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .km-boot > img { width: min(290px, 74vw); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 2026-08-22 complete color audit.
   This is deliberately last: several legacy component styles are isolated and
   still contain literal white backgrounds and dark text. */
html[data-theme="dark"] .app-layout .page-content :is(
    .inventory-purpose-guide, .inventory-filter-panel, .inventory-add-panel,
    .inventory-list-workspace, .inventory-table-wrap, .inventory-panel,
    .customer-accounts, .customer-table-shell, .records-table-wrap,
    .quote-summary button, .quote-list, .quote-list-panel,
    .quick-actions, .quick-actions-grid, .quick-action-btn,
    .ticket-filters, .ticket-filter-bar, .ticket-view-switch,
    .ticket-closed-toggle, .ticket-table, .ticket-workspace,
    .department-list, .employee-directory, .document-library,
    .equipment-library, .asset-list, .invoice-list, .jobs-list,
    .billing-list, .report-list, .setup-guide, [class$="-guide"],
    [class$="-list-shell"], [class$="-table-shell"]
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .inventory-purpose-guide, .inventory-filter-panel, .inventory-add-panel,
    .inventory-list-workspace, .customer-accounts, .quote-list-panel,
    .quick-actions, .ticket-filters, .ticket-filter-bar, .ticket-view-switch,
    .ticket-closed-toggle, [class$="-guide"]
) :is(h1, h2, h3, h4, strong, b, label, span:not(.status-pill):not(.badge), div) {
    color: var(--km2-text);
}

html[data-theme="dark"] .app-layout .page-content :is(
    .inventory-purpose-guide, .inventory-filter-panel, .inventory-list-workspace,
    .customer-accounts, .quote-list-panel, .quick-actions, [class$="-guide"]
) :is(p, small) { color: var(--km2-muted) !important; }

/* Every ordinary control gets a readable dark surface. Intentional primary,
   destructive and semantic controls are restored immediately below. */
html[data-theme="dark"] .app-layout .page-content :is(button, .btn, [role="button"]) {
    background-color: var(--km2-surface-2);
    color: var(--km2-text);
    border-color: var(--km2-border-strong);
}
html[data-theme="dark"] .app-layout .page-content :is(button, .btn, [role="button"]) :is(span, strong, b) { color: inherit; }
html[data-theme="dark"] .app-layout .page-content :is(
    button.primary, a.primary, button.btn-primary, a.btn-primary, button.create-button, a.create-button,
    button[class*="primary"], button[class*="save"], button[class*="create"],
    button[class*="add-"], button.inventory-workspace-add, a.inventory-workspace-add,
    button.quick-actions-toggle, a.quick-actions-toggle
) { background: var(--km2-accent) !important; color: #071711 !important; border-color: var(--km2-accent) !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    button.danger, .btn-danger, button[class*="danger"], button[class*="delete"],
    button[class*="archive"], button[class*="remove"]
) { background: #3d2022 !important; color: #ffb4b0 !important; border-color: #71393c !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .quick-action-btn, .inventory-workspace-toggle, .report-action,
    .report-block-actions button, .client-actions button, .global-back-button
) { background: var(--km2-surface-3) !important; color: var(--km2-text) !important; border-color: var(--km2-border-strong) !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .quick-action-btn, .inventory-workspace-toggle, .report-action,
    .report-block-actions button, .client-actions button
):hover { background: var(--km2-accent-soft) !important; color: var(--km2-accent) !important; }

/* Semantic badges use dark fills with deliberately bright foregrounds. */
html[data-theme="dark"] .app-layout .page-content :is(.status, .status-pill, .status-badge, .access-badge, .badge) {
    background: var(--km2-surface-3) !important;
    color: #d9e3df !important;
    border-color: var(--km2-border-strong) !important;
    -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.status-new, .status-open, .status-active, .status-approved, .badge-active, .access-active) {
    background: #163b31 !important; color: #91edcb !important; border-color: #286a55 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.status-in-progress, .status-scheduled, .status-sent, .status-info) {
    background: #1b3152 !important; color: #a9caff !important; border-color: #355886 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.status-waiting, .status-pending, .status-draft, .status-warning) {
    background: #493817 !important; color: #f3cc79 !important; border-color: #725b2a !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.status-resolved, .status-closed, .status-archived, .status-inactive) {
    background: #303741 !important; color: #d1d9dd !important; border-color: #4a5663 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.status-declined, .status-failed, .status-overdue, .status-cancelled) {
    background: #482427 !important; color: #ffb4b0 !important; border-color: #783d42 !important;
}

/* Quotes, customers, inventory and support each used button-like cards. */
html[data-theme="dark"] .app-layout .page-content .quote-summary button {
    background: var(--km2-surface) !important; color: var(--km2-text) !important;
    border-color: var(--km2-border) !important; box-shadow: var(--km2-shadow) !important;
}
html[data-theme="dark"] .app-layout .page-content .quote-summary button span { color: var(--km2-muted) !important; }
html[data-theme="dark"] .app-layout .page-content .quote-summary button strong { color: var(--km2-text) !important; }
html[data-theme="dark"] .app-layout .page-content .quote-summary button:hover { background: var(--km2-accent-soft) !important; border-color: var(--km2-accent) !important; }
html[data-theme="dark"] .app-layout .page-content .records-table :is(.status, .status-pill) { background:#163b31 !important; color:#91edcb !important; }
html[data-theme="dark"] .app-layout .page-content .inventory-purpose-guide { box-shadow: none !important; }
html[data-theme="dark"] .app-layout .page-content .inventory-add-panel { background: var(--km2-surface) !important; }
html[data-theme="dark"] .app-layout .page-content .inventory-list-workspace.is-expanded { background: var(--km2-canvas) !important; }
html[data-theme="dark"] .app-layout .page-content .inventory-table-wrap { background: var(--km2-surface) !important; }

/* Profile identity should be compact; the header is context, not the page. */
.app-layout .page-content .myprofile-hero {
    min-height: 0 !important; padding: 1.15rem 1.4rem !important; gap: 1rem !important;
    border-radius: 13px !important;
}
.app-layout .page-content .myprofile-avatar { width: 56px !important; height: 56px !important; border-radius: 15px !important; font-size: 1.25rem !important; }
.app-layout .page-content .myprofile-identity h1 { margin: 0 0 .14rem !important; font-size: 1.45rem !important; }
.app-layout .page-content .myprofile-identity > p { margin: 0 !important; }
.app-layout .page-content .myprofile-badges { margin-top: .32rem !important; gap: .32rem !important; }
.app-layout .page-content .myprofile-badges span { padding: .18rem .48rem !important; font-size: .68rem !important; }
.app-layout .page-content .myprofile-contact-line { margin-top: .32rem !important; font-size: .7rem !important; }
.app-layout .page-content .myprofile-hero-actions :is(button, a) { min-height: 32px !important; padding: 6px 10px !important; }

/* The notepad is a first-class global action beside page help. */
.dashboard-reminder-launcher { display: grid !important; visibility: visible !important; opacity: 1 !important; width: 54px; height: 54px; min-height: 54px !important; right: 4.85rem; bottom: 1rem; z-index: 1200 !important; }
.dashboard-reminder-launcher > span { font-size: 1.6rem; }

@media (max-width: 900px) {
    .app-layout .page-content .myprofile-hero { padding: .72rem .8rem !important; gap: .65rem !important; }
    .app-layout .page-content .myprofile-avatar { width: 50px !important; height: 50px !important; }
    .app-layout .page-content .myprofile-identity h1 { font-size: 1.25rem !important; }
    .dashboard-reminder-launcher { width: 50px; height: 50px; min-height: 50px !important; right: 4.35rem; bottom: .85rem; }
}

/* Legacy page audit: named surfaces still painted white by isolated page CSS. */
html[data-theme="dark"] .app-layout .page-content :is(
    .workflow > article, .metrics > article, .stats > article,
    .departments-summary > div, .departments-panel,
    .people-access-note, .people-list, .employee-directory-workspace,
    .employee-add-form, .person-quick-grid > div,
    .record-quickview, .record-quickview > header, .record-quickview > footer,
    .quick-modal, .customer-activity-popout, .customer-activity-popout > header,
    .customer-activity-popout > footer, .customer-file-row,
    .logistics-stats > button, .logistics-alert, .logistics-panel,
    .logistics-table .table-row, .logistics-modal, .line-builder,
    .record-meta > span, .confirmation-lines article,
    .logistics-records-table tbody tr, .users-list-workspace,
    .users-table-wrap, .users-table tbody tr, .users-module-access,
    .users-module-option, .quote-paper, .quote-scope, .decision-modal,
    .quote-editor, .quote-customer-notes, .decision-record, .quote-history,
    .billing-page .workflow article, .billing-page .panel,
    .asset-types-page .panel, .customers-page .panel,
    .customers-page .customer-card, .customer-workspace .panel
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .people-access-note, .record-quickview, .quick-modal,
    .customer-activity-popout, .logistics-panel, .logistics-modal,
    .users-module-access, .users-module-option, .quote-paper, .quote-editor
) :is(h1,h2,h3,h4,strong,b,label,span,div) { color: var(--km2-text); }
html[data-theme="dark"] .app-layout .page-content :is(
    .people-access-note, .record-quickview, .quick-modal,
    .customer-activity-popout, .logistics-panel, .logistics-modal,
    .users-module-access, .users-module-option, .quote-paper, .quote-editor
) :is(p,small,time,address) { color: var(--km2-muted) !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .line-builder, .record-meta > span, .quote-scope,
    .account-metrics, .customer-file-head, .history-head,
    .quote-totals .total
) { background: var(--km2-surface-2) !important; color: var(--km2-text) !important; border-color: var(--km2-border) !important; }
html[data-theme="dark"] .app-layout .page-content :is(
    .status.done, .status.ready, .status.open, .status.working,
    .status.transit, .status.cancelled, .account-status,
    .invoice-status, .inventory-row-tag
) { -webkit-text-fill-color: currentColor !important; }
html[data-theme="dark"] .app-layout .page-content :is(.status.done, .status.ready, .account-status, .invoice-status.paid) { background:#163b31!important;color:#91edcb!important; }
html[data-theme="dark"] .app-layout .page-content :is(.status.transit) { background:#1b3152!important;color:#a9caff!important; }
html[data-theme="dark"] .app-layout .page-content :is(.status.working, .invoice-status.ready-to-send) { background:#493817!important;color:#f3cc79!important; }
html[data-theme="dark"] .app-layout .page-content :is(.status.open) { background:#303741!important;color:#d1d9dd!important; }
html[data-theme="dark"] .app-layout .page-content :is(.status.cancelled) { background:#482427!important;color:#ffb4b0!important; }

/* Exact dark-theme component fixes.
   These components have isolated page styles with literal white fills, so
   broad surface rules cannot reliably restyle them. Keep this block last. */
html[data-theme="dark"] .app-layout .page-content :is(
    .jobcalendar-view-switch, .it-tabs, .tabs, .logistics-tabs,
    .jobs-view-tabs, .report-tabs, .ticket-view-switch, .message-mode
) {
    background: transparent !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .jobcalendar-view-switch, .it-tabs, .tabs, .logistics-tabs,
    .jobs-view-tabs, .report-tabs, .ticket-view-switch, .message-mode
) button {
    background: var(--km2-surface-2) !important;
    color: var(--km2-muted) !important;
    border-color: var(--km2-border) !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .jobcalendar-view-switch, .it-tabs, .tabs, .logistics-tabs,
    .jobs-view-tabs, .report-tabs, .ticket-view-switch, .message-mode
) button:is(.active, [aria-selected="true"]) {
    background: var(--km2-accent-soft) !important;
    color: var(--km2-accent) !important;
    border-color: var(--km2-accent) !important;
    box-shadow: inset 0 -2px 0 var(--km2-accent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .jobcalendar-view-switch, .it-tabs, .tabs, .logistics-tabs,
    .jobs-view-tabs, .report-tabs, .ticket-view-switch, .message-mode
) button:hover {
    background: var(--km2-surface-3) !important;
    color: var(--km2-text) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .jobcalendar-view-switch, .it-tabs, .tabs, .logistics-tabs,
    .jobs-view-tabs, .report-tabs, .ticket-view-switch, .message-mode
) button.active:hover {
    background: var(--km2-accent-soft) !important;
    color: var(--km2-accent) !important;
}

/* Expanded inventory was painting a white filter tray on top of the dark
   workspace. Equipment used the same literal-white pattern for its guide. */
html[data-theme="dark"] .app-layout .page-content .inventory-expanded-filters {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .app-layout .page-content .inventory-expanded-filters :is(input, select) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
}
html[data-theme="dark"] .app-layout .page-content .explainer,
html[data-theme="dark"] .app-layout .page-content .explainer > article {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .app-layout .page-content .explainer > article strong {
    color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content .explainer > article span {
    color: var(--km2-muted) !important;
}

/* Dark-theme deployment gate.
   Every native form control and the reusable form/table shells below must use
   the same palette. Page-scoped CSS files still contain legacy white values,
   so these declarations deliberately live last and use the app shell as the
   boundary instead of trying to fix one screen at a time. */
html[data-theme="dark"] .app-layout :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea
) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
    caret-color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
    color-scheme: dark;
}
html[data-theme="dark"] .app-layout :is(input, textarea)::placeholder {
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .app-layout select option,
html[data-theme="dark"] .app-layout select optgroup {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--km2-accent) !important;
    color-scheme: dark;
}
html[data-theme="dark"] .app-layout input:disabled,
html[data-theme="dark"] .app-layout select:disabled,
html[data-theme="dark"] .app-layout textarea:disabled {
    background: var(--km2-surface-3) !important;
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !important;
    opacity: .82 !important;
}

/* Assignment pickers, collapsible form sections and selection trays. */
html[data-theme="dark"] .app-layout .page-content :is(
    .jobdetails-assignee-picker, .assignee-picker, .assigned-team,
    .checkbox-list, .selection-list, .line-mode, .form-section,
    details, fieldset
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .jobdetails-assignee-picker, .assignee-picker, .assigned-team,
    .checkbox-list, .selection-list
) > label {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .jobdetails-assignee-picker, .assignee-picker, .assigned-team,
    .checkbox-list, .selection-list
) > label :is(span, strong) {
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content details > summary {
    background: var(--km2-surface-2) !important;
    color: var(--km2-accent) !important;
    border-color: var(--km2-border-strong) !important;
}

/* Quotes: the helper is supporting copy, not a page heading. Give custom
   product and description fields enough room to remain usable while typing. */
.app-layout .page-content .quote-lines-title small {
    font-size: .88rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    max-width: 72ch;
}
.app-layout .page-content .quote-line-edit {
    grid-template-columns: minmax(180px,1.2fr) 110px minmax(220px,1.35fr) minmax(250px,1.6fr) 72px 78px 86px 92px 78px 38px !important;
}
.app-layout .page-content .quote-line-edit :is(.item-name, .description) {
    min-width: 0 !important;
    width: 100% !important;
}
html[data-theme="dark"] .app-layout .page-content :is(.quote-lines, .quote-line-edit, .quote-lines-title) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content .quote-lines-title :is(h3, small) {
    color: var(--km2-text) !important;
}

/* Shipping and receiving confirmation/audit surfaces. */
html[data-theme="dark"] .app-layout .page-content :is(
    .logistics-audit, .logistics-audit > header, .logistics-audit > article,
    .new-stock-callout, .draft-lines > div
) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content .logistics-audit :is(h3, strong, span) {
    color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content .logistics-audit :is(p, small) {
    color: var(--km2-muted) !important;
}
html[data-theme="dark"] .app-layout .page-content .logistics-audit em {
    background: var(--km2-surface-3) !important;
    color: #b9ddd0 !important;
    border: 1px solid var(--km2-border) !important;
}

/* Employee directory and all data tables: remove white bands and keep every
   row, heading, badge and action readable. */
html[data-theme="dark"] .app-layout .page-content :is(
    .people-list, .people-list article, .directory-columns,
    .employee-directory-workspace.is-expanded,
    .employee-directory-workspace.is-expanded .people-list,
    .records-table, .records-table thead, .records-table tbody,
    .records-table tr, .records-table th, .records-table td,
    table, thead, tbody, tr, th, td
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .directory-columns, .records-table thead, .records-table th,
    table thead, table th
) {
    background: var(--km2-surface-3) !important;
    color: var(--km2-muted) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .people-list article:nth-child(odd), .records-table tbody tr:nth-child(even),
    table tbody tr:nth-child(even)
) { background: var(--km2-surface-2) !important; }
html[data-theme="dark"] .app-layout .page-content .people-list article :is(
    .identity, .access, .location, .person-record-trigger, strong, span
) {
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content .people-list article .identity > span,
html[data-theme="dark"] .app-layout .page-content .people-list article .access > span,
html[data-theme="dark"] .app-layout .page-content .people-list article .location > span {
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !important;
}

/* Status values were especially hard to read because several pages painted a
   pale badge after the global theme. These selectors cover shift, access and
   account states without changing their meaning. */
html[data-theme="dark"] .app-layout .page-content :is(
    .access.user > strong, .access.kiosk > strong, .account-status,
    .clock-status, .time-status, .shift-status, .status.active,
    .status.open, .status.closed, .status.ready, .status.done
) {
    background: #163b31 !important;
    color: #91edcb !important;
    -webkit-text-fill-color: #91edcb !important;
    border-color: #286a55 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .clocked-out, .is-clocked-out, .status.inactive
) {
    background: #303741 !important;
    color: #d1d9dd !important;
    -webkit-text-fill-color: #d1d9dd !important;
    border-color: #4a5663 !important;
}

/* Time management uses its own badge vocabulary. */
html[data-theme="dark"] .app-layout .page-content :is(
    .timemgmt-badge-active, .timemgmt-badge-in, .mytime-status-banner-in
) {
    background: #163b31 !important;
    color: #91edcb !important;
    -webkit-text-fill-color: #91edcb !important;
    border-color: #286a55 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .timemgmt-badge-out, .timemgmt-badge-inactive,
    .timemgmt-badge-default, .mytime-status-banner-out
) {
    background: #303741 !important;
    color: #d1d9dd !important;
    -webkit-text-fill-color: #d1d9dd !important;
    border-color: #4a5663 !important;
}
html[data-theme="dark"] .app-layout .page-content .timemgmt-badge-leave {
    background: #493817 !important;
    color: #f3cc79 !important;
    -webkit-text-fill-color: #f3cc79 !important;
}
html[data-theme="dark"] .app-layout .page-content .timemgmt-badge-terminated {
    background: #482427 !important;
    color: #ffb4b0 !important;
    -webkit-text-fill-color: #ffb4b0 !important;
}

/* Do not let light-mode checkbox and disclosure wrappers leak through after
   native controls have been themed. */
html[data-theme="dark"] .app-layout .page-content :is(
    .check, .check-row, .checkbox-row, .checkbox-option,
    .jobdetails-assignee-picker label, .jobcalendar-create-modal details
) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .check, .check-row, .checkbox-row, .checkbox-option,
    .jobdetails-assignee-picker label
) :is(span, strong, label) {
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
}

@media (max-width: 1180px) {
    .app-layout .page-content .quote-line-edit {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: .75rem !important;
        border: 1px solid var(--km2-border) !important;
        border-radius: 12px !important;
    }
    .app-layout .page-content .quote-line-edit :is(.item-source, .item-name, .description) { grid-column: 1 / -1 !important; }
    .app-layout .page-content .quote-line-edit > strong { grid-column: 1 / -1 !important; text-align: right; }
    .app-layout .page-content .quote-line-edit .line-remove { grid-column: 2 !important; justify-self: end; }
}

/* Final legacy-component normalization.
   The application predates the theme system and many scoped component sheets
   still declare literal white surfaces.  Keep this block last: it is the
   single dark-mode contract for every page, dialog and form. */
html[data-theme="dark"] .app-layout .page-content :is(
    .panel, [class$="-panel"], [class*="-panel "],
    .card, [class$="-card"], [class*="-card "],
    [class$="-workspace"], [class*="-workspace "],
    [class$="-editor"], [class*="-editor "],
    [class$="-modal"], [class*="-modal "],
    [class$="-popout"], [class*="-popout "],
    [class$="-quickview"], [class*="-quickview "],
    [class$="-form"], [class*="-form "],
    [class$="-table-wrap"], [class*="-table-wrap "],
    [class$="-list"], [class*="-list "],
    [class$="-toolbar"], [class*="-toolbar "],
    [class$="-filters"], [class*="-filters "],
    [class$="-summary"], [class*="-summary "],
    [class$="-explainer"], [class*="-explainer "],
    [class$="-audit"], [class*="-audit "],
    .workflow > article, .metrics > article, .stats > article
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .form-grid, .form-row, .quick-customer-grid, .quote-form-grid,
    .quote-bottom-fields, .line-builder, .quote-lines, .quote-line-edit,
    .users-module-access, .users-module-option, .record-meta > span,
    .confirmation-lines article, .customer-file-head, .customer-file-row,
    .history-head, .history-row, .invoice-list article, .job-row,
    .departments-summary > div, .quote-summary > button,
    .logistics-stats > button, .logistics-alert, .logistics-records-table tr,
    .employee-stats > *, .detail-grid > *, .person-quick-grid > *,
    .mytime-status-banner, .time-entry-row, .timemgmt-row
) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}

/* Active tabs are accents, never white cut-outs. */
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
) :is(button, a) {
    background: transparent !important;
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !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
) :is(button.active, a.active, button[aria-selected="true"], a[aria-current="page"]) {
    background: var(--km2-accent-soft) !important;
    color: var(--km2-accent) !important;
    -webkit-text-fill-color: var(--km2-accent) !important;
    border-color: color-mix(in srgb, var(--km2-accent) 58%, var(--km2-border)) !important;
    box-shadow: inset 0 -2px 0 var(--km2-accent) !important;
}

/* White checkbox rows were the remaining unreadable controls in job forms. */
html[data-theme="dark"] .app-layout .page-content :is(
    .jobdetails-assignee-picker, .assigned-team, .assignee-picker,
    .checkbox-list, .selection-list, .users-module-grid
) :is(label, .option, .item) {
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
}

/* Tables may use sticky cells, mobile card rows, or scoped white headers. */
html[data-theme="dark"] .app-layout .page-content :is(
    table, thead, tbody, tr, th, td,
    .table-head, .table-row, .customer-file-head, .customer-file-row,
    .directory-columns, .records-table tr, .users-table tr,
    .logistics-records-table tr
) {
    background-color: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    thead, th, .table-head, .customer-file-head, .directory-columns
) {
    background-color: var(--km2-surface-3) !important;
    color: var(--km2-muted) !important;
}
html[data-theme="dark"] .app-layout .page-content tbody tr:nth-child(even) {
    background-color: var(--km2-surface-2) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(th, td):first-child {
    background-color: inherit !important;
}

/* Dialog headers, footers and audit/next-step bands. */
html[data-theme="dark"] .app-layout .page-content :is(
    [class$="-modal"], [class*="-modal "],
    [class$="-editor"], [class*="-editor "],
    [class$="-popout"], [class*="-popout "],
    [class$="-quickview"], [class*="-quickview "]
) > :is(header, footer) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .logistics-audit > header, .logistics-audit article,
    .logistics-audit em, .new-stock-callout, .stock-warning,
    .form-error, .logistics-error, .logistics-message
) {
    background: var(--km2-surface-3) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border-strong) !important;
}

/* Text placed on light semantic badges must use a dark ink; all other status
   badges stay on dark semantic colors. */
html[data-theme="dark"] .app-layout .page-content :is(
    .status, .badge, [class*="badge-"], [class*="status-"]
) {
    -webkit-text-fill-color: currentColor !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .status.active, .status.open, .status.ready, .status.done,
    .timemgmt-badge-active, .timemgmt-badge-in
) {
    background: #123f32 !important;
    color: #9cf4d1 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .status.closed, .status.inactive, .timemgmt-badge-out,
    .timemgmt-badge-inactive, .timemgmt-badge-default
) {
    background: #303945 !important;
    color: #e1e7ea !important;
}

/* Quote editor usability: supporting copy stays compact and both free-text
   fields remain large enough to see a real product name and description. */
.app-layout .page-content .quote-lines-title > div > small {
    display: block !important;
    margin-top: .25rem !important;
    font-size: .84rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
}
.app-layout .page-content .quote-line-edit .item-name { min-width: 210px !important; }
.app-layout .page-content .quote-line-edit .description { min-width: 260px !important; }

@media (max-width: 760px) {
    .app-layout .page-content .quote-lines-title {
        align-items: flex-start !important;
    }
    .app-layout .page-content .quote-lines-title > div > small {
        font-size: .78rem !important;
    }
    .app-layout .page-content .quote-line-edit .item-name,
    .app-layout .page-content .quote-line-edit .description {
        min-width: 0 !important;
        min-height: 44px !important;
    }
}

/* Exact outliers found by the full scoped-CSS audit.  These names do not
   follow the reusable panel/card convention, so they must be normalized
   explicitly. */
html[data-theme="dark"] .app-layout .page-content :is(
    .document-table, .document-table tr, .notification-table,
    .notification-entry, .estimate-verify, .estimate-document,
    .progress, .manual-invoice-modal, .it-stats article,
    .ticket-row, .ticket-table .ticket-row:not(.ticket-head),
    .it-modal, .it-modal > header, .it-modal > footer,
    .message-list article.internal, .msp-ticket,
    .ledger-totals article, .report-block,
    .employee-ledger-row:not(.ledger-head),
    .labor-detail-row:not(.ledger-head), .client-labor-group,
    .msp-tools-menu, .msp-tools-menu > div,
    .direct-labor-grid > label, .direct-labor-grid > .direct-duration,
    .employee-panel, .employee-stats a, .inventorydetails-panel,
    .customer-activity-popout, .customer-activity-popout > header,
    .customer-activity-popout > footer, .decision-modal,
    .records-table, .users-table-wrap, .inventory-table-wrap
) {
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    border-color: var(--km2-border) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .notification-entry:nth-child(even), .ticket-row:nth-child(even),
    .ticket-table .ticket-row:not(.ticket-head):nth-child(even),
    .employee-ledger-row:not(.ledger-head):nth-child(even),
    .labor-detail-row:not(.ledger-head):nth-child(even),
    .customer-activity-print-list article:nth-child(even)
) {
    background: var(--km2-surface-2) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .document-table, .notification-table, .estimate-document,
    .report-block, .employee-panel, .inventorydetails-panel,
    .customer-activity-popout, .decision-modal
) :is(h1, h2, h3, h4, strong, label, legend) {
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .document-table, .notification-table, .estimate-document,
    .report-block, .employee-panel, .inventorydetails-panel,
    .customer-activity-popout, .decision-modal
) :is(p, small, time, dt, dd) {
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !important;
}

/* Page-specific light buttons and labels. */
html[data-theme="dark"] .app-layout .page-content :is(
    .customer-file-row button, .customer-activity-popout footer button,
    .page-heading button, .jobcalendar-help-button,
    .report-action, .report-block-actions button, .client-actions button,
    .ticket-view-switch button, .message-mode button,
    .record-quickview > footer a, .record-quickview > footer button,
    .estimate-decision .decline
) {
    background: var(--km2-accent-soft) !important;
    color: var(--km2-accent) !important;
    -webkit-text-fill-color: var(--km2-accent) !important;
    border-color: color-mix(in srgb, var(--km2-accent) 48%, var(--km2-border)) !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .msp-actions > button:hover, .action-dismiss:hover
) {
    background: color-mix(in srgb, var(--km2-accent) 20%, var(--km2-surface-2)) !important;
    color: var(--km2-accent-hover) !important;
    -webkit-text-fill-color: var(--km2-accent-hover) !important;
}

/* Semantic light fills converted to dark equivalents. */
html[data-theme="dark"] .app-layout .page-content :is(
    .onboarding-label, .doc-meta .onboarding, .stock.out,
    .status-pill.status-waiting-on-customer,
    .status-pill.status-waiting-on-vendor,
    .msp-ticket i.status-waiting-on-customer,
    .msp-ticket i.status-waiting-on-vendor,
    .status.working, .invoice-status.ready-to-send
) {
    background: #493817 !important;
    color: #f4d283 !important;
    -webkit-text-fill-color: #f4d283 !important;
    border-color: #735a26 !important;
}
html[data-theme="dark"] .app-layout .page-content :is(
    .error, .form-error, .logistics-error, .estimate-error,
    .msp-ticket.priority-high, .msp-ticket.priority-urgent,
    .ticket-table .ticket-row.priority-high,
    .ticket-table .ticket-row.priority-urgent
) {
    background: #3c2226 !important;
    color: #ffb4b0 !important;
    -webkit-text-fill-color: #ffb4b0 !important;
    border-color: #71383d !important;
}

/* Browser autofill otherwise paints a white/yellow field after load. */
html[data-theme="dark"] .app-layout :is(input, textarea, select):-webkit-autofill,
html[data-theme="dark"] .app-layout :is(input, textarea, select):-webkit-autofill:hover,
html[data-theme="dark"] .app-layout :is(input, textarea, select):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--km2-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--km2-surface-2) inset !important;
    box-shadow: 0 0 0 1000px var(--km2-surface-2) inset !important;
    border-color: var(--km2-border-strong) !important;
    caret-color: var(--km2-text) !important;
}

/* Document editors are intentionally light paper canvases in both themes.
   They are editing surfaces, not application cards, and must not inherit the
   dark surface bridge or a pasted element's old text color. */
.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;
}
.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;
}
.app-layout .page-content :is(.document-paper, .word-page.document-paper, .native-word-page.document-paper):empty::before {
    color: #71807a !important;
    -webkit-text-fill-color: #71807a !important;
}
.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: #bcebdc !important;
    color: #10231d !important;
    -webkit-text-fill-color: #10231d !important;
}