/* Approved design 4: black and white, with the editorial skin.
   This layer changes presentation only. Semantic status/direction colours and
   user-authored spreadsheet formatting remain under their existing rules. */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131313;
  --sidebar-bg: #090909;
  --surface: #1d1d1d;
  --surface-soft: #282828;
  --surface-hover: #323232;
  --ink: #fafafa;
  --label: #d8d8d8;
  --muted: #bdbdbd;
  --line: #474747;
  --control-line: #858585;
  --accent: #eeeeee;
  --accent-dark: #ffffff;
  --action: #ededed;
  --action-hover: #ffffff;
  --on-accent: #171717;
  --teal: var(--accent);
  --primary: var(--accent);
  --accent-soft: #282828;
  --toggle-track: #858585;
  --toggle-knob: #fafafa;
  --tooltip-bg: #282828;
  --tooltip-ink: #fafafa;
  --login-glow: #282828;
  --focus-glow: #eeeeee2e;
  --selection-bg: #474747;
  --overlay-bg: #090909b8;
  --shadow: none;
  --floating-shadow: 0 14px 34px #00000045;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f8f8;
  --sidebar-bg: #e6e6e6;
  --surface: #efefef;
  --surface-soft: #e3e3e3;
  --surface-hover: #dadada;
  --ink: #161616;
  --label: #363636;
  --muted: #565656;
  --line: #c3c3c3;
  --control-line: #747474;
  --accent: #171717;
  --accent-dark: #333333;
  --action: #171717;
  --action-hover: #333333;
  --on-accent: #ffffff;
  --teal: var(--accent);
  --primary: var(--accent);
  --accent-soft: #e3e3e3;
  --toggle-track: #747474;
  --toggle-knob: #efefef;
  --tooltip-bg: #e3e3e3;
  --tooltip-ink: #161616;
  --login-glow: #e3e3e3;
  --focus-glow: #17171724;
  --selection-bg: #c3c3c3;
  --overlay-bg: #16161673;
  --shadow: none;
  --floating-shadow: 0 14px 34px #00000018;
}

/* The mock's straight lines, neutral surfaces and left-edge navigation marker.
   Widths and existing collapse/mobile behaviour are deliberately unchanged. */
html[data-theme] body { background: var(--bg); }
html[data-theme] ::selection { color: var(--ink); background: var(--selection-bg); }
html[data-theme] .sidebar {
  border-right: 2px solid var(--ink);
  --nav-heading-bg: var(--surface-soft);
  --nav-heading-hover: var(--surface-hover);
  --nav-heading-line: var(--line);
  --nav-heading-ink: var(--accent);
}
html[data-theme] .sidebar-toggle { background: var(--surface-soft); box-shadow: none; }
html[data-theme] .sidebar-footer { border-color: var(--line); }
html[data-theme] .nav-list a { border-radius: 0; }
html[data-theme] .nav-list[data-navigation] a {
  border-left: 3px solid transparent;
  padding-left: 8px;
}
html[data-theme] .nav-list[data-navigation] a.active,
html[data-theme] .nav-list[data-navigation] a.active:hover {
  border-left-color: var(--ink);
  background: var(--surface-soft);
  color: var(--accent);
}
html[data-theme] .nav-list[data-navigation] a:hover {
  background: var(--surface-soft);
  color: var(--ink);
}
html[data-theme] [data-navigation] a.nav-quick-configure {
  border: 1px dashed var(--control-line);
  color: var(--accent);
  padding-left: 11px;
}
html[data-theme] .page-header h1,
html[data-theme] .overview-page h1 {
  font-size: 34px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -1.2px;
}
html[data-theme] .panel-heading {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}
html[data-theme] :is(.panel, .analysis-summary-card, .cash-account-card,
  .ov-card, .navigation-catalog-block, .navigation-catalog-row,
  .navigation-catalog-card, .navigation-catalog-icon,
  .quick-access-dialog, .navigation-preferences-panel, .quick-access-empty,
  .quick-access-order-item, .account-group-dialog, .account-group-list,
  .account-group-mine, .amount-details-dialog, .sites-dialog,
  .cash-receipt-week-dialog, .ov-dialog, .dv-dialog, .login-card,
  .tel-table-wrap, .proxy-table-wrap, .tel-metrics > div,
  .service-alert-rule, .service-alert-cabinets, .crm-source-table-wrap,
  .account-weekly-delta, .cash-purpose-tab, .analysis-cause-cards article,
  .analysis-cause-notes, .analysis-group-tabs, .sites-tabs,
  .sites-campaign-picker details, .sites-ad-campaign) { border-radius: 0; }
html[data-theme] .navigation-catalog-block > summary,
html[data-theme] .navigation-catalog-block[open] > summary { border-radius: 0; }
html[data-theme] .navigation-catalog-copy > strong { font-weight: 700; }
html[data-theme] .navigation-catalog-icon { background: var(--surface-soft); }
html[data-theme] .navigation-catalog-card { box-shadow: none; }
html[data-theme] .ov-results-head { border-bottom: 1px solid var(--line); }
html[data-theme] .ov-bottom-head { border-bottom: 1px solid var(--line); padding-bottom: 13px; }
html[data-theme] .ov-direction-icon,
html[data-theme] .ov-action-icon,
html[data-theme] .account-weekly-columns { border-radius: 0; }
html[data-theme] .ov-cash-card { background: var(--surface); }
html[data-theme] .cash-overview-table thead th:first-child { border-top-left-radius: 0; }
html[data-theme] .cash-overview-table thead th:last-child { border-top-right-radius: 0; }

/* Filled buttons keep an explicit opposite-colour label. Outline controls use
   the text accent, never the label colour intended for a filled button. */
html[data-theme] :is(.button, .cash-add-trigger, .cash-add-plus,
  .account-picker summary, .account-options, .quick-access-close,
  .quick-access-move button, .account-group-close, .cash-inline-form input,
  .form-control, .stack-form input:not([type="checkbox"]):not([type="radio"]),
  .stack-form select, .stack-form textarea, .login-card input,
  .sync-jobs-kind-filter select, .account-weekly-controls select,
  .ov-week-arrow, .ov-week-shortcut, .ov-data-note, .ov-secondary,
  .tel-tabs button, .sites-tabs a, .analysis-group-tab,
  .account-group-chip, .analysis-insight-filters button) { border-radius: 0; }
html[data-theme] .button { min-width: 0; font-size: 13px; }
html[data-theme] .button.compact { font-size: 12px; }
html[data-theme] .button.primary { background: var(--action); color: var(--on-accent); }
html[data-theme] .button.primary:hover { background: var(--action-hover); color: var(--on-accent); }
html[data-theme] .button.secondary,
html[data-theme] .button.ghost {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--control-line);
}
html[data-theme] .button.secondary:hover,
html[data-theme] .button.ghost:hover { background: var(--surface-hover); color: var(--ink); }
html[data-theme] :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html[data-theme] :is(input, select, textarea):focus,
html[data-theme] .account-picker summary:focus {
  border-color: var(--accent);
  outline-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-glow);
}
html[data-theme] .notification-toggle-input:focus-visible + span {
  outline-color: var(--accent);
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { opacity: 1; }
html[data-theme] .account-options,
html[data-theme] :is(.review-tooltip, .formula-help-text, .amount-composition-popover,
  .amount-details-dialog, .sites-dialog, .cash-receipt-week-dialog,
  .account-group-dialog, .quick-access-dialog, .ov-dialog, .dv-dialog) {
  box-shadow: var(--floating-shadow);
}
html[data-theme] :is(.account-group-dialog, .quick-access-dialog,
  .amount-details-dialog, .sites-dialog, .cash-receipt-week-dialog,
  .ov-dialog, .dv-dialog)::backdrop { background: var(--overlay-bg); }
html[data-theme] .login-shell { background: var(--bg); }
html[data-theme] .login-card { border-top: 2px solid var(--ink); }
html[data-theme] .formula-help:hover,
html[data-theme] .formula-help:focus-visible { background: var(--surface-soft); }
html[data-theme] .polozhnyak-format-toolbar { border-radius: 0; box-shadow: none; }
html[data-theme] .polozhnyak-format-toolbar button:hover,
html[data-theme] .polozhnyak-format-toolbar button.is-active {
  background: var(--surface-soft);
  color: var(--accent);
}
html[data-theme] .polozhnyak-workspace {
  background-image: linear-gradient(color-mix(in srgb, var(--line) 15%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 15%, transparent) 1px, transparent 1px);
}

/* Primary chart series are monochrome. Existing green, gold, blue and previous
   period series still communicate their original meanings. */
html[data-theme] .analysis-ranking-bar { background: var(--action); }
html[data-theme] .analysis-funnel-bar { background: var(--action); }
html[data-theme] .daily-metric { --daily-color: var(--action); }
html[data-theme] .daily-metric-green { --daily-color: var(--success); }
html[data-theme] .daily-metric-gold { --daily-color: var(--warning); }
html[data-theme] .daily-metric-blue { --daily-color: var(--chart-blue); }
html[data-theme] .sites-chart { --bar-color: var(--action); }
html[data-theme] .sites-chart.blue { --bar-color: var(--chart-blue); }
html[data-theme] .sites-chart.gold { --bar-color: var(--warning); }

/* A continuous summary strip only where all three original cards fit on one
   row. Narrow viewports retain the existing wrapping and readable amounts. */
@media (min-width: 1650px) {
  html[data-theme] .ov-money-grid {
    gap: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  html[data-theme] .ov-money-grid > .ov-money-card {
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
  }
  html[data-theme] .ov-money-grid > .ov-money-card:last-child { border-right: 0; }
}
@media (max-width: 900px) {
  html[data-theme] .sidebar { border-right: 0; border-bottom: 2px solid var(--ink); }
  html[data-theme] .page-header h1,
  html[data-theme] .overview-page h1 { font-size: 32px; }
}