@charset "UTF-8";

/* Final presentation layer. Keep financial values, status colors, disclosures
   and table column semantics in their owning modules. The shared host selector
   deliberately matches desktop.css specificity in both application hosts. */
html[data-desktop] {
  --sidebar-width: 208px;
  --desktop-gutter: 16px;
  --bg: #f2f4f7;
  --border: #dfe4ec;
  --primary: #1769d2;
  --primary-dark: #1056b3;
  --primary-light: #edf4ff;
  --radius: 4px;
  --professional-gap: 12px;
}

/* Stable application chrome; all remaining width belongs to the workspace. */
html[data-desktop] .sidebar { padding: 16px 10px 12px; }
html[data-desktop] .sidebar .brand { font-size: 21px; gap: 9px; }
html[data-desktop] .sidebar .brand-mark { width: 31px; height: 35px; border-radius: 4px; }
html[data-desktop] .sidebar-search { margin: 16px 0 12px; }
html[data-desktop] .sidebar-search input { height: 32px; border-radius: 4px; }
html[data-desktop] .sidebar .nav-caption { margin-bottom: 5px; padding-inline: 10px; }
html[data-desktop] .sidebar .later-caption { margin-top: 16px; }
html[data-desktop] .sidebar .nav-item,
html[data-desktop] .sidebar .nav-group summary { min-height: 36px; padding: 7px 10px; font-size: 13px; border-radius: 4px; }
html[data-desktop] .sidebar .nav-item { gap: 9px; }
html[data-desktop] .sidebar .nav-item.active { background: #1769d2; box-shadow: inset 3px 0 #82b8ff; }
html[data-desktop] .sidebar .nav-subitem,
html[data-desktop] .sidebar .nav-group .nav-subitem { min-height: 32px; padding: 6px 9px; }
html[data-desktop] .sidebar .nav-subitem.active { background: #28496f; box-shadow: inset 2px 0 #82b8ff; }
html[data-desktop] .sidebar .nav-children { margin: 2px 0 5px 18px; padding-left: 9px; }
html[data-desktop] .sidebar .sidebar-bottom { margin-top: 12px; padding-top: 10px; }
html[data-desktop] .menu-search-result { padding: 8px 10px; gap: 2px; }
html[data-desktop] .menu-search-result strong { font-size: 13px; }
html[data-desktop] .topbar { height: 48px; padding-inline: 16px; }
html[data-desktop="true"] .topbar { flex-basis: 48px; }
html[data-desktop] .topbar-leading { gap: 16px; }
html[data-desktop] main { max-width: none; padding: 14px 16px 18px; font-size: 13px; }
html[data-desktop="true"] main { padding: 14px var(--desktop-gutter) calc(var(--desktop-status-height) + 14px); }
html[data-desktop] .page-heading,
html[data-desktop] #daily-page .page-heading { min-height: 32px; margin-bottom: 12px; gap: 10px 16px; }
html[data-desktop] .page-heading h1 { font-size: 20px; }
html[data-desktop] .page-heading p { margin-top: 3px; font-size: 12px; }
html[data-desktop] .heading-actions { gap: 8px; align-items: center; }

/* One control size and one query rhythm across daily, account and business pages. */
html[data-desktop] .button,
html[data-desktop] .heading-actions .button { min-height: 32px; padding: 5px 12px; border-radius: 4px; font-size: 13px; line-height: 20px; }
html[data-desktop] .button.small { min-height: 28px; padding: 3px 10px; }
html[data-desktop] :is(main, dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select:not([multiple])) {
  height: 32px; padding-block: 5px; border-radius: 4px; font-size: 13px; line-height: 20px;
}
html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) {
  padding: 12px 14px; margin-bottom: 12px; gap: 10px 18px; align-items: center; border-radius: 4px;
}
html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) > label:not([hidden]) {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; font-size: 13px; line-height: 20px;
}
html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) :is(input:not([type="checkbox"]), select) { min-width: 128px; }
html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) input[type="date"] { width: 148px; }
html[data-desktop] .bs-scope #business-company { min-width: 180px; }
html[data-desktop] .account-data-date { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; }
html[data-desktop] .account-data-date > span { color: var(--secondary); }
html[data-desktop] .account-data-date > strong { min-height: 0; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
html[data-desktop] .filters,
html[data-desktop] .scope-panel .filters { padding: 11px 14px; gap: 8px; }
html[data-desktop] .scope-panel { margin-bottom: 12px; border-radius: 4px; }
html[data-desktop] .search-field svg { top: 8px; }
html[data-desktop] .reset-button { width: 32px; height: 32px; border-radius: 4px; }
html[data-desktop] :is(.bs-summary-search, .op-filter, .op-toolbar) { gap: 10px; margin-block: 0 12px; }
html[data-desktop] .bs-summary-search input { max-width: 380px; }
html[data-desktop] :is(.funding-filter, .bs-table-filter, .dh-search) { padding: 9px 14px; gap: 10px; }
html[data-desktop] .basis-switch { padding: 2px; border-radius: 4px; }
html[data-desktop] .basis-switch button { min-height: 26px; padding: 3px 10px; }

/* Joined summaries read as one account overview instead of separate large cards.
   A 1px grid gap supplies both vertical and wrapped-row separators. */
html[data-desktop] :is(.funding-metrics, .trs-metrics, .bs-metrics, .op-metrics, .overview-metrics, .bs-manual-profit-grid):not(:empty) {
  gap: 1px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--border); overflow: hidden; margin-block: 0 12px;
}
html[data-desktop] :is(.funding-metric, .trs-metric, .bs-metric, .op-metric, .overview-metric) {
  border: 0; border-radius: 0; padding: 12px 16px; min-width: 0; min-height: 0; box-shadow: none; background: #fff;
}
html[data-desktop] :is(.funding-metric, .trs-metric, .bs-metric) > strong,
html[data-desktop] .bs-metrics .bs-metric strong { margin: 7px 0 5px; font-size: 22px; line-height: 1.35; letter-spacing: 0; }
html[data-desktop] :is(.op-metric, .overview-metric) { gap: 6px; }
html[data-desktop] :is(.op-metric, .overview-metric) strong { font-size: 22px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
html[data-desktop] .bs-summary-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
html[data-desktop] .bs-summary-metrics .bs-metric { padding: 12px 16px; }
html[data-desktop] .bs-summary-metrics .bs-metric > strong { margin: 7px 0 5px; }
html[data-desktop] .bs-summary-metrics .bs-number,
html[data-desktop] .bs-manual-profit-grid .bs-number { font-size: 22px; line-height: 1.35; }
html[data-desktop] .bs-metric.primary-metric,
html[data-desktop] .overview-metric.featured,
html[data-desktop] .trs-metric:first-child { background: #f3f7fe; }
html[data-desktop] .trs-metric > strong.trs-negative,
html[data-desktop] .ledger-table .trs-negative { color: #cf1322; }
html[data-desktop] .funding-metric dl { gap: 14px; margin-top: 8px; padding-top: 8px; }
html[data-desktop] .funding-metric dd { margin-top: 3px; font-size: 13px; }
html[data-desktop] .bs-summary-heading { margin: 0 0 8px; align-items: center; }
html[data-desktop] .bs-summary-heading h2 { font-size: 14px; }
html[data-desktop] .bs-summary-heading p { margin-top: 3px; font-size: 12px; }
html[data-desktop] .bs-summary-note { margin: 6px 0 10px; font-size: 12px; }
html[data-desktop] .funding-source { margin: 8px 0 12px; gap: 12px; }
html[data-desktop] #business-content:has(> .bs-panel) { gap: 12px; }

/* Dense working tables keep normal, multiline and exact financial values visible. */
html[data-desktop] .ledger-panel { border-radius: 4px; }
html[data-desktop] :is(.panel-heading, .bs-group-heading) { min-height: 44px; padding: 9px 14px; gap: 10px; }
html[data-desktop] .panel-heading h2,
html[data-desktop] .ledger-title { font-size: 14px; }
html[data-desktop] .panel-tools { gap: 12px; }
html[data-desktop] .table-context { padding: 8px 14px; }
html[data-desktop] :is(.ledger-table, .bs-summary-table, .op-table, .dh-table) :is(th, td) {
  height: 40px; padding: 7px 12px; font-size: 13px; line-height: 1.55; vertical-align: middle;
}
html[data-desktop] .bs-panel .bs-table td,
html[data-desktop] .bs-table th { height: 40px; }
html[data-desktop] .ledger-table :is(th, td):first-child { padding-left: 14px; }
html[data-desktop] :is(.ledger-table, .bs-summary-table, .op-table, .dh-table) th { font-weight: 500; color: #46556b; }
html[data-desktop] .ledger-table td strong,
html[data-desktop] .op-table td strong,
html[data-desktop] .ledger-table .bs-number,
html[data-desktop] .op-table .op-number { font-size: 13px; }
html[data-desktop] .ledger-table td small { margin-top: 2px; line-height: 1.45; }
html[data-desktop] .bs-table .bs-cell-text { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
html[data-desktop] :is(.ledger-table, .bs-summary-table) :is(th, td)[data-kind="number"],
html[data-desktop] :is(.ledger-table, .bs-summary-table) :is(th, td).align-right,
html[data-desktop] .op-table :is(th, td).op-numeric,
html[data-desktop] .dh-table :is(th, td).dh-number {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[data-desktop] .table-footer { min-height: 44px; padding: 8px 14px; font-size: 12px; gap: 10px; }
html[data-desktop] .row-actions { gap: 12px; }
html[data-desktop] .badge { padding: 2px 6px; line-height: 18px; border-radius: 3px; white-space: nowrap; }
html[data-desktop] .table-scroll,
html[data-desktop] .dh-table-scroll { scrollbar-color: #aab5c5 #f2f4f7; }

/* Overview and statement retain their existing structure and full diagnostics. */
html[data-desktop] .overview { margin-bottom: 12px; }
html[data-desktop] .overview-toolbar { margin-bottom: 10px; }
html[data-desktop] .overview-toolbar h2 { font-size: 14px; margin-bottom: 3px; }
html[data-desktop] .overview-grid { gap: 12px; }
html[data-desktop] .overview-card { padding: 14px; border-radius: 4px; }
html[data-desktop] .overview-card-head { margin-bottom: 12px; }
html[data-desktop] .overview-card-head h3 { font-size: 14px; margin-bottom: 3px; }
html[data-desktop] .overview-card-note { margin-top: 10px; padding-top: 8px; }
html[data-desktop] .queue-summary { padding: 12px 14px; margin-bottom: 12px; border-radius: 4px; }
html[data-desktop] .queue-amount strong { font-size: 22px; }
html[data-desktop] .wb-statement-toolbar { padding: 11px 14px; }
html[data-desktop] .wb-total-summary { padding: 0 14px 12px; gap: 10px; }
html[data-desktop] .wb-summary-amount,
html[data-desktop] .wb-total-summary .wb-statement-gap > strong { font-size: clamp(20px, 1.8vw, 25px); }
html[data-desktop] .wb-statement-grid { gap: 14px; padding: 0 14px 14px; }
html[data-desktop] .wb-statement-cell > button { padding-block: 8px; }
html[data-desktop] .wb-statement-label { font-size: 13px; }
html[data-desktop] .wb-statement-amount { font-size: 14px; }
html[data-desktop] .wb-statement-grand-total .wb-statement-label { font-size: 14px; }
html[data-desktop] .wb-statement-grand-total .wb-statement-amount { font-size: 16px; }
html[data-desktop] .wb-readiness { margin: 0 14px 12px; }
html[data-desktop] .bs-rate-overview { padding: 14px; }
html[data-desktop] .bs-rate-cards { gap: 12px; }
html[data-desktop] .bs-rate-account { padding: 11px 14px; }

/* Daily archives use the same query, summary and detail hierarchy. */
html[data-desktop] .dh-layout { gap: 12px; grid-template-columns: 176px minmax(0, 1fr); }
html[data-desktop] .dh-days-heading { padding: 12px; }
html[data-desktop] .dh-day { padding: 9px 8px; }
html[data-desktop] .dh-day-heading { padding: 12px 14px; gap: 12px; }
html[data-desktop] .dh-day-heading h2 { font-size: 16px; }
html[data-desktop] .dh-day-heading p { margin-top: 4px; }
html[data-desktop] .dh-summary { gap: 1px; padding: 0; margin: 12px 14px 0; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
html[data-desktop] .dh-summary article { border: 0; border-radius: 0; padding: 10px 14px; gap: 5px; background: #fff; }
html[data-desktop] .dh-summary strong { font-size: 20px; }
html[data-desktop] .dh-data-note { margin: 10px 14px 0; }

/* Editors retain generous reading room while fields and actions stay aligned. */
html[data-desktop] .dialog-head { padding: 15px 20px; }
html[data-desktop] .dialog-head h2 { margin-bottom: 3px; font-size: 17px; }
html[data-desktop] .dialog-body { padding: 18px 20px; }
html[data-desktop] .dialog-foot { padding: 11px 20px; }
html[data-desktop] .form-grid { gap: 14px 18px; }
html[data-desktop] .form-grid label { gap: 6px; }
html[data-desktop] :is(.bs-detail, .op-detail, .funding-detail, .dh-detail) { padding: 16px 20px; font-size: 13px; }
html[data-desktop] :is(.bs-detail-grid, .op-field-grid, .dh-detail-fields) { column-gap: 24px; }
html[data-desktop] :is(.bs-detail-grid, .op-field-grid, .dh-detail-fields) > div { padding-block: 10px; }
html[data-desktop] :is(.bs-detail-grid, .op-field-grid, .dh-detail-fields) dt { font-size: 12px; }
html[data-desktop] :is(.bs-detail-grid, .op-field-grid, .dh-detail-fields) dd { margin-top: 5px; font-size: 13px; line-height: 1.65; }
html[data-desktop] .detail-grid { gap: 14px 20px; margin-top: 16px; }
html[data-desktop] .section-title { margin-block: 18px 10px; }
html[data-desktop] .bs-support-content { padding: 16px 20px 20px; }

@media (min-width: 1800px) {
  html[data-desktop] { --sidebar-width: 216px; --desktop-gutter: 18px; }
  html[data-desktop] .bs-summary-metrics { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
}
@media (max-width: 1199px) {
  html[data-desktop] { --sidebar-width: 200px; --desktop-gutter: 14px; }
  html[data-desktop] .page-heading { flex-wrap: wrap; }
  html[data-desktop] .heading-actions { justify-content: flex-start; }
  html[data-desktop] .bs-scope .bs-mode { margin-left: 0; }
  html[data-desktop] .bs-summary-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  html[data-desktop] .dh-layout { grid-template-columns: 156px minmax(0, 1fr); }
}
@media (max-width: 800px) {
  html[data-desktop] { --desktop-gutter: 12px; }
  html[data-desktop] main { padding-inline: 12px; }
  html[data-desktop] .topbar { padding-inline: 12px; }
  html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) { gap: 10px 14px; padding: 12px; }
  html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) > label { flex-wrap: wrap; gap: 5px 8px; }
  html[data-desktop] .panel-heading { flex-wrap: wrap; }
  html[data-desktop] .table-footer { flex-wrap: wrap; }
  html[data-desktop] .bs-summary-search { margin-bottom: 10px; }
}
@media (max-width: 720px) {
  html[data-desktop] .dh-layout { grid-template-columns: minmax(0, 1fr); }
  html[data-desktop] .dh-day { padding: 9px; }
  html[data-desktop] .dh-summary { margin-inline: 12px; }
  html[data-desktop] .dh-summary article { padding: 10px; }
  html[data-desktop] .dh-summary strong { font-size: 17px; }
  html[data-desktop] .funding-metric dl { gap: 12px; }
  html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) > label { flex: 1 1 150px; align-items: flex-start; flex-direction: column; min-width: 0; }
  html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) > label.op-check { flex-direction: row; align-items: center; }
  html[data-desktop] :is(.bs-scope, .funding-scope, .op-scope, .dh-scope) > label > :is(input:not([type="checkbox"]), select) { width: 100%; min-width: 0; max-width: 100%; }
  html[data-desktop] .bs-scope #business-company { min-width: 0; }
  html[data-desktop] .heading-actions { width: 100%; }
}
@media (max-width: 540px) {
  html[data-desktop] { --sidebar-width: 190px; }
  html[data-desktop] .sidebar { width: var(--sidebar-width); }
  html[data-desktop] .bs-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-desktop] .bs-summary-metrics .bs-number { font-size: 20px; }
  html[data-desktop] :is(.funding-metric, .trs-metric, .bs-metric, .op-metric, .overview-metric) { padding: 11px 12px; }
  html[data-desktop] :is(.dialog-head, .dialog-body, .dialog-foot, .bs-detail, .op-detail, .funding-detail, .dh-detail) { padding-inline: 16px; }
}
@media print {
  html[data-desktop] main { padding: 0; }
  html[data-desktop] :is(.funding-metrics, .trs-metrics, .bs-metrics, .op-metrics, .overview-metrics, .dh-summary) { break-inside: avoid; }
}