/* Shared colors keep text readable in both themes without changing the layout. */
:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --paper: #ffffff;
  --ink: #111827;
  --text-secondary: #374151;
  --muted: #4b5563;
  --line: #d1d5db;
  --line-strong: #9ca3af;
  --surface-soft: #f3f4f6;
  --surface-raised: #fafafa;
  --surface-hover: #eef2f7;
  --accent-surface: #e8f0ff;
  --accent-ink: #1e40af;
  --teal: #2563eb;
  --teal-dark: #1d4ed8;
  --lime: #bfdbfe;
  --on-accent: #ffffff;
  --focus: #1d4ed8;
  --shadow: 0 3px 14px #11182708;
  --error-bg: #fff1e9;
  --error-ink: #883519;
  --error-line: #daaa93;
  --warning-bg: #fff5d9;
  --warning-ink: #704c09;
  --warning-line: #cfb473;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827;
  --paper: #1f2937;
  --ink: #f9fafb;
  --text-secondary: #e5e7eb;
  --muted: #cbd5e1;
  --line: #475569;
  --line-strong: #7b8da5;
  --surface-soft: #273244;
  --surface-raised: #202b3b;
  --surface-hover: #334155;
  --accent-surface: #243c60;
  --accent-ink: #bfdbfe;
  --teal: #93c5fd;
  --teal-dark: #bfdbfe;
  --on-accent: #111827;
  --focus: #93c5fd;
  --shadow: 0 4px 18px #00000018;
  --error-bg: #44291f;
  --error-ink: #ffc8ad;
  --error-line: #8d5640;
  --warning-bg: #3c3320;
  --warning-ink: #f6d898;
  --warning-line: #887445;
}

body { color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
.filter-memory-note { margin-top: 16px; font-size: 11px; line-height: 1.6; color: var(--muted); }
::selection { color: var(--ink); background: var(--accent-surface); }
button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, a:focus-visible { outline-color: var(--focus); }

/* Main copy and table values should read as text, rather than faint decoration. */
.breadcrumbs strong, h1, .section-label h2, .dropzone h3,
.file-name, .stat-value, .filter-heading h2, .month-card h3,
.preview-heading h2, .cell-primary, .summary-table td,
.dialog-header h2, .detail-line dd, .empty-workspace h2 {
  color: var(--ink);
}
.page-heading p, .how-it-works strong, .field-label,
.extra-filters summary, .multi-option, td, .empty-results strong {
  color: var(--text-secondary);
}
.breadcrumbs, .breadcrumbs > span, .topbar-label, .eyebrow,
.format-tag, .step-number, .subtle, .dropzone p, .section-kicker,
.how-it-works p, .how-it-works li > span, .empty-workspace > p,
.empty-benefits, .empty-benefits b, .page-footer, .footer-dot,
.file-meta, .stat-label, .stat-label svg, .stat-detail,
.filter-heading svg, .reset-button, .search-field svg,
.multi-head svg, .multi-no-results, .multi-clear,
.date-fields label, .quantity-fields > span, .auto-filter-note,
.results-heading p, .month-filter-row > span, .month-year,
.month-card p, .file-extension, .export-note,
.preview-heading p, .table-tools, .table-tools select,
.cell-secondary, .pagination, .summary-explanation,
.empty-results, .detail-line dt {
  color: var(--muted);
}
.field-label, .stat-label { font-size: 11px; }
.search-field input, .date-fields input { font-size: 12px; }
td, .cell-primary { font-size: 12px; }
th, .cell-secondary, .status-pill { font-size: 11px; }
th { color: var(--text-secondary); font-weight: 600; }
.file-meta, .stat-detail, .export-note, .table-tools,
.pagination, .auto-filter-note, .summary-explanation { font-size: 11px; }

/* Surfaces and their separators. */
.topbar, .empty-workspace, .dropzone { background: var(--surface-raised); }
.dropzone { transition: none; }
.button { transition: transform .15s; }
.stat-card, .filter-panel, .results-panel, .preview-panel,
.multi-popup, .multi-head, .file-status .button, .icon-button,
.date-fields input, .quantity-fields input, .filter-body select,
.pagination select, .toast, dialog, .mock-sheet, .skip-link {
  background: var(--paper);
  color: var(--ink);
}
.how-it-works, .file-status, .search-field, .view-tabs,
.dialog-footer, th { background: var(--surface-soft); }
.month-card { background: var(--surface-raised); }
.stat-card:first-child, .upload-symbol, .file-status .file-icon,
.month-icon, .mock-month, .small-count, .status-pill,
.active-chip, .multi-select-matching, .month-chip.selected {
  background: var(--accent-surface);
  color: var(--accent-ink);
}
.format-tag, .dropzone, .upload-symbol, .how-it-works li > span,
.empty-benefits, .mock-sheet, .mock-month, .file-status,
.file-status .button, .stat-card:first-child, .multi-popup,
.multi-clear, .extra-filters, .month-filter-row,
.month-chip, .month-chip.selected, .active-chip,
.month-card, .month-card-bottom, .small-count,
.view-tabs, .table-tools, th, td, .pagination,
.icon-button, .summary-explanation, .toast, dialog,
.dialog-header, .detail-line, .dialog-footer {
  border-color: var(--line);
}
.filter-divider { background: var(--line); }
.search-field, .multi-head, .date-fields input,
.quantity-fields input, .filter-body select, .pagination select {
  border-color: var(--line-strong);
}
.search-field input, .date-fields input, .quantity-fields input,
.filter-body select, .pagination select, .table-tools select {
  color: var(--ink);
}
input::placeholder { color: var(--muted); opacity: 1; }
.search-field input::placeholder { color: var(--muted); }
.search-field:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--accent-surface);
}
.multi-head { color: var(--text-secondary); }
.multi-head.has-value {
  background: var(--accent-surface);
  color: var(--accent-ink);
  border-color: var(--line-strong);
}
.multi-option input { accent-color: var(--focus); }
.date-fields input::-webkit-calendar-picker-indicator { opacity: 1; }
.table-scroll { scrollbar-color: var(--line-strong) var(--surface-soft); }

