/* Пико CSS дава основния вид; тук са само допълненията. */
:root {
  --pico-font-size: 15px;
  --ink-muted: #898781;
  --grid: #e1e0d9;
  --surface-chart: #fcfcfb;
  --good: #006300;
  --critical: #d03b3b;
  --warning-bg: #fff4d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grid: #2c2c2a;
    --surface-chart: #1a1a19;
    --good: #0ca30c;
    --critical: #e66767;
    --warning-bg: #3a3017;
  }
}
:root[data-theme="dark"] {
  --grid: #2c2c2a;
  --surface-chart: #1a1a19;
  --good: #0ca30c;
  --critical: #e66767;
  --warning-bg: #3a3017;
}
body > header.top { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
body > header.top nav { flex-wrap: wrap; }
body > header.top nav ul:last-child { flex-wrap: wrap; }
body > header.top nav a { font-size: .9rem; padding: .35rem .5rem; }
body > header.top nav a.active { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.brand { font-weight: 700; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--critical); color: #fff; font-size: .75rem; text-align: center; }
h1 { font-size: 1.6rem; margin-bottom: .25rem; }
.subtitle { color: var(--pico-muted-color); margin-top: 0; }

/* Филтри в един ред над графиките */
form.filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; padding: .75rem; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; margin-bottom: 1rem; }
form.filters label { margin: 0; font-size: .8rem; color: var(--pico-muted-color); }
form.filters select { min-width: 4.5rem; }
form.filters input, form.filters select { margin: 0; padding: .3rem .5rem; height: auto; font-size: .9rem; width: auto; }
form.filters details.dropdown { margin: 0; min-width: 11rem; }
form.filters details.dropdown summary { padding: .3rem .5rem; height: auto; font-size: .9rem; }
form.filters details.dropdown ul { max-height: 18rem; overflow-y: auto; }
form.filters .actions { display: flex; gap: .5rem; }
form.filters button, form.filters a[role=button] { padding: .35rem .8rem; font-size: .9rem; margin: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: .75rem 1rem; }
.kpi .label { font-size: .8rem; color: var(--pico-muted-color); }
.kpi .value { font-size: 1.5rem; font-weight: 600; }
.kpi .hint { font-size: .8rem; color: var(--pico-muted-color); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; background: var(--pico-background-color); }
.card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.chart-box { position: relative; height: 320px; }
.chart-box.small { height: 240px; }
.table-wrap { overflow-x: auto; }
table.data { font-size: .85rem; font-variant-numeric: tabular-nums; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data tfoot td { font-weight: 700; }
table.data tr.forecast td { font-style: italic; color: var(--pico-muted-color); }
.pos { color: var(--good); }
.negv { color: var(--critical); }
.status { font-size: .8rem; padding: .1rem .45rem; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; }
.status.paid { color: var(--good); }
.status.overdue, .status.failed { color: var(--critical); }
.notice { background: var(--warning-bg); padding: .6rem .8rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; }
.muted { color: var(--pico-muted-color); }
.swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: baseline; }
.heat td.num { position: relative; }
.timeline { list-style: none; padding: 0; }
.timeline li { border-left: 2px solid var(--pico-muted-border-color); padding: 0 0 .75rem .9rem; margin: 0; list-style: none; }
.timeline li .when { font-size: .8rem; color: var(--pico-muted-color); }
@media (max-width: 600px) { .chart-box { height: 260px; } }
table.data td:first-child { min-width: 9rem; }

/* Банка и документи */
.conf { font-size: .8rem; font-weight: 600; padding: .05rem .4rem; border-radius: 4px; border: 1px solid currentColor; }
.conf.high { color: var(--good); }
.conf.medium { color: #b7791f; }
.conf.low { color: var(--critical); }
.tx-table td.ref { max-width: 18rem; font-size: .8rem; }
.tx-table td.actions { white-space: nowrap; }
.tx-table td.actions button { padding: .2rem .55rem; font-size: .8rem; margin: 0 .2rem .2rem 0; width: auto; }
.tx-table tr.confirmed td, .tx-table tr.ignored td { opacity: .75; }
.status.partial { color: #b7791f; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.form-grid label { margin-bottom: .6rem; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid label.check { align-self: center; }
.form-grid input, .form-grid select, .form-grid textarea { margin-bottom: .1rem; }
.review-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.pdf-pane iframe { width: 100%; height: 80vh; border: 0; }
@media (max-width: 900px) { .review-split { grid-template-columns: 1fr; } .pdf-pane iframe { height: 60vh; } }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }