/* The app-main boundary is shared by current and future routes. Keep document
   canvases outside presentation rules: appearance changes never reformat output. */
html[data-appearance-mode] .app-main {
  --aw-gap: 18px;
  color: var(--ap-ink);
  font-family: var(--ap-family);
  --dx-texteditor-color-text: var(--ap-ink);
  --dx-texteditor-color-label: var(--ap-muted);
}
html[data-appearance-mode] .app-main :is(button, input, select, textarea):not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  font-family: var(--ap-family);
  font-size: var(--ap-font);
  border-radius: var(--ap-field-radius);
}
html[data-appearance-mode] .app-main :is(.gl-panel, .report-preview):not(:where(.quote-report-paper, .cpv-report-paper, .report-document, .report-preview *)) {
  background: var(--ap-surface);
  color: var(--ap-ink);
  border-color: var(--ap-border);
  border-radius: var(--ap-panel-radius);
}
html[data-appearance-mode] .app-main :is(input, select, textarea):not(:where([type=checkbox], [type=radio], [type=button], [type=submit], .report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background: var(--ap-surface); color: var(--ap-ink); border-color: var(--ap-border);
}
html[data-appearance-mode] .app-main :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--ap-accent-ink); outline-offset: 2px;
}
html[data-appearance-mode] .app-main label:not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) { color: var(--ap-muted); }
html[data-appearance-mode] .app-main .sales-report-field > span { color: var(--ap-muted); }
html[data-appearance-mode] .app-main input:read-only:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)),
html[data-appearance-mode] .app-main textarea:read-only:not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background: var(--ap-raised); color: var(--ap-ink); border-color: var(--ap-border);
}
html[data-appearance-mode] .app-main :is(input, select, textarea):disabled:not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) { background: var(--ap-raised); color: var(--ap-muted); }
/* DevExtreme renders its own placeholder and positions its search icon. Do not
   expose the native duplicate or replace the editor's internal input padding. */
html[data-appearance-mode] .app-main .dx-texteditor:has(.dx-placeholder) .dx-texteditor-input::placeholder { color: transparent; }
html[data-appearance-mode] .app-main .dx-placeholder::before { color: var(--ap-muted); }
html[data-appearance-mode] .app-main .dx-texteditor .dx-texteditor-input { color: var(--ap-ink); font-family: var(--ap-family); }
html[data-appearance-mode] .app-main :is(.dx-dropdowneditor-icon, .dx-checkbox-icon) { color: var(--ap-muted); }
html[data-appearance-mode] .app-main .dx-checkbox-checked .dx-checkbox-icon { color: var(--ap-accent-ink); }
html[data-appearance-mode] .app-main button:not(:where(.primary, .danger, .destructive, .warning, .success, [aria-pressed=true], .report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background: var(--ap-surface); color: var(--ap-ink); border-color: var(--ap-border);
}
html[data-appearance-mode] .app-main :is(input[type=checkbox], input[type=radio]) { accent-color: var(--ap-primary); }
html[data-appearance-mode] .app-main :is(.dx-datagrid, .dx-datagrid-headers, .dx-datagrid-rowsview, .dx-datagrid-total-footer, .dx-datagrid-header-panel, .dx-toolbar, .dx-pager, .dx-texteditor, .dx-datagrid-filter-row):not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background-color: var(--ap-surface); color: var(--ap-ink); border-color: var(--ap-border);
}
html[data-appearance-mode] .app-main :is(.dx-datagrid td, .dx-datagrid th, .dx-pager .dx-info, .dx-pager .dx-page, .dx-pager .dx-page-size):not(.report-preview *) { color: var(--ap-ink); border-color: var(--ap-border); }
html[data-appearance-mode] .app-main :is(.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-header-row > td):not(.report-preview *) { background: var(--ap-raised); }
html[data-appearance-mode] .app-main :is(.dx-datagrid .dx-selection > td, .dx-pager .dx-selection):not(.report-preview *) { background: var(--ap-soft); color: var(--ap-ink); }
html[data-appearance-mode] .app-main .dx-datagrid .dx-texteditor-input:not(.report-preview *) { background: var(--ap-surface); color: var(--ap-ink); }
html[data-appearance-mode] .app-main .dx-datagrid :is(.dx-icon, .dx-header-filter):not(.report-preview *) { color: var(--ap-muted); }
html[data-appearance-mode] .app-main .dx-datagrid .dx-header-filter-empty:not(.report-preview *) { opacity: .65; }
html[data-appearance-mode] .app-main .app-date-input:not(:where(.report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background: var(--ap-surface); color: var(--ap-ink); border-color: var(--ap-border); border-radius: var(--ap-field-radius); font-family: var(--ap-family);
}
html[data-appearance-density=compact] .app-main .app-date-input:not(.report-preview *) { min-height: 28px; padding: 4px 7px; }
html[data-appearance-buttons=tinted] .app-main button:not(:where(.primary, .danger, .destructive, .warning, .success, [aria-pressed=true], .report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background: var(--ap-soft); border-color: color-mix(in srgb, var(--ap-primary) 30%, var(--ap-border)); color: var(--ap-accent-ink);
}
html[data-appearance-buttons=outlined] .app-main button:not(:where(.primary, .danger, .destructive, .warning, .success, [aria-pressed=true], .report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  background: var(--ap-surface); border-color: var(--ap-accent-ink); color: var(--ap-accent-ink);
}
/* Default contained window for routes without an explicit EntryWindow. No DOM
   reparenting, form ownership, event handlers, or route code is involved. */
html[data-appearance-density=compact] .app-main { --aw-gap: 10px; }
html[data-appearance-density=compact] .app-main > :is(main, section, article, form, div):not(:where(.entry-window, .cpv-editor, .app-topbar, .finance-dashboard, .dashboard, .cpv-workspace-toolbar, [role=dialog], [role=alertdialog], [role=status], [role=alert], [aria-modal=true], [class*=modal], [class*=backdrop], [class*=toast])) {
  box-sizing: border-box;
  width: calc(100% - 48px); max-width: 1360px; min-width: 0;
  height: auto; max-height: calc(100dvh - 136px);
  margin: 24px auto; padding: 14px;
  overflow: auto;
  background: var(--ap-canvas); color: var(--ap-ink);
  border: 1px solid var(--ap-border); border-radius: var(--ap-window-radius);
  box-shadow: var(--ap-shadow); gap: var(--aw-gap);
}
html[data-appearance-density=compact] .app-main :is(.gl-filter-grid, .gl-fields, .quote-filters, .cpv-filters):not(.report-preview *) {
  gap: 9px 12px; padding: 12px; min-width: 0;
}
html[data-appearance-density=compact] .app-main :is(.gl-filter-grid, .gl-fields, .quote-filters, .cpv-filters) label:not(.report-preview *) {
  gap: 4px; font-size: var(--ap-label); min-width: 0;
}
html[data-appearance-density=compact] .app-main :is(input, select):not(:where([type=checkbox], [type=radio], [type=file], [type=range], .dx-texteditor-input, .report-preview *, .quote-report-paper *, .cpv-report-paper *, .report-document *)) {
  min-height: 28px; padding: 4px 7px;
}
html[data-appearance-density=compact] .app-main :is(.gl-settings-toolbar, .gl-toolbar, .quote-actions, .cpv-image-toolbar) { gap: 6px; flex-wrap: wrap; }
html[data-appearance-density=compact] .app-main :is(.gl-settings-toolbar, .gl-toolbar, .quote-actions, .cpv-image-toolbar) button { min-height: 28px; padding: 5px 10px; }
html[data-appearance-density=compact] .app-main :is(.gl-heading, .quote-heading, .report-preview-heading) { gap: 10px; padding: 10px 12px; min-width: 0; }
html[data-appearance-density=compact] .app-main :is(.gl-heading, .quote-heading, .report-preview-heading) :is(h1, h2) { margin: 0; font-size: 18px; line-height: 1.35; }
html[data-appearance-density=compact] .app-main .sales-report-workspace > .gl-panel:first-child > :is(h1, h2) { padding: 12px 12px 0; font-size: 18px; margin: 0; }
html[data-appearance-density=compact] .app-main .dx-datagrid:not(.report-preview *) { font-size: var(--ap-table-font); }
html[data-appearance-density=compact] .app-main .dx-datagrid .dx-row > td:not(.report-preview *) { padding-top: 5px; padding-bottom: 5px; }
/* Viewer chrome follows the account; generated pages retain renderer styling. */
html[data-appearance-mode] .app-main .report-preview-heading { background: var(--ap-surface); color: var(--ap-ink); border-color: var(--ap-border); }
html[data-appearance-mode] .app-main .report-preview-heading h2 { color: var(--ap-ink); }
html[data-appearance-mode] .app-main .report-preview-heading button { font-family: var(--ap-family); background: var(--ap-soft); color: var(--ap-accent-ink); border-color: var(--ap-border); }
html[data-appearance-mode] .report-preview :is(.dxrd-preview-toolbar, .dxrd-toolbar-wrapper, .dxrd-toolbar, .dxrd-preview-parameters-wrapper, .dxrd-preview-search-wrapper) {
  background: var(--ap-surface); color: var(--ap-ink); font-family: var(--ap-family);
}
html[data-appearance-mode] .report-preview .dxrd-toolbar :is(.dx-texteditor, .dx-texteditor-input, .dx-button) { background: var(--ap-surface); color: var(--ap-ink); border-color: var(--ap-border); }
html[data-appearance-mode] .report-preview .dxrd-toolbar .dxd-icon-fill { fill: var(--ap-muted); }
html[data-appearance-mode] .report-preview .dx-button-default { background: var(--ap-primary); border-color: var(--ap-primary); color: #fff; }
html[data-appearance-mode] .report-preview .dx-button-default:hover { background: var(--ap-hover); }
html[data-appearance-mode] .report-preview .dx-checkbox-checked .dx-checkbox-icon { color: var(--ap-accent-ink); border-color: var(--ap-primary); }
/* HTML document papers are output, not application panels. */
html[data-appearance-mode] :is(.quote-report-paper, .cpv-report-paper, .report-document) {
  --ink: #262626; --muted: #707070; --surface: #fff; --border: #e2e2e2;
  color: #262626; background: #fff; color-scheme: light;
}
@media (max-width: 700px) {
  html[data-appearance-density=compact] .app-main > :is(main, section, article, form, div):not(:where(.entry-window, .cpv-editor, .app-topbar, .finance-dashboard, .dashboard, .cpv-workspace-toolbar, [role=dialog], [role=alertdialog], [role=status], [role=alert], [aria-modal=true], [class*=modal], [class*=backdrop], [class*=toast])) {
    width: calc(100% - 16px); margin: 8px auto; padding: 8px; max-height: none;
  }
  html[data-appearance-density=compact] .app-main :is(.gl-filter-grid, .gl-fields) { grid-template-columns: minmax(0, 1fr); }
}