/* Controls retain a distinct selected state in each palette. */
.button.primary { color: var(--on-accent); background: var(--teal); }
.button.primary:hover:not(:disabled) { background: var(--teal-dark); }
.results-heading .button small { color: var(--on-accent); }
.button.text-button, .month-download, .row-more {
  color: var(--teal);
}
.button.text-button:hover, .month-download:hover,
.reset-button:hover { color: var(--focus); }
.month-chip { background: var(--paper); color: var(--text-secondary); }
.month-chip.selected { background: var(--accent-surface); color: var(--accent-ink); }
.month-chip.selected:before, .online-dot, .tiny-square { background: var(--focus); }
.view-tabs button { color: var(--text-secondary); }
.view-tabs button.selected { background: var(--paper); color: var(--ink); }
.active-chip button { color: var(--accent-ink); }
.multi-option:hover, .month-chip:hover, tbody tr:hover,
.icon-button:hover:not(:disabled), .multi-select-matching:hover:not(:disabled) {
  background: var(--surface-hover);
}
.dropzone.dragging { background: var(--accent-surface); border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.spinner { border-color: var(--line); border-top-color: var(--focus); }
.button .spinner { border-color: var(--line-strong); border-top-color: currentColor; }
.mock-sheet span, .mock-month b { background: var(--accent-surface); }
.mock-sheet i { background: var(--line); }
.multi-popup { box-shadow: 0 12px 32px #00000024; }
.mock-sheet { box-shadow: 0 5px 12px #1118270a; }
.mock-month { box-shadow: 0 3px 6px #11182708; }
.view-tabs button.selected { box-shadow: 0 1px 4px #11182709; }
.toast { box-shadow: 0 8px 35px #11182720; }
dialog { box-shadow: 0 25px 80px #11182740; }
.table-scroll thead th { box-shadow: 0 1px 0 var(--line); }
.skip-link { color: var(--ink); }

/* Warnings and dialogs stay legible against their own backgrounds. */
.inline-error, .toast.error {
  background: var(--error-bg);
  color: var(--error-ink);
  border-color: var(--error-line);
}
.data-warnings {
  background: var(--warning-bg);
  color: var(--warning-ink);
  border-color: var(--warning-line);
}
dialog::backdrop { background: #030712d4; }

/* The sidebar is dark in both themes, with readable secondary copy. */
.sidebar { background: #1f2937; color: #f9fafb; }
.brand-mark { background: #bfdbfe; color: #1e3a8a; }
.nav-item.active { background: #374151; color: #f9fafb; }
.sidebar-note-icon { background: #273449; border-color: #475569; color: #bfdbfe; }
.brand-sub, .nav-section, .sidebar-note p,
.sidebar-bottom span:not(.online-dot) { color: #cbd5e1; }
.sidebar-bottom { color: #e5e7eb; }
.sidebar .online-dot { background: #93c5fd; }
.sidebar-note { border-color: #475569; }
:root[data-theme="dark"] .sidebar { background: #0b1220; }
:root[data-theme="dark"] .nav-item.active { background: #1e293b; }

.topbar-actions { display: flex; align-items: center; gap: 22px; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--surface-hover); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

@media (max-width: 800px) {
  .topbar-actions { gap: 12px; }
  .theme-toggle { min-height: 34px; padding: 6px 9px; font-size: 11px; }
}
@media (max-width: 640px) {
  .topbar { gap: 10px; }
  .stat-label { font-size: 9px; }
  .auto-filter-note { font-size: 10px; }
  .pagination { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { width: 34px; }
}

/* Document selection and task details share the current theme's palette. */
.report-mode { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.report-mode button { min-height: 36px; padding: 7px 18px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.report-mode button:hover { background: var(--surface-hover); }
.report-mode button[aria-pressed="true"] { background: var(--teal); color: var(--on-accent); }
.task-controls { margin-top: 18px; padding: 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; }
.task-format-note, .task-requisites-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.price-picker { margin-top: 16px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; }
.price-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.price-heading h3 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.price-heading .button { flex-shrink: 0; }
.price-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.price-status { margin-top: 10px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.price-filename { color: var(--ink); font-weight: 600; }
.price-item-count { display: block; margin-top: 2px; color: var(--muted); }
.price-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.price-progress .spinner { flex-shrink: 0; }
.price-picker .inline-error { overflow-wrap: anywhere; }
.price-picker .inline-error .button { margin-top: 6px; }
.task-excluded-count { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.task-exclusions { margin-top: 10px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.task-exclusions summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.task-excluded-list { margin: 10px 0 0; padding: 0; list-style: none; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.task-excluded-list li { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.excluded-work { color: var(--ink); font-weight: 600; }
.excluded-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0; color: var(--muted); }
.task-requisites { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.task-requisites summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; color: var(--ink); font-size: 13px; font-weight: 600; }
.task-requisites summary::-webkit-details-marker { display: none; }
.task-requisites summary svg { width: 17px; height: 17px; flex-shrink: 0; }
.task-requisites[open] summary svg { transform: rotate(180deg); }
.task-requisites-note { margin-top: 10px; }
.task-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; margin-top: 14px; }
.task-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.task-fields input { width: 100%; min-width: 0; min-height: 36px; padding: 8px 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; }
.task-fields input[aria-invalid="true"] { border-color: var(--error-ink); }
.territory-overview-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.task-requisites-mode { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-surface); }
.task-requisites-mode > label { display: flex; gap: 9px; align-items: flex-start; color: var(--ink); font-size: 13px; line-height: 1.5; cursor: pointer; }
.task-requisites-mode input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; accent-color: var(--teal); }
.task-requisites-mode > .button { margin-top: 12px; }
.task-requisites-mode > p { margin-top: 10px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
#task-requisites .task-fields input:disabled { opacity: 1; color: var(--text-secondary); background: var(--accent-surface); cursor: default; }
dialog.territory-requisites-dialog { width: min(820px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); overflow: hidden; }
.territory-requisites-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.territory-requisites-dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); min-height: 0; }
.territory-requisites-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.territory-requisites-header h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.territory-requisites-header p { margin-top: 5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.territory-requisites-header .icon-button { flex-shrink: 0; }
.territory-requisites-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 18px 24px; }
.territory-requisites-body > p { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.territory-requisites-body > p:last-child { margin-top: 18px; }
.territory-requisites-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); flex-shrink: 0; }
#territory-requisites-error { margin: 0 24px 12px; flex-shrink: 0; }
.territory-requisites-dialog :is(input,select,button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .territory-overview-actions { align-items: stretch; width: 100%; }
  dialog.territory-requisites-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .territory-requisites-dialog form { max-height: calc(100dvh - 22px); }
  .territory-requisites-header, .territory-requisites-body, .territory-requisites-footer { padding: 16px; }
  .territory-requisites-header h2 { font-size: 20px; }
  .territory-requisites-footer { flex-wrap: wrap; }
  .territory-requisites-footer .button { flex: 1 1 150px; }
  #territory-requisites-error { margin: 0 16px 12px; }
}
.task-preview { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.task-controls .data-warnings, .task-controls .inline-error { margin-top: 12px; margin-bottom: 0; }
.task-controls .inline-error p + p { margin-top: 6px; }
@media (max-width: 640px) {
  .report-mode { display: flex; margin-bottom: 16px; }
  .report-mode button { flex: 1; min-width: 0; font-size: 12px; }
  .task-controls { padding: 12px; }
  .task-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .task-format-note, .task-requisites-note, .task-fields label, .task-preview, .price-note, .price-status, .task-excluded-count, .task-exclusions { font-size: 11px; }
  .price-picker { padding: 12px; }
  .price-heading { align-items: stretch; flex-direction: column; }
  .price-heading .button { align-self: flex-start; }
  .task-requisites summary { font-size: 12px; }
}