/* Shared screen presentation. Printed documents retain their own page styles. */
:root {
  --accent: #3569aa;
  --accent-hover: #28558d;
  --accent-soft: #eaf1fa;
  --ink: #24354b;
  --text-secondary: #64758a;
  --line: #dfe6ee;
  --muted: #78879a;
  --surface-soft: #f6f8fb;
  --green: var(--accent);
  color: var(--ink);
  background: #f0f3f8;
}
body { color: var(--ink); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .table-scroll:focus-visible {
  outline: 2px solid #719ad0;
  outline-offset: 3px;
}
:where(dialog, .form-body, .print-inputs, .print-preview-pane, .filter-values, .costs-table-scroll) {
  scrollbar-width: thin;
  scrollbar-color: #bdc9d8 transparent;
}

/* One consistent header and sliding navigation across all three pages. */
.app-header {
  height: 78px;
  padding: 0 36px;
  background: #20334e;
  border-bottom: 1px solid #172940;
  color: #fff;
}
.header-main { gap: 36px; }
.brand { gap: 11px; font-size: 16px; letter-spacing: .5px; }
.brand-mark { width: 36px; height: 38px; background: #3c5c83; border: 1px solid #597493; border-radius: 10px; }
.today { color: #b8c8dd; font-size: 12px; }
.header-pages { padding: 3px; gap: 3px; border-color: #455973; border-radius: 10px; background: #2c425f; }
.header-pages a { min-height: 38px; padding: 0 18px; color: #c8d5e5; }
.header-pages a:hover:not([aria-current="page"]) { background: #3a5270; color: #fff; }
.header-pages a[aria-current="page"], .header-pages .nav-indicator { background: #edf3fc; box-shadow: 0 2px 5px #10233d33; }
.header-pages a[aria-current="page"] { color: #244d80; }
.header-pages.is-animated a[aria-current="page"] { background: transparent; box-shadow: none; }
.header-pages.is-switching a[aria-current="page"] { color: #c8d5e5; }
.header-pages.is-switching a:hover { background: transparent; }
.header-pages.is-switching a.is-pending { color: #244d80; }
.header-pages a:focus-visible { outline-color: #a3c5f3; }

main, main.costs-main, main.settings-main { max-width: 1600px; padding: 32px 36px 44px; margin: 0 auto; }
.page-heading, .settings-main .page-heading { min-height: 44px; margin-bottom: 24px; gap: 16px; }
h1 { margin: 0; font-size: 26px; line-height: 1.4; letter-spacing: .4px; font-weight: 650; color: var(--ink); }
.page-heading .eyebrow, .dialog-heading .eyebrow { display: none; }
.primary, .secondary { min-height: 40px; padding: 10px 17px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.primary { background: var(--accent); box-shadow: 0 2px 4px #294e7d1a; }
.primary:hover { background: var(--accent-hover); }
.secondary { border-color: #d6dfeb; color: #49617f; background: #fff; }
.secondary:hover { background: var(--accent-soft); border-color: #b6cbe4; }
button:disabled { cursor: not-allowed; }
.register, .costs-panel { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 20px #253b5706; }

/* Register: compact tools, clearer table hierarchy, and readable details. */
.toolbar { min-height: 76px; padding: 16px 22px; gap: 20px; }
.tabs { align-self: center; gap: 4px; padding: 4px; border-radius: 8px; background: var(--surface-soft); }
.tabs button { min-height: 34px; padding: 7px 13px; border-radius: 6px; color: var(--text-secondary); }
.tabs button:hover { color: var(--accent); }
.tabs button[aria-selected=true] { background: #fff; color: var(--accent); box-shadow: 0 1px 4px #233b5914; }
.tabs button[aria-selected=true]:after { display: none; }
.tabs button span { background: var(--accent-soft); color: var(--accent); margin-left: 6px; }
.search { width: 290px; min-height: 40px; padding: 9px 12px; border-color: var(--line); border-radius: 8px; background: var(--surface-soft); }
.search:focus-within { border-color: #8caed8; box-shadow: 0 0 0 3px #3569aa12; background: #fff; }
.search input { font-size: 13px; color: var(--ink); }
.search input::placeholder { color: #8795a7; }
.search svg { color: #788ba3; }
.register .table-region { background: #fff; }
.register th, .costs-table thead th { background: #f0f4f9; color: #536980; font-weight: 600; }
.register td, .costs-table td { color: #465970; border-bottom-color: #e9eef4; }
.register td { padding-top: 18px; padding-bottom: 18px; font-size: 13px; }
.register th.header-with-tools { height: 70px; }
.header-heading { color: #405a79; font-size: 12px; }
.header-sort { color: #74859a; }
.header-sort:hover, .header-sort.is-active { background: #e0eaf7; color: var(--accent); }
.header-filter .filter-trigger { color: #6982a1; }
.header-filter .filter-trigger:hover, .header-filter .filter-trigger[aria-expanded=true], .header-filter .filter-trigger.is-active {
  background: #dfebfa; border-color: #adc6e4; color: var(--accent);
}
.summary-row:hover>td, .summary-row.is-expanded>td { background: #f6f9fd; }
.cell-primary { color: var(--ink); font-weight: 600; }
.cell-secondary { color: #7c8b9d; font-size: 12px; margin-top: 5px; }
.record-link { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.detail-toggle { color: var(--accent); font-weight: 500; }
.detail-toggle:hover { color: var(--accent-hover); }
.status { display: inline-block; border-radius: 6px; padding: 4px 9px; background: #edf0f5; color: #68788c; }
.status.progress { background: #e8effc; color: #486eae; }
.status.pending { background: #fff2db; color: #977126; }
.status.done { background: #e6f3ed; color: #3a8065; }
.register .detail-row>td { padding: 0; background: #f7f9fc; }
.record-details { padding: 24px; border-top-color: #d8e2ef; gap: 24px; }
.record-details h3 { color: #47668e; margin-bottom: 16px; }
.record-details dt { color: #7c8b9d; }
.record-details dd { color: #3b506c; font-size: 13px; }
.record-details .quote-detail-section { border-top-color: var(--line); }
.quote-current, .quote-detail-section small, .detail-hint { color: #7c8b9d; }
.quote-detail-section input[type=file] { color: var(--text-secondary); }
.quote-detail-section input[type=file]::file-selector-button { border-color: #d4deeb; border-radius: 7px; color: var(--accent); }
.quote-detail-section input[type=file]::file-selector-button:hover { background: var(--accent-soft); }
.table-footer { min-height: 64px; padding: 14px 22px; color: var(--text-secondary); font-size: 12px; background: #fcfdff; }
.pagination { color: var(--text-secondary); gap: 8px; }
.pagination select, .pagination button { border-color: #d8e1ec; border-radius: 6px; color: #4a6382; }
.pagination button:hover:not(:disabled) { background: var(--accent-soft); }
.save-status:before { background: #6286b2; }
.save-status.error:before { background: #bb6054; }
.empty-icon { background: #f0f5fc; color: #7c97bc; border-color: #dbe5f2; box-shadow: none; }
.empty-state h2 { color: #526a88; }
.empty-state p, .location-empty { color: #7f8fa4; }
.text-button:hover { background: var(--accent-soft); }
.filter-popover { border-color: #d8e2ef; border-radius: 11px; box-shadow: 0 12px 32px #20365024; color: #455e7d; }
.filter-tabs button { background: #f1f4f9; color: #647a96; }
.filter-tabs button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
.filter-search { border-color: #d8e1ec; border-radius: 6px; color: var(--ink); }
.filter-all, .filter-value { color: #4d627e; }
.filter-value:hover, .filter-clear:hover { background: #f1f5fb; }
.filter-empty, .filter-clear { color: #7c8b9d; }
.filter-apply { background: var(--accent); }
.filter-apply:hover { background: var(--accent-hover); }

/* Settings form one continuous workspace with a full left rail. */
main.settings-main { max-width: 1440px; }
.settings-layout { grid-template-columns: 220px minmax(0,1fr); align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 20px #253b5706; overflow: hidden; }
.settings-menu { position: static; margin: 0; padding: 18px 12px; gap: 6px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #f8fafd; box-shadow: none; }
.settings-menu button { min-height: 46px; padding: 12px 16px; font-size: 13px; color: #637891; border-radius: 8px; }
.settings-menu button:hover { background: #edf2f9; }
.settings-menu button[aria-pressed=true] { background: #e4edfa; color: #2f609b; }
.settings-menu button[aria-pressed=true]::before { top: 13px; bottom: 13px; left: 0; background: var(--accent); }
.settings-content { min-height: 460px; border: 0; border-radius: 0; box-shadow: none; }
.settings-panel-head { min-height: 90px; padding: 24px 28px; }
.settings-panel-head h2 { font-size: 21px; margin: 0; color: var(--ink); }
.settings-overline { display: none; }
.settings-list-heading { padding: 12px 28px; background: #f0f4f9; color: #617691; font-size: 12px; }
.settings-list-heading span:last-child { color: #7c8b9d; }
.settings-record { padding: 21px 28px; border-bottom-color: #e9eef4; }
.settings-record:hover { background: #f8fafd; }
.settings-record-name { color: #304c70; font-size: 14px; }
.settings-record-meta { gap: 10px 24px; margin-top: 14px; }
.settings-meta-item { font-size: 12px; }
.settings-meta-item b { color: #7c8b9d; }
.settings-meta-item span { color: #506681; }
.settings-panel-footer { color: #7c8b9d; background: #fcfdff; padding: 14px 28px; }
.settings-content .location-empty { color: #7c8b9d; padding: 64px 20px; }

/* Opening costs: separate location tools, summaries and the line-item list. */
.costs-toolbar { padding: 20px 24px; gap: 14px; flex-wrap: wrap; }
.costs-toolbar label { color: #596f8b; font-weight: 600; }
.costs-toolbar select { border-color: #d5dfec; border-radius: 8px; color: #304b70; background: #f8fafd; }
.cost-count { color: #7c8b9d; }
.costs-actions { width: auto; margin-left: auto; gap: 8px; }
.costs-summary { grid-template-columns: 1fr 1.5fr .85fr 1.15fr 1.15fr; padding: 20px 24px; gap: 12px; background: #fff; }
.cost-metric { padding: 18px; border: 1px solid #e5ebf3; border-radius: 10px; background: #f7f9fc; }
.cost-metric:last-child, .cost-metric:nth-child(3) { border-right: 1px solid #e5ebf3; }
.cost-metric>span { color: #71849d; font-size: 12px; margin-bottom: 10px; }
.cost-metric strong { color: #354f70; font-size: 14px; }
.cost-metric small { color: #7c8b9d; }
.cost-metric.cost-money { background: #eaf1fb; border-color: #dce7f7; }
.cost-metric.cost-money strong { color: #2c5e9c; font-size: 22px; letter-spacing: -.5px; }
.costs-selected-summary { padding: 14px 24px; color: #4b6f9d; background: #f7faff; font-size: 12px; }
.costs-table thead th { padding: 15px 18px; }
.costs-table tbody td { padding: 18px; font-size: 13px; }
.costs-table tbody td:first-child { color: var(--accent); }
.costs-table tbody .money-cell { color: #304f76; }
.costs-table tbody tr.is-selected td { background: #f3f7fe; }
.costs-table tfoot th, .costs-table tfoot td { background: #eaf1fa; color: #2e5688; height: 60px; }
.costs-status, .costs-empty { color: #7c8b9d; }
.costs-status.error { color: #b35044; }

/* Dialog controls share the same spacing and focus treatment. */
dialog { color: var(--ink); border-color: #d6e0ed; border-radius: 16px; box-shadow: 0 24px 90px #14243d40; }
dialog::backdrop { background: #17283f75; backdrop-filter: blur(4px); }
.dialog-heading { padding: 22px 26px; gap: 16px; background: #fff; }
.dialog-heading h2 { margin: 0; color: var(--ink); font-size: 21px; font-weight: 650; letter-spacing: .3px; }
.icon-button { flex-shrink: 0; border-radius: 8px; background: #f0f4f9; color: #6c809a; }
.icon-button:hover { background: #e3ebf6; color: var(--accent); }
.form-body { padding: 26px; background: #f8fafd; }
.form-section+.form-section { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.form-section h3 { color: #3d5779; margin-bottom: 18px; font-size: 14px; }
.form-section h3 span { color: #537aaa; background: #e5edf9; border-radius: 5px; padding: 5px 7px; }
.form-grid, .settings-editor-fields { gap: 18px 20px; }
.field, .settings-field, .print-field, .archive-field, .new-choice-dialog .vendor-fields label { color: #586f8c; font-size: 13px; }
.field input, .field select, .field textarea, .settings-field input,
.print-field input:not([type=checkbox]), .print-field select, .print-field textarea,
.vendor-fields input, .location-fields input {
  border-color: #d5dfeb; border-radius: 7px; color: #2f4563; min-height: 42px; padding: 10px 12px; background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: #96a3b5; }
.field input:focus, .field select:focus, .field textarea:focus, .settings-field input:focus,
.print-field input:focus, .print-field select:focus, .print-field textarea:focus, .vendor-fields input:focus {
  border-color: #87a9d4; outline: 2px solid #dce9fa; outline-offset: 1px;
}
.dialog-footer { padding: 17px 26px; background: #fff; align-items: center; }
.new-choice-dialog p { color: #64758a; }
.new-choice-dialog strong { color: #304b70; }
.toast { background: #263e60; box-shadow: 0 6px 24px #20365026; border-radius: 10px; }
.print-subtitle, .print-note, .print-session-note, .print-field small { color: #7a8ba2; }
.print-copy-heading, .print-group>summary { color: #3c5e8a; }
.print-group>summary::marker { color: #88a0bf; }
.print-subgroup { border-color: #dfe7f2; border-radius: 8px; }
.print-subgroup>summary { color: #647e9e; }
.print-inputs { background: #f8fafd; }
.print-preview-pane { background: #e3e9f1; padding: 24px; }
.print-preview-label { color: #687e99; }

@media(min-width:1600px) {
  .app-header { padding-left: max(36px, calc((100vw - 1528px)/2)); padding-right: max(36px, calc((100vw - 1528px)/2)); }
}
@media(max-width:1180px) {
  .costs-summary { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .cost-metric { grid-column: span 2; }
  .cost-metric.cost-money { grid-column: span 3; }
  .costs-actions { width: auto; margin-left: auto; }
}
@media(max-width:900px) {
  .app-header { padding: 0 24px; }
  .header-main { gap: 22px; }
  .today { display: none; }
  main, main.costs-main, main.settings-main { padding: 26px 24px 36px; }
  .settings-layout { grid-template-columns: 185px minmax(0,1fr); }
  .settings-panel-head, .settings-record { padding: 22px; }
  .costs-actions { width: 100%; }
}
@media(max-width:760px) {
  .app-header { height: auto; min-height: 70px; padding: 14px 18px; }
  .header-main { width: 100%; gap: 16px; justify-content: space-between; }
  .header-pages a { padding: 0 12px; min-width: 0; }
  main, main.costs-main, main.settings-main { padding: 24px 16px 32px; }
  h1 { font-size: 23px; }
  .page-heading, .settings-main .page-heading { margin-bottom: 18px; }
  .toolbar { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .tabs { height: auto; }
  .tabs button { padding: 7px 11px; }
  .search { width: 100%; margin: 0; }
  .register .summary-row>td { padding: 0; background: transparent; }
  .register .summary-row:hover, .register .summary-row.is-expanded { background: #f6f9fd; }
  .register td.col-amount { font-size: 17px; color: #345a87; }
  .register td.col-details { padding-top: 8px; }
  td.col-applicant:before, td.col-amount:before, td.col-archived:before { color: #7c8b9d; }
  .register thead th, .register th.header-with-tools { background: #f0f4f9; }
  .table-footer { height: auto; flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .table-footer .pagination { order: 3; width: 100%; justify-content: center; }
  .settings-layout { display: block; }
  .settings-menu { flex-direction: row; gap: 4px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .settings-menu button { flex: 1; min-height: 42px; padding: 10px; text-align: center; white-space: nowrap; }
  .settings-menu button[aria-pressed=true]::before { display: none; }
  .settings-content { min-height: 340px; }
  .settings-panel-head { padding: 20px; }
  .settings-panel-head h2 { font-size: 19px; }
  .settings-list-heading, .settings-record, .settings-panel-footer { padding-left: 20px; padding-right: 20px; }
  .costs-toolbar { padding: 18px 16px; gap: 10px; }
  .costs-toolbar select { max-width: none; width: 100%; min-width: 0; }
  .costs-summary { padding: 16px; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cost-metric, .cost-metric.cost-money { grid-column: auto; padding: 15px; border: 1px solid #e5ebf3 !important; }
  .cost-metric.cost-address { grid-column: 1/-1; order: 1; }
  .cost-metric.cost-money strong { font-size: 20px; }
  .costs-actions { justify-content: stretch; }
  .costs-selected-summary { padding: 13px 16px; }
  .dialog-heading, .form-body { padding: 20px; }
  .dialog-footer { padding: 15px 20px; }
  .print-preview-pane { padding: 18px; }
}
@media(max-width:540px) {
  .brand-name { display: none; }
  .brand-mark { width: 32px; height: 35px; border-radius: 8px; }
  .header-main { gap: 10px; }
  .header-pages { flex: 1; max-width: 330px; }
  .header-pages a { flex: 1; min-height: 36px; font-size: 12px; padding: 0 9px; }
  .settings-record-meta { grid-template-columns: minmax(0,1fr); }
  .settings-record { padding-top: 18px; padding-bottom: 18px; }
  .settings-editor-fields { grid-template-columns: minmax(0,1fr); }
  .editor-heading-actions { gap: 7px; flex-wrap: wrap; }
  .dialog-heading h2 { font-size: 20px; }
}
@media(max-width:420px) {
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding-left: 8px; padding-right: 8px; }
  .cost-metric.cost-money strong { font-size: 18px; }
}