/* The design system's rules for every screen (owner, 20.10.2026; docs/dizain.md, „Видимост и подредба“ and
   „Договор за нов модул“). Loaded after components.css, in the same layer, so these win over the older parts. */
@layer components{

/* ── Visibility ─────────────────────────────────────────────────────────────────────────────────────────────── */
html{scrollbar-gutter:stable}
body{color:var(--text);font-variant-numeric:tabular-nums}  /* the background is the shell's: the dark menu runs to the bottom */
/* page, card and field: three levels; every field has a line of at least 3:1 */
.erp-shell input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),.erp-shell select,.erp-shell textarea{
  background-color:var(--field-bg);border-color:var(--field-line);border-width:var(--field-line-width);color:var(--field-text)}
:where(input,select,textarea):hover{border-color:var(--field-line-hover)}
:where(input,textarea)::placeholder{color:var(--field-placeholder);opacity:1}
:where(input,select,textarea):disabled{background-color:var(--bg-muted);color:var(--text-3)}
/* menus and windows: their own background, a line and a shadow; z-index from the scale */
:where(.menu-panel,.erp-bell-panel,.discovery-popup,.more-actions-list,.stock-menu){background:var(--menu-bg);border:1px solid var(--menu-line);box-shadow:var(--menu-shadow)}
:where(.menu-panel,.erp-bell-panel,.discovery-popup){z-index:var(--z-menu)}
:where(dialog){background:var(--dialog-bg);color:var(--text);border:1px solid var(--dialog-line);box-shadow:var(--dialog-shadow)}
:where(dialog)::backdrop{background:var(--dialog-backdrop)}
/* a visible focus on everything that can be pressed */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── Arrangement ────────────────────────────────────────────────────────────────────────────────────────────── */
/* the text in a button never wraps; a row of buttons wraps whole buttons */
:where(button,.button,a.button,input[type=submit],summary.button){white-space:nowrap}
:where(.ds-actions,.actions,.page-head-actions,.form-actions){display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* a button next to a field keeps its own height, down by the field — not stretched to the field and its label (Телефония, 08.11.2026) */
.form-actions{align-items:flex-end}
.form-actions>.ui-field~:is(button,.button){margin-bottom:var(--space-4)}  /* the field's own space under it (.ui-field) */
/* text inside flex and grid items can shrink; long numbers, e-mails and names break */
:where(.ds-row-main,.page-head-text,.ds-card,.card,td,th,dd,li){min-width:0}
:where(dd,td,.ds-row-meta,.case-client){overflow-wrap:break-word}
:where(.serial,.email,code){overflow-wrap:anywhere}
/* active or hovered never changes the weight of the text */
.primary-nav a,.primary-nav a[aria-current=page],.primary-nav a:hover{font-weight:600}
.nav-sub a,.nav-sub a[aria-current=page]{font-weight:500}
.service-worklist a,.service-worklist a[aria-current=page],.erp-shell .service-worklist a,.erp-shell .service-worklist a[aria-current=page]{font-weight:600}
.case-views a,.case-views a[aria-current=page]{font-weight:600}
.service-subnav a,.service-subnav a[aria-current=page]{font-weight:600}
/* „Записано ✓“ and errors keep their place */
.ds-toasts{z-index:var(--z-toast)}

/* ── The page frame (platform/page.html) ────────────────────────────────────────────────────────────────────── */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3) var(--space-4);margin:var(--space-2) 0 var(--space-5)}
.page-head:not(:has(h1:not(:empty))){display:none}
.page-head-text{flex:1 1 320px}
.page-head-text h1{margin:0}
.page-head-number{margin:0 0 var(--space-1);font-size:var(--font-meta);color:var(--text-2)}
.page-head-actions{align-items:center}
.page-views{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-4)}
@media(max-width:767px){
  .page-head-actions{width:100%}
  .page-head-actions>:is(.button,button):last-child{flex:1 1 100%}
}

/* ── Parts that were missing (core/templatetags/ui.py) ─────────────────────────────────────────────────────── */
.ui-field{display:grid;gap:var(--space-1);margin:0 0 var(--space-4);max-width:var(--width-field)}
.ui-field>label{font-weight:600;color:var(--text)}
.ui-field-help{margin:0;font-size:var(--font-meta);color:var(--text-2)}
.ui-field-error{margin:0;font-size:var(--font-meta);color:var(--danger);font-weight:600}
.ui-field.has-error :where(input,select,textarea){border-color:var(--danger)}
.ui-field.is-check{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-2)}
.ui-field.is-check>label{font-weight:500;flex:1 1 0;min-width:0;display:flex;align-items:center;min-height:44px}  /* the robot, 29.10.2026: a 21 px label is too small for a finger */
.ui-field.is-check>:not(input):not(label){flex-basis:100%}
.ui-required{color:var(--danger)}
.ui-errors{border:1px solid var(--danger-line);background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4)}
.ui-errors a{color:inherit}
.ui-more{position:relative;border-top:0;margin-top:0;padding-top:0}  /* not the folding block of base.css: that drew an empty box above „Още“ (22.10.2026) */
.ui-more[open]>summary{margin-bottom:0}
.ui-more>summary{list-style:none}
.ui-more>summary::-webkit-details-marker{display:none}
.ui-more>summary::after{content:'▾';margin-left:var(--space-2)}
.ui-more-list{position:absolute;right:0;top:calc(100% + 4px);min-width:220px;max-width:calc(100vw - 16px);display:grid;padding:var(--space-1);border-radius:var(--radius-card);background:var(--menu-bg);border:1px solid var(--menu-line);box-shadow:var(--menu-shadow);z-index:var(--z-menu)}
.ui-more-list>:is(a,button,form>button){display:flex;justify-content:flex-start;width:100%;min-height:var(--control-h-sm);padding:var(--space-1) var(--space-3);border:0;border-radius:var(--radius-control);background:transparent;color:var(--text);font-weight:500;text-decoration:none}
.ui-more-list>:is(a,button):hover{background:var(--bg-subtle)}
.ui-tabs{display:flex;flex-wrap:wrap;gap:0 var(--space-1);border-bottom:1px solid var(--line);margin:0 0 var(--space-4);overflow-x:auto}
.ui-tabs a{flex:none;padding:var(--space-2) var(--space-3);border-bottom:2px solid transparent;color:var(--text-2);font-weight:600;text-decoration:none;white-space:nowrap}
.ui-tabs a[aria-current=page]{color:var(--text);border-bottom-color:var(--accent)}
.ui-saved{display:inline-flex;align-items:center;gap:var(--space-1);min-height:1.5em;color:var(--ok);font-weight:600}
.ui-table{width:100%;border-collapse:collapse;background:var(--bg-card)}
.ui-table th{text-align:left;font-size:var(--font-meta);color:var(--text-2);font-weight:600;background:var(--bg-subtle)}
.ui-table :is(th,td){padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
.ui-table td.ui-cut{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Print: black on white, whatever the theme ──────────────────────────────────────────────────────────────── */
@media print{
  html body{background:var(--print-paper);color:var(--print-ink)}
  html body :is(.erp-topbar,.erp-navigation,.erp-bottom-bar,.ds-toasts,.app-footer){display:none}
}

/* ── What a theme may widen (tokens.css: Ясна has 2 px lines, a 3 px focus, tags with a line) ──────────────── */
.card,.ds-card{border-width:var(--card-line-width)}
.ds-tag,.gg-status,.pill{box-shadow:inset 0 0 0 var(--tag-line-width) currentColor}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-width:var(--focus-width)}

/* ── „Вид“: the theme menu in the top bar and in „Профил → Вид“ (core/themes.py) ───────────────────────────── */
.erp-theme{position:relative}
.erp-theme>summary{list-style:none;cursor:pointer}
.erp-theme>summary::-webkit-details-marker{display:none}
.erp-theme-panel{position:absolute;right:0;top:calc(100% + 6px);width:min(320px,calc(100vw - 24px));display:grid;gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-card);background:var(--menu-bg);border:1px solid var(--menu-line);box-shadow:var(--menu-shadow);z-index:var(--z-menu)}
.erp-theme-panel h2{font-size:var(--font-body);margin:var(--space-1) var(--space-2)}
.theme-choices{display:grid;gap:var(--space-1);margin:0}
.theme-choice{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--control-h);padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--text);font-weight:600;text-align:left;justify-content:flex-start}
.theme-choice:hover{background:var(--bg-subtle);color:var(--text)}
.theme-choice[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.theme-preview{display:inline-flex;flex:none;gap:3px;padding:4px;border-radius:var(--radius-control);background:var(--bg-page);border:1px solid var(--line-field)}
.theme-preview>span{width:12px;height:18px;border-radius:3px}
.theme-preview>.p-card{background:var(--bg-card)}
.theme-preview>.p-accent{background:var(--accent)}
.theme-preview>.p-text{background:var(--text)}
.theme-preview>.p-side{background:var(--side-bg)}
@media(max-width:767px){.erp-theme-panel{position:fixed;left:12px;right:12px;top:60px;width:auto}}

/* ── Витрината (/design/) ──────────────────────────────────────────────────────────────────────────────────── */
.design-showcase{display:grid;gap:var(--space-5)}
.design-showcase>section{display:grid;gap:var(--space-3)}
.design-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.design-frame{border:1px dashed var(--line-field);border-radius:var(--radius-card);padding:var(--space-4);background:var(--bg-page)}
.design-frame.design-panel{max-width:calc(360px + 2 * var(--space-4));margin-top:var(--space-4)}
.design-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-2)}
.design-swatch{display:grid;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--bg-card);font-size:var(--font-meta);color:var(--text-2)}
.design-swatch>i{display:block;height:28px;border-radius:6px;border:1px solid var(--line)}
/* „Образец“ (owner, night queue 28/29.10.2026, item 1.4): the shared values, the 12 elements, the 5 page types at the width
   of a phone in the two themes of the system (iframes of /design/pages/…). Only the showcase uses these classes. */
.design-showcase{min-width:0;grid-template-columns:minmax(0,1fr)}
.design-showcase>section,.design-showcase>section>*,.design-showcase .design-row{min-width:0}
.design-toc{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0;padding:0;list-style:none;font-size:var(--type-meta)}
.design-toc a{color:var(--text-2)}
.design-toks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.design-tok{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-1) var(--space-2);padding:var(--space-2);
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-control);font-size:var(--type-meta);color:var(--text-2);min-width:0}
.design-tok>i{grid-row:span 2;display:block;width:32px;height:32px;box-sizing:border-box;border:1px solid var(--line-card);border-radius:6px;background:var(--bg-card)}
.design-tok>code{font-family:var(--font-mono);font-size:var(--type-code);color:var(--text);overflow-wrap:anywhere}
.design-tok.is-space>i{height:16px;background:var(--text-3);border:0;border-radius:0}
.design-tok.is-shadow>i{border:0}
.design-type{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);margin:0;padding:var(--space-2) 0;border-bottom:1px solid var(--line-row)}
.design-type>b{font-weight:700;color:var(--text);min-width:0;overflow-wrap:anywhere}
.design-type>span{font-size:var(--type-meta);color:var(--text-2)}
.design-type[data-tok="--type-code"]>b{font-family:var(--font-mono);font-weight:400}
.design-type[data-tok="--type-mcard-count"]>b{font-weight:800}
.design-el{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--bg-card);border:var(--card-line-width) solid var(--card-line);border-radius:var(--radius-card);min-width:0}
.design-el>h3{margin:0;font-size:var(--type-block)}
.design-el>.design-states{margin:0;font-size:var(--type-meta);color:var(--text-2)}
.design-el code{font-family:var(--font-mono);font-size:var(--type-code);overflow-wrap:anywhere}
.design-pages{display:grid;gap:var(--space-5)}
.design-page{display:grid;gap:var(--space-2);min-width:0}
.design-page>h3{margin:0;font-size:var(--type-block)}
.design-phones{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.design-phone{display:grid;gap:var(--space-1);font-size:var(--type-meta);color:var(--text-2)}
.design-phone>iframe{width:390px;max-width:calc(100vw - 2 * var(--space-5));height:720px;border:var(--card-line-width) solid var(--line-field);border-radius:var(--radius-card);background:var(--bg-card)}
.design-showcase .erp-bottom-bar.is-sample{display:grid;position:static;max-width:390px;min-height:var(--bottom-bar-h);padding:6px 4px;border:1px solid var(--line);border-radius:var(--radius-card)}
@media(max-width:767px){.design-phone>iframe{height:640px}.design-toks{grid-template-columns:minmax(0,1fr)}}
.design-tok[data-tok="--bg-page"]>i{background:var(--bg-page)}.design-tok[data-tok="--bg-zone"]>i{background:var(--bg-zone)}.design-tok[data-tok="--bg-card"]>i{background:var(--bg-card)}.design-tok[data-tok="--bg-field"]>i{background:var(--bg-field)}.design-tok[data-tok="--bg-subtle"]>i{background:var(--bg-subtle)}.design-tok[data-tok="--bg-row-alt"]>i{background:var(--bg-row-alt)}.design-tok[data-tok="--text"]>i{background:var(--text)}.design-tok[data-tok="--text-2"]>i{background:var(--text-2)}.design-tok[data-tok="--text-3"]>i{background:var(--text-3)}.design-tok[data-tok="--line"]>i{background:var(--line)}.design-tok[data-tok="--line-card"]>i{background:var(--line-card)}.design-tok[data-tok="--line-row"]>i{background:var(--line-row)}.design-tok[data-tok="--line-field"]>i{background:var(--line-field)}.design-tok[data-tok="--line-strong"]>i{background:var(--line-strong)}.design-tok[data-tok="--accent"]>i{background:var(--accent)}.design-tok[data-tok="--button-primary-bg"]>i{background:var(--button-primary-bg)}.design-tok[data-tok="--accent-ink"]>i{background:var(--accent-ink)}.design-tok[data-tok="--focus"]>i{background:var(--focus)}.design-tok[data-tok="--state-late-bg"]>i{background:var(--state-late-bg)}.design-tok[data-tok="--state-us-bg"]>i{background:var(--state-us-bg)}.design-tok[data-tok="--state-other-line"]>i{background:var(--state-other-line)}.design-tok[data-tok="--state-done-bg"]>i{background:var(--state-done-bg)}.design-tok[data-tok="--state-neutral-bg"]>i{background:var(--state-neutral-bg)}.design-tok[data-tok="--module-work"]>i{background:var(--module-work)}.design-tok[data-tok="--module-service"]>i{background:var(--module-service)}.design-tok[data-tok="--module-couriers"]>i{background:var(--module-couriers)}.design-tok[data-tok="--module-signals"]>i{background:var(--module-signals)}.design-tok[data-tok="--module-money"]>i{background:var(--module-money)}.design-tok[data-tok="--money-owes"]>i{background:var(--money-owes)}.design-tok[data-tok="--money-refund"]>i{background:var(--money-refund)}.design-tok[data-tok="--money-settled"]>i{background:var(--money-settled)}
.design-tok[data-tok="--space-1"]>i{width:var(--space-1)}.design-tok[data-tok="--space-2"]>i{width:var(--space-2)}.design-tok[data-tok="--space-3"]>i{width:var(--space-3)}.design-tok[data-tok="--space-4"]>i{width:var(--space-4)}.design-tok[data-tok="--space-5"]>i{width:var(--space-5)}.design-tok[data-tok="--space-6"]>i{width:var(--space-6)}.design-tok[data-tok="--gap-block"]>i{width:var(--gap-block)}.design-tok[data-tok="--gap-zone"]>i{width:var(--gap-zone)}
.design-tok[data-tok="--radius-control"]>i{border-radius:var(--radius-control)}.design-tok[data-tok="--radius-card"]>i{border-radius:var(--radius-card)}.design-tok[data-tok="--mcard-radius"]>i{border-radius:var(--mcard-radius)}.design-tok[data-tok="--info-radius"]>i{border-radius:var(--info-radius)}.design-tok[data-tok="--band-radius"]>i{border-radius:var(--band-radius)}.design-tok[data-tok="--radius-pill"]>i{border-radius:var(--radius-pill)}
.design-tok[data-tok="--shadow-1"]>i{box-shadow:var(--shadow-1)}.design-tok[data-tok="--card-shadow"]>i{box-shadow:var(--card-shadow)}.design-tok[data-tok="--button-primary-shadow"]>i{box-shadow:var(--button-primary-shadow)}.design-tok[data-tok="--shadow-2"]>i{box-shadow:var(--shadow-2)}
.design-type[data-tok="--type-page"]>b{font-size:var(--type-page);font-weight:var(--type-page-weight)}.design-type[data-tok="--type-zone"]>b{font-size:var(--type-zone);font-weight:var(--type-zone-weight)}.design-type[data-tok="--type-mcard-title"]>b{font-size:var(--type-mcard-title)}.design-type[data-tok="--type-mcard-count"]>b{font-size:var(--type-mcard-count)}.design-type[data-tok="--type-lead"]>b{font-size:var(--type-lead)}.design-type[data-tok="--type-block"]>b{font-size:var(--type-block);font-weight:var(--type-block-weight)}.design-type[data-tok="--type-text"]>b{font-size:var(--type-text);font-weight:var(--type-text-weight)}.design-type[data-tok="--type-mrow"]>b{font-size:var(--type-mrow)}.design-type[data-tok="--type-meta"]>b{font-size:var(--type-meta);font-weight:var(--type-meta-weight)}.design-type[data-tok="--type-code"]>b{font-size:var(--type-code)}
.sw--bg-page{background:var(--bg-page)}.sw--bg-card{background:var(--bg-card)}.sw--bg-field{background:var(--bg-field)}.sw--bg-raised{background:var(--bg-raised)}.sw--bg-subtle{background:var(--bg-subtle)}.sw--bg-muted{background:var(--bg-muted)}.sw--text{background:var(--text)}.sw--text-2{background:var(--text-2)}.sw--text-3{background:var(--text-3)}.sw--line{background:var(--line)}.sw--line-field{background:var(--line-field)}.sw--accent{background:var(--accent)}.sw--accent-soft{background:var(--accent-soft)}.sw--danger{background:var(--danger)}.sw--danger-bg{background:var(--danger-bg)}.sw--wait{background:var(--wait)}.sw--wait-bg{background:var(--wait-bg)}.sw--ok{background:var(--ok)}.sw--ok-bg{background:var(--ok-bg)}.sw--focus{background:var(--focus)}.sw--side-bg{background:var(--side-bg)}
.danger-solid,button.danger-solid{background:var(--button-danger-solid-bg);border-color:var(--button-danger-solid-bg)}

/* ── Цвят по модул (1.17): only the themes that set --mod-* (Топла, Мека синя) ─────────────────────────────── */
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .primary-nav a[data-module=service] .erp-icon,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-service .dash-block h3::before,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-money .dash-block h3::before{color:var(--mod-service)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .primary-nav a[data-module=work] .erp-icon,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-work .dash-block h3::before{color:var(--mod-work)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .primary-nav a[data-module=couriers] .erp-icon,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-couriers .dash-block h3::before{color:var(--mod-couriers)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .primary-nav a:is([data-module=stock],[data-module=pricing]) .erp-icon,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-stock .dash-block h3::before{color:var(--mod-stock)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .primary-nav a[data-module=admin] .erp-icon,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-admin .dash-block h3::before{color:var(--mod-admin)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-service .dash-block,:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-money .dash-block,:root:is([data-theme="warm"],[data-theme="soft-blue"]) body[data-module=service] :is(.card,.ds-card){box-shadow:inset var(--mod-bar) 0 0 var(--mod-service)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-work .dash-block,:root:is([data-theme="warm"],[data-theme="soft-blue"]) body[data-module=work] :is(.card,.ds-card){box-shadow:inset var(--mod-bar) 0 0 var(--mod-work)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-couriers .dash-block,:root:is([data-theme="warm"],[data-theme="soft-blue"]) body[data-module=couriers] :is(.card,.ds-card){box-shadow:inset var(--mod-bar) 0 0 var(--mod-couriers)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-stock .dash-block,:root:is([data-theme="warm"],[data-theme="soft-blue"]) body[data-module=stock] :is(.card,.ds-card){box-shadow:inset var(--mod-bar) 0 0 var(--mod-stock)}
:root:is([data-theme="warm"],[data-theme="soft-blue"]) .zone-admin .dash-block,:root:is([data-theme="warm"],[data-theme="soft-blue"]) body[data-module=admin] :is(.card,.ds-card){box-shadow:inset var(--mod-bar) 0 0 var(--mod-admin)}
.sw--mod-service{background:var(--mod-service,var(--text-3))}.sw--mod-work{background:var(--mod-work,var(--text-3))}.sw--mod-couriers{background:var(--mod-couriers,var(--text-3))}.sw--mod-stock{background:var(--mod-stock,var(--text-3))}.sw--mod-admin{background:var(--mod-admin,var(--text-3))}

/* ── Визуален пакет (собственикът, 22.10.2026; docs/dizain.md) — one rule for every screen ─────────────────── */
/* т. 4: the main button stands out — a shadow and a heavier word: `{% button %}` (class „button“) and a plain form
   button without a class; the others stay flat. Zero specificity, so any part that sets its own look keeps it; a
   button with its own class (the ✓ of a task, the calendar, the menus) is not a main button. */
:where(button:not([class]),input[type=submit]:not([class]),.button:not(.secondary,.quiet,.danger,.danger-solid,.link,.small)){box-shadow:var(--button-primary-shadow);font-weight:var(--button-primary-weight)}
/* т. 4: more air between blocks */
.dash-grid{gap:var(--gap-block)}
.dash-zone{margin-bottom:var(--gap-zone)}
.dash-zone .dash-grid{margin-bottom:var(--gap-block)}
.dash-strip{gap:var(--space-4);margin-bottom:var(--gap-block)}
:where(.ds-card,.my-section)+:where(.ds-card,.my-section){margin-top:var(--gap-block)}
/* т. 2: the zone has its own background in every theme (light: under the page; dark: a sunken well). On a phone the
   zone stays a title only — the width goes to the cards (1.9.2). */
@media(min-width:768px){
.dash-zone{padding:20px 20px 4px}
.zone-work,.zone-service,.zone-admin,.zone-money,.zone-couriers{background:var(--zone-bg)}
}
/* т. 5: the status tags — „Просрочено“, „Спорно“ red; „Днес“, „Предложение“ amber; „Готово“ green; a thin line too */
.ds-tag.red{background:var(--tag-red-bg);color:var(--tag-red-text);box-shadow:inset 0 0 0 1px var(--tag-red-line)}
.ds-tag:is(.orange,.amber){background:var(--tag-orange-bg);color:var(--tag-orange-text);box-shadow:inset 0 0 0 1px var(--tag-orange-line)}
.ds-tag.green{background:var(--tag-green-bg);color:var(--tag-green-text);box-shadow:inset 0 0 0 1px var(--tag-green-line)}

/* ── Кръг 2 (собственикът, 22.10.2026; docs/dizain.md, „Кръг 2“) ─────────────────────────────────────────────── */
/* т. 1: taller rows */
.ds-row{padding-top:var(--row-pad-y);padding-bottom:var(--row-pad-y)}
/* т. 2: every card has an edge and a soft shadow; the zones stay under them */
.ds-card,.card,.dash-block,.my-section,.work-list,.fast-list{border-color:var(--card-line);box-shadow:var(--card-shadow)}
/* т. 3: the zone titles bigger with a bigger icon; the counters one dark round badge (neutral — red only on a tag) */
.dash-zone-head{gap:var(--space-3);margin-bottom:var(--space-4)}
.dash-zone-icon{width:var(--zone-icon-box);height:var(--zone-icon-box);border-radius:10px}
.dash-zone-icon .erp-icon{width:22px;height:22px}
.ds-count,.ds-count:is(.red,.orange){min-width:26px;height:26px;padding:0 8px;border-radius:var(--radius-pill);background:var(--count-bg);color:var(--count-text);font-weight:700}
.ds-head-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--row-icon-box);height:var(--row-icon-box);border-radius:8px;background:var(--bg-subtle);color:var(--text-2)}
.ds-head-icon .erp-icon{width:var(--row-icon-size);height:var(--row-icon-size)}
.dash-block h3::before{width:20px;height:20px}
/* т. 5: one shape for every state label — a pill with a line; the colours by meaning (red, amber, green, neutral) */
.ds-tag,.gg-status,.pill,.erp-state{border-radius:var(--radius-pill);padding:3px 10px;font-size:var(--font-meta);font-weight:600;line-height:1.4;white-space:nowrap}
.ds-tag:not(.red,.orange,.amber,.green,.quiet,.brand){background:var(--bg-muted);color:var(--text);box-shadow:inset 0 0 0 1px var(--card-line)}
/* т. 6: the main button — bigger (larger word, wider) and fuller (--accent-fill); one per screen stays the rule */
.button:not(.secondary,.quiet,.danger,.danger-solid,.link,.small),button:not([class]),input[type=submit]:not([class]){padding-inline:22px;font-size:var(--type-text)}

/* ── „Задачи“ (собственикът одобри крайната версия с 4 поправки, 22.10.2026; docs/dizain.md, „Задачи“) ───────────── */
body[data-module=work] .my-section>h2{font-size:var(--type-zone);font-weight:700;padding:16px 20px;background:var(--bg-zone);border-radius:16px;margin-bottom:var(--space-3)}
body[data-module=work] .my-section>h2 .ds-head-icon{width:44px;height:44px;border-radius:12px;background:var(--bg-inverse);color:var(--on-inverse)}
body[data-module=work] .my-section>h2 .ds-head-icon .erp-icon{width:24px;height:24px}
body[data-module=work] .my-section>h2 .ds-count{min-width:34px;height:34px;font-size:var(--type-text)}
body[data-module=work] .my-row,body[data-module=work] .my-section>.my-row:nth-child(even of .my-row){margin:0 0 14px;border:1px solid var(--card-line);border-left:8px solid var(--line-field);border-radius:16px;background:var(--bg-card);box-shadow:var(--card-shadow)}
/* fix 2: overdue — a red edge and a barely-there red tint; today — amber the same way (not the whole card coloured) */
body[data-module=work] .my-row.is-overdue{border-left-color:var(--danger);background:var(--tint-red)}
body[data-module=work] .my-row:not(.is-overdue):has(.my-due.orange){border-left-color:var(--wait);background:var(--tint-amber)}
body[data-module=work] .my-row:hover{box-shadow:var(--card-shadow),inset 0 0 0 2px var(--accent)}
body[data-module=work] .my-check{border-width:3px;border-radius:12px}
body[data-module=work] .my-row .ds-tag{padding:6px 14px;font-weight:700}
body[data-module=work] .my-meta{font-size:var(--type-text)}
/* fix 1: next to a tick the kind icon is only the sign — no frame, so it never looks like a second checkbox */
:is(.my-done,.ds-check,input[type=checkbox])+.ds-row-icon,.my-row .ds-row-icon{width:auto;height:auto;background:none;border-radius:0;color:var(--text-2)}
body[data-module=work] .my-row .ds-row-icon .erp-icon{width:22px;height:22px;flex-basis:22px}
/* fix 4: an empty section is one thin line — its title and the „Няма …“ text side by side, no band, no counter */
:is(.ds-card,.dash-block,.my-section):has(>.ds-empty):not(:has(.ds-row,.my-row,tbody tr)){display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-4);min-height:0;align-self:start;background:transparent;box-shadow:none;border:1px solid var(--card-line)}
:is(.ds-card,.dash-block,.my-section):has(>.ds-empty):not(:has(.ds-row,.my-row,tbody tr))>:is(h2,.ds-section-head),body[data-module=work] .my-section:has(>.ds-empty):not(:has(.my-row))>h2{margin:0;padding:0;background:transparent;font-size:var(--type-text);font-weight:600;min-height:0;border:0}
:is(.ds-card,.dash-block,.my-section):has(>.ds-empty):not(:has(.ds-row,.my-row,tbody tr)) :is(.ds-count,.ds-head-icon,.ds-more,h2 small){display:none}
:is(.ds-card,.dash-block,.my-section):has(>.ds-empty):not(:has(.ds-row,.my-row,tbody tr)) h3{font-size:var(--type-text)}
:is(.ds-card,.dash-block,.my-section):has(>.ds-empty):not(:has(.ds-row,.my-row,tbody tr))>.ds-empty{padding:0}
/* 1.37.1 (owner, 23.10.2026): blocks side by side in a dashboard zone („Чака мен“ and „Накратко“) start on one line,
   are equally high and have the same space inside — empty or not; the grid's gap is the only space between them */
.dash-zone .dash-grid>.dash-block.ds-card{margin-top:0;align-self:stretch}
.dash-zone .dash-grid>.dash-block.ds-card:has(>.ds-empty){align-content:flex-start;align-items:stretch;padding:16px}
@media(max-width:767px){.dash-zone .dash-grid>.dash-block.ds-card:has(>.ds-empty){padding:12px}}
/* fix 3: „Сутрешно резюме“ — the lines with nothing waiting are one quiet line */
.ds-row.is-quiet .ds-row-title{font-weight:400;color:var(--text-2)}
.ds-list>.ds-row.is-quiet{background:transparent}

/* ── Вид A (собственикът, 24.10.2026; docs/dizain.md, „Вид A“; core/templatetags/ui.py) ─────────────────────────────── */
/* the content never goes under the sticky top bar when a link or a fold brings it into view */
:root:has(.erp-topbar){scroll-padding-top:calc(var(--topbar-h) + var(--space-4))}
/* size="large": the one big button of a form as questions (+ Ново); a button beside it is large too (one row, one height) */
.button.large{min-height:var(--band-button-h);padding:0 32px;font-size:var(--type-lead);border-radius:10px}
@media(max-width:767px){.button.large:not(.quiet,.secondary){flex:1 1 100%}}
.button.has-icon{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
.button.has-icon .erp-icon{width:20px;height:20px;flex:0 0 20px;stroke-width:2.1}
/* the status: a pill with an icon — green done, amber waiting, red late, neutral otherwise */
.ui-status{display:inline-flex;align-items:center;gap:var(--space-2);padding:7px 18px 7px 12px;border-radius:var(--radius-pill);font-size:var(--type-status);font-weight:700;line-height:1.3;white-space:nowrap;background:var(--bg-muted);color:var(--text);box-shadow:inset 0 0 0 1px var(--card-line)}
.ui-status .erp-icon{width:20px;height:20px;flex:0 0 20px;stroke-width:2.4}
.ui-status.is-ok{background:var(--tag-green-bg);color:var(--tag-green-text);box-shadow:inset 0 0 0 1px var(--tag-green-line)}
.ui-status.is-wait{background:var(--tag-orange-bg);color:var(--tag-orange-text);box-shadow:inset 0 0 0 1px var(--tag-orange-line)}
.ui-status.is-late{background:var(--tag-red-bg);color:var(--tag-red-text);box-shadow:inset 0 0 0 1px var(--tag-red-line)}
/* the band: status on top, „Какво следва“ with a big title and one big button, the path as bars under it */
.ui-band{background:var(--bg-card);border:2px solid var(--card-line);border-radius:var(--band-radius);box-shadow:var(--card-shadow);margin:0 0 var(--gap-block);min-width:0}
.ui-band.is-ok{border-color:var(--ok-line)}
.ui-band.is-wait{border-color:var(--wait-line)}
.ui-band.is-late{border-color:var(--danger-line)}
.ui-band-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--band-pad);background:var(--bg-subtle);border-bottom:2px solid var(--card-line);border-radius:calc(var(--band-radius) - 2px) calc(var(--band-radius) - 2px) 0 0}
.ui-band.is-ok .ui-band-top{background:var(--ok-bg);border-bottom-color:var(--ok-line)}
.ui-band.is-wait .ui-band-top{background:var(--wait-bg);border-bottom-color:var(--wait-line)}
.ui-band.is-late .ui-band-top{background:var(--danger-bg);border-bottom-color:var(--danger-line)}
.ui-band-body{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);padding:var(--band-pad) var(--band-pad) var(--space-5)}
.ui-band-text{flex:1 1 420px;min-width:0}
.ui-band-eyebrow{margin:0 0 6px;font-size:var(--type-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}  /* a label, not an action: no accent (owner, 24.10.2026) */
.ui-band-title{margin:0;font-size:var(--type-hero);line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.ui-band-lines{display:flex;flex-wrap:wrap;gap:10px var(--space-5);margin:14px 0 0;padding:0;list-style:none;font-size:var(--type-block);color:var(--text-2)}
.ui-band-lines:empty{display:none}
.ui-band-lines>li{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.ui-band-lines>li.is-late{color:var(--danger);font-weight:600}
.ui-band-action{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
/* a form with fields is not a button: it goes under the text, the whole width */
.ui-band-action:has(input:not([type=hidden]),select,textarea,fieldset,details){flex:1 1 100%;display:block}
.ui-band-after{flex:1 1 100%;min-width:0}
.ui-band-after:not(:has(*)){display:none}
/* the one big button; a button beside it in the same row is as high (one row, one height) */
.ui-band-action :is(.button,button,summary.button):not(.quiet,.link,.small){min-height:var(--band-button-h)}
.ui-band-action :is(.button,button,summary.button):not(.secondary,.quiet,.danger,.danger-solid,.link,.small){padding:0 36px;font-size:var(--type-lead);border-radius:10px}
/* the path: one bar per step; under the bars „Стъпка N от M: …“ */
.ui-steps{padding:0 var(--band-pad) var(--space-5)}
.ui-steps-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:0;padding:0;list-style:none}
.ui-steps-bars>li{display:grid;align-content:start;gap:var(--space-2);font-size:var(--type-meta);font-weight:600;color:var(--text-3);min-width:0}
.ui-steps-bars>li::before{content:"";height:8px;border-radius:4px;background:var(--bg-muted)}
.ui-steps-bars>li.is-done{color:var(--text-2)}
.ui-steps-bars>li.is-done::before{background:var(--text-2)}
/* the step now: the strongest text colour of the theme, a thicker solid bar and a bold name — the accent stays for actions (owner, 24.10.2026) */
.ui-steps-bars>li.is-now{color:var(--text);font-weight:800}
.ui-steps-bars>li.is-now::before{height:12px;margin-top:-2px;border-radius:6px;background:var(--text)}
.ui-steps-bars>li.is-skipped::before{background:repeating-linear-gradient(90deg,var(--line-field) 0 6px,transparent 6px 11px)}
.ui-steps-now{margin:var(--space-3) 0 0;font-size:var(--type-text);color:var(--text-2)}
.ui-steps-now strong{color:var(--text)}
.ui-steps-detail{margin:var(--space-1) 0 0;font-size:var(--type-meta);color:var(--text-2)}
/* a row of short separate items (no „·“ between them): a chip for the kind, the date, the number */
.ui-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);margin:0 0 var(--space-3);font-size:var(--type-meta);color:var(--text-2)}
.ui-meta a{color:var(--text)}
/* a short grey word after the name of a folded part (instead of „· …“) */
:where(summary,h2)>small{margin-left:var(--space-2);font-size:var(--type-meta);font-weight:400;color:var(--text-2)}
summary .ui-chip{margin-left:var(--space-1)}
/* the cards: an icon, a small title, one large value */
.ui-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 var(--gap-block)}
.ui-info{display:flex;flex-direction:column;min-width:0;padding:22px var(--info-pad) var(--info-pad);background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--info-radius);box-shadow:var(--card-shadow)}
.ui-info.is-wide{grid-column:1/-1}
.ui-info-head h2>label{font:inherit;color:inherit;margin:0;cursor:pointer}
.ui-info-head{display:flex;align-items:center;gap:var(--space-3);margin:0 0 14px}
.ui-info-icon{display:grid;place-items:center;flex:none;width:var(--info-icon-box);height:var(--info-icon-box);border-radius:12px;background:var(--bg-inverse);color:var(--on-inverse)}
.ui-info-icon .erp-icon{width:22px;height:22px;flex-basis:22px}
.ui-info-head h2{margin:0;font-size:var(--type-block);font-weight:700;letter-spacing:.02em;color:var(--text-2)}
.ui-info-value{margin:0;font-size:var(--type-value);line-height:1.15;font-weight:700;color:var(--text);overflow-wrap:break-word}
.ui-info-value>.ui-info-label{font-family:var(--font-sans);font-size:var(--type-block);font-weight:600;color:var(--text-2);letter-spacing:0}
.ui-info.is-owes .ui-info-value>.ui-info-label{font-size:inherit;font-weight:inherit}
.ui-info-value.is-mono{font-family:var(--font-mono);font-size:var(--type-shelf);letter-spacing:.02em}
.ui-info-note{margin:6px 0 0;color:var(--text-2)}
.ui-info-note.is-strong{margin-top:var(--space-2);font-size:var(--type-lead);font-weight:600;color:var(--text)}
.ui-info-note a{color:inherit}
.ui-info-code{margin:var(--space-2) 0 0;font-family:var(--font-mono);font-size:var(--type-meta);color:var(--text-2);overflow-wrap:anywhere}
.ui-info-foot{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:18px}
.ui-info:is(.is-owes,.is-late){background:var(--tint-red);border-color:var(--danger-line);box-shadow:inset 8px 0 0 var(--danger),var(--card-shadow)}
.ui-info:is(.is-owes,.is-late) .ui-info-icon{background:var(--danger);color:var(--on-danger)}
.ui-info.is-owes .ui-info-value{color:var(--money-owes);font-size:var(--type-money)}
.ui-info.is-late :is(.ui-info-value,.ui-info-note.is-strong){color:var(--danger)}
.ui-info.is-ok{background:var(--ok-bg);border-color:var(--ok-line);box-shadow:inset 8px 0 0 var(--ok),var(--card-shadow)}
.ui-info.is-ok .ui-info-icon{background:var(--ok);color:var(--ok-bg)}
.ui-info.is-ok .ui-info-value{color:var(--ok)}
.ui-info.is-wait{background:var(--tint-amber);border-color:var(--wait-line);box-shadow:inset 8px 0 0 var(--wait),var(--card-shadow)}
.ui-info.is-wait .ui-info-icon{background:var(--wait);color:var(--wait-bg)}
/* the colour of a sum (owner, 25.10.2026): refund — amber, we owe the customer; settled — green; the sum large like „Дължи“ */
.ui-info.is-refund{background:var(--money-refund-bg);border-color:var(--money-refund-line);box-shadow:inset 8px 0 0 var(--money-refund),var(--card-shadow)}
.ui-info.is-refund .ui-info-icon{background:var(--money-refund);color:var(--money-refund-bg)}
.ui-info.is-settled{background:var(--money-settled-bg);border-color:var(--money-settled-line);box-shadow:inset 8px 0 0 var(--money-settled),var(--card-shadow)}
.ui-info.is-settled .ui-info-icon{background:var(--money-settled);color:var(--money-settled-bg)}
.ui-info.is-refund .ui-info-value{color:var(--money-refund);font-size:var(--type-money)}
.ui-info.is-settled .ui-info-value{color:var(--money-settled);font-size:var(--type-money)}
.ui-info:is(.is-refund,.is-settled) .ui-info-value>.ui-info-label{font-size:inherit;font-weight:inherit}
.ui-info:is(.is-owes,.is-late,.is-ok,.is-wait,.is-refund,.is-settled) .ui-info-value>.ui-info-label{color:inherit}
/* chips: the parts of the kit — neutral, never a status colour */
.ui-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-4)}
.ui-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-pill);background:var(--tag-bg);color:var(--text);box-shadow:inset 0 0 0 1px var(--card-line);font-size:var(--type-meta);font-weight:600;line-height:1.5;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ui-chip .erp-icon{width:15px;height:15px;flex-basis:15px;color:var(--text-2)}
.ui-choices{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ui-choice{position:relative;display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--bg-card);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-field);font-weight:600;cursor:pointer;margin:0}
.ui-choice>input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ui-choice:hover{background:var(--bg-subtle)}
.ui-choice:has(input:checked){background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.ui-choice:has(input:focus-visible){outline:var(--focus-width) solid var(--focus);outline-offset:2px}
/* the compact band: a narrow column (the intake's summary on the right) — smaller title, bars without names */
.ui-band.is-compact{margin:0;border-radius:var(--info-radius)}
.ui-band.is-compact .ui-band-top{padding:var(--space-3) var(--space-4)}
.ui-band.is-compact .ui-status{font-size:var(--type-text);padding:4px 14px}
.ui-band.is-compact .ui-band-body{padding:var(--space-4) var(--space-4) var(--space-3)}
.ui-band.is-compact .ui-band-text{flex-basis:auto}
.ui-band.is-compact .ui-band-title{font-size:var(--type-zone)}
.ui-band.is-compact .ui-steps{padding:0 var(--space-4) var(--space-3)}
.ui-band.is-compact .ui-steps-bars>li{font-size:0;gap:0}
.ui-band.is-compact .ui-steps-now{font-size:var(--type-meta)}
.ui-band.is-compact>:is(.button,button){margin:0 var(--space-4) var(--space-4);width:calc(100% - 2 * var(--space-4))}
/* the bell: an icon by kind; unread = a dark dot and a light tint (red is only for overdue) */
.erp-bell-item{align-items:flex-start}
.erp-bell-item.unread{background:var(--bg-subtle)}
.erp-bell-item.unread .erp-bell-title::before{background:var(--bg-inverse)}
.ui-info-icon.is-small{width:36px;height:36px;border-radius:10px}
.ui-info-icon.is-small .erp-icon{width:18px;height:18px;flex-basis:18px}
/* „Още“: one folded line with the counters; inside, the folded parts one under the other */
.ui-more-line{margin:0 0 var(--gap-block);background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--info-radius);box-shadow:var(--card-shadow);min-width:0}
:where(.ds-card,.card,.ui-info-grid,section)+.ui-more-line{margin-top:var(--gap-block)}
.ui-more-line>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-4);min-height:64px;padding:var(--space-4) var(--info-pad);cursor:pointer;list-style:none}
.ui-more-line>summary::-webkit-details-marker{display:none}
.ui-more-line-title{font-size:var(--type-zone);font-weight:700;color:var(--text)}
.ui-more-counts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);min-width:0}
.ui-more-count{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--type-text);font-weight:600;white-space:nowrap}
.ui-more-count>b{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:var(--radius-pill);background:var(--count-bg);color:var(--count-text);font-size:var(--type-meta);font-weight:700}
.ui-more-chev{width:24px;height:24px;flex-basis:24px;color:var(--text-2)}
.ui-more-line[open]>summary .ui-more-chev{transform:rotate(180deg)}
.ui-more-line[open]>summary{border-bottom:1px solid var(--line-row)}
.ui-more-line-body{display:grid;padding:var(--space-2) var(--space-4) var(--space-3)}
.ui-more-line-body>:is(details,section,.card,.ds-card){margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.ui-more-line-body>:is(details,section,.card,.ds-card)+:is(details,section,.card,.ds-card){border-top:1px solid var(--line-row)}
/* each folded part is one line: the name, a short grey word, the arrow on the right */
.ui-more-line-body>details>summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);min-height:56px;padding:var(--space-3) var(--space-2);margin:0;font-size:var(--type-block);font-weight:600;color:var(--text);cursor:pointer;list-style:none}
.ui-more-line-body>details>summary::-webkit-details-marker{display:none}
.ui-more-line-body>details>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg) translate(-2px,-2px)}
.ui-more-line-body>details[open]>summary::after{transform:rotate(225deg)}
.ui-more-line-body>details>summary small{font-size:var(--type-meta);font-weight:400;color:var(--text-2)}
.ui-more-line-body>details[open]{padding-bottom:var(--space-4)}
.ui-more-line-body>details>:not(summary){margin-inline:var(--space-2)}
.ui-more-line-body .more-actions-list{border:0;box-shadow:none;background:transparent;padding:0}
@media(max-width:767px){
  .ui-band-top{padding:var(--space-3) var(--band-pad)}
  /* one column, one line: a wrapping column grows as wide as its widest button and the band's form sticks out (the purchase form, 24.10.2026) */
  .ui-band-body{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:20px;padding:18px var(--band-pad) var(--band-pad)}
  .ui-band-text{flex:none}
  .ui-band-lines{display:grid;gap:var(--space-2);font-size:var(--type-text)}
  .ui-band-action{display:block}
  .ui-band-action :is(.button,button,summary.button):not(.secondary,.quiet,.danger,.danger-solid,.link,.small){width:100%;padding-inline:var(--space-4)}
  .ui-steps{padding:0 var(--band-pad) var(--band-pad)}
  .ui-steps-bars{gap:4px}
  .ui-steps-bars>li{font-size:0;gap:0}
  .ui-steps-bars>li>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ui-steps-now{font-size:var(--type-meta)}
  /* Пари and Място side by side (owner, 24.10.2026, from B): the screen is shorter */
  .ui-info-grid{gap:var(--space-3)}
  .ui-info{grid-column:1/-1;padding:18px var(--info-pad) 20px}
  .ui-info.is-pair{grid-column:auto;padding:16px}
  .ui-info.is-pair .ui-info-head{gap:10px}
  .ui-info.is-pair .ui-info-icon{width:40px;height:40px}
  .ui-info.is-pair .ui-info-head h2{font-size:var(--type-text)}
  .ui-info.is-pair .ui-info-value{font-size:var(--type-zone)}
  .ui-info.is-pair:is(.is-owes,.is-refund,.is-settled) .ui-info-value{font-size:var(--type-value)}
  .ui-info.is-pair .ui-info-value>.ui-info-label{display:block;margin:0 0 2px;font-size:var(--type-block);font-weight:700}
  .ui-info.is-pair .ui-info-value.is-mono{font-size:var(--type-money)}
  .ui-info:is(.is-owes,.is-late){box-shadow:inset 6px 0 0 var(--danger),var(--card-shadow)}
  .ui-info.is-ok{box-shadow:inset 6px 0 0 var(--ok),var(--card-shadow)}
  .ui-info.is-refund{box-shadow:inset 6px 0 0 var(--money-refund),var(--card-shadow)}
  .ui-info.is-settled{box-shadow:inset 6px 0 0 var(--money-settled),var(--card-shadow)}
  .ui-info-foot>:is(.button,button){width:100%}
  .ui-more-line>summary{padding:var(--space-4);grid-template-columns:minmax(0,1fr) auto}
  .ui-more-line>summary>.ui-more-counts{grid-column:1/-1;grid-row:2}  /* the robot, 29.10.2026: at 360 px the counters went past the screen */
  .ui-more-line-body{padding:var(--space-1) var(--space-3) var(--space-2)}
}
/* ── The compact list (owner, 25.10.2026; docs/dizain.md, „Компактен списък“; core/templatetags/ui.py) ─────────────────
   One line per row on a computer, the columns lined up; two lines on a phone. Counters that are filters, one search,
   „Филтри“ for the rest. Built for long lists: no icon per row, plain cells. */
.ui-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-3);margin:0 0 var(--space-3)}
.ui-tile{display:grid;align-content:center;gap:0;min-height:52px;padding:var(--space-1) var(--space-4);border-radius:var(--radius-card);background:var(--bg-card);border:1px solid var(--card-line);box-shadow:var(--card-shadow);color:var(--text);text-decoration:none;min-width:0}
.ui-tile:hover{background:var(--bg-row-hover);color:var(--text)}
.ui-tile-label{font-size:var(--type-meta);font-weight:600;color:var(--text-2)}
.ui-tile-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
.ui-tile-count{font-size:var(--tile-count);line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums}
.ui-tile-sum{font-size:var(--type-text);font-weight:700;font-variant-numeric:tabular-nums}
/* owner, 25.10.2026: „По-малко червено: червено само за просроченото (чертата вляво и статусът). Заглавията на групите и
   числата до тях – тъмни, не червени.“ — a counter is always dark, „Иска действие“ too (is-late is only a mark) */
.ui-tile[aria-current]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent),var(--card-shadow)}
/* one search field and „Филтри“; the panel under them, the whole width */
.ui-find{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-2);margin:0 0 var(--space-3)}
.ui-search{position:relative;flex:1 1 260px;display:flex;align-items:stretch;min-width:0;margin:0;font-weight:400}
.ui-search>.erp-icon{position:absolute;left:var(--space-3);top:50%;width:18px;height:18px;margin-top:-9px;color:var(--text-2);pointer-events:none}  /* a sign inside the field, not content */
.ui-search>input{flex:1 1 auto;min-width:0;width:100%;min-height:var(--control-h);margin:0;padding:0 var(--space-3) 0 calc(var(--space-3) + 26px);font:inherit}
.ui-filters-toggle{display:inline-flex;align-items:center;gap:var(--space-2)}
.ui-filters-toggle .erp-icon{width:18px;height:18px}
.ui-filters-toggle>b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--count-bg);color:var(--count-text);font-size:var(--type-meta);font-weight:700}
.ui-filters-toggle[aria-expanded="true"]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.ui-filters{flex:1 1 100%;padding:var(--space-4);border:1px solid var(--card-line);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--card-shadow);min-width:0}
.ui-filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3) var(--space-4);align-items:start}
.ui-filters-grid .ui-field{margin:0;max-width:none}
.ui-field-label{font-weight:600;color:var(--text)}
.ui-filters-grid .ui-field.is-check{align-self:center;padding-top:var(--space-5)}
.ui-filters-grid>*{min-width:0;margin:0}
.ui-filters-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ui-nojs-only{display:none}
@media (scripting:none){.ui-nojs-only{display:inline-flex}.ui-filters-toggle{display:none}}
/* a list page (.ui-listpage around the counters, the search and the list): on a phone the search comes first */
.ui-listpage{display:flex;flex-direction:column}
.ui-listpage>.pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:0 0 var(--gap-block);font-size:var(--type-meta);color:var(--text-2)}
@media(max-width:767px){.ui-listpage>.ui-find{order:-1}}
/* the list: one table, so the columns line up; a group's line („Иска действие 5“) inside it */
.ui-list{background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--card-shadow);overflow:hidden;overflow-x:auto;margin:0 0 var(--space-3)}
.ui-lines{width:100%;border-collapse:collapse;margin:0}
.ui-lines :is(th,td){padding:var(--line-pad-y) var(--space-3);text-align:left;vertical-align:middle;white-space:nowrap;border:0;border-bottom:1px solid var(--line-row);text-transform:none;letter-spacing:normal}
.ui-lines thead th{padding-top:var(--space-1);padding-bottom:var(--space-1);font-size:var(--type-meta);font-weight:600;color:var(--text-2);background:var(--bg-subtle)}
.ui-lines td{height:var(--line-h);font-size:var(--type-row);line-height:1.45}
.ui-lines tbody tr.ui-group{background:var(--bg-card);box-shadow:none}
.ui-group>th{padding:var(--space-2) var(--space-3) var(--space-1);font-size:var(--type-text);font-weight:700;color:var(--text);background:var(--bg-card)}
.ui-group>th>b{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:var(--space-2);padding:0 7px;border-radius:var(--radius-pill);background:var(--count-bg);color:var(--count-text);font-size:var(--type-meta);font-weight:700}
.ui-group.is-more>th{padding-top:var(--space-1);padding-bottom:var(--space-2);font-size:var(--type-meta);font-weight:600}
.ui-group.is-more>th>a{color:var(--text-2)}
.ui-line.is-late>td:first-child{box-shadow:inset 4px 0 0 var(--danger)}
/* owner, 25.10.2026: „Името (задача, уред, клиент, продукт) никога не се реже.“ — it wraps; the column takes the room left */
.ui-lines .ui-c-main{width:100%;min-width:12em;white-space:normal;overflow-wrap:break-word}
.ui-line-title{font-weight:600;color:var(--text);text-decoration:none}
a.ui-line-title:hover{text-decoration:underline;color:var(--text)}
.ui-line-sub{margin-left:var(--space-1);font-size:var(--type-meta);color:var(--text-2)}
.ui-lines .ui-c-sub{display:none}
.ui-lines .ui-c-num{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ui-lines .ui-c-code{width:1%;padding-left:var(--space-2);padding-right:var(--space-2);text-align:right;font-family:var(--font-mono);font-size:var(--type-meta);letter-spacing:-.02em;color:var(--text-2)}  /* a narrower number column: room for the name */
/* „Следващо действие“ and the like: up to 2 lines, then „…“ (the full words on hover) — never cut on the first line */
.ui-lines .ui-c-text.is-wrap{white-space:normal;width:14em;min-width:8em;max-width:15em}
.ui-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3}
.ui-st-short{display:none}
.ui-lines .ui-c-act{text-align:right;padding-left:0}
.ui-c-status .ds-tag{padding:1px 10px;font-size:var(--type-meta)}
.ui-c-act :is(.button,button){min-height:var(--line-button-h);padding:0 var(--space-3);font-size:var(--type-meta);border-radius:var(--radius-control);box-shadow:none}
.ui-c-act .erp-icon{width:15px;height:15px}
/* the courier's label: its logo on a white tile and its name, in its brand colour — the brand colour lives only here */
.ui-courier{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 3px;border-radius:6px;font-size:var(--type-meta);font-weight:700;line-height:1;white-space:nowrap;background:var(--bg-subtle);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-row)}
.ui-courier-logo{width:18px;height:18px;padding:1px;border-radius:4px;background:var(--logo-tile);flex:0 0 auto}
.ui-courier.is-speedy{background:var(--courier-speedy-bg);color:var(--courier-speedy-text);box-shadow:inset 0 0 0 1px var(--courier-speedy-line)}
.ui-courier.is-econt{background:var(--courier-econt-bg);color:var(--courier-econt-text);box-shadow:inset 0 0 0 1px var(--courier-econt-line)}
.ui-courier.is-boxnow{background:var(--courier-boxnow-bg);color:var(--courier-boxnow-text);box-shadow:inset 0 0 0 1px var(--courier-boxnow-line)}
.ui-courier.is-interlogistica{background:var(--courier-interlogistica-bg);color:var(--courier-interlogistica-text);box-shadow:inset 0 0 0 1px var(--courier-interlogistica-line)}
@media(max-width:767px){
  /* owner, 25.10.2026: „Телефон: броячите – един тесен ред, за да започне списъкът по-високо.“ — one row, sideways if needed */
  .ui-tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--space-2);margin:0 0 var(--space-2);padding:0 0 2px;scrollbar-width:none}
  /* Проверки 08.11.2026: the row fades at the right edge, so it shows there is more to the side; the last tile can scroll clear of it */
  .ui-tiles{padding-inline-end:var(--space-6);mask-image:linear-gradient(to right,var(--text) calc(100% - var(--space-6)),transparent)}
  .ui-tile{flex:0 0 auto;display:flex;align-items:baseline;gap:var(--space-2);min-height:0;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);box-shadow:none}
  .ui-tile-label{white-space:nowrap}
  .ui-tile-line{flex-wrap:nowrap;gap:var(--space-2)}
  .ui-tile-count{font-size:var(--type-text);line-height:1.3}
  .ui-tile-sum{font-size:var(--type-meta);white-space:nowrap}
  .ui-search{flex:1 1 0}
  .ui-filters{padding:var(--space-3)}
  .ui-filters-grid{grid-template-columns:minmax(0,1fr)}
  /* owner, 25.10.2026: „Телефон: името цяло на първия ред, статусът и останалото на втория.“ — line 1 the name alone
     (it wraps, never „…“); line 2 the label (courier, step, kind), the city, the status, the short cells and the button */
  .ui-lines,.ui-lines tbody{display:block}
  .ui-lines thead{display:none}
  .ui-lines tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line-row)}
  .ui-lines :is(th,td){display:block;height:auto;padding:0;border:0;background:transparent}
  .ui-lines .ui-c-main{order:1;flex:1 1 100%;width:auto;min-width:0}
  .ui-lines .ui-c-label{order:2}
  .ui-c-main .ui-line-sub{display:none}
  .ui-lines .ui-c-sub{display:block;order:3;font-size:var(--type-meta);color:var(--text-2)}
  .ui-lines .ui-c-status{order:4}
  .ui-c-status .ui-st-full{display:none}
  .ui-c-status .ui-st-short{display:inline}
  .ui-lines :is(.ui-c-text,.ui-c-num){order:5;font-size:var(--type-meta)}
  .ui-lines .ui-c-text.is-wrap{max-width:none;min-width:0}
  .ui-lines .ui-c-num{font-size:var(--type-row)}
  .ui-lines :is(.ui-c-text,.ui-c-num,.ui-c-sub,.ui-c-act):empty{display:none}
  .ui-lines .ui-c-code{display:none}
  .ui-lines .ui-c-act{order:6;margin-left:auto}
  .ui-line:has(.ui-c-act :is(.button,button)) .ui-c-text{display:none}  /* the button fits on the second line: the order goes (the search finds it) */
  .ui-c-act :is(.button,button){min-height:var(--control-h-sm);font-size:var(--type-meta)}
  .ui-line.is-late{box-shadow:inset 4px 0 0 var(--danger)}
  .ui-line.is-late>td:first-child{box-shadow:none}
  .ui-group>th{padding:0}
  .ui-lines tbody tr.ui-group{padding:var(--space-3) var(--space-3) var(--space-1)}
}

/* ── КАРТАТА НА КЛИЕНТА — един общ компонент (собственикът, 25.10.2026; макетът docs/design/client-support-2026-10-25/) ──
   templates/platform/components/client_card.html, {% client_card card panel=… %}. The card changes its layout by ITS OWN
   width (a container query), not by the screen: wide (a full page on a computer) — the sections in two columns, every
   row on one line; narrow (the 360 px panel „Клиентът“ in Поддръжка, a phone) — one column, every row on two lines. */
.ui-client{container:client/inline-size;display:grid;gap:var(--space-4);min-width:0}
.ui-client-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-5);padding:22px var(--info-pad);background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--info-radius);box-shadow:var(--card-shadow)}
.ui-client-id{min-width:0;display:grid;gap:6px}
.ui-client-eyebrow{display:flex;justify-content:space-between;gap:var(--space-3);margin:0;font-size:var(--type-meta);font-weight:600;color:var(--text-2)}
.ui-client-eyebrow a{color:var(--text);font-weight:600}
.ui-client-name{margin:0;font-size:var(--type-hero);line-height:1.1;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.ui-client.is-panel .ui-client-name{font-size:var(--type-zone)}
.ui-client-contact{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4);margin:0;color:var(--text-2);overflow-wrap:anywhere}
.ui-client a.ui-client-phone{font-size:var(--type-lead);font-weight:700;color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ui-client.is-panel a.ui-client-phone{font-size:var(--type-block)}
.ui-client-call{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.ui-client-flags{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-4);align-items:start}
.ui-client-flags>:only-child{grid-column:1/-1}
/* the points: the level, the points, what to do, the reasons one per line; „Защо“ folded */
.ui-risk{padding:14px 18px;border-radius:var(--info-radius);border:1px solid var(--line-card);background:var(--bg-card);box-shadow:var(--card-shadow);min-width:0}
.ui-risk.is-yellow{border-color:var(--wait-line);background:var(--tint-amber);box-shadow:inset 6px 0 0 var(--wait),var(--card-shadow)}
.ui-risk.is-red{border-color:var(--danger-line);background:var(--tint-red);box-shadow:inset 6px 0 0 var(--danger),var(--card-shadow)}
.ui-risk-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0}
.ui-risk-top strong{font-size:var(--type-block);color:var(--text)}
.ui-risk-points{font-weight:700;color:var(--text)}
.ui-risk-why{margin:var(--space-2) 0 0;padding:0;list-style:none;color:var(--text-2);display:grid;gap:2px}
details.ui-risk-more{margin:var(--space-1) 0 0;padding:0;border:0}
.ui-risk-more>summary{display:inline-flex;align-items:center;gap:var(--space-1);min-height:32px;padding-block:var(--space-1);margin:0;cursor:pointer;font-weight:600;color:var(--text);font-size:var(--type-meta)}
.ui-risk-more[open]>summary{margin:0}
.ui-risk-more>summary small{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:var(--radius-pill);background:var(--count-bg);color:var(--count-text);font-weight:700}
.ui-risk-more ul{margin:var(--space-2) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-1)}
.ui-risk-more li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:start;font-size:var(--type-meta)}
.ui-risk-more li>span:first-child{color:var(--text-2);font-variant-numeric:tabular-nums}
.ui-risk-more li>form{grid-column:2/-1;margin:0}
.ui-risk-note{margin:var(--space-2) 0 0;font-size:var(--type-meta);color:var(--text-2)}
/* the money, one rule: red — the customer owes us; amber — we owe the customer; green — only „Платено“ / „Върнати“ */
.ui-client-money{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-3)}
.ui-money{display:grid;align-content:start;gap:2px;padding:12px 16px;border-radius:var(--info-radius);border:1px solid var(--card-line);background:var(--bg-card);box-shadow:var(--card-shadow);color:var(--text);text-decoration:none;min-width:0}
.ui-money>span{font-size:var(--type-meta);font-weight:600;color:var(--text-2)}
.ui-money>b{font-size:var(--type-zone);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-money>small{font-size:var(--type-meta);color:var(--text-2)}
.ui-money.is-owes{background:var(--money-owes-bg);border-color:var(--money-owes-line);box-shadow:inset 6px 0 0 var(--money-owes),var(--card-shadow)}
.ui-money.is-owes>b{color:var(--money-owes)}
.ui-money.is-refund{background:var(--money-refund-bg);border-color:var(--money-refund-line);box-shadow:inset 6px 0 0 var(--money-refund),var(--card-shadow)}
.ui-money.is-refund>b{color:var(--money-refund)}
.ui-money.is-settled{background:var(--money-settled-bg);border-color:var(--money-settled-line);box-shadow:inset 6px 0 0 var(--money-settled),var(--card-shadow)}
.ui-money.is-settled>b{color:var(--money-settled)}
.ui-lines td.ui-c-num.is-owes{color:var(--money-owes);font-weight:700}
.ui-lines td.ui-c-num.is-refund{color:var(--money-refund);font-weight:700}
.ui-lines td.ui-c-num.is-settled{color:var(--money-settled);font-weight:700}
/* the sections: the head (icon, name, count, „Всички“), where the rows come from, the compact rows */
.ui-client-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5);align-items:start}
.ui-client-sec{min-width:0;container:client-sec/inline-size}
.ui-client-sec .ds-section-head{justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-2)}
.ui-client-sec .ds-section-head h2{font-size:var(--type-block)}
.ui-client-sec .ds-more{font-weight:600;font-size:var(--type-meta);color:var(--text)}
.ui-client-source{margin:0 0 var(--space-2);font-size:var(--type-meta);color:var(--text-2)}
.ui-client-sec .ui-list{margin:0}
.ui-client-sec .ui-lines :is(.ui-c-status,.ui-c-label){width:1%}
@container client-sec (max-width:720px){.ui-lines :is(th,td).ui-c-code{display:none}}
/* the notes: the text, the author and the date; „Промени“ only for the author and the bosses (the server decides) */
.ui-client-notes{display:grid;gap:var(--space-2)}
.ui-client-notes>.ds-section-head{margin:0}
.ui-notes{margin:0;padding:0;list-style:none;background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--card-shadow)}
.ui-notes>li{padding:10px var(--space-3);border-bottom:1px solid var(--line-row);overflow-wrap:anywhere}
.ui-notes>li:last-child{border-bottom:0}
.ui-notes p{margin:0;color:var(--text)}
.ui-notes small{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:2px;font-size:var(--type-meta);color:var(--text-2)}
details.ui-note-change{margin:var(--space-1) 0 0;padding:0;border:0}
.ui-note-change>summary{display:inline-flex;min-height:32px;align-items:center;padding-block:0;cursor:pointer;font-size:var(--type-meta);font-weight:600;color:var(--text-2)}
.ui-note-change[open]>summary{margin:0 0 var(--space-2)}
.ui-note-form{display:grid;gap:var(--space-2);margin:0 0 var(--space-2)}
.ui-note-form textarea{width:100%;box-sizing:border-box;margin:0}
.ui-note-form .button{justify-self:start}
.ui-note-add{display:flex;gap:var(--space-2);margin:0}
.ui-note-add input{flex:1 1 auto;min-width:0;min-height:var(--control-h);margin:0}
.ui-client .ui-more-line{margin:0}
@container client (max-width:620px){
  .ui-client-head{padding:16px 18px;align-items:stretch}
  .ui-client-id,.ui-client-call{flex:1 1 100%}
  .ui-client-call>.button{flex:1 1 auto;justify-content:center}
  .ui-client-flags,.ui-client-sections{grid-template-columns:minmax(0,1fr)}
  .ui-money>b{font-size:var(--type-block)}
  .ui-money{padding:10px 12px}
  .ui-risk{padding:12px 14px}
  /* every row on two lines — the phone rules of the compact row, by the card's width (owner, 25.10.2026: „Телефон:
     името цяло на първия ред, статусът и останалото на втория.“) */
  .ui-lines,.ui-lines tbody{display:block}
  .ui-lines thead{display:none}
  .ui-lines tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line-row)}
  .ui-lines tbody tr:last-child{border-bottom:0}
  .ui-lines :is(th,td){display:block;height:auto;padding:0;border:0;background:transparent}
  .ui-lines .ui-c-main{order:1;flex:1 1 100%;width:auto;max-width:none;min-width:0}
  .ui-lines .ui-c-label{order:2}
  .ui-c-main .ui-line-sub{display:none}
  .ui-lines .ui-c-sub{display:block;order:3;font-size:var(--type-meta);color:var(--text-2)}
  .ui-lines .ui-c-status{order:4}
  .ui-client-sec .ui-lines :is(.ui-c-status,.ui-c-label){width:auto}
  .ui-c-status .ui-st-full{display:none}
  .ui-c-status .ui-st-short{display:inline}
  .ui-lines :is(.ui-c-text,.ui-c-num){order:5;margin-left:auto;font-size:var(--type-meta)}
  .ui-lines :is(.ui-c-text,.ui-c-num,.ui-c-sub,.ui-c-act):empty{display:none}
  .ui-lines .ui-c-code{display:none}
  .ui-lines .ui-c-act{order:6}
  .ui-line.is-late{box-shadow:inset 4px 0 0 var(--danger)}
  .ui-line.is-late>td:first-child{box-shadow:none}
  .ui-more-line>summary{min-height:0;padding:12px 16px;gap:var(--space-2) var(--space-3)}
  .ui-more-line-title{font-size:var(--type-block)}
  .ui-more-count{font-size:var(--type-meta)}
}

/* ── Лявото меню само с иконки (собственикът, 25.10.2026: „В Поддръжката на компютър лявото меню се свива до иконки“) ──
   A page asks for it: {% block menu_mode %} + the class below {% endblock %} (on the body). Only on a computer (≥ 1180 px, where the
   menu is on the left); the words stay for screen readers and as a hint (title); on a phone nothing changes. */
@media(min-width:1180px){
  .erp-shell.has-icon-menu{--erp-frame:1400px;grid-template-columns:var(--icon-menu-w) minmax(0,1fr);background:linear-gradient(to right,var(--side-bg) 0,var(--side-bg) var(--icon-menu-w),var(--bg-page) var(--icon-menu-w))}
  .has-icon-menu .erp-navigation{width:var(--icon-menu-w)}
  .has-icon-menu .erp-nav-panel{padding:var(--space-5) var(--space-2)}
  .has-icon-menu .erp-navigation .brand,.has-icon-menu .erp-version,.has-icon-menu .primary-nav .nav-sub,.has-icon-menu .primary-nav .nav-count{display:none}
  .has-icon-menu .primary-nav>a{justify-content:center;gap:0;padding-inline:0;font-size:0;line-height:0;min-height:44px}
  .has-icon-menu .primary-nav>a .erp-icon{width:22px;height:22px;flex-basis:22px}
}

/* ── Поддръжка: редът на разговор, писмата и полето за отговор (макетът 25.10.2026) ───────────────────────────────── */
.ui-convos{background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--card-shadow);overflow:hidden}
.ui-convos>ul{margin:0;padding:0;list-style:none}
.ui-convo-group{margin:0;padding:var(--space-2) var(--space-3) var(--space-1);font-weight:700;color:var(--text);border-bottom:1px solid var(--line-row);background:var(--bg-card)}
.ui-convo-group>b{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;padding:0 6px;border-radius:var(--radius-pill);background:var(--count-bg);color:var(--count-text);font-size:var(--type-meta)}
.ui-convo-group.is-late{color:var(--danger)}
.ui-convo-group.is-late>b{background:var(--button-danger-solid-bg);color:var(--on-danger)}
.ui-convo{border-bottom:1px solid var(--line-row)}
.ui-convo:last-child{border-bottom:0}
.ui-convo:nth-child(even){background:var(--bg-row-alt)}
.ui-convos a.ui-convo-link{display:grid;gap:3px;padding:7px var(--space-3) 7px 10px;color:var(--text);text-decoration:none}
.ui-convo-link:hover{background:var(--bg-row-hover);box-shadow:inset 3px 0 0 var(--row-hover-mark)}
.ui-convo.is-late .ui-convo-link{box-shadow:inset 4px 0 0 var(--danger)}
.ui-convo[aria-current] .ui-convo-link{background:var(--bg-subtle);box-shadow:inset 4px 0 0 var(--text)}
.ui-convo-line{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.ui-convo-dot{flex:none;width:8px;height:8px;border-radius:50%}
.ui-convo.is-unread .ui-convo-dot{background:var(--text)}
.ui-convo-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-row);font-weight:600}
.ui-convo.is-unread .ui-convo-name{font-weight:700}
.ui-convo-line>.ds-tag{flex:none;margin-left:auto;padding:0 var(--space-2);font-size:var(--type-meta);line-height:20px}
.ui-convo-line .ui-chip{flex:none;padding:0 var(--space-2);font-size:var(--type-meta);line-height:20px;margin-left:var(--space-4)}
.ui-convo-subj{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-meta);color:var(--text-2)}
.ui-convo.is-unread .ui-convo-subj{color:var(--text)}
.ui-convo-team{flex:none;font-size:var(--type-meta);color:var(--text-2)}
.ui-convos-more{display:flex;justify-content:space-between;margin:0;padding:var(--space-2) var(--space-3);font-size:var(--type-meta);color:var(--text-2)}
.ui-thread-head{padding:16px 20px;background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--info-radius);box-shadow:var(--card-shadow);display:grid;gap:var(--space-2);min-width:0}
.ui-thread-head .ui-meta{margin:0}
.ui-thread-title{margin:0;font-size:var(--type-zone);line-height:1.2;overflow-wrap:anywhere}
.ui-thread-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.ui-thread-fact{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-weight:600}
.ui-thread-fact .erp-icon{width:16px;height:16px;flex-basis:16px}
.ui-thread-acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ui-thread-acts form{margin:0}
.ui-thread-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ui-link{display:inline-flex;flex-wrap:wrap;max-width:100%;box-sizing:border-box;align-items:center;gap:6px;padding:3px 4px 3px 10px;border-radius:8px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--line-row);font-size:var(--type-meta);min-height:30px}
.ui-link form{display:inline-flex;gap:var(--space-1);margin:0}
.ui-link-value{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;padding-right:6px}
.ui-link-kind{color:var(--text-2);font-weight:600}
.ui-link.is-suggested{background:var(--bg-card);box-shadow:none;border:1px dashed var(--line-field)}
.ui-msgs{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2)}
.ui-msg{padding:12px 16px;border-radius:var(--radius-card);background:var(--bg-card);border:1px solid var(--card-line);box-shadow:var(--card-shadow);max-width:92%;min-width:0;box-sizing:border-box}
.ui-msg.is-out{justify-self:end;background:var(--bg-subtle)}
.ui-msg.is-note,.ui-msg.is-draft{justify-self:stretch;max-width:100%;background:transparent;box-shadow:none;border:1px dashed var(--line-field)}
.ui-msg-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin:0 0 var(--space-1)}
.ui-msg-head>.ui-msg-at{margin-left:auto;font-size:var(--type-meta);color:var(--text-2)}
.ui-msg-head .ds-tag{padding:0 var(--space-2);font-size:var(--type-meta);line-height:20px}
.ui-msg-text{color:var(--text);line-height:1.5;overflow-wrap:anywhere}
.ui-msg-meta{margin:var(--space-2) 0 0;font-size:var(--type-meta);color:var(--text-2);overflow-wrap:anywhere}
.ui-reply{display:grid;gap:var(--space-2);padding:14px 16px;background:var(--bg-card);border:1px solid var(--card-line);border-radius:var(--info-radius);box-shadow:var(--card-shadow);min-width:0}
.ui-reply>h2{margin:0;font-size:var(--type-block)}
.ui-reply-pick{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ui-reply-pick-label{font-weight:700;margin-right:var(--space-1)}
.ui-reply-pick a.ui-choice{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--line-field);background:var(--bg-card);font-weight:600;font-size:var(--type-meta);color:var(--text);text-decoration:none}
.ui-reply-pick a.ui-choice[aria-current]{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
details.ui-reply-all{margin:0;padding:0;border:0}
.ui-reply-all>summary{display:inline-flex;align-items:center;gap:var(--space-1);min-height:32px;padding-block:0;cursor:pointer;font-weight:600;font-size:var(--type-meta);color:var(--text-2)}
.ui-reply-all[open]>summary{margin:0}
.ui-reply-menu{position:absolute;z-index:var(--z-menu);left:0;right:0;top:calc(100% + 6px);max-height:430px;overflow:auto;padding:var(--space-3);background:var(--menu-bg);border:1px solid var(--menu-line);border-radius:var(--radius-card);box-shadow:var(--menu-shadow)}
.ui-reply-menu-group{margin:var(--space-2) 0 2px;font-size:var(--type-meta);font-weight:700;color:var(--text-2)}
.ui-reply-menu ul{margin:0;padding:0;list-style:none}
.ui-reply-menu a{display:block;padding:6px 10px;border-radius:8px;color:var(--text);text-decoration:none}
.ui-reply-menu a:hover{background:var(--bg-row-hover)}
.ui-reply-menu a[aria-current]{background:var(--accent-soft);font-weight:700}
.ui-reply textarea{width:100%;box-sizing:border-box;min-height:180px;margin:0;line-height:1.5}
.ui-reply-hint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font-size:var(--type-meta);color:var(--text-2)}
.ui-reply-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
@media(max-width:767px){
  .ui-thread-head{padding:14px 16px}
  .ui-thread-acts{margin-left:0;flex:1 1 100%}
  .ui-msg{max-width:100%}
  .ui-reply-foot>.button:first-child{flex:1 1 100%;justify-content:center}
}

/* ── Посока B (собственикът, 27.10.2026; docs/dizain.md, „Посока B“; core/templatetags/ui.py) ─────────────────────────────
   Pink only for buttons and actions; the module's colour only for identity (the rail, the icon, the big number); the
   status colour only for urgency (red overdue, dark solid „Чака нас“, grey outline „Чака друг“, green done). */
/* the status label: solid, an icon and a word; neutral (a date, a state word) is a quiet grey pill without an icon */
.ui-state{display:inline-flex;align-items:center;gap:6px;min-height:var(--state-h);padding:3px 10px;box-sizing:border-box;border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--state-neutral-bg);color:var(--state-neutral-text);font-size:var(--type-meta);font-weight:700;line-height:1.2;vertical-align:middle}
.ui-state:has(.erp-icon){padding-left:8px}
.ui-state .erp-icon{width:15px;height:15px;flex:0 0 15px;stroke-width:2.2}
.ui-state.is-late{background:var(--state-late-bg);color:var(--on-state)}
.ui-state.is-us{background:var(--state-us-bg);color:var(--on-state)}
.ui-state.is-other{background:var(--bg-card);color:var(--state-other-text);box-shadow:inset 0 0 0 1.5px var(--state-other-line)}
.ui-state.is-done{background:var(--state-done-bg);color:var(--on-state)}
/* the quiet line under the page title: „Днес искат действие:“ and the labels */
.ui-today{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-5);color:var(--text)}
.ui-today>b{font-weight:700}
.ui-today.is-calm{color:var(--text-2)}
/* two columns of module cards (one on a phone: the left, then the right) and a whole-width row under them */
.ui-mcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-block);align-items:start}
.ui-mcol{display:grid;gap:var(--gap-block);align-content:start;min-width:0}
.ui-mcols>.ui-mcol:only-child{grid-column:1/-1}  /* one column only: it takes the whole width */
.ui-mfull{display:grid;gap:var(--gap-block);margin-top:var(--gap-block);min-width:0}
/* the module card: a rail on the left and the big number in the module's colour */
.ui-mcard{--mc:var(--mcard-neutral);--mt:var(--bg-subtle);min-width:0;background:var(--bg-card);border:var(--card-line-width) solid var(--mcard-line);
  border-left:var(--mcard-rail) solid var(--mc);border-radius:var(--mcard-radius);box-shadow:var(--mcard-shadow);overflow:hidden}
.ui-mcard.is-work,.ui-mrow-src.is-work{--mc:var(--module-work);--mt:var(--module-work-tint)}
.ui-mcard.is-service,.ui-mrow-src.is-service{--mc:var(--module-service);--mt:var(--module-service-tint)}
.ui-mcard.is-couriers,.ui-mrow-src.is-couriers{--mc:var(--module-couriers);--mt:var(--module-couriers-tint)}
.ui-mcard.is-signals,.ui-mrow-src.is-signals{--mc:var(--module-signals);--mt:var(--module-signals-tint)}
.ui-mcard.is-money,.ui-mrow-src.is-money{--mc:var(--module-money);--mt:var(--module-money-tint)}
.ui-mcard-head{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5) var(--space-3)}
.ui-mcard-count{flex:none;min-width:1.1em;font-size:var(--type-mcard-count);font-weight:800;line-height:1;color:var(--mc);font-variant-numeric:tabular-nums}
.ui-mcard-titles{flex:1 1 auto;min-width:0}
.ui-mcard-titles>h2{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--type-mcard-title);font-weight:700;line-height:1.25;color:var(--text)}
.ui-mcard-icon{display:inline-flex;color:var(--mc)}
.ui-mcard-icon .erp-icon{width:20px;height:20px;stroke-width:2}
.ui-mcard-sub{display:flex;flex-wrap:wrap;gap:0 var(--space-3);margin:2px 0 0;font-size:var(--type-meta);line-height:var(--type-meta-line);color:var(--text-2)}
.ui-mcard-all{flex:none;align-self:flex-start;margin-top:var(--space-1);font-size:var(--type-meta);font-weight:600;color:var(--text-2);text-decoration:none}
.ui-mcard-all::after{content:' →'}
.ui-mcard-all:hover,.ui-mcard-more a:hover{text-decoration:underline}
.ui-mcard-more{margin:0;padding:var(--space-3) var(--space-5);border-top:1px solid var(--line-row);font-size:var(--type-meta);font-weight:700}
.ui-mcard-more a{color:var(--text);text-decoration:none}
/* other content of a card (counters, an older list): the card's own padding, the rows' line on top */
.ui-mcard-body{display:grid;gap:var(--space-3);min-width:0;padding:var(--space-3) var(--space-5) var(--space-4);border-top:1px solid var(--line-row)}
.ui-mcard-body>*{margin:0}
/* an empty card is one thin line: the title and „Няма …“ side by side, no number */
.ui-mcard.is-empty{display:flex;flex-wrap:wrap;align-items:center;box-shadow:none}
.ui-mcard.is-empty .ui-mcard-head{padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5)}
.ui-mcard.is-empty .ui-mcard-titles>h2{font-size:var(--type-block)}
.ui-mcard-empty{margin:0;padding:var(--space-3) var(--space-5) var(--space-3) 0;color:var(--text-2)}
/* the rows: the status first (one column for all), the title, one grey line, the arrow; the whole row is the link */
.ui-mrows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-row)}
.ui-mrow{position:relative;display:grid;grid-template-columns:minmax(var(--mrow-state-w),max-content) minmax(0,1fr) auto auto;grid-template-areas:"state main act go" "state below below below";
  align-items:center;column-gap:var(--space-3);min-height:56px;padding:var(--mrow-pad-y) var(--space-4) var(--mrow-pad-y) var(--space-5);border-bottom:1px solid var(--line-row)}
.ui-mrow:last-child{border-bottom:0}
.ui-mrow-state{grid-area:state;min-width:0}
.ui-mrow-main{grid-area:main;min-width:0}
.ui-mrow-act{grid-area:act;position:relative;display:flex;gap:var(--space-2)}
.ui-mrow-act form{margin:0}
.ui-mrow-below{grid-area:below;position:relative;min-width:0}
.ui-mrow-go{grid-area:go;display:inline-flex;color:var(--text-3)}
.ui-mrow-go .erp-icon{width:18px;height:18px}
.ui-mrow-title{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--type-mrow);font-weight:700;line-height:1.35;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
a.ui-mrow-title::after{content:'';position:absolute;inset:0}
a.ui-mrow-title:focus-visible{outline:none}
.ui-mrow:has(a.ui-mrow-title:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
.ui-mrow.is-link:hover{background:var(--row-hover-bg);box-shadow:inset 3px 0 0 var(--row-hover-mark)}
.ui-mrow-meta{margin:2px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--type-meta);line-height:var(--type-meta-line);color:var(--text-2)}
.ui-mrow-meta>*+*{margin-left:var(--space-3)}
.ui-mrow-meta>b{font-weight:700;color:var(--text)}
.ui-code{font-family:var(--font-mono);font-size:var(--type-code);font-variant-numeric:tabular-nums}
/* the mono font has no „№“: the sign in the normal font, the number in mono (27.10.2026) */
:is(.ui-code,.ui-c-code)>.ui-code-sign{font-family:var(--font-sans)}
.ui-mrow-src{flex:none;display:inline-grid;place-items:center;width:var(--src-box);height:var(--src-box);border-radius:6px;background:var(--mt);color:var(--mc)}
.ui-mrow-src .erp-icon{width:14px;height:14px;stroke-width:2}
/* fix 1 (owner, 27.10.2026): a task's or a signal's title — at most 2 lines and „…“; the whole on hover and in the task */
.ui-mrow-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* fix 3: in a group whose title is the status, only the date — small, grey (red when late), a narrow first column */
.ui-mrow.is-dated{grid-template-columns:var(--mrow-when-w) minmax(0,1fr) auto auto}
.ui-mrow-when{font-size:var(--type-meta);line-height:var(--type-meta-line);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-mrow-when.is-late{color:var(--danger);font-weight:700}
/* one quiet line that is a link („Какво ново“ on „Табло“): small, grey, the words side by side */
.ui-quiet-line{margin:0;font-size:var(--type-meta);line-height:var(--type-meta-line)}
.ui-quiet-line>a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2);color:var(--text-2);text-decoration:none}
.ui-quiet-line>a:hover{color:var(--text);text-decoration:underline}
/* a line of numbers in a card (Пари): the words left, the value right — no colour */
.ui-mline{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line-row);font-size:var(--type-mrow)}
.ui-mline:last-child{border-bottom:0}
.ui-mline>span{min-width:0;color:var(--text)}
.ui-mline>span>a{color:inherit}
.ui-mline>b{flex:none;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
/* the showcase's swatches of the module colours */
.sw--module-work{background:var(--module-work)}.sw--module-service{background:var(--module-service)}.sw--module-couriers{background:var(--module-couriers)}
.sw--module-signals{background:var(--module-signals)}.sw--module-money{background:var(--module-money)}
@media(max-width:767px){
  .ui-mcols{grid-template-columns:minmax(0,1fr)}
  .ui-mcard-head{flex-wrap:wrap;gap:var(--space-1) var(--space-3);padding:var(--space-3) var(--space-4) var(--space-2)}
  .ui-mcard-all{flex-basis:100%;margin:0}  /* the title keeps the width; „Всички …“ is a small line under it */
  .ui-mcard-more{padding:var(--space-3) var(--space-4)}
  .ui-mrow,.ui-mrow.is-dated{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"state act go" "main main go" "below below below";row-gap:6px;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4)}
  .ui-mrow-meta{white-space:normal}
  .ui-state{max-width:100%;white-space:normal}  /* a phone: the label has its own line; a long one may wrap there */
}

/* ── The system's base (owner, night queue 28/29.10.2026, item 1.3; docs/design/system.md) ───────────────────────────────
   „Днес“ — the approved mockup of 28.10 (round 2): up to 3 cards in a row (one column on a phone), a rail in the module's
   colour on top (identity), the status label first (urgency), one big button at the bottom — the main one only in the first
   card. Nothing urgent: one calm green line. Only a part of the base tonight: no screen uses it yet. */
.ui-today-lane{margin:0 0 var(--gap-block)}
.ui-today-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);margin:0 0 var(--space-3)}
.ui-today-head>h2{margin:0;font-size:var(--type-mcard-title);font-weight:700;line-height:1.25}
.ui-today-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--today-gap)}
.ui-today-card{--mc:var(--mcard-neutral);display:grid;grid-template-rows:auto auto 1fr auto;justify-items:start;gap:var(--space-3);min-width:0;
  padding:var(--today-pad);background:var(--bg-card);border:var(--card-line-width) solid var(--mcard-line);border-top:var(--today-rail) solid var(--mc);
  border-radius:var(--mcard-radius);box-shadow:var(--mcard-shadow)}
.ui-today-card.is-work{--mc:var(--module-work)}.ui-today-card.is-service{--mc:var(--module-service)}.ui-today-card.is-couriers{--mc:var(--module-couriers)}
.ui-today-card.is-signals{--mc:var(--module-signals)}.ui-today-card.is-money{--mc:var(--module-money)}
.ui-today-title{margin:0;font-size:var(--type-lead);font-weight:700;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.ui-today-lines{display:grid;gap:2px;margin:0;padding:0;list-style:none;font-size:var(--type-row);color:var(--text-2)}
.ui-today-lines>li:last-child{font-weight:700;color:var(--text)}
.ui-today-card>.button,.ui-today-card>form{justify-self:stretch;margin:0}
.ui-today-card .button{justify-content:center;width:100%;min-height:var(--today-button-h)}
.ui-today-calm{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin:0;padding:var(--space-5) var(--space-6);background:var(--ok-bg);
  border:var(--card-line-width) solid var(--ok-line);border-radius:var(--mcard-radius);color:var(--ok);font-size:var(--type-zone);font-weight:700}
.ui-today-calm .erp-icon{width:32px;height:32px;flex:0 0 32px;stroke-width:2.4}
.ui-today-calm>span{font-size:var(--type-row);font-weight:400;color:var(--text-2)}
/* „Списък с детайл“ (like Поддръжка): the list | the record | the side panel; without an open record — the list | the
   place of the record. On a phone one at a time: the open record hides the list, the views and the page title („← Към списъка“). */
.ui-split{display:grid;grid-template-columns:minmax(0,var(--split-list-w)) minmax(0,1fr) minmax(0,var(--split-side-w));gap:var(--split-gap);align-items:start}
.ui-split:not(:has(.ui-split-side)){grid-template-columns:minmax(0,var(--split-list-w)) minmax(0,1fr)}
.ui-split-list,.ui-split-detail,.ui-split-side{display:grid;gap:var(--space-3);min-width:0}
.ui-split-back{display:none;margin:0}
.ui-split-back>a{font-weight:600;color:var(--text);text-decoration:none}
@media(max-width:1179px){.ui-split{grid-template-columns:minmax(0,var(--split-list-w)) minmax(0,1fr)}.ui-split-side{grid-column:2}}
@media(max-width:767px){
  .ui-today-cards{grid-template-columns:minmax(0,1fr)}
  .ui-today-calm{padding:var(--space-4);font-size:var(--type-block)}
  .ui-today-calm>span{flex-basis:100%}
  .ui-split,.ui-split:not(:has(.ui-split-side)){grid-template-columns:minmax(0,1fr)}
  .ui-split-side{grid-column:auto}
  .ui-split.has-open>.ui-split-list,.ui-split:not(.has-open)>:is(.ui-split-detail,.ui-split-side){display:none}
  .ui-split-back{display:block}
  .layout-split:has(.ui-split.has-open) :is(.page-head,.ui-tabs,.phone-select){display:none}
}
}

/* A2 (owner, 29.10.2026): who the record is — on top of a dossier and always seen ({% record_id %}, core/templatetags/ui.py):
   it stays under the top bar while the page scrolls (the top bar is sticky from 1180 px) */
.ui-record-id{position:sticky;top:0;z-index:var(--z-sticky);margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);background:var(--bg-card);border-radius:var(--radius-card);box-shadow:var(--card-shadow)}
.ui-record-id dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-2) var(--space-4);margin:0}
.ui-record-id dt{font-size:var(--type-meta);color:var(--text-2)}
.ui-record-id dd{margin:0;font-size:var(--type-text);font-weight:600;color:var(--text);overflow-wrap:anywhere}
.ui-record-code{font-family:var(--font-mono)}
.ui-record-missing{color:var(--danger)}
.ui-record-hint{font-weight:400;color:var(--text-2)}
@media(min-width:1180px){.ui-record-id{top:var(--topbar-h)}}
/* on a phone the strip is short (it stays on top while scrolling): the values in one flowing line, the labels only for the
   screen reader */
@media(max-width:719px){.ui-record-id{padding:var(--space-2) var(--space-3)}
.ui-record-id dl{display:flex;flex-wrap:wrap;gap:0 var(--space-3)}
.ui-record-id dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ui-record-id dd{font-size:var(--type-meta)}}

/* A7 (owner, 29.10.2026): whose a number is and its link ({% module_card … scope count_url %}) */
.ui-mcard-scope{font-weight:600;color:var(--text)}
a.ui-mcard-count{text-decoration:none}
a.ui-mcard-count:hover{text-decoration:underline}
.ui-mcard-sub a{color:inherit}
/* C5 (owner, 29.10.2026): back to the very list a dossier was opened from */
.ui-record-back{margin:0 0 var(--space-2);font-size:var(--type-meta)}