/* ==========================================================================
   idbg — DESIGN COMPONENTS
   По ЕДНА дефиниция на всеки компонент от docs/UI_STANDARD.md §5 и CSS за
   всички _shared/* партиали, по реда на стандарта (§11). Тук е и всяко
   правило, което хваща изгледи на повече от един модул. Специфичното за
   една страница е в design-pages.css ([module:X]) и assets/pages/<ключ>.css.
   Редът вътре в раздел е каскадният — не разменяй правила, без да провериш.
   ========================================================================== */

/* == Component: Base: елементи в приложението == */
/* общите правила за html/body/елементи, които не са на компонент */
a:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
/* (от раздел „IDBG — App styles“) Extends brand-tokens.css */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: var(--text-body);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}
/* (от раздел „idbg — Visual polish (Phase 5)“) Overrides предишни файлове за по-refined UI. */
/* ---- Font rendering ---- */
body {
    text-rendering: optimizeLegibility;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img, svg {
    max-width: 100%;
    display: block;
}
a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

/* == Component: Buttons: части == */
/* Самите бутони (.btn и всички .btn-*) са в design-base.css (§5.1) — тук са
   само частите им: спинерът при изпращане, „+ Ново" в хедъра, менюто за
   групови действия. */
/* --- Button spinner --- */
.btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}
/* „+ Ново" в хедъра (btn btn-primary btn-sm btn-create). На телефон — само
   „+" (шеврона го няма). */
.site-header .btn-create {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 12px;
}
.btn-create .chip-caret { color: var(--white-a70); }
@media (max-width: 640px) {
    .site-header .btn-create { padding: 8px; width: 36px; justify-content: center; }
    .btn-create .chip-caret { display: none; }
}

/* Замразените бутони на началната (body.page-home) са в design-pages.css,
   секция [module:home] BUTTONS (§13). */

/* == Component: Layout: работна ширина и рамка на страницата == */
/* §2.5 — app-page, container, работен режим, ширини на формите */
/* (от раздел „idbg — Forms refresh (Phase 5.2)“) Global form styling — нова, clean design система. */
/* ---- Page layout за formите ---- */
/* Match the dashboard / home page width via the global --container-max token. */
.app-page .container {
    max-width: var(--container-max);
}
/* App page wrap — consistent spacing */
.app-page {
    padding: var(--space-6) 0 var(--space-16);
}
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}
.main-content {
    flex: 1;
}
/* Public pages: every section supplies its own vertical padding, so the
   wrapper's bottom padding just leaves a white strip above the dark footer. */
body:not(.is-app) .main-content { padding-bottom: 0; }
/* Home: the hero is full-bleed and brings its own top padding, so the
   wrapper's padding-top only cuts a white strip between it and the header. */
body.page-home .main-content { padding-top: 0; }
/* Onboarding и смяната на фирма: секцията е full-bleed, с `min-height: 100vh`
   и собствен фон, затова падингът на обвивката се показва като бяла лента над
   и под нея. Тези два екрана се отварят и в приложението (с `is-app`), така че
   правилото за публичните страници по-горе не ги хваща. */
body.page-onboarding .main-content,
body.page-switch .main-content { padding-top: 0; padding-bottom: 0; }
.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-16);
}
/* Базовото .hero .container е grid 1fr 1fr — тук композицията е вертикална. */
.hero--center .container {
    display: block;
}
@media (max-width: 960px) {
    /* --- Responsive --- */
    .hero .container {
            grid-template-columns: 1fr;
            gap: var(--space-12);
        }
}
.app-page--list > .container { padding-top: var(--space-5); }
/* (от раздел „DETAIL FORM PATTERN — used by clients/expenses/objects/offers/protocols/“) warranties/periodic/store/team form views inside .app-page--list.
   The outer .app-form box is removed; each .form-section becomes its own
   clean card. Balance tiles + docs table align to the same container width. */
:where(.app-page--list > .container) > .app-form:not(.invoice-form-v2) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    /* В workstation режим формата НЕ се разтяга на цял екран — четима и центрирана.
       (Старото max-width:none !important биеше form-layout правилата по специфичност.) */
    max-width: 920px !important;
    margin: 0 auto !important;
    width: 100%;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* Картата на формата е Card (§5.5, §1.3): отстъп 24 (16 под 560px). */
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: 0;
    box-shadow: var(--shadow-legacy-1);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section:last-child {
    border-bottom: 1px solid var(--color-border);
}
@media (max-width: 560px) {
    .app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section { padding: var(--space-4); }
}
/* Главата на картата във формата — като .card-head (§5.5, една глава навсякъде):
   икона 20 без кръгче, 16/700, без линия отдолу. */
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section > h2 {
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-text-primary);
    border-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
/* Лентата е FormActionBar (§3.4). Обхватът е в :where() (0,3,0), за да я
   надвие телефонният вид на лентата (раздел Forms, „FormActionBar на телефон"). */
:where(.app-page--list > .container) > .app-form:not(.invoice-form-v2) > .form-actions {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    margin: 0;
    box-shadow: var(--shadow-legacy-1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
}
/* Legal check polish inside detail forms */
:where(.app-page--list > .container) > .app-form:not(.invoice-form-v2) .legal-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin: 0;
    font-size: var(--text-label);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) .legal-check:hover {
    border-color: var(--color-border-strong);
    background: var(--color-bg-card);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) .legal-check input {
    margin: 0;
    accent-color: var(--brand-blue);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) .legal-check > span {
    margin: 0 !important;
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--color-text-primary);
}
/* Labels inside detail forms — tighter, cleaner */
:where(.app-page--list > .container) > .app-form:not(.invoice-form-v2) > .form-section > label {
    margin: 0 0 var(--space-3);
    display: block;
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section > label:last-child {
    margin-bottom: 0;
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section > label > span:first-child {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section .form-grid-2 > label,
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section .form-grid-3 > label {
    margin-bottom: 0;
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section .form-grid-2,
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section .form-grid-3 {
    margin-bottom: var(--space-3);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section .form-grid-2:last-child,
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section .form-grid-3:last-child {
    margin-bottom: 0;
}
/* Inputs inside detail forms — height + radius matching invoices */
.app-page--list > .container > .app-form:not(.invoice-form-v2) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    height: 38px;
    padding: 0 12px;
    font-size: var(--text-small);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) select {
    height: 38px;
    padding: 0 12px;
    font-size: var(--text-small);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 40px;
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) textarea {
    font-size: var(--text-small);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    height: auto;
    padding: 9px 12px;
    line-height: 1.5;
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) input:focus,
.app-page--list > .container > .app-form:not(.invoice-form-v2) select:focus,
.app-page--list > .container > .app-form:not(.invoice-form-v2) textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a12);
}
/* OFFERS — top grid override */
.app-page--list > .container > .app-form > .form-grid-2 > .form-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: 0;
}
@media (max-width: 560px) {
    .app-page--list > .container > .app-form > .form-grid-2 > .form-section { padding: var(--space-4); }
}
/* Главата — като .card-head (§5.5). */
.app-page--list > .container > .app-form > .form-grid-2 > .form-section > h2 {
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-text-primary);
    border-bottom: 0;
}
/* Форма без таблица с редове (§2.5): до 960px, центрирана — клиент, артикул,
   разход, постъпление, складово движение, служител, помощ, профил. Досега
   беше min(80vw, 1160px) — по-широка от стандарта и от формите в Настройки. */
:where(body.is-app .app-page--list > .container) > .app-form:not(.invoice-form-v2) {
    width: 100%;
    max-width: var(--form-max) !important;
}

/* == Component: Header: хедър и меню == */
/* §2.1 — хедърът за влязъл, „Още“, „+ Ново“, фирмата, профилът, чекмеджето на телефон */
/* Logout form in firm dropdown */
.logout-form { margin: 0; }
.logout-form button { text-align: left; width: 100%; background: transparent; border: 0; cursor: pointer; font: inherit; }
/* Nav items with icons */
.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* cgbg: 8px 14px, #555 — this rule (.main-nav a) outranks .nav-item, so the
       cgbg values have to live here to actually take effect. */
    padding: 8px 14px;
    color: var(--gray-555);
    font-weight: 500;
    font-size: var(--text-small);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 150ms var(--ease-out);
    white-space: nowrap;
    position: relative;
}
.nav-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-weight: 500;
    font-size: var(--text-small);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 150ms var(--ease-out);
}
.nav-more-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.nav-more-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 560px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-legacy-2);
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    z-index: var(--z-dropdown);
    animation: fadeSlide 160ms var(--ease-out);
    /* Панелът показва целия каталог — при една колона (≤960px) списъкът може
       да надхвърли екрана, затова скролва вътре в себе си. */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}
.firm-name {
    font-weight: 600;
    font-size: var(--text-label);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Само бутоните на лентата (`.main-nav > a`), не редовете на мега-панела
   „Още“ — те също са <a> вътре в nav: на 961–1200px взимаха отстъпа и
   иконите им ставаха точки, а текстът се отместваше. */
@media (max-width: 1200px) {
    /* ---- Mobile responsive ---- */
    .main-nav > a span:not(.sr-only),
        .main-nav > a {
            font-size: var(--text-label);
            padding: 6px 10px;
        }
    .main-nav .nav-icon {
            width: 14px;
            height: 14px;
        }
}
@media (max-width: 960px) {
    .main-nav > a:not(.nav-accent) {
            padding: 8px;
        }
    .main-nav > a:not(.nav-accent) span:not(.sr-only) {
            display: none;
        }
    .firm-name {
            display: none;
        }
    .nav-more-panel {
            min-width: 380px;
            grid-template-columns: 1fr;
        }
}
@media (max-width: 720px) {
    .main-nav > a:not(.nav-accent):not(.nav-active) {
            display: none;
        }
    .nav-more-panel {
            left: auto;
            right: 0;
            min-width: 300px;
            max-width: calc(100vw - 24px);
        }
}
.firm-name {
    font-weight: 600;
    font-size: var(--text-small);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.firm-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--text-small);
    transition: background var(--duration-fast) var(--ease-out);
}
.firm-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.firm-item.is-current {
    background: var(--brand-blue-light);
}
.firm-item strong {
    display: block;
    font-weight: 600;
}
.firm-item small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
}
@media (max-width: 960px) {
    /* --- Mobile header collapse --- */
    .site-header.is-app .main-nav {
            display: none;
        }
    .firm-name {
            max-width: 100px;
        }
}
.site-header .header-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 64px;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    min-width: 0;
}
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    /* cgbg docks the account actions hard right (.nav-right { margin-left:auto }) */
    margin-left: auto;
}
.logo:hover { color: var(--color-text-primary); }
.logo img {
    display: block;
    height: 26px;
    width: auto;
}
/* cgbg colours the name brand-blue and the TLD in the contrasting ink
   (dark on light headers, white on the dark footer). */
.logo-word {
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-blue);
    white-space: nowrap;
}
.logo-word span { color: var(--color-text-primary); }
/* Public header matches cgbg's compact height (12px padding + content). */
.site-header:not(.is-app) .header-wrap { height: auto; min-height: 38px; }
/* cgbg's .btn has no line-height, so it inherits body's 1.6 → a 13px btn-sm is
   7 + 20.8 + 7 = 34.8px tall. idbg's .btn pins line-height:1, giving only 29px,
   which is why the header buttons read smaller. Scoped to the header so the
   dense in-app toolbars keep their compact buttons. */
.site-header .btn { line-height: 1.6; }
/* cgbg .nav-right gap is 10px (public-nav gap handled on .site-public-nav). */
.site-header .header-right { gap: 10px; }
/* Публичният клон (нелогнат): „Вход“ и „Регистрация“ са с досегашния си
   размер на всяка публична страница — 7×12, без минималната височина на
   новия btn-sm (§2.1, §13: публичният хедър не се променя). Началната го
   пази с body.page-home .btn-sm; /help, правните и входът бяха станали 32px. */
.site-header:not(.is-app) .header-right > .btn-sm { min-height: auto; padding: 7px 12px; }
/* Public nav links, cgbg-exact. High specificity (0,3,0) so they beat the
   later ".main-nav a" block below without touching the in-app nav. */
.site-header .site-public-nav .nav-item { color: var(--gray-555); }
.site-header .site-public-nav .nav-item:hover {
    background: var(--brand-blue-light);
    color: var(--brand-blue);
}
/* Active pill: solid blue, white label. Needs (0,4,0) here to outrank the
   scoped base rule above — otherwise it inherits #555 on the blue pill. */
.site-header .site-public-nav .nav-item.is-active,
.site-header .site-public-nav .nav-item.is-active:hover {
    background: var(--brand-blue);
    color: var(--color-text-inverted);
}
/* Main nav — primary destinations (docked right, before + Ново) */
.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin-left: auto;
    justify-content: flex-end;
}
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    /* cgbg nav links are #555 */
    color: var(--gray-555);
    font-size: var(--text-small);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    background: transparent;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
/* cgbg: tinted hover, solid-blue active pill. */
.nav-item:hover {
    background: var(--brand-blue-light);
    color: var(--brand-blue);
}
.nav-item.is-active {
    background: var(--brand-blue);
    color: var(--color-text-inverted);
    font-weight: 500;
}
.nav-item.is-active:hover {
    background: var(--brand-blue-dark);
    color: var(--color-text-inverted);
}
.nav-icon {
    opacity: 0.85;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* "Още" dropdown — grid layout with groups */
/* "Още" mega-dropdown */
.nav-more {
    margin-left: 4px;
    position: relative;
}
.nav-more-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    z-index: var(--z-dropdown);
    width: 720px;
    max-width: calc(100vw - 32px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: none;
    min-width: 0;
}
.nav-more-panel[hidden] {
    display: none !important;
}
.nav-more-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav-more-label {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-2xs);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
    font-weight: 700;
    padding: var(--space-2) var(--space-2) var(--space-1);
}
.nav-more-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
    align-items: flex-start;
    min-width: 0;
}
.nav-more-item:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}
.nav-more-item.is-active { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.nav-more-ico {
    font-size: var(--text-body-lg);
    flex-shrink: 0;
    line-height: 1.4;
    width: 22px;
    text-align: center;
}
.nav-more-item > span:last-child { min-width: 0; flex: 1 1 auto; }
.nav-more-item strong {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-more-item small {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    display: block;
    line-height: 1.3;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Firm switcher — compact */
/* --- Firm switcher dropdown --- */
/* Firm switcher (left, next to logo) */
.firm-switcher {
    position: relative;
}
.firm-chip {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px 0 4px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-primary);
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.firm-chip:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}
.chip-caret { color: var(--color-text-muted); width: 12px; height: 12px; flex-shrink: 0; }
.firm-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.firm-dropdown {
    right: 0;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 300px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    animation: none;
}
.firm-dropdown[hidden] {
    display: none !important;
}
.firm-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--text-small);
    transition: background var(--duration-fast) var(--ease-out);
}
.firm-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.firm-item-body strong { font-size: var(--text-small); font-weight: 600; line-height: 1.3; }
.firm-item-body small { font-size: var(--text-2xs); color: var(--color-text-muted); line-height: 1.3; }
.firm-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.firm-item.is-current { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.firm-item.is-current .firm-item-body small { color: var(--brand-blue-dark); opacity: 0.7; }
.firm-check {
    margin-left: auto;
    color: var(--brand-blue);
    font-weight: 700;
}
/* "+ New" create button with dropdown */
.create-new { position: relative; }
.create-new-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: var(--z-dropdown);
    min-width: 280px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    animation: none;
}
.create-new-panel[hidden] { display: none; }
.create-new-item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.create-new-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.create-new-ico { font-size: var(--text-body-lg); flex-shrink: 0; line-height: 1.2; }
.create-new-item strong { font-size: var(--text-small); font-weight: 600; line-height: 1.3; }
.create-new-item small { font-size: var(--text-2xs); color: var(--color-text-muted); line-height: 1.3; }
.create-new-item kbd {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    padding: 2px 6px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
/* Icon button (search, etc.) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.icon-btn:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}
/* User avatar + dropdown */
.user-menu { position: relative; }
.user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: var(--z-dropdown);
    min-width: 260px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    animation: none;
}
.user-dropdown[hidden] { display: none; }
.user-dropdown-head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
}
.user-dropdown-head strong { display: block; font-size: var(--text-small); font-weight: 600; line-height: 1.3; }
.user-dropdown-head small {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Hamburger button — mobile only */
.mobile-only { display: none; }
.nav-hamburger { color: var(--color-text-primary); }
/* Mobile nav drawer */
.mobile-nav-drawer {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--color-bg-card);
    border-right: 1px solid var(--color-border);
    /* Сянката и видимостта — само при отворено меню: скритото чекмедже
       (translateX(-100%)) хвърляше сянката си навън и по левия ръб на всяка
       страница стоеше сива ивица; а с visibility клавиатурата не влиза в
       линковете на затвореното меню. */
    box-shadow: none;
    visibility: hidden;
    padding: var(--space-4) var(--space-3);
    z-index: calc(var(--z-sticky) + 1);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--duration) var(--ease-out), visibility 0s linear var(--duration), box-shadow 0s linear var(--duration);
}
.mobile-nav-backdrop {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--slate-900-a45);
    backdrop-filter: blur(2px);
    z-index: var(--z-sticky);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease-out);
}
body.mobile-nav-open .mobile-nav-drawer { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-lg); transition: transform var(--duration) var(--ease-out); }
body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
body.mobile-nav-open { overflow: hidden; }
.mobile-nav-item {
    display: block;
    padding: 12px var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--text-body);
    font-weight: 500;
    transition: background var(--duration-fast) var(--ease-out);
}
.mobile-nav-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
/* Иконката стои вляво от думата, не на отделен ред над нея — менюто беше
   двойно по-дълго и приличаше на недовършено. */
.mobile-nav-drawer .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.mobile-nav-drawer .mobile-nav-item > svg { flex: 0 0 18px; width: 18px; height: 18px; }
.mobile-nav-drawer .mobile-nav-item .nav-lock { margin-left: auto; }
.mobile-nav-drawer .mobile-nav-item + .mobile-nav-item { margin-top: 2px; }
.mobile-nav-item.is-active { background: var(--brand-blue); color: var(--color-text-inverted); font-weight: 600; }
.mobile-nav-sep { height: 1px; background: var(--color-border); margin: var(--space-3) var(--space-3); }
@media (max-width: 1180px) {
    .main-nav .nav-item { padding: 8px 10px; }
    .firm-name { display: none; }
}
@media (max-width: 1300px) {
    /* 1181–1300px: менюто с надписи вече не се събира до името на фирмата и
       „Начало" лягаше върху него — остава само буквата на фирмата. */
    .firm-name { display: none; }
}
/* На широк екран фирмата е с цялото си име (§2.1): chip-ът ползва свободното
   място до менюто и се свива преди него, вместо да реже на 140px
   („СТИБО КОНСУЛТ…“ при много празно място — ui-lane3-r1). Само max-width
   не стига: менюто (flex: 1 1 0%; min-width: 0) се свиваше под съдържанието
   си при 1301–1350px и бутоните му лягаха върху фирмата — затова менюто не
   се свива, а свива се фирмата (с „…“). */
@media (min-width: 1301px) {
    .site-header.is-app .main-nav { flex: 1 0 auto; }
    .site-header.is-app .header-left { flex: 0 1 auto; min-width: 0; }
    .site-header.is-app .firm-switcher { min-width: 0; }
    .site-header.is-app .firm-chip { min-width: 0; max-width: 100%; }
    .site-header.is-app .firm-name { max-width: 260px; }
}
/* Хедърът се нагажда по мястото (§2.1). Колко място взимат менюто и фирмата
   зависи от „Бутони в менюто“ и от името на фирмата, затова медийните
   правила горе не стигат: при дълги бутони менюто лягаше върху логото и
   фирмата (на 1200px „Начало“ излизаше вляво от екрана), а при менюто по
   подразбиране на 961–1300px оставаше само инициалът и иконите без надпис,
   при много празно място. Скриптът след </header> (header.phtml) мери и
   слага data-nav-fit — първото, което се побира:
     full  — цялото име на фирмата и надписите в менюто;
     short — съкратеното име (до 14 знака + „…“, както на телефон) и надписите;
     dense — съкратеното име и надписите с по-малък шрифт и отстъп;
     icons — съкратеното име и менюто само с икони (надписът остава за екранния
             четец, а линкът носи title);
     tight — само буквата на фирмата и иконите (крайна мярка).
   Без скрипта важат медийните правила горе. Менюто не застъпва фирмата:
   лявата част не се свива, свива се (и се мери) менюто. Докато мери
   (.is-nav-fitting), бутоните са без преход — иначе отстъпът им още „расте“
   и менюто изглежда по-тясно, отколкото ще бъде. */
.site-header.is-app.is-nav-fitting .main-nav .nav-item { transition: none; }
.site-header.is-app[data-nav-fit] .header-left { flex: 0 0 auto; min-width: 0; }
.site-header.is-app[data-nav-fit] .firm-chip { max-width: none; }
.site-header.is-app[data-nav-fit] .main-nav { flex: 1 1 auto; min-width: 0; }
.site-header.is-app[data-nav-fit] .firm-name { display: block; max-width: 260px; }
.site-header.is-app[data-nav-fit="short"] .firm-name .hide-sm,
.site-header.is-app[data-nav-fit="dense"] .firm-name .hide-sm,
.site-header.is-app[data-nav-fit="icons"] .firm-name .hide-sm { display: none; }
.site-header.is-app[data-nav-fit="short"] .firm-name .show-sm,
.site-header.is-app[data-nav-fit="dense"] .firm-name .show-sm,
.site-header.is-app[data-nav-fit="icons"] .firm-name .show-sm { display: inline; }
.site-header.is-app[data-nav-fit="tight"] .firm-name { display: none; }
.site-header.is-app[data-nav-fit="dense"] .main-nav .nav-item { padding: 6px 10px; font-size: var(--text-label); }
/* Медийното правило до 1200px дава отстъпа и на самия надпис (`.main-nav > a
   span`) — бутонът ставаше с 20px по-широк от съдържанието си. */
.site-header.is-app[data-nav-fit] .main-nav .nav-item > span:not(.nav-lock) { padding: 0; }
.site-header.is-app[data-nav-fit="icons"] .main-nav .nav-item,
.site-header.is-app[data-nav-fit="tight"] .main-nav .nav-item { padding: var(--space-2); }
.site-header.is-app[data-nav-fit="icons"] .main-nav .nav-item > span:not(.nav-lock),
.site-header.is-app[data-nav-fit="tight"] .main-nav .nav-item > span:not(.nav-lock) {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 860px) {
    .main-nav { display: none; }
    .mobile-only { display: inline-flex; }
}
@media (max-width: 640px) {
    .firm-chip { padding: 4px; }
    .firm-chip .chip-caret { display: none; }
}
/* ---- Header redesign ---- */
/* cgbg's header is solid white with a hairline rule — no glass/blur. */
/* (от раздел „HEADER + NAV — redesigned Apr 2026 (PLAN7)“) Layout: [Logo] [Firm chip]  [Primary nav]  [+New] [Search] [Avatar] */
/* --- Header --- */
/* cgbg: solid white, hairline rule, no glass/blur. */
.site-header {
    box-shadow: var(--shadow-legacy-3);
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--gray-eee);
    padding: var(--space-3) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}
.logo {
    gap: 8px;
    height: 34px;
    font-weight: 800;
    color: var(--color-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
}
/* cgbg: tinted hover, solid-blue active pill. */
.main-nav a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
@media (max-width: 600px) {
    .main-nav {
            display: none;
        }
}
/* Катинар до модул, който не е в плана (header.phtml → $navLocked). */
.nav-lock { display: inline-flex; align-items: center; margin-left: 4px; color: var(--amber-700); opacity: .85; vertical-align: middle; }
/* Подзаглавията са изречения с обикновени думи — нека се дочитат. */
.nav-more-panel .nav-more-item small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
/* <details> не подрежда децата си като grid (слот в Chrome) — решетката е вътре. */
.nav-more-panel > details.nav-more-extra[open] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px var(--space-2);
    display: block !important;
}
@media (max-width: 720px) {
    .nav-more-panel > details.nav-more-extra[open] { grid-template-columns: 1fr; }
}
.nav-more-extra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--space-2); margin-top: 4px; border-top: 1px solid var(--color-border); padding-top: 6px; }
@media (max-width: 720px) {
    .nav-more-extra-grid { grid-template-columns: 1fr; }
}
.nav-more-extra[open] > summary {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    border-bottom: 0 !important;
}
/* --- shell (§2.1): активният раздел, менютата на хедъра като Menu, телефонът --- */
/* Активният раздел е светъл; плътно синьото е само за действие („+ Ново“). */
.site-header.is-app .nav-item.is-active,
.site-header.is-app .nav-item.is-active:hover {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    font-weight: 600;
}
.site-header.is-app .nav-item.is-active .nav-icon { opacity: 1; }
.mobile-nav-drawer .mobile-nav-item.is-active {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    font-weight: 600;
}
/* Менютата на хедъра са Menu (app-ux.js, раздел 15). .menu-panel е до 320px —
   мега-панелът „Още“ е по-широк; фирмите, „+ Ново“ и профилът пазят днешния вид. */
.site-header .nav-more-panel.menu-panel {
    width: 760px;
    max-width: calc(100vw - 16px);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.site-header .firm-dropdown.menu-panel,
.site-header .create-new-panel.menu-panel,
.site-header .user-dropdown.menu-panel {
    min-width: 260px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.site-header .firm-dropdown.menu-panel { min-width: 300px; }
/* Долният ред на „Още“: Настройки · Екип · Абонамент. */
.nav-more-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.nav-more-foot .menu-item { width: auto; }
/* Фирмата в менюто: аватар в цвета ѝ, име и „план · роля“, отметка за текущата. */
.firm-dropdown .firm-item-avatar { display: inline-flex; flex-shrink: 0; }
.firm-dropdown .firm-item-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firm-dropdown .firm-check { margin-left: auto; color: var(--brand-blue); }
.firm-chip .avatar { flex-shrink: 0; }
/* Профилът: бутонът е аватарът на човека (§5.17). */
.site-header .user-menu-toggle { width: 40px; height: 40px; border-radius: var(--radius-full); padding: 0; }
.site-header .user-menu-toggle:hover,
.site-header .user-menu-toggle[aria-expanded="true"] { background: var(--color-bg-subtle); }
.site-header .notif-btn.is-active,
.site-header .user-menu-toggle.is-active { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.user-dropdown .user-dropdown-head { padding: var(--space-2) var(--space-3); }
/* Чекмеджето: имената на групите — като в „Още“. */
.mobile-nav-drawer .menu-label { padding: var(--space-4) var(--space-3) var(--space-1); }
.mobile-nav-drawer .menu-label:first-of-type { padding-top: var(--space-3); }
@media (pointer: coarse) {
    .site-header.is-app .icon-btn { width: 40px; height: 40px; }
}
/* Под 960px главното меню на приложението е скрито — бутонът за чекмеджето
   (☰) трябва да се вижда от същата ширина (досега чак под 860px и на
   861–960px нямаше нито меню, нито ☰). Мястото стига и за името на фирмата
   (до 14 знака + „…“ от сървъра), не само инициала. */
@media (max-width: 960px) {
    .site-header.is-app .mobile-only { display: inline-flex; }
    .site-header.is-app .firm-name {
        display: block;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* „+ Ново“ с текст и на телефон — само „+“ не се разбира. */
    .site-header.is-app .btn-create { width: auto; padding: 0 var(--space-3); gap: var(--space-1); }
    /* Надписът „Ново“ — и при заключения вариант, където първият <span> е катинарът. */
    .site-header.is-app .btn-create > span:not(.perm-lock-ico) { display: inline; }
    .site-header.is-app .btn-create > .perm-lock-ico { display: inline-flex; }
}
/* Телефон (§2.1): „+ Ново“ с текст, фирмата със съкратено име вместо инициал;
   профилът е долу в чекмеджето, затова аватарът в лентата отпада. */
@media (max-width: 560px) {
    .site-header.is-app .header-wrap { gap: var(--space-2); }
    .site-header.is-app .header-left { gap: var(--space-2); min-width: 0; flex-shrink: 1; }
    .site-header.is-app .firm-switcher { min-width: 0; }
    .site-header.is-app .firm-chip { min-width: 0; max-width: 100%; height: 40px; padding: 0 var(--space-2); }
    .site-header.is-app .firm-chip .avatar { display: none; }
    /* Името (до 14 знака + „…“ от сървъра — header.phtml, $firmShort) е на
       до два реда по 12px: на един ред до „+ Ново“, камбанката и ☰ остават
       ~98px и CSS режеше „ЮСТИЦИЯ ИНВЕСТ…“ до „ЮСТИЦИ…“ — две фирми с еднакво
       начало не се различаваха. „+ Ново“ — с 4px по-малко отстъп отстрани. */
    .site-header.is-app .firm-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        overflow-wrap: anywhere;
        white-space: normal;
        font-size: var(--text-caption);
        line-height: 1.2;
        text-align: left;
    }
    .site-header.is-app .btn-create { padding: 0 var(--space-2); }
    .site-header.is-app .user-menu { display: none; }
    .site-header.is-app .header-right { gap: var(--space-1); }
}

/* == Component: Footer == */
/* малкият футър на приложението */
/* Specificity is doubled up so this compact variant beats the dark public
   `.site-footer` rule in design-pages.css, which loads later at equal weight. */
.site-footer.site-footer--app {
    margin-top: var(--space-8);
    padding: var(--space-4) 0;
    background: transparent;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
}
.site-footer--app .footer-app-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-caption);
}
.site-footer--app .footer-muted { color: var(--color-text-muted); }
.site-footer--app .footer-app-nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.site-footer--app .footer-app-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.site-footer--app .footer-app-nav a:hover { color: var(--brand-blue); }
@media (max-width: 560px) {
    .site-footer--app .footer-app-row { flex-direction: column; align-items: flex-start; }
}
.footer-brand .footer-muted {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
}
.footer-col a {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    text-decoration: none;
    padding: 3px 0;
}
/* --- Footer --- */
/* cgbg footer palette: near-black canvas, grey body copy, blue-mid link hover.
   margin-top:0 (as in cgbg) — a top margin leaves a white strip between the
   last section's tinted background and the dark footer. */
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-text-primary);
    color: var(--gray-aaa);
    padding: var(--space-16) 0 var(--space-6);
    margin-top: 0;
}
/* Footer sits on #1a1a1a, so the name stays blue and the TLD flips to white
   (dark ink would be invisible there). */
.footer-logo .logo-word { color: var(--brand-blue); }
.footer-logo .logo-word span { color: var(--color-text-inverted); }
.footer-muted {
    color: var(--gray-888) !important;
    font-size: var(--text-caption) !important;
}

/* == Component: PageHeader: заглавна лента == */
/* §2.3 — page-bar (и старите page-head, breadcrumb) */
/* PageHeader (§2.3): ← назад над H1, статус и флагове до H1, мета под него. */
.page-bar-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.page-bar-back:hover { color: var(--brand-blue); }
.page-bar-flags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.page-bar-meta {
    margin-top: var(--space-1);
    font-size: var(--text-label);
    color: var(--color-text-secondary);
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-small);
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--brand-blue); }
.page-bar {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    padding: 18px 0;
    margin-bottom: var(--space-5);
}
.page-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.page-bar-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.page-bar-title h1 {
    margin: 0;
    font-size: var(--text-page);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-text-primary);
}
.page-bar-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
@media (max-width: 560px) {
    .page-bar { padding: 14px 0; }
    .page-bar-title h1 { font-size: var(--text-xl); }
    .page-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 720px) {
    /* Mobile tweaks for v2 patterns */
    .page-bar-inner { gap: var(--space-2); }
    .page-bar-actions { width: 100%; }
    .page-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* _shared/page-header.phtml: ← назад, H1 със статуса и мета — една колона
   вляво; действията вдясно в реда [вторични][Още ▾][Основно] (§2.3). */
.page-bar-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}
.page-bar-head .page-bar-title { align-items: center; }
.page-bar-head .page-bar-back { margin-bottom: 0; }
.page-bar-head .page-bar-meta { margin-top: 0; }
.page-bar-title h1 .doc-no { font-weight: 800; }
.page-bar-actions { align-items: center; }
.page-bar-secondary { display: inline-flex; }
.page-bar-actions .action-form { display: inline-flex; margin: 0; }
.page-bar-actions .btn > svg,
.next-step-actions .btn > svg,
.empty-state-actions .btn > svg { flex-shrink: 0; }
.page-bar-more[hidden] { display: none; }
/* Зоната за съобщения на страницата — точно под лентата (§5.8). */
.page-messages { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.page-messages > .alert { margin: 0; }
/* Над центрирана форма (§2.5 — до 960px) съобщенията са в ширината на
   формата: „Провери 1 поле" на team/edit стоеше от ръб до ръб, а формата под
   него — в средата (на gdpr/delete-request вече беше в средата). */
.app-page--list:has(> .container > .app-form:not(.invoice-form-v2)) > .page-messages > * {
    width: 100%;
    max-width: var(--form-max);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 560px) {
    /* Телефон: [Още][Основно, разтегнато] — вторичните отиват в „Още"
       (app-ux.js мести ги там; дотогава редът се пренася, не излиза вдясно). */
    .page-bar-actions > .page-bar-primary { flex: 2 1 0; }
    .page-bar-actions > .page-bar-secondary { flex: 1 1 auto; }
    .page-bar-actions > .page-bar-secondary > .btn { width: 100%; }
}

/* == Component: SectionNav / SideNav == */
/* §2.4 — подстраници на модул */
/* SectionNav (§2.4): 2–6 подстраници на един модул — подчертани линкове
   под заглавната лента; на телефон — хоризонтален скрол. */
.section-nav {
    display: flex;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
    padding: var(--space-2) 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.section-nav a:hover { color: var(--color-text-primary); }
.section-nav a.is-active,
.section-nav a[aria-current="page"] { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
/* Броят до подстраницата („Складове 4") — сив, по-малък; не е значка. */
.section-nav-count { margin-left: var(--space-1); font-weight: 500; color: var(--color-text-muted); }
/* SideNav (§2.4): 7+ подстраници в групи (Настройки, Справки); под 1000px —
   падащо „Раздел: <име> ▾". */
.side-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.side-nav-group {
    margin: var(--space-4) 0 var(--space-1);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.side-nav a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-small);
    color: var(--color-text-primary);
}
.side-nav a:hover { background: var(--color-bg-hover); }
.side-nav a.is-active,
.side-nav a[aria-current="page"] { background: var(--brand-blue-light); color: var(--brand-blue-dark); font-weight: 600; }
.side-nav-select { display: none; }
@media (max-width: 1000px) {
    .side-nav { display: none; }
    .side-nav-select { display: block; margin-bottom: var(--space-4); }
}
/* SideLayout (§2.4): SideNav вляво + съдържанието вдясно — справките и
   настройките. SideNav-ът лепне под хедъра; под 1000px е една колона, а
   SideNav е падащото „Раздел: … ▾“ над съдържанието. На хартия — само
   съдържанието (SideNav е .no-print).
     <div class="container side-layout">
         <div class="side-layout-nav no-print"> _shared/side-nav </div>
         <div class="side-layout-main"> … </div>
     </div> */
.side-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}
.side-layout-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
}
.side-layout-nav .side-nav-group:first-child { margin-top: 0; }
.side-layout-main { min-width: 0; }
@media (max-width: 1000px) {
    .side-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .side-layout-nav { position: static; }
}
@media print {
    .side-layout { display: block; }
}

/* == Component: Menu: падащи менюта == */
/* §5.3 — „Още ▾“, „⋯“, менютата за статус и групови действия */
/* Menu (§5.3): „Още ▾" и „⋯". Панелът е position: fixed спрямо бутона
   (app-ux.js го слага и обръща), затова не се реже от таблица или модал. */
.menu { position: relative; display: inline-flex; }
.menu-panel {
    position: fixed;
    z-index: var(--z-dropdown);
    /* Ширината не зависи от мястото: fixed панел до десния ръб иначе се свива
       (пренася по-рано), а щом app-ux.js го премести наляво — пак се разширява
       и излиза от екрана. max-content в границите на max-width. */
    width: max-content;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 16px));
    padding: var(--space-1);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.modal-overlay .menu-panel { z-index: var(--z-popover); }
.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-small);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    /* Дълъг елемент се пренася на втори ред вътре в панела (§5.3) — с nowrap
       „Не е по фактура — запиши като постъпление" излизаше вдясно от рамката
       (панелът е най-много 320px). Късите менюта остават с естествената си ширина. */
    white-space: normal;
    line-height: var(--leading-snug);
}
.menu-item > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-secondary); }
.menu-item:hover,
.menu-item:focus-visible { background: var(--color-bg-hover); color: var(--color-text-primary); }
.menu-item--danger,
.menu-item--danger > svg { color: var(--color-danger); }
.menu-item--danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
/* Заключеното по права или „само преглед“ (§8) е с нормален текст и катинар;
   избледнялото е само неактивното (aria-disabled без заключване). */
.menu-item.is-perm-locked { cursor: not-allowed; }
.menu-item[aria-disabled="true"]:not(.is-perm-locked) { opacity: .45; cursor: not-allowed; }
.menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }
@media (pointer: coarse) {
    .menu-item { min-height: 44px; }
}
.bulk-actions-menu { position: relative; }
/* ActionItem в менюто: действие с POST е <form> с бутон — формата не бива да
   добавя отстъп или да чупи реда (App\Services\ActionItem). */
.menu-panel[hidden] { display: none; }
.menu-panel .action-form { display: block; margin: 0; }
.menu-item > span { flex: 1 1 auto; min-width: 0; }
/* Катинарът на заключения елемент (§8, app-ux.js раздели 12/13) е <span> —
   без това взимаше цялата свободна ширина и думата отиваше в средата. */
.menu-item > .perm-lock-ico { flex: 0 0 auto; }
/* Дребен ред под надписа (ActionItem 'hint', §0.3): правният термин под
   обикновените думи — „Върни пари / намали сумата“ → „кредитно известие“.
   Свой ред на цялата ширина, подравнен с надписа (след иконата). */
.menu-item:has(> .menu-item-hint) { flex-wrap: wrap; row-gap: 0; }
.menu-item > .menu-item-hint {
    flex: 0 0 100%;
    font-size: var(--text-caption);
    font-weight: 400;
    color: var(--color-text-secondary);
}
.menu-item > svg ~ .menu-item-hint { padding-left: calc(16px + var(--space-2)); }
.menu-item.is-disabled { opacity: .45; cursor: not-allowed; }
/* Действие, което не важи за избора (груповите действия, data-bulk-requires)
   — сиво, с причината в title-а; не изчезва, за да не подскача менюто. */
.menu-item:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
/* Името на група в менюто („Маркирай", „Фирма") — не е елемент за избор. */
.menu-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-text-muted);
}
/* Текущата подстраница в падащото на SideNav (§2.4). */
.menu-item.is-active { color: var(--brand-blue-dark); background: var(--brand-blue-light); font-weight: 600; }
/* PageHeader на телефон (§2.3): вторичното, преместено в „Още" (app-ux.js
   раздел 19) — обвивката (малка POST форма или .page-bar-secondary) е ред
   от менюто, не бутон в лентата. */
.menu-panel .page-bar-moved { display: block; }
.menu-panel .page-bar-moved > .menu-item { width: 100%; }
/* „Изтегли ▾“ (PageHeader $moreLabel) с иконата пред надписа; на телефон, с
   преместените вторични вътре, надписът е „Още“ и иконата отпада (раздел 19). */
.menu-toggle-ico { flex-shrink: 0; }
[data-more-label] > .menu-toggle-ico { display: none; }
/* Падащото на SideNav (_shared/side-nav) е Menu — на широк екран го няма
   (вертикалното меню е там), под 1000px заменя вертикалното (§2.4). */
.menu.side-nav-select { display: none; }
.side-nav-select .menu-panel { min-width: 240px; }
@media (max-width: 1000px) {
    .menu.side-nav-select { display: inline-flex; }
}

/* == Component: RowActions == */
/* §5.4 — действията в реда на таблица */
/* RowActions (§5.4): действията на реда никога не са на два реда. */
.row-actions { flex-wrap: nowrap; white-space: nowrap; }
/* _shared/row-actions.phtml има най-много две видими + „⋯" — не се пренася и
   в широката таблица (старото `.data-table-v2 .row-actions { wrap }` е за
   редовете с по пет иконки, докато модулите минат на партиала). */
.data-table-v2 .row-actions[data-row-actions],
.row-actions[data-row-actions] { flex-wrap: nowrap; align-items: center; }
.row-actions[data-row-actions] > .action-form { display: inline-flex; }
/* Краткият текстов btn-sm в реда („Клиентът плати“, §5.4): в тясна таблица
   бутонът се свиваше и иконата и катинарът по права (§8) ставаха 0 px —
   наблюдателят виждаше бутон без катинар. Както в .page-bar-actions. */
.row-actions .btn > svg,
.row-actions .btn > .perm-lock-ico { flex-shrink: 0; }
/* Иконните бутони на докосване са поне 40×40 (§5.4, §9) — същото важи за
   „×" на модала и за бутона само с икона. */
@media (pointer: coarse) {
    .row-action,
    .modal-close {
        min-width: 40px;
        min-height: 40px;
    }
}
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    /* Един цвят за <a> и <button> (§5.4): по-тих от данните в реда, но
       видим — сивото --color-text-muted беше под 3:1 върху бяло. */
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
}
.row-action:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.row-action--danger:hover { background: var(--color-danger-bg); border-color: var(--red-200); color: var(--color-danger); }
/* Недостъпно действие (напр. каса с движения не се трие) — трябва да се вижда,
   че бутонът не е активен, иначе изглежда като счупен клик. */
.row-action:disabled { opacity: .35; cursor: not-allowed; }
.row-action:disabled:hover { background: transparent; border-color: transparent; color: var(--color-text-muted); }
@media (hover: none) {
    .row-action { width: 36px; height: 36px; }
}

/* == Component: Card == */
/* §5.5 — карта и производните ѝ (action-card-v2, панели) */
/* Card (§5.5): рамка, радиус 12, отстъп 24 (16 на телефон), без сянка.
   .form-section, .action-card-v2 и .list-shell играят ролята на карта. */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: none;
}
.card + .card { margin-top: var(--space-4); }
.card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-snug);
    text-transform: none;
    color: var(--color-text-primary);
}
.card-head > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-secondary); }
.card-head > .card-head-count { color: var(--color-text-secondary); font-weight: 600; }
.card-head > .card-head-action { margin-left: auto; }
/* Следваща стъпка — единствената оцветена карта на екрана (горна синя черта 3px). */
.card--next-step { border-top: 3px solid var(--brand-blue); }
.card--danger-zone { border-color: var(--color-danger-bg); }
details.card--collapsible > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}
details.card--collapsible > summary::-webkit-details-marker { display: none; }
details.card--collapsible > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-out);
}
details.card--collapsible[open] > summary::after { transform: rotate(-135deg); }
@media (max-width: 560px) {
    .card { padding: var(--space-4); }
}
/* (старото .card — заменено от компонента по-горе) */
.panel-row-end { font-weight: 600; font-size: var(--text-small); flex-shrink: 0; text-align: right; }
/* Картите в колоната на изгледа (§3.2): NextStepCard, SendCard, PaymentsCard,
   HistoryCard — _shared/*-card.phtml. Главата е .card-head (икона 20, 16/700). */
.card > .card-head:last-child,
details.card:not([open]) > summary.card-head { margin-bottom: 0; }
.card-head > span { min-width: 0; }
.card-head-count { color: var(--color-text-secondary); font-weight: 600; }
details.card--collapsible > summary.card-head > .card-head-count { margin-left: var(--space-1); }
.next-step-card .card-head { margin-bottom: var(--space-2); }
.next-step-text { margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.next-step-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.next-step-actions .action-form { display: block; margin: 0; }
.next-step-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); }
/* Уточнение към алтернативата (кой е подателят от Telegram) — дребно, под бутоните. */
.next-step-note { margin: var(--space-2) 0 0; }
.next-step-note-action { margin-top: var(--space-1); }
.next-step-note-action .btn-link { padding-left: 0; padding-right: 0; }
.send-card .card-head { margin-bottom: var(--space-3); }
.send-card-sent,
.send-card-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}
.send-card-sent > svg { color: var(--color-success); }
/* Текстовите действия в изречението („Копирай · Виж като клиента") — без
   страничния отстъп на btn-sm, иначе се отместват и пренасят. */
.send-card-sent .btn-link,
.send-card-link .btn-link,
.next-step-links .btn-link { padding-left: 0; padding-right: 0; }
.send-card-link { margin-top: var(--space-3); }
.send-card-link-label { flex-basis: 100%; font-weight: 600; color: var(--color-text-primary); }
.payments-list,
.history-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.payments-row,
.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}
.payments-row-main,
.history-row { min-width: 0; }
.payments-row-main { display: flex; flex-direction: column; gap: 2px; }
.payments-row-meta,
.history-meta { font-size: var(--text-label); color: var(--color-text-secondary); }
/* Номерът на касовия ордер като линк към PDF-а му („ПКО № 12“ → разпечатай). */
.payments-row-link { color: var(--brand-blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.payments-row-link:hover { text-decoration: underline; }
.history-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.history-text { font-size: var(--text-small); color: var(--color-text-primary); }

/* == Component: Status: StatusBadge, StatusFlag, Tag == */
/* §5.6 — значка за статус, точка, етикет за вид */
/* StatusBadge (§5.6): точка и дума, 12/600, нормален регистър — работи
   навсякъде (досега само в .data-table-v2, затова в изгледа на периодична
   фактура статусът беше гол текст). Тонът е от токените --tone-* (§6). */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    background: var(--tone-gray-bg);
    color: var(--tone-gray-text);
}
.status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--tone-gray-dot);
    flex-shrink: 0;
}
.status-badge.status-gray        { background: var(--tone-gray-bg);        color: var(--tone-gray-text); }
.status-badge.status-gray-strong { background: var(--tone-gray-strong-bg); color: var(--tone-gray-strong-text); }
.status-badge.status-blue        { background: var(--tone-blue-bg);        color: var(--tone-blue-text); }
.status-badge.status-green       { background: var(--tone-green-bg);       color: var(--tone-green-text); }
.status-badge.status-amber       { background: var(--tone-amber-bg);       color: var(--tone-amber-text); }
.status-badge.status-orange      { background: var(--tone-orange-bg);      color: var(--tone-orange-text); }
.status-badge.status-orange-red  { background: var(--tone-orange-red-bg);  color: var(--tone-orange-red-text); }
.status-badge.status-red         { background: var(--tone-red-bg);         color: var(--tone-red-text); }
.status-badge.status-gray .status-dot        { background: var(--tone-gray-dot); }
.status-badge.status-gray-strong .status-dot { background: var(--tone-gray-strong-dot); }
.status-badge.status-blue .status-dot        { background: var(--tone-blue-dot); }
.status-badge.status-green .status-dot       { background: var(--tone-green-dot); }
.status-badge.status-amber .status-dot       { background: var(--tone-amber-dot); }
.status-badge.status-orange .status-dot      { background: var(--tone-orange-dot); }
.status-badge.status-orange-red .status-dot  { background: var(--tone-orange-red-dot); }
.status-badge.status-red .status-dot         { background: var(--tone-red-dot); }
/* StatusFlag (§5.6): второстепенни факти (Изпратена, Видяна, Осчетоводена) —
   в заглавната лента икона 14 и сив текст, в реда на списъка само икона. */
.status-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.status-flag svg { width: 14px; height: 14px; flex-shrink: 0; }
.status-flag--icon { gap: 0; }
/* Tag (§5.6): неутрален етикет за вид — „Фактура", „Услуга", „По ДДС". */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
}
/* Badges — uniform look */
.status-amber { color: var(--color-warning); }
/* Status colors for numbers */
.status-green {
    color: var(--color-success);
}
.status-red {
    color: var(--color-danger);
}
.status-blue {
    color: var(--brand-blue);
}
/* Count badges */
.count-badge {
    height: 22px;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 8px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-text-secondary);
}
/* Compact status menu */
.nav-lock svg { width: 12px; height: 12px; }
/* Picker badges (e.g. ТР = Търговски регистър result) */
.picker-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 999px;
    line-height: 1.2;
}
.picker-badge--tr {
    background: var(--violet-tr);
    color: var(--color-text-inverted);
    box-shadow: var(--shadow-legacy-4);
}
.picker-badge--tr::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8l9-5 9 5v10l-9 5-9-5V8z'/><path d='M3 8l9 5 9-5'/><path d='M12 13v10'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
/* БУЛСТАТ — вторият регистър, друг цвят, защото редът идва от друго място. */
.picker-badge--bulstat {
    background: var(--teal-700);
    color: var(--color-text-inverted);
    box-shadow: var(--shadow-legacy-5);
}
.picker-badge--bulstat::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V9l7-5 7 5v12'/><path d='M10 21v-6h4v6'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* == Component: StatTile == */
/* §5.7 — плочки с число */
/* StatTile (§5.7): етикет 12/600, стойност --text-stat, подтекст 12, лента 3px вляво в тон. */
.stat-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    text-decoration: none;
}
a.stat-tile:hover { border-color: var(--brand-blue); border-left-color: var(--brand-blue); }
.stat-tile-label { font-size: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); text-transform: none; }
.stat-tile-value { font-size: var(--text-stat); font-weight: 700; line-height: var(--leading-tight); }
.stat-tile-sub { font-size: var(--text-caption); color: var(--color-text-secondary); }
.stat-tile--brand { border-left-color: var(--brand-blue); }
.stat-tile--success { border-left-color: var(--color-success); }
.stat-tile--warn { border-left-color: var(--color-warning); }
.stat-tile--danger { border-left-color: var(--color-danger); }
.stat-tile--neutral { border-left-color: var(--color-border-strong); }
.stat-tile--compact { padding: var(--space-3) var(--space-4); }
.stat-tile--compact .stat-tile-value { font-size: var(--text-h4); }
/* Таблото е два реда обикновени StatTile (dashboard/_kpi_board, §5.7) —
   хоризонталният вариант --duo не се побираше по 4 в ред и отпадна (0 употреби). */
/* FactStrip: 1–4 компактни плочки в изгледа на документ. */
.fact-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.rank-cell {
    color: var(--color-text-muted);
}
.pct-cell {
    position: relative;
}
.pct-bar {
    height: 4px;
    background: var(--brand-blue-light);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.pct-bar-fill {
    height: 100%;
    background: var(--brand-blue);
}
/* (от раздел „СПРАВКИ В КЛИЕНТСКИЯ ПАСПОРТ — графика на оборота, платежна дисциплина,“) топ артикули. (clients/view → .insight-grid) */
.meter-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}
.meter-row strong { font-size: var(--text-label); color: var(--color-text-primary); }
.meter {
    height: 8px;
    border-radius: 999px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--accent-violet));
}
/* StatTile: подтекстът и етикетът не се режат; FactStrip на телефон — 2 колони (§3.2). */
.stat-tile-label,
.stat-tile-sub { overflow-wrap: anywhere; }
.stat-tile--compact .stat-tile-value { line-height: var(--leading-snug); }
@media (max-width: 560px) {
    .fact-strip { grid-template-columns: 1fr 1fr; }
}
/* Печат (§3.12): print.css и хартията са извън обхвата (§13) и не се
   променят. Нормалният регистър (§1.2) е за екрана — на хартия списъкът на
   документите остава както в еталона: видът (Tag) и статусът с главни букви,
   номерът — 13.5px. Думите са тези от екрана (§6, §7). Селекторите са
   по-тежки, защото основните правила за тези елементи са по-долу във файла. */
@media print {
    .data-table-v2 .td-doc .doc-link .doc-no { font-size: var(--text-print-doc-no); }
    .data-table-v2.invoices-table .td-doc .tag,
    .data-table-v2.invoices-table .td-status .status-badge { text-transform: uppercase; }
    /* Новите класове на мястото на старите, които print.css познава
       (`.mono` → `.doc-no` и `.money`, `.page-bar-count` → `.page-bar-meta`,
       видът като обикновен текст → `Tag`): на хартия — както в еталона,
       шрифтът на таблицата, без удебеляване и без фон на етикета. Само в
       списъка на документите и в паричните списъци (каса, разходи…) —
       там старата разметка беше `.mono`; извлечението за клиент и в
       еталона печата датите и сумите моноширинно. */
    .data-table.data-table-v2:is(.invoices-table, .money-table) :is(.doc-no, .money, .money-cp),
    .data-table.data-table-v2:is(.invoices-table, .money-table) a.doc-link { font-family: inherit; font-weight: normal; }
    /* Сумата — 13px, колкото старото `td.mono` и датата до нея. */
    .data-table.data-table-v2:is(.invoices-table, .money-table) td.money { font-size: var(--text-label); }
    .data-table .tag {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: normal;
        color: inherit;
    }
    /* Като старото .page-bar-count в print.css: 9pt и #444 — без цвета метата
       излизаше в синкаво сивото на екрана (--color-text-secondary). */
    .page-bar-meta { font-size: var(--text-print-meta); color: var(--color-print-meta); }
}

/* == Component: Alert == */
/* §5.8 — постоянна бележка на мястото си */
/* Alert (§5.8): икона (SVG .alert-ico) + текст (.alert-body) + по желание
   .alert-actions. Глифът в ::before остава само за старата разметка без
   .alert-ico (виж .alert.alert--icon по-долу). .alert--banner е глобалната
   лента под хедъра (§2.2). */
.alert > .alert-ico {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}
/* `.alert.alert--banner` (0,2,0): `.alert` и `.alert-<тон>` по-надолу (раздел
   „Alerts — refined“) връщаха рамката от всички страни, заобления и отстъпа
   отдолу — лентата приличаше на карта под хедъра. */
.alert.alert--banner {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}
/* Глобалната лента (§2.2) с .container вътре: текстът е в работната ширина
   на страницата, а фонът и линията отдолу — през целия екран („Само
   преглед“, абонаментът). Текстът е тъмен — изречението е дълго, а тонът
   стига във фона, линията и иконата. */
.alert.alert--banner:has(> .container) { display: block; padding: 0; color: var(--color-text-primary); }
.alert.alert--banner:has(> .container)::before { content: none; }
.alert--banner > .container {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
.alert--banner > .container > .alert-ico { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.alert-warning.alert--banner > .container > .alert-ico { color: var(--color-warning); }
.alert-error.alert--banner > .container > .alert-ico { color: var(--color-danger); }
.alert-info.alert--banner > .container > .alert-ico { color: var(--color-info); }
.alert--banner > .container > .alert-actions { align-self: center; }
/* Телефон: действията на Alert са на свой ред под текста — до него текстът
   се свиваше до една дума на ред (§9). */
@media (max-width: 560px) {
    .alert:has(> .alert-actions),
    .alert--banner > .container:has(> .alert-actions) { flex-wrap: wrap; }
    .alert > .alert-actions,
    .alert--banner > .container > .alert-actions { flex: 1 1 100%; margin-left: 0; }
    /* Дълъг надпис („Внеси липсващите 3 830,00 € и ги върни от касата“) се
       пренася в бутона, вместо да излиза извън жълтата кутия. */
    .alert > .alert-actions > *,
    .alert > .alert-actions .btn { max-width: 100%; }
    .alert > .alert-actions .btn { white-space: normal; line-height: 1.25; text-align: left; }
}
/* `display: flex` бие UA правилото за [hidden] — без това скритите резервни
   alert-и (напр. „PDF-ът е блокиран") стоят видими на страницата. */
.alert[hidden] { display: none; }
/* Обвивка за alert с богато съдържание (<strong>, <code>, линк).
   `.alert` е flex контейнер, така че БЕЗ обвивка всеки текстов възел и всеки
   инлайн елемент става ОТДЕЛЕН flex item и изречението се разпада на колони.
   min-width:0 позволява на дълъг <code> да се пренася, вместо да избутва
   страницата настрани (хоризонтален скрол на телефон). */
.alert-body {
    flex: 1;
    min-width: 0;
}
.alert-body code {
    overflow-wrap: anywhere;
}
/* Разметката по §5.8 (SVG .alert-ico) — без глифа в ::before и без нужда от
   .alert--icon (партиалите flash и page-header). */
.alert:has(> .alert-ico) { gap: var(--space-3); }
.alert:has(> .alert-ico)::before { content: none; }
/* „Провери N полета" — линк към първото поле, в цвета на съобщението. */
.form-summary a { color: inherit; font-weight: 600; text-decoration: underline; }
.alert-success > .alert-ico { color: var(--color-success); }
.alert-error   > .alert-ico { color: var(--color-danger); }
.alert-warning > .alert-ico { color: var(--color-warning); }
.alert-info    > .alert-ico { color: var(--color-info); }
.alert-warning::before { content: "!"; color: var(--color-warning); }
.alert-info::before { content: "i"; color: var(--color-info); }
.alert::before {
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
    font-size: var(--text-body);
}
.alert-success::before {
    color: var(--color-success);
    content: '✓';
}
.alert-error::before {
    color: var(--color-danger);
    content: '⚠';
}
/* Alerts — refined */
/* --- Alerts --- */
.alert {
    border: 1px solid transparent;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    font-size: var(--text-small);
}
/* Текстът е в тъмния нюанс на тона (--tone-<t>-text, ≥ 4,5:1 — §9), тонът
   стига във фона, рамката и иконата — както в лентата (.alert--banner).
   Досега текстът беше в самия тон: жълто върху жълто 1,9:1, синьо 3:1,
   червено 3,1:1, зелено 2,1:1. */
.alert-success {
    border: 1px solid var(--green-300);
    background: var(--color-success-bg);
    color: var(--tone-green-text);
}
.alert-error {
    border: 1px solid var(--red-300);
    background: var(--color-danger-bg);
    color: var(--tone-red-text);
}
.alert-warning {
    border: 1px solid var(--amber-300);
    background: var(--color-warning-bg);
    color: var(--tone-amber-text);
}
.alert-info {
    border: 1px solid var(--blue-300);
    background: var(--color-info-bg);
    color: var(--tone-blue-text);
}
/* Вариант „Просрочено“ — тонът на значката „Просрочена“ (orange-red, §6), не
   жълтото „чака решение от теб“: бележката за просрочено плащане (изгледът на
   клиента; същото може да ползва и всеки друг модул). Разметката е
   `alert alert-warning alert--overdue` — без варианта бележката пак се вижда,
   в жълто. Досега беше само в pages/records.css (records-r2). */
.alert.alert--overdue {
    border-color: color-mix(in srgb, var(--tone-orange-red-dot) 35%, transparent);
    background: var(--tone-orange-red-bg);
    color: var(--tone-orange-red-text);
}
.alert.alert--overdue > .alert-ico,
.alert.alert--overdue::before { color: var(--tone-orange-red-dot); }

/* == Component: Toast == */
/* §5.8 — съобщение за успех долу вдясно (на телефон — долу на цялата ширина).
   Горе под хедъра покриваше основния бутон на заглавната лента („+ Нов
   клиент") точно когато човек иска да добави следващия, а на телефон — H1.
   Долу стои над лепкавите ленти с бутони (формата, листът на модала,
   бележката за бисквитките): app-ux.js вдига `bottom` над тях. */
.toast-host {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(440px, calc(100vw - 32px));
}
@media (max-width: 560px) {
    .toast-host {
        left: var(--space-2);
        right: var(--space-2);
        bottom: var(--space-2);
        max-width: none;
    }
}
/* Toast с действие („Разпечатай ордера", „Върни") — стои до затваряне (§5.8). */
.toast-action {
    margin-left: var(--space-2);
    flex-shrink: 0;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-legacy-6);
    font-size: var(--text-label);
    line-height: 1.5;
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}
/* Идва отдолу, където стои (без втората анимация slideIn отдясно). */
.toast.is-visible { opacity: 1; transform: translateY(0); }
/* Toast от предишното действие, който би лежал върху отворения модал (на
   телефон — върху полетата на листа): скрит, докато модалът е отворен
   (app-ux.js, раздел 1). Toast с действие се връща след затварянето. */
.toast.is-under-modal { visibility: hidden; opacity: 0; pointer-events: none; }
.toast-success { border-left: 4px solid var(--color-success); }
.toast-error   { border-left: 4px solid var(--color-danger); }
.toast-warning { border-left: 4px solid var(--color-warning); }
.toast-info    { border-left: 4px solid var(--brand-blue); }
.toast-msg { flex: 1; white-space: pre-line; }
/* На телефон бутонът на toast-а („Върни се в „…““, „Разпечатай ордера“) е на
   свой ред под текста, вдясно: в един ред с него изречението се смачкваше в
   тясна колона (4 реда по 2–3 думи). Текстът и „×“ са на първия ред. */
@media (max-width: 560px) {
    .toast:has(> .toast-action) { flex-wrap: wrap; row-gap: var(--space-2); }
    .toast:has(> .toast-action) > .toast-msg { flex: 1 1 calc(100% - 24px - var(--space-3)); min-width: 0; }
    .toast:has(> .toast-action) > .toast-close { order: 1; }
    .toast > .toast-action { order: 2; margin-left: auto; }
}
/* Toast-ът стои 20 секунди — „×"-ът е основният начин да се махне по-рано,
   затова има истинска мишена за клик, а не само глиф. */
.toast-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -2px -4px 0 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-h4);
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.toast-close:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-subtle);
}
.toast-close:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 1px;
}

/* == Component: EmptyState == */
/* §5.9 — празно състояние */
/* Empty-state component — for tables, lists, or cards with no data */
/* Empty state */
.empty-state {
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--space-12) var(--space-6);
}
.empty-state-icon {
    line-height: 1;
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
    opacity: 0.6;
}
/* Иконата е SVG, а общото правило прави svg блоков елемент — text-align:
   center не го мести и той стоеше вляво, докато текстът и бутонът са в
   средата (първият екран на нова фирма в /invoices). */
.empty-state .empty-state-icon > svg,
.empty-state .empty-state-icon > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.empty-state-title {
    margin: 0 0 6px;
    font-size: var(--text-h4);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}
.empty-state-desc {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    max-width: 460px;
    margin: 0 auto var(--space-5);
    line-height: 1.5;
}
.empty-state-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}
/* _shared/empty-state.phtml: икона 40 със stroke 1.75 (§5.9) — без
   полупрозрачността на старите емоджи. */
.empty-state .empty-state-icon { font-size: inherit; opacity: 1; color: var(--color-text-muted); }
.empty-state--locked .empty-state-icon { color: var(--tone-amber-text); }
.empty-state--done .empty-state-icon { color: var(--color-success); }
.empty-state-note { margin: var(--space-3) auto 0; max-width: 460px; font-size: var(--text-label); color: var(--color-text-secondary); }
.empty-state-actions .action-form { display: inline-flex; margin: 0; }
.empty-state-row > td { padding: 0; }
.empty-state-row > td::before { content: none; }
/* PlanLock (§5.15) — заключеното съдържание стои в карта по средата. */
.plan-lock .empty-state {
    max-width: 560px;
    margin: var(--space-8) auto var(--space-16);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* == Component: Forms: полета, етикети, групи == */
/* §5.10 — app-form, form-section, поле, подсказка, грешка, Segmented/ChoiceChips */
/* Поле (§5.10): етикетът над полето (13/600), подсказка под него (13px),
   грешката — под подсказката (.field-error). Задължително: червена звезда. */
.field-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-label);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: normal;
}
.req { color: var(--color-danger); margin-left: 2px; font-weight: 600; }
/* ReadOnlyField (§5.17): етикет и стойност като текст, не изключено поле. */
.read-only-field { display: block; }
.read-only-field-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.read-only-field-value { display: block; font-size: var(--text-small); color: var(--color-text-primary); }
/* Segmented (§5.10): 2–4 взаимно изключващи се кратки възможности. */
.segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
}
.segmented > label,
.segmented > button,
.segmented > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.segmented > label > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented > label:has(input:checked),
.segmented > .is-active {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}
/* ChoiceChips (§5.10): кратки отговори (начин на плащане, причина). */
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-chips > label,
.choice-chips > button {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.choice-chips > label > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-chips > label:has(input:checked),
.choice-chips > .is-active { border-color: var(--brand-blue); background: var(--brand-blue-light); color: var(--brand-blue-dark); }
/* ChoiceCards (§5.10): голям избор със заглавие и едно изречение. */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.choice-cards > label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    cursor: pointer;
}
.choice-cards > label > input { position: absolute; opacity: 0; pointer-events: none; }
.choice-cards > label:has(input:checked) { border-color: var(--brand-blue); background: var(--brand-blue-light); }
/* Disclosure (§5.10): „Още опции — …" с шеврон вдясно. */
details.disclosure > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--brand-blue);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-out);
}
details.disclosure[open] > summary::after { transform: rotate(-135deg); }
details.disclosure[open] > summary { margin-bottom: var(--space-4); }
/* FileDrop (§5.10): „Пусни файла тук или избери". */
.file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    text-align: center;
    cursor: pointer;
}
.file-drop.is-dragover,
.file-drop:focus-within { border-color: var(--brand-blue); background: var(--brand-blue-light); }
.file-drop > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop-name { font-weight: 600; color: var(--color-text-primary); }
/* FormActionBar (§3.4): лепне долу, сумата вляво, бутоните вдясно. */
.form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
}
.form-actions-sum { margin-right: auto; font-weight: 700; }
/* FormActionBar на телефон (§3.4 т.6) — една лента за всички форми (документ,
   запис, настройки, профил, помощ): на цялата ширина (извън отстъпа на
   страницата, както при фактурата), сумата или изречението на свой ред отгоре,
   „Отказ" — 1/3, основното — 2/3. Второ леко действие („Запази като чернова",
   „Върни по подразбиране") е на свой ред над тях. Тежестта (0,3,1) е над
   екранните варианти на лентата по модулите — без !important.
   display и position не се пипат: лентата е flex и лепне от общия вид, а
   формата може да я крие (фактурата преди избора на вид). */
@media (max-width: 560px) {
    body.is-app .app-form > .form-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-2) var(--space-3);
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        padding: var(--space-3) var(--space-4);
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: none;
    }
    body.is-app .app-form > .form-actions > .form-actions-sum { flex: 1 1 100%; margin-right: 0; }
    body.is-app .app-form > .form-actions > .btn { flex: 1 1 0; justify-content: center; order: 2; }
    body.is-app .app-form > .form-actions > button.btn-ghost { flex: 1 1 100%; order: 1; margin: 0; }
    body.is-app .app-form > .form-actions > :is(.btn-primary, .btn-danger-outline) { flex: 2 1 0; order: 3; }
}
.form-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}
.form-section:last-child { margin-bottom: 0; }
.form-section > h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-body-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.form-section > h3 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-secondary);
}
.form-section > h3:first-child { margin-top: 0; }
.form-section > p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-align: left;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
@media (max-width: 720px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.form-section .form-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 640px) {
    .form-grid-2,
        .form-grid-3 {
            grid-template-columns: 1fr;
        }
}
/* Required field marker in labels */
.required {
    color: var(--color-danger);
    font-weight: 700;
    margin-left: 2px;
}
/* Invoice form — full-width за повече място за redове */
.app-form.invoice-form {
    max-width: none;
}
.app-form .form-section:where(:first-child) {
    padding-top: 28px;
}
.app-form .form-section:where(:last-child) {
    border-bottom: 0;
}
.app-form label:last-child {
    margin-bottom: 0;
}
.app-form input:not([type="checkbox"]):where(:not([type="radio"])) {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: all 120ms var(--ease-out);
    line-height: 1.4;
}
.app-form :where(input:hover, select:hover, textarea:hover) {
    border-color: var(--color-border-strong);
}
.app-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a12);
    background-color: var(--color-bg-card);
}
/* Поле с мерна единица (напр. „%" на ДДС ставката, валутата в касата).
   Рамката е на обвивката, а самото поле е прозрачно вътре в нея — така
   единицата стои ВЪТРЕ в полето, без да се бори за място със стрелките на
   number полето (всеки браузър ги рисува на различно място). */
.input-suffix-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-input);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.input-suffix-wrap:hover { border-color: var(--color-border-strong); }
.input-suffix-wrap:focus-within {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a12);
}
.input-suffix-wrap input.has-suffix,
.input-suffix-wrap input.has-suffix:hover,
.input-suffix-wrap input.has-suffix:focus {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}
.input-suffix-wrap .input-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px 0 8px;
    border-left: 1px solid var(--color-border-subtle);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-label);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
/* Live преглед на Email шаблон. */
.email-preview { margin: 4px 0 8px; }
.email-preview-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-legacy-7);
}
.email-preview-head {
    padding: 12px 16px;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-label);
    color: var(--color-text-secondary);
}
.email-preview-head .ep-row { padding: 2px 0; }
.email-preview-head .ep-row > span {
    display: inline-block;
    width: 34px;
    color: var(--color-text-muted);
}
.email-preview-head .ep-row strong { color: var(--color-text-primary); font-weight: 600; }
.email-preview-head .ep-subject { margin-top: 2px; }
.email-preview-body {
    padding: 18px 16px;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--slate-900);
    word-break: break-word;
}
.app-form input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}
.app-form .form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.app-form .form-grid-2 label,
.app-form .form-grid-3 label,
.app-form .form-grid-4 label {
    margin-bottom: 0;
}
/* Checkbox styled по-нов начин */
.app-form .legal-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--text-label);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 120ms var(--ease-out);
    margin: 0;
    width: auto;
    min-height: 42px;
    box-sizing: border-box;
}
.app-form .legal-check:hover {
    border-color: var(--color-border-strong);
    background: var(--color-bg-hover);
}
.app-form .legal-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--brand-blue);
    cursor: pointer;
}
.app-form .legal-check span {
    margin: 0;
    font-weight: 500;
    color: var(--color-text-primary);
}
/* Grids внутри form-section */
.app-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 720px) {
    .app-form .form-grid-2,
        .app-form .form-grid-3,
        .app-form .form-grid-4 {
            grid-template-columns: 1fr;
        }
}
/* ---- General polish ---- */
/* Smoother focus rings */
input:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
select:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
textarea:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
button:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
.app-form .form-section:where(:first-child) {
    padding-top: 0;
}
.app-form .form-section:where(:last-child) {
    padding-bottom: 0;
    border-bottom: 0;
}
.app-form input:not([type="checkbox"]):where(:not([type="radio"])) {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.app-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a15);
}
/* Form action bar */
.form-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
/* Legal check — refined */
.legal-check {
    transition: all 120ms var(--ease-out);
    margin: 0;
    width: auto;
    min-height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-subtle);
    border-radius: 8px;
    font-size: var(--text-label);
    color: var(--color-text-primary);
    cursor: pointer;
    border: 1px solid transparent;
}
.legal-check:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border);
}
.legal-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-blue);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}
/* App form wrapper — центрирана, widthful ---- */
/* Generic form polish */
/* --- Forms (app side) --- */
.app-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0 auto;
    box-shadow: var(--shadow-legacy-8);
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    max-width: 820px;
}
.app-form h2 {
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    font-size: var(--text-h4);
    font-weight: 700;
    margin-bottom: var(--space-2);
}
/* Form sections — distinct separators */
.app-form .form-section {
    margin: 0;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}
.app-form .form-section:where(:first-child) {
    padding-top: 0;
}
.app-form .form-section:where(:last-child) {
    padding-bottom: 0;
    border-bottom: 0;
}
.modal-card label {
    display: block;
    margin-bottom: var(--space-3);
}
.app-form label {
    display: block;
    margin-bottom: var(--space-4);
}
.modal-card label > span {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.app-form label > span {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}
.app-form :where(input[type="text"]) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
}
.app-form :where(input[type="email"]) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
}
.app-form :where(input[type="tel"]) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
}
.app-form :where(input[type="number"]) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
}
.app-form :where(input[type="date"]) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
}
.modal-card select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    min-height: 40px;
}
/* Restore the dropdown chevron: the shorthand `background` above otherwise
   wipes the caret that design-base.css gives every other <select>, so selects
   inside .app-form (e.g. „Режим на закръгляне") looked like plain inputs. */
.app-form select {
    line-height: 1.4;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
}
.app-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
.app-form select:focus {
    background-color: var(--color-bg-card);
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
.app-form textarea:focus {
    background-color: var(--color-bg-card);
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
/* Form actions bar — sticky bottom */
/* Лепкавата лента е над съдържанието на формата (--z-sticky, §1.3): иначе
   позиционираното отдолу (бутонът „Запази клиента", значката „ТР") се
   рисуваше върху нея. Плаващите резултати и менютата не слизат под нея
   (app-ux.js, bottomBarTop). */
.app-form .form-actions {
    padding: 20px 32px;
    background: var(--color-bg-subtle);
    align-items: center;
    margin: 0;
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    border-radius: 0 0 14px 14px;
    backdrop-filter: blur(8px);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
/* (от раздел „Валидация на формите — собствен UI“) Всяка форма е с `novalidate` (виж App/View/**), затова нативното балонче
   вече не се появява и това тук е ЕДИНСТВЕНОТО, което потребителят вижда
   при грешка. Рисува се от секция 6 на assets/app-ux.js.
   Общият вид на полетата във формите е лек (`.app-form:where(…) input:focus`
   = 0,2,1 — F2 в); състоянието „грешка" на полето е с !important, за да не се
   губи под фокуса. */
.field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--text-label);
    line-height: 1.45;
    font-weight: 500;
    color: var(--color-danger);
}
/* Иконата е маска, не фон — така взима цвета от текста и остава четлива,
   ако някой ден блокът смени тона. */
.field-error::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Самото поле — и в покой, и на hover/фокус. */
input.is-invalid {
    border-color: var(--color-danger) !important;
    box-shadow: none;
}
select.is-invalid {
    border-color: var(--color-danger) !important;
    box-shadow: none;
}
textarea.is-invalid {
    border-color: var(--color-danger) !important;
    box-shadow: none;
}
input.is-invalid:hover {
    border-color: var(--color-danger) !important;
    box-shadow: none;
}
select.is-invalid:hover {
    border-color: var(--color-danger) !important;
    box-shadow: none;
}
textarea.is-invalid:hover {
    border-color: var(--color-danger) !important;
    box-shadow: none;
}
input.is-invalid:focus {
    border-color: var(--color-danger) !important;
    outline: none;
    box-shadow: var(--ring-red-500-a14) !important;
}
select.is-invalid:focus {
    border-color: var(--color-danger) !important;
    outline: none;
    box-shadow: var(--ring-red-500-a14) !important;
}
textarea.is-invalid:focus {
    border-color: var(--color-danger) !important;
    outline: none;
    box-shadow: var(--ring-red-500-a14) !important;
}
/* Полето с мерна единица носи рамката на обвивката — вътрешният input
   няма своя, така че червеното трябва да иде на .input-suffix-wrap. */
.input-suffix-wrap:has(.is-invalid),
.input-suffix-wrap:has(.is-invalid):hover,
.input-suffix-wrap:has(.is-invalid):focus-within {
    border-color: var(--color-danger) !important;
    box-shadow: var(--ring-red-500-a14) !important;
}
/* Етикетите с чекбокс са inline-flex — без това съобщението застава ДО
   текста и разтяга кутията, вместо да падне под нея. */
label.legal-check {
    flex-wrap: wrap;
}
label.legal-check > .field-error {
    flex: 0 0 100%;
}
/* Чекбоксът е в рамкирана кутия — червената рамка стои по-добре на нея,
   отколкото ореол около самото квадратче. */
label.legal-check:has(input.is-invalid),
label.legal-check:has(input.is-invalid):hover {
    border-color: var(--color-danger) !important;
    background: var(--color-danger-bg) !important;
}
/* Чекбокс/радио извън такава кутия нямат рамка — маркират се с ореол. */
input[type="checkbox"].is-invalid,
input[type="radio"].is-invalid {
    outline: 2px solid var(--color-danger);
    outline-offset: 2px;
}
label.legal-check input[type="checkbox"].is-invalid {
    outline: none;
}
[data-tab-panel] > .app-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
[data-tab-panel] > .app-form > .form-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin: 0 0 var(--space-4);
    box-shadow: var(--shadow-legacy-1);
}
[data-tab-panel] > .app-form > .form-actions {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
[data-tab-panel] > .app-form .legal-check {
    height: 38px;
    margin: 0 !important;
    align-self: end;
}
[data-tab-panel] .form-grid-2 > .legal-check {
    align-self: end;
    margin: 0 !important;
}
.settings-form .form-section:last-child { border-bottom: 0; }
/* Официалните имена са дълги, а полето е тясно. Само под името: picker-ът на
   ЕИК е в средната колона и оттам разширяването излиза извън картата. */
.form-field--name .client-picker-results {
    min-width: 320px;
    max-width: calc(100vw - 32px);
}
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 560px) {
    .form-grid-2 {
            grid-template-columns: 1fr;
        }
}
/* Password "eye" — the wrapper and button are injected by the snippet in
   layout.phtml, so this styles markup that exists only at runtime. */
.password-wrap {
    position: relative;
    display: block;
}
.password-wrap > input {
    display: block;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    padding: 4px;
    color: var(--slate-400);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 10;
}
.password-toggle:hover {
    color: var(--brand-blue);
    background: none !important;
}
/* Двуколонен form layout: помощен панел ВЛЯВО + форма (целият блок центриран) */
.form-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 880px);
    gap: 24px;
    justify-content: center;
    align-items: start;
}
/* Във form-layout: ВСЯКО не-aside дете отива в широката колона (вкл. div-обвивки като при
   гаранциите) — иначе обвивката взимаше order:0 и влизаше в тясната колона. */
:where(body.is-app .app-page) .form-layout > form.app-form,
.form-layout > form.app-form,
.form-layout > div { max-width: none; margin: 0; order: 2; min-width: 0; }
/* и формата ВЪТРЕ в div-обвивка (гаранции) запълва колоната */
:where(body.is-app .app-page) .form-layout > div > form.app-form,
.form-layout > div > form.app-form { max-width: none; margin: 0; width: 100%; }
/* Във form-layout формата НЕ е „кутия в кутия" — прозрачна като при фактурата;
   картите са самите .form-section елементи. */
:where(body.is-app .app-page) .form-layout form.app-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    /* Базовият .app-form реже с overflow:hidden, за да пази заоблените си
       ъгли. Тук формата НЕ е кутия и няма какво да се реже — остане ли
       hidden, изяжда падащите менюта на клиентския autosuggest. */
    overflow: visible;
}
/* „Фактурената" акцентна лента — върху първата карта на всяка форма */
.app-form:where(body.is-app .app-page form) > .form-section:first-of-type,
.form-layout > div > form.app-form > .form-section:first-of-type {
    position: relative;
    overflow: hidden;
}
/* (градиентната лента върху първата карта отпадна — §5.5) */
/* Широк вариант (фактурата): лява лента + редакторът заема остатъка */
.form-layout--wide {
    grid-template-columns: 300px minmax(0, 1fr);
    justify-content: stretch;
}
/* Отстъпът на картата във формата — като на Card (§1.3, §5.5): 24, под 560px 16. */
:where(body.is-app) .app-form .form-section { padding: var(--space-6); }
@media (max-width: 560px) {
    :where(body.is-app) .app-form .form-section { padding: var(--space-4); }
}
@media (max-width: 1180px) {
    .form-layout { grid-template-columns: 1fr; }
}
/* Главата на картата във формата — като .card-head (§5.5, една глава
   навсякъде): икона 20 без кръгче, 16/700, без линия отдолу. */
.app-form:where(body.is-app .app-page form) .form-section > h2 {
    margin: 0 0 var(--space-4);
    padding: 0;
    border-bottom: 0;
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
}
/* Картите на секциите — като .form-card на фактурата.
   БЕЗ padding тук — отстъпът се задава по-горе. */
.app-form:where(body.is-app .app-page form) .form-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-legacy-1);
}
/* Полетата — точните размери от фактурата (9px/12px, 13.5px).
   Тежест (F2 в): обхватът „форма в приложението" е в :where(body.is-app
   .app-page form) и не тежи — правилото е колкото `.app-form input[type=…]`
   (0,2,1). Модулът го надвива от assets/pages/<ключ>.css с
   `[data-module="<ключ>"] .app-form …` без !important. По-старите общи
   правила за .app-form (по-горе) са олекотени по същия начин, за да не
   печелят от него; вижът на екрана е проверен с A/B на изчислените стилове. */
.app-form:where(body.is-app .app-page form) input[type="text"],
.app-form:where(body.is-app .app-page form) input[type="email"],
.app-form:where(body.is-app .app-page form) input[type="tel"],
.app-form:where(body.is-app .app-page form) input[type="url"],
.app-form:where(body.is-app .app-page form) input[type="number"],
.app-form:where(body.is-app .app-page form) input[type="date"],
.app-form:where(body.is-app .app-page form) input[type="search"],
.app-form:where(body.is-app .app-page form) input[type="password"],
.app-form:where(body.is-app .app-page form) select,
.app-form:where(body.is-app .app-page form) textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.app-form:where(body.is-app .app-page form) input:focus,
.app-form:where(body.is-app .app-page form) select:focus,
.app-form:where(body.is-app .app-page form) textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a12);
}
/* Етикетите — малки, плътни, като на фактурата */
.app-form:where(body.is-app .app-page form) .form-section label > span:first-child {
    display: block;
    margin-bottom: 5px;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.app-form:where(body.is-app .app-page form) .form-section > label:not(.legal-check) {
    display: block;
    margin-bottom: var(--space-4);
}
.app-form:where(body.is-app .app-page form) .form-section > label:last-child { margin-bottom: 0; }
/* legal-check остава flex (чекбокс + текст на един ред) — block би пуснал
   span-а (display:block от .app-form label > span) на нов ред */
.app-form:where(body.is-app .app-page form) .form-section label.legal-check {
    display: flex;
    align-items: center;
}
.app-form:where(body.is-app .app-page form) .form-section .legal-check > span { margin-bottom: 0; }
/* Таблици с редове (оферти/протоколи/гаранции) — числовите полета не се
   свиват до нечетимост („20" ставаше „2"), по-компактен padding в клетките */
.app-form:where(body.is-app .app-page form) .form-section table input[type="number"] { min-width: 72px; }
.app-form:where(body.is-app .app-page form) .form-section table input,
.app-form:where(body.is-app .app-page form) .form-section table select {
    padding: 8px 10px;
    font-size: var(--text-label);
}
/* Акцентна лента и при форми, започващи с две карти една до друга (офертата) */
.app-form:where(body.is-app .app-page form) > .form-grid-2:first-of-type > .form-section {
    position: relative;
    overflow: hidden;
}
/* (градиентната лента върху първата карта отпадна — §5.5) */
/* (от раздел „КЛИЕНТСКИ БЛОК (.client-box) — преизползваемият „Клиент" от фактурата за“) оферти, протоколи, гаранции, периодични. Генерирано копие на инвойсните
   стилове с друг скоуп; партиал: App/View/_shared/client-box.phtml. */
/* Клиентският блок носи autosuggest, който ИЗЛИЗА извън картата си. И двата
   контейнера го режеха с overflow:hidden (формата — заради заоблените си
   ъгли; картата — заради акцентната лента), затова падащото меню свършваше на
   ръба на блока и последните резултати не се виждаха. Тук — и само тук —
   спираме рязането; лентата пази ъглите през собствения си border-radius
   (виж правилото за .form-section:first-of-type::before). */
.app-form:has(.client-box) { overflow: visible; }
.app-form:where(body.is-app .app-page form) > .form-section.client-box,
.form-layout > div > form.app-form > .form-section.client-box,
.app-form:where(body.is-app .app-page form) > .form-grid-2 > .form-section.client-box {
    overflow: visible;
}
/* Същият капан, друга карта: picker-ът „Към фактура №" в протокола стои в
   ПЪРВАТА .form-section и менюто му свършваше на ръба ѝ — от десет
   предложения се виждаше и кликаше само първото. */
.app-form:has(.invoice-picker) { overflow: visible; }
.app-form:where(body.is-app .app-page form) > .form-section:has(.invoice-picker),
.form-layout > div > form.app-form > .form-section:has(.invoice-picker) {
    overflow: visible;
}
/* (от раздел „ШИРИНА НА ФОРМИТЕ — 80% от екрана с адекватен таван.“) form-layout страниците (aside + форма): до 1640px.
   Самостоятелните форми (склад, периодични, екип): до 1160px — полетата
   не бива да се разпъват до нечетимост. */
:where(body.is-app .app-page) .form-layout {
    width: min(80vw, 1640px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 320px minmax(0, 1fr);
    justify-content: stretch;
}
:where(body.is-app .app-page) .form-layout.form-layout--wide {
    grid-template-columns: 300px minmax(0, 1fr);
}
@media (max-width: 1180px) {
    /* Двете колони (320px „Съвети" + формата) са по-специфични от общото
           мобилно `.form-layout { 1fr }` и на телефон формата излизаше извън
           екрана — тук се налага една колона, а „Съвети" слизат под формата. */
    :where(body.is-app .app-page) .form-layout {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }
    :where(body.is-app .app-page) .form-layout.form-layout--wide {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (min-width: 1181px) and (max-width: 1365px) {
    /* 1181–1365px (малък лаптоп, таблет в пейзаж): 80% от екрана минус
       страничния панел оставяше на колоната „Артикул" във формата на документ
       33–110px. Тук формата взима цялата ширина, а панелът е по-тесен. */
    :where(body.is-app .app-page) .form-layout.form-layout--wide {
            width: 100%;
            grid-template-columns: 260px minmax(0, 1fr);
        }
}
/* --- Формата на клиента: значка VIES до ЕИК (Trello #98) ---------------- */
/* Същата контрола като в документната форма, но тук полето е обикновен
   .app-form input, затова геометрията се повтаря локално. */
.app-form .eik-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.app-form .eik-input-wrap > input {
    flex: 1 1 auto;
    padding-right: 54px !important;
}
/* VIES познава само юридически лица — при ФЛ значката пада и падингът се връща. */
[data-client-type="physical"] .app-form .eik-vies-badge,
.app-form[data-client-type="physical"] .eik-vies-badge { display: none; }
.app-form[data-client-type="physical"] .eik-input-wrap > input { padding-right: 12px !important; }
/* Поле с мерна единица във формите (ДДС %, валута в касата) — рамката е на
   .input-suffix-wrap, затова самото поле вътре е без своя рамка/фон/фокус.
   Селекторите повтарят тежестта на общия вид `.app-form:where(…) input`
   и на `.app-form label > span` (иначе обвивката пада на display:block и
   рамката ѝ изчезва). */
.app-form label > span.input-suffix-wrap {
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-input);
    overflow: hidden;
}
.app-form label > span.input-suffix-wrap:hover,
.app-form:where(body.is-app .app-page form) label > span.input-suffix-wrap:hover {
    border-color: var(--color-border-strong);
}
.app-form label > span.input-suffix-wrap:focus-within,
.app-form:where(body.is-app .app-page form) label > span.input-suffix-wrap:focus-within {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a12);
}
.app-form label > span.input-suffix-wrap > span.input-suffix {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.app-form:where(body.is-app .app-page form) .input-suffix-wrap input.has-suffix,
.app-form:where(body.is-app .app-page form) .input-suffix-wrap input.has-suffix:hover,
.app-form:where(body.is-app .app-page form) .input-suffix-wrap input.has-suffix:focus {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}
/* (от раздел „ИНТУИТИВНОСТ — форми без лява колона „Съвети". Каквото тя обясняваше“) (запази клиента, име на правилото…) вече става само, затова формата
   заема цялата ширина с таван, при който полетата още се четат. */
:where(body.is-app .app-page) .form-layout.form-layout--solo,
:where(body.is-app .app-page) .form-layout.form-layout--wide.form-layout--solo {
    width: min(92vw, 1320px);
    /* 92vw е по-широко от съдържанието на .container на телефон (390 → 358px
       в 346px) — формата излизаше вдясно и страницата се влачеше настрани.
       Таванът е ширината на контейнера. */
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 1180px) {
    /* И двата селектора — иначе --wide печели по специфичност и остава 92vw. */
    :where(body.is-app .app-page) .form-layout.form-layout--solo,
        :where(body.is-app .app-page) .form-layout.form-layout--wide.form-layout--solo { width: 100%; }
}
/* _shared/field.phtml (§5.10): .form-field > label.form-label + поле +
   подсказка + грешка + бърза поправка. Документната форма и client-box
   уточняват .form-field със своите решетки — това е общият вид. */
.form-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.form-label {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* `label > span:first-child` (design-base) прави първия <span> в етикет блок —
   звездата и „(по избор)" са в реда на думата. */
.form-label > .req,
.form-label > .form-label-optional { display: inline; margin: 0 0 0 2px; font-size: inherit; }
/* `.form-label > …` (0,2,0) — иначе `label > span:first-child` (design-base,
   0,1,2) прави „(по избор)“ удебелено и черно като етикета извън .app-form. */
.form-label-optional,
.form-label > .form-label-optional { font-weight: 400; color: var(--color-text-muted); }
/* .app-form и .modal-card дават margin-bottom на всеки <label>; в .form-field
   разстоянието идва от gap. */
.app-form .form-field > .form-label,
.modal-card .form-field > .form-label,
.app-form .form-field > .form-check,
.modal-card .form-field > .form-check { margin: 0; }
.modal-body > .form-field + .form-field,
.modal-body > .form-field + .read-only-field,
.modal-body > .read-only-field + .form-field { margin-top: var(--space-4); }
/* Бележката под „Как е платено“ ($note на _shared/payment-modal) стои между
   две полета: видимата част е на 8px под чиповете, следващото поле — на
   16px под нея (иначе „Платих на“ лепнеше за чиповете). */
.modal-body > .form-field + .payment-modal-note > :first-child { margin-top: var(--space-2); }
.modal-body > .payment-modal-note + .form-field { margin-top: var(--space-4); }
.form-field > .field-hint,
.form-field > .field-error { margin-top: 0; }
.form-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.app-form .form-field > .form-check,
.modal-card .form-field > .form-check { display: inline-flex; }
.form-check > input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-blue); }
.app-form .form-check > span,
.modal-card .form-check > span {
    display: inline;
    margin: 0;
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--color-text-primary);
}
.form-label > .req { color: var(--color-danger); }
.field-fix { align-self: flex-start; padding-left: 0; padding-right: 0; }
/* Общият вид на формите `.app-form:where(…) .form-section label …` (0,3,x
   след F2 в) прави всеки първи <span> в етикет блок и всеки пряк <label>
   блок — звездата и зоната за файла трябва да го надвият по тежест. */
.app-form:where(body.is-app .app-page form) .form-section .form-label > .req,
.app-form:where(body.is-app .app-page form) .form-section .form-label > .form-label-optional {
    display: inline;
    margin: 0 0 0 2px;
    font-size: inherit;
}
.app-form:where(body.is-app .app-page form) .form-section .form-label > .req { color: var(--color-danger); }
.app-form:where(body.is-app .app-page form) .form-section .form-label > .form-label-optional { font-weight: 400; color: var(--color-text-muted); }
.app-form:where(body.is-app .app-page form) .form-section > label.file-drop[data-file-drop] { display: flex; }
/* Segmented вътре в .app-form/.modal-card: общите `label` правила (display:block,
   margin-bottom, span като блок 13/600) не бива да го разпаднат. */
.app-form .segmented > label,
.modal-card .segmented > label {
    display: inline-flex;
    margin: 0;
}
.app-form .segmented > label > span,
.modal-card .segmented > label > span {
    display: inline;
    margin: 0;
    font: inherit;
    color: inherit;
}
.segmented > label:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.app-form .segmented > label > input,
.modal-card .segmented > label > input { width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; }
/* ChoiceChips в модал (начинът на плащане): същото срещу `.modal-card label/input`. */
.modal-card .choice-chips > label,
.app-form .choice-chips > label { display: inline-flex; margin: 0; }
.modal-card .choice-chips > label > input,
.app-form .choice-chips > label > input { width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; }
.choice-chips > label:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
/* Отметка в модал („Покажи изтритите“, „Активен“): общото `.modal-card input`
   (width: 100%, min-height: 40/44px) стои след `.form-check > input` и
   разтягаше квадратчето — тук то пак е 16px. */
.modal-card .form-check > input:is([type="checkbox"], [type="radio"]) {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}
/* FileDrop: полето е скрито в зоната; „избери" е в цвета на линк. */
.file-drop { position: relative; margin: 0; }
.file-drop > svg { color: var(--brand-blue); }
.file-drop-pick { color: var(--brand-blue); font-weight: 600; text-decoration: underline; }
.file-drop > .field-hint { margin: 0; }
.app-form .file-drop,
.modal-card .file-drop { display: flex; margin-bottom: 0; }
.app-form .file-drop > span,
.modal-card .file-drop > span { margin: 0; font-size: var(--text-small); font-weight: 400; color: inherit; }
.app-form .file-drop > .field-hint,
.modal-card .file-drop > .field-hint { font-size: var(--text-label); color: var(--color-text-secondary); }
.app-form .file-drop > .file-drop-name,
.modal-card .file-drop > .file-drop-name { font-weight: 600; color: var(--color-text-primary); }

/* == Component: Tabs == */
/* §5.11 — табове в изглед */
/* Tabs (§5.11): подчертан вид, is-active (+ aria-selected), скрол на телефон.
   Една дефиниция: отстъпът под лентата беше втора дефиниция в секцията на
   records и важеше за всички страници. */
.tab-bar {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
    background: none;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
    font-family: var(--font-ui);
}
.tab-btn:hover { color: var(--color-text-primary); }
.tab-btn.is-active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
[data-tab-panel] { display: none; }
[data-tab-panel].is-active { display: block; }
/* Широк екран: всички табове се виждат — които не се събират, отиват на
   втори ред (осемте таба на клиента в дясната колона; скрол без колелце
   значеше недостъпни табове). Телефон: един ред със скрол и избледняване в
   края, както SegmentedTabs (§5.11, §9.4). */
@media (min-width: 561px) {
    .tab-bar { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
}
@media (max-width: 560px) {
    .tab-bar {
        flex-wrap: nowrap;
        mask-image: linear-gradient(90deg, var(--color-bg-card) 85%, transparent);
    }
}

/* == Component: SegmentedTabs и ListFilters == */
/* §5.12 — табове по статус, търсене, период, „Още филтри“ */
/* PeriodPicker (§5.12): „Период: Този месец ▾" и месечният ‹ септември 2026 ›. */
.period-picker { display: inline-flex; align-items: center; gap: var(--space-1); }
.period-picker-month { min-width: 140px; text-align: center; font-weight: 600; }
/* SegmentedTabs на телефон: скрол с избледняване в края (§5.12, §9). */
@media (max-width: 560px) {
    .status-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, var(--color-bg-card) 85%, transparent);
    }
    .status-tabs::-webkit-scrollbar { display: none; }
}
/* List shell (wrapping filters + table + pagination) */
.list-shell {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: visible;
}
.list-filters {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}
.list-filter-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* Search field with icon */
.search-field {
    position: relative;
    flex: 2 1 260px;
    min-width: 220px;
    max-width: 440px;
}
.search-field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-small);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.search-input:focus {
    outline: 0;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
.filter-select {
    width: auto;
    padding: 8px 10px;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-small);
    color: var(--color-text-primary);
    height: 36px;
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 220px;
    padding-right: 32px;
}
.list-more-filters {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.list-more-filters.has-active { border-color: var(--brand-blue); color: var(--brand-blue-dark); }
.list-more-filters .chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-blue);
    display: inline-block;
}
/* Тясна лента: бутонът не се лепи вдясно, а на телефон надписът е в средата
   (досега — в секциите на фактурите в design-pages.css, а хващаше всички списъци). */
@media (max-width: 900px) {
    .list-more-filters { margin-left: 0; }
}
@media (max-width: 720px) {
    .list-shell .list-more-filters { margin-left: 0; justify-content: center; }
}
.list-shell .bulk-toolbar[hidden] {
    display: none !important;
}
.list-shell .bulk-count {
    font-weight: 700;
    color: var(--brand-blue-dark);
    font-size: var(--text-small);
}
.list-shell .pagination {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    gap: 4px;
    justify-content: center;
}
@media (max-width: 900px) {
    /* Responsive filter row */
    .list-filter-row { flex-direction: column; align-items: stretch; }
    .search-field, .filter-select, .filter-date { min-width: 0; width: 100%; }
}
.list-shell .list-filter-row {
    row-gap: var(--space-2);
}
.list-shell .search-field { flex: 1 1 260px; }
@media (max-width: 720px) {
    .list-shell .list-filters { padding: var(--space-3); }
    .list-shell .list-filter-row {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-2);
        }
}
/* Table tweaks — tighter rows, nicer hover */
.list-shell .data-table {
    margin: 0;
    width: 100%;
    border: 0;
}
.list-shell .data-table thead th {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-2xs);
}
.list-shell .data-table tbody td.td-actions { padding: 6px var(--space-3); }
.list-shell .data-table tbody td.td-actions .btn { }
.list-shell .data-table .mono a:hover { color: var(--brand-blue); }
/* Търсене „на живо" — таблицата избледнява, докато резултатът се зарежда.
   Само таблицата, не и филтрите, за да не мига полето, в което се пише. */
.list-shell.is-searching .data-table {
    opacity: .45;
    transition: opacity .12s ease;
}
/* Същият проблем при филтърната лента / пагинацията, когато те са на ръба на
   shell-а — сивият им фон изтичаше извън заобления борд. */
.list-shell > .list-filters:first-child {
    border-top-left-radius: calc(var(--radius-md) - 1px);
    border-top-right-radius: calc(var(--radius-md) - 1px);
}
.list-shell > .pagination:last-child {
    border-bottom-left-radius: calc(var(--radius-md) - 1px);
    border-bottom-right-radius: calc(var(--radius-md) - 1px);
}
@media (min-width: 721px) {
    .list-shell > .data-table:first-child thead tr:first-child th:first-child {
            border-top-left-radius: calc(var(--radius-md) - 1px);
        }
    .list-shell > .data-table:first-child thead tr:first-child th:last-child {
            border-top-right-radius: calc(var(--radius-md) - 1px);
        }
    .list-shell > .data-table:last-child tbody tr:last-child td:first-child {
            border-bottom-left-radius: calc(var(--radius-md) - 1px);
        }
    .list-shell > .data-table:last-child tbody tr:last-child td:last-child {
            border-bottom-right-radius: calc(var(--radius-md) - 1px);
        }
}
.status-tabs {
    display: flex;
    gap: 2px;
    padding: 5px;
    margin-bottom: var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.status-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
    border: 1px solid transparent;
}
.status-tab-label { font-weight: 600; }
.status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    font-size: var(--text-2xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--slate-200);
    color: var(--slate-700);
    font-variant-numeric: tabular-nums;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.status-tab.is-active .status-tab-count { background: var(--slate-100); }
/* Tone-specific colors — show when active OR count > 0 for attention */
.status-tab--amber.is-active .status-tab-count { background: var(--color-warning-bg); color: var(--tone-amber-text); }
.status-tab--red.is-active .status-tab-count { background: var(--color-danger-bg); color: var(--tone-red-text); }
.status-tab--green.is-active .status-tab-count { background: var(--color-success-bg); color: var(--tone-green-text); }
.status-tab--gray.is-active .status-tab-count { background: var(--slate-200); color: var(--slate-700); }
.status-tab--amber:not(.is-active) .status-tab-count:not(:empty),
.status-tab--red:not(.is-active) .status-tab-count:not(:empty) {
    position: relative;
}
.status-tab--red:not(.is-active):has(.status-tab-count:not(:empty)) .status-tab-count {
    background: var(--color-danger-bg);
    color: var(--tone-red-text);
}
.status-tab--amber:not(.is-active):has(.status-tab-count:not(:empty)) .status-tab-count {
    background: var(--color-warning-bg);
    color: var(--tone-amber-text);
}
.status-tab--green:not(.is-active):has(.status-tab-count:not(:empty)) .status-tab-count {
    background: var(--emerald-50);
    color: var(--tone-green-text);
}
@media (max-width: 720px) {
    .status-tabs { gap: 0; }
    .status-tab { font-size: var(--text-label); padding: 9px 10px; }
}
.list-filters-v2 {
    padding: var(--space-3) var(--space-4);
}
.list-filter-row-v2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: nowrap;
}
.list-filter-row-v2 .search-input {
    padding: 9px 12px 9px 38px;
    height: 38px;
    font-size: var(--text-small);
    width: 100%;
}
.list-filter-row-v2 .btn { padding: 0 16px; white-space: nowrap; }
.list-filter-row-v2 .btn svg { flex-shrink: 0; }
@media (max-width: 1100px) {
    .list-filter-row-v2 { flex-wrap: wrap; }
    .list-filter-row-v2 .filter-actions { margin-left: auto; }
}
@media (min-width: 721px) and (max-width: 900px) {
    /* 721–900px: общото правило на ред ~2014 обръща реда в колона, но
       `align-items: center` от .list-filter-row-v2 оставаше — филтрите висяха
       по средата с празно вляво. Тук: разпънати, по два в ред. */
    .list-filter-row-v2 { align-items: stretch; }
}
@media (max-width: 720px) {
    .list-filter-row-v2 { flex-direction: column; align-items: stretch; }
    .list-shell .list-filter-row > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
}
.list-filter-row-v2 .filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
@media (max-width: 720px) {
    .list-filter-row-v2 .filter-group {
        max-width: none;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
}
.list-filter-row-v2 .filter-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
@media (max-width: 720px) {
    .list-filter-row-v2 .filter-actions {
        max-width: none;
        min-width: 0;
        margin-left: 0;
    }
    .list-filter-row-v2 .filter-actions .btn { flex: 1 1 auto; }
}
/* (от раздел „System-wide list/form polish — supports v2 patterns introduced“) in the system-wide UI consistency refactor. */
/* _shared/period-picker.phtml: бутонът „Период: … ▾" и двете дати в модала;
   месечният вид — името на месеца е полето на календара (flatpickr alt). */
.period-picker > input[type="hidden"] { display: none; }
.period-picker-toggle > span { white-space: nowrap; }
.period-picker-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.period-picker--month input.period-picker-month {
    width: auto;
    min-width: 150px;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    background: transparent;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    cursor: pointer;
}
.period-picker--month input.period-picker-month:hover,
.period-picker--month input.period-picker-month:focus-visible { border-color: var(--color-border); background: var(--color-bg-hover); }
@media (max-width: 560px) {
    .period-picker-dates { grid-template-columns: 1fr; }
}

/* == Component: DataTable, Pagination, BulkToolbar == */
/* §5.13 — таблица (карти под 1000px), страници, групови действия */
.data-table thead th.td-num { text-align: right; }
.data-table td.td-num,
.data-table th.td-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table td.mono { font-family: var(--font-mono); font-size: var(--text-label); }
.data-table td.td-actions,
.data-table th.td-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.data-table td.td-actions .btn + .btn,
.data-table td.td-actions form + .btn,
.data-table td.td-actions form + form,
.data-table td.td-actions .btn + form { margin-left: var(--space-1); }
/* (от раздел „ФОРМИ В WORKSTATION РЕЖИМ — формата НЕ се разтяга на цял екран:“) ограничена ширина + (по избор) лепкав помощен панел отдясно. */
/* Глобален таван: всяка форма остава четима и ЦЕНТРИРАНА, дори без панел */
.app-form:where(body.is-app .app-page form) {
    max-width: 920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.pagination a {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-small);
}
.pagination a.is-current {
    background: var(--brand-blue);
    color: var(--color-text-inverted);
    border-color: var(--brand-blue);
}
.bulk-form { display: contents; }
.td-check { width: 36px; text-align: center; }
.td-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-blue);
    cursor: pointer;
}
@media (max-width: 640px) {
    /* Opt-in card-per-row for smaller viewports */
    .data-table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }
    .data-table tr {
            display: block;
            margin-bottom: var(--space-3);
            padding: var(--space-3);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
        }
    .data-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-2);
            padding: 6px 0;
            border-bottom: 1px solid var(--color-border);
            text-align: right;
        }
    .data-table td:last-child { border-bottom: 0; }
    .data-table td::before {
            content: attr(data-label);
            color: var(--color-text-muted);
            font-size: var(--text-2xs);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: .3px;
        }
    .data-table td.td-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    .data-table td.td-actions::before { display: none; }
}
.list-shell .data-table tbody td {
    padding: var(--space-3);
}
.data-table tbody tr {
    transition: background 100ms var(--ease-out);
}
/* Само истинските връзки в таблицата — бутоните (.btn) пазят собствения си цвят.
   Без :not(.btn) правилото е по-тежко от .btn-primary и прави надписа на
   бутоните в празните състояния тъмен върху син фон. */
/* Иконният бутон на реда (.row-action) също не е „връзка в таблицата“ — като
   <a> (Изтегли, Редактирай) беше тъмен, а като <button> (⋯, модал) — блед;
   цветът му е един, от компонента RowActions (§5.4). `:not(.btn, .row-action)`
   тежи колкото досегашното `:not(.btn)` (0,2,1) — по-тежко би надвило
   правилата на модулите за линковете в таблиците (номерата в паспорта). */
.data-table a:not(.btn, .row-action) {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;
}
.data-table a:not(.btn, .row-action):hover {
    color: var(--brand-blue);
}
.list-shell .data-table .mono a { font-family: var(--font-mono); font-weight: 600; color: var(--color-text-primary); }
/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    justify-content: center;
    margin-top: 24px;
}
.pagination a {
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-label);
    font-weight: 500;
}
.pagination a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.pagination a.is-current {
    background: var(--brand-blue);
    color: var(--color-text-inverted);
    border-color: var(--brand-blue);
}
/* Better tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
}
.data-table thead th {
    white-space: nowrap;
    text-align: left;
    padding: 10px 16px;
    background: var(--color-bg-subtle);
    font-weight: 700;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}
.data-table tbody td {
    color: var(--color-text-primary);
    line-height: 1.4;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table tbody tr:last-child td {
    border-bottom: 0;
}
.data-table tbody tr:hover {
    background: var(--color-bg-subtle);
}
.data-table .td-actions {
    text-align: right;
    white-space: nowrap;
}
.data-table .td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Empty states — nicer */
.bulk-toolbar[hidden] {
    display: none !important;
}
/* Override old data-toolbar rules from legacy when inside list-shell */
.list-shell .bulk-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-blue-light);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .list-shell .search-field { min-width: 0; max-width: none; flex: 0 0 auto; }
    .list-shell .filter-select,
        .list-shell .filter-date { max-width: none; }
}
.list-filter-row-v2 .search-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.list-filter-row-v2 .filter-select {
    height: 38px;
    padding: 0 32px 0 12px;
    min-width: 160px;
    max-width: 200px;
    font-size: var(--text-small);
    background-color: var(--color-bg-card);
}
/* Начална и крайна дата са две самостоятелни полета, разделени с тире.
   Общият svg в разметката се скрива — иконата е фон на всяко от двете полета.
   Видимите полета са altInput на flatpickr; оригиналните остават type=hidden. */
@media (max-width: 1100px) {
    .list-filter-row-v2 .search-field { flex: 1 1 100%; }
    /* wrap: при офертите групата носи и диапазон „сума от–до" и на таблет
           не се събираше на един ред — бутонът „Търси" излизаше извън екрана. */
    .list-filter-row-v2 .filter-group { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 720px) {
    .list-filter-row-v2 .search-field { flex: 0 0 auto; min-width: 0; max-width: none; }
    .list-filter-row-v2 .filter-select,
        .list-filter-row-v2 .filter-date-range { max-width: none; width: 100%; box-sizing: border-box; min-width: 0; }
}
@media (min-width: 721px) and (max-width: 900px) {
    .list-filter-row-v2 .filter-group {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px var(--space-3);
        }
    .list-filter-row-v2 .filter-select,
        .list-filter-row-v2 .filter-date-range,
        .list-filter-row-v2 .filter-range-pill { width: 100%; max-width: none; min-width: 0; }
}
/* Helper — data toolbar for lists */
/* --- DataTable / Listing --- */
/* Pagination inside list shell */
.list-shell > .pagination {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 0;
}
/* Make sure table rendering is clean in the shell */
.list-shell > .data-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}
@media (min-width: 721px) {
    /* Заоблени ъгли на таблица, която е директно в list-shell (напр. паспорта на
       артикул/клиент — там няма филтри отгоре и пагинация отдолу). `.list-shell` е
       с overflow: visible, за да не се реже status dropdown-ът, затова ъглите не
       могат да дойдат от контейнера — рундваме самите крайни клетки. Това изисква
       border-collapse: separate (при collapse браузърът игнорира border-radius на
       клетки); с border-spacing: 0 рендерът е идентичен, защото клетките имат само
       border-bottom. Изключено под 721px, където таблиците стават карти. */
    .list-shell > .data-table {
            border-collapse: separate;
            border-spacing: 0;
        }
}
/* Bulk actions floating toolbar */
/* Bulk toolbar polish */
.bulk-toolbar {
    font-size: var(--text-small);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--brand-blue-light);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.bulk-count {
    font-weight: 700;
    color: var(--brand-blue-dark);
    font-size: var(--text-small);
    padding: 6px 10px;
    background: var(--color-bg-card);
    border-radius: var(--radius-full);
    margin-right: var(--space-2);
}
/* Compact action buttons in settings list tables */
.data-table-v2 {
    border: 0;
    font-size: var(--text-small);
}
.data-table-v2 thead th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}
.data-table-v2 thead th.td-check { width: 40px; padding-right: 0; }
.data-table-v2 thead th.td-num { text-align: right; }
.data-table-v2 thead th.td-actions { width: 100px; text-align: right; }
.data-table-v2 tbody td {
    padding: 14px var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.data-table-v2 tbody tr:last-child td { border-bottom: 0; }
.data-table-v2 tbody tr:hover td { background: var(--color-bg-subtle); }
/* Анулираният ред е приглушен, но отвореното меню „⋯“ на реда — не: панелът
   е в същата клетка и излизаше полупрозрачен върху съседните редове, като
   изключен, а „Отвори“, „Изтегли PDF“, „Направи копие“ работят. В клетката с
   действията се приглушават само иконите и бутонът „⋯“. */
.data-table-v2 tbody tr.row-void td:not(.td-actions) { opacity: 0.55; }
.data-table-v2 tbody tr.row-void td.td-actions :is(.row-action, .btn-icon, .btn, [data-menu-toggle]):not(.menu-panel *) { opacity: 0.55; }
/* „към № …“ под номера на известието — един вид в списъка на документите и в
   таба „Фактури и известия“ на клиента: сив, при задържане — в цвета на
   марката (досега в design-pages и в pages/invoices.css, а в таба на клиента
   излизаше черен). `.data-table a.list-parent-ref` (0,2,1) е колкото общото
   `.data-table a:not(.btn, .row-action)` и стои след него — затова печели. */
.list-parent-ref,
.data-table a.list-parent-ref { display: block; margin-top: 2px; font-size: var(--text-caption); font-weight: 400; color: var(--color-text-secondary); }
.data-table a.list-parent-ref:hover { color: var(--brand-blue); }
/* Колоната „Ремонти“ на гаранционните карти — списъкът и табът на клиента.
   Не е td-num (той е дясно подравнен и лепеше числото за „Статус"): броячът
   стои центриран, а padding-right-ът дърпа цялата колона наляво, за да не се
   допира до статуса. */
.data-table th.td-events,
.data-table td.td-events {
    text-align: center;
    white-space: nowrap;
    width: 1%;
}
/* padding-right отделно и с по-висока специфичност: `.list-shell .data-table
   tbody td` (0,2,2) подава shorthand `padding` и иначе го изтрива. */
.data-table th.td-events,
.list-shell .data-table th.td-events,
.list-shell .data-table td.td-events {
    padding-right: var(--space-8);
}
/* Document cell — number + type chip */
.data-table-v2 .td-doc { min-width: 170px; }
/* Първата колона е линк в цвета на марката (§5.4) — един вид във всички
   списъци: документи, клиенти, разходи, каса, екип… (досега номерата на
   фактурите и офертите бяха черни, а имената в другите модули — сини).
   `a.doc-link` (0,2,1) е колкото общото `.data-table a:not(.btn, .row-action)`
   (тъмен текст за другите връзки в таблицата) и стои след него — затова печели. */
.data-table-v2 a.doc-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--brand-blue);
    font-weight: 600;
}
.data-table-v2 a.doc-link:hover { text-decoration: underline; }
/* Client cell — avatar + name */
.data-table-v2 .td-client { min-width: 240px; }
.data-table-v2 .client-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
}
.data-table-v2 .client-name {
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Date — muted */
.data-table-v2 .td-date {
    color: var(--color-text-secondary);
    font-size: var(--text-label);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Amount — prominent */
.data-table-v2 .td-amount {
    font-weight: 700;
    font-size: var(--text-small);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Status badge — polished with colored dot */
.data-table-v2 .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 9px;
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-full);
    background: var(--slate-100);
    color: var(--slate-700);
    border: 0;
    cursor: default;
    white-space: nowrap;
    font-family: inherit;
}
.status-tab:hover {
    color: var(--color-text-primary);
    background: var(--brand-blue-a04);
}
.status-tab.is-active {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-legacy-9);
    border-color: var(--color-border);
}
.data-table-v2 button.status-badge { cursor: pointer; transition: background var(--duration-fast); }
.data-table-v2 button.status-badge:hover { background: var(--slate-200); }
.data-table-v2 .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--slate-400);
    flex-shrink: 0;
}
.data-table-v2 .status-gray { background: var(--slate-100); color: var(--slate-700); }
.data-table-v2 .status-gray .status-dot { background: var(--slate-400); }
.data-table-v2 .status-blue { background: var(--color-info-bg); color: var(--tone-blue-text); }
.data-table-v2 .status-blue .status-dot { background: var(--color-info); }
.data-table-v2 .status-blue:hover { background: var(--blue-200); }
.data-table-v2 .status-green { background: var(--color-success-bg); color: var(--tone-green-text); }
.data-table-v2 .status-green .status-dot { background: var(--color-success); }
.data-table-v2 .status-green:hover { background: var(--emerald-200); }
.data-table-v2 .status-amber { background: var(--color-warning-bg); color: var(--tone-amber-text); }
.data-table-v2 .status-amber .status-dot { background: var(--color-warning); }
.data-table-v2 .status-amber:hover { background: var(--amber-200); }
.data-table-v2 .status-red { background: var(--color-danger-bg); color: var(--tone-red-text); }
.data-table-v2 .status-red .status-dot { background: var(--color-danger); }
.data-table-v2 .status-red:hover { background: var(--red-200); }
/* Row actions — right-aligned compact icon buttons */
.data-table-v2 .td-actions { text-align: right; padding-right: var(--space-4); }
.data-table-v2 .row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}
@media (max-width: 1000px) {
    /* Телефон и таблет в портрет — всеки ред е карта.
       Границата беше 720px, но таблиците на фактури, оферти, периодични и
       гаранции искат ~1000–1200px и между 721 и 1000px (таблет в портрет)
       излизаха извън екрана: статусът и действията се виждаха само с
       хоризонтален скрол на цялата страница. До 1000px картите са по-удобни
       от свита таблица (таблет в портрет, разделен екран). */
    .data-table-v2 thead { display: none; }
    .data-table-v2,
        .data-table-v2 tbody,
        .data-table-v2 tr,
        .data-table-v2 td { display: block; width: 100%; }
    .data-table-v2 tbody tr {
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--color-border);
            display: grid;
            /* max-content: клетките са с min-width: 0 и третата колона иначе
               ставаше колкото сумата — трите иконки на действията стърчаха
               вдясно от картата. */
            grid-template-columns: auto minmax(0, 1fr) max-content;
            gap: 8px var(--space-3);
            align-items: center;
        }
    /* width: auto — наследеното `width: 100%` (и `1%` на .td-actions от
           design-components) в мрежата разпъваше колоната с отметката до 60–140px
           и свиваше клетката с действията до 24px: иконките стояха вляво под
           статуса, а номерът — далеч вдясно от отметката. */
    .data-table-v2 tbody td { padding: 0; border: 0; min-width: 0; width: auto; text-align: left; }
    .data-table-v2 tbody td.td-actions { width: auto; white-space: normal; }
    .data-table-v2 tbody .td-check { grid-column: 1; grid-row: 1; }
    .data-table-v2 tbody .td-doc { grid-column: 2 / span 2; grid-row: 1; }
    .data-table-v2 tbody .td-doc .doc-link { flex-wrap: wrap; }
    .data-table-v2 tbody .td-client { grid-column: 1 / -1; grid-row: 2; }
    .data-table-v2 tbody .td-client .client-cell { width: 100%; }
    .data-table-v2 tbody .td-client .client-name { flex: 1; min-width: 0; }
    .data-table-v2 tbody .td-date { grid-column: 1 / span 2; grid-row: 3; font-size: var(--text-label); color: var(--color-text-secondary); }
    .data-table-v2 tbody .td-amount { grid-column: 3; grid-row: 3; text-align: right; }
    /* Статусът заема колони 1–2: сам в колона 1 той ѝ даваше ширината си
           (~115px) и отметката на първия ред увисваше по средата на празно. */
    .data-table-v2 tbody .td-status { grid-column: 1 / span 2; grid-row: 4; }
    .data-table-v2 tbody .td-actions { grid-column: 3; grid-row: 4; text-align: right; }
    .data-table-v2 tbody .td-actions .row-actions { justify-content: flex-end; }
    /* Клиенти и екип: без отметка и номер. Досега първият ред на картата беше
           „131468980  София  9" — без да е ясно кое е ЕИК и кое брой документи.
           Името е на цял ред, под него двойки „подпис стойност". */
    .data-table--clients tbody tr,
        .data-table--team tbody tr { grid-template-columns: minmax(0, 1fr) max-content; }
    .data-table--clients tbody .td-actions { grid-column: 1 / -1; grid-row: 4; text-align: right; }
    .data-table--clients tbody td[data-label]::before,
        .data-table--team tbody td[data-label]::before {
            content: attr(data-label) " ";
            font-family: var(--font-ui);
            color: var(--color-text-muted);
            font-size: var(--text-2xs);
            font-weight: 600;
            letter-spacing: .3px;
            text-transform: uppercase;
        }
    /* `width: 100%` е изричен: .data-table td.td-actions { width: 1% } бие
           наследеното и свиваше клетката до 24px. */
    .data-table--files tbody .td-actions    { grid-column: 1 / -1; grid-row: 4; text-align: right; width: 100%; }
}
@media (min-width: 1001px) {
    /* Таблет в пейзаж и лаптоп (≥1001px): таблицата остава таблица, но колоните
       ѝ могат да се свият, когато редът не стига — заглавията се пренасят на два
       реда, иконите на действията се пренасят по три на ред, а името на клиента
       е на най-много два реда (правилото за ≥1001px по-долу). При широк екран
       автоматичното оразмеряване дава на всяка колона пълната ѝ ширина и нищо не
       се пренася. До 1180px това важеше само за таблета; при 1181–1340px
       периодична фактура с пет иконки и „Частично платена" пак изкарваше
       таблицата извън картата (systest M-04). */
    /* `th.td-num` е изрично — `.data-table th.td-num { nowrap }` от
           design-components е по-силно и „ДНИ СЛЕД ПАДЕЖА" държеше 143px. */
    .data-table-v2 thead th,
        .data-table-v2 thead th.td-num { white-space: normal; }
    .data-table-v2 .td-doc { min-width: 0; }
    /* Под 160px двата реда на името събират по една дума. */
    .data-table-v2 .td-client { min-width: 160px; }
    /* Минимумът от три иконки на ред е само там, където иконките са три и
           повече — в „Кой ми дължи" е една и 128px бяха чиста загуба. */
    .data-table-v2 thead th.td-actions { width: auto; }
    .data-table-v2 tbody td.td-actions { white-space: normal; }
    .data-table-v2 tbody td.td-actions:has(> .row-actions > :nth-child(3)) { min-width: 128px; }
    .data-table-v2 .row-actions { flex-wrap: wrap; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
    .data-table-v2 thead th { padding: var(--space-3); }
    .data-table-v2 tbody td { padding: 12px var(--space-3); }
    /* Видът (ФАКТУРА, ПРОФОРМА…) слиза под номера само на таблета — на
           лаптопа мястото стига и редът остава нисък. */
    .data-table-v2 .doc-link { flex-wrap: wrap; row-gap: 4px; }
}
/* Line-item "save as article" mini button — sits inside .col-name in invoice rows */
.col-name--with-qc {
    position: relative;
}
.col-name--with-qc textarea {
    padding-right: 32px !important;
    /* inline-block textarea носи ~6px под линията на шрифта — клетката ставаше
       по-висока от полето и центрираният бутон увисваше под средата му. */
    display: block;
}
.col-name--with-qc:hover .line-qc-btn,
.col-name--with-qc:focus-within .line-qc-btn { opacity: 1; }
/* Празен ред няма какво да се запише като артикул — бутонът се появяваше и
   там, а клик по него връщаше „Първо въведете име на артикула". */
.col-name--with-qc textarea:placeholder-shown ~ .line-qc-btn { display: none; }
/* Status badge tone-only (without dot or button styling) */
.data-table-v2 .status-badge.status-amber,
.data-table-v2 .status-badge.status-red,
.data-table-v2 .status-badge.status-green,
.data-table-v2 .status-badge.status-blue {
    /* Reuse existing palettes from .data-table-v2 .status-* */
}
/* Статусите в списъка (.status-badge .status-<тон>) — тоновете идват от
   App\Services\StatusTone (§6): gray, gray-strong, blue, green, amber,
   orange, orange-red, red. gray/blue/green/red/amber за таблицата са
   дефинирани по-горе — тук са останалите. */
/* --- Списък: .status-badge .status-<тон> --- */
.data-table-v2 .status-gray-strong       { background: var(--slate-100); color: var(--slate-900); }
.data-table-v2 .status-gray-strong       .status-dot { background: var(--slate-600); }
.data-table-v2 .status-gray-strong:hover { background: var(--slate-200); }
/* „Частично" — бледо жълто. Оранжевият фон остава за „Просрочена"
   (.status-orange-red), за да се различават двата статуса от един поглед. */
.data-table-v2 .status-orange       { background: var(--color-yellow-bg); color: var(--color-yellow-text); }
.data-table-v2 .status-orange       .status-dot { background: var(--color-yellow); }
.data-table-v2 .status-orange:hover { background: var(--color-yellow-bg-hover); }
.data-table-v2 .status-orange-red       { background: var(--color-orange-bg); color: var(--tone-orange-red-text); }
.data-table-v2 .status-orange-red       .status-dot { background: var(--color-danger); }
.data-table-v2 .status-orange-red:hover { background: var(--orange-200); }
/* Списъкът: известието намалява — сумата с минус и към коя фактура е. */
.td-amount.is-credit { color: var(--color-danger); }
@media (max-width: 1000px) {
    .data-table-v2.data-table--labeled tbody td {
            grid-column: auto;
            grid-row: auto;
            text-align: left;
            width: auto;
            min-width: 0;
            overflow-wrap: anywhere;
        }
    /* В картата разстоянието между клетките е само от мрежата (gap на реда),
       както в картата на документ: `.list-shell .data-table tbody td`
       (отстъпът на таблицата) добавяше още 12px на всяка клетка — ~34px между
       редовете с подписи и ~28px от рамката до текста. (0,4,2) — над
       `.list-shell .data-table tbody td.td-actions`; отстъпът за отметката
       (`td.td-check + td`, 0,4,3) остава. */
    .list-shell .data-table-v2.data-table--labeled tbody td { padding: 0; }
    .data-table-v2.data-table--labeled tbody td:first-child {
        grid-column: 1 / -1;
    }
    .data-table-v2.data-table--labeled tbody td.td-client {
        grid-column: 1 / -1;
    }
    .data-table-v2.data-table--labeled tbody td.td-wide {
        grid-column: 1 / -1;
    }
    /* Справки и списъци на телефон/таблет: всяка клетка в картата носи подписа
       на колоната си („Продажби", „Разходи", „Падеж", „Наличност"…) — заглавният
       ред е скрит под 1000px и голите числа не се разчитаха (systest M-06, M-05,
       M-17). Подписите идват от <th> (app-ux.js ги слага като data-label), а
       клетките се редят по две на ред: дата | падеж, сума | платено… Първата
       клетка (име/номер/период), клиентът и действията са на цял ред. */
    /* Отметката за групови действия — в горния десен ъгъл на картата. */
    .data-table-v2.data-table--labeled tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px var(--space-4);
        align-items: start;
        position: relative;
    }
    .data-table-v2.data-table--labeled tbody td.td-check { position: absolute; top: var(--space-3); right: var(--space-4); width: auto; }
    .data-table-v2.data-table--labeled tbody td.td-check + td {
        grid-column: 1 / -1;
        padding-right: 32px;
    }
    .data-table-v2.data-table--labeled tbody td.td-actions {
        grid-column: 1 / -1;
        text-align: right;
    }
    .data-table-v2.data-table--labeled tbody td.td-actions .row-actions { justify-content: flex-end; }
    /* Празната първа клетка (напр. същият период като горния ред) не прави дупка. */
    .data-table-v2.data-table--labeled tbody td:first-child:empty { display: none; }
    .data-table-v2.data-table--labeled tbody td[data-label]:not(:first-child):not(.td-client):not(.td-actions):not(.td-wide):not(.td-check + td)::before {
            content: attr(data-label);
            display: block;
            margin-bottom: 2px;
            font-family: var(--font-ui);
            color: var(--color-text-muted);
            font-size: var(--text-2xs);
            font-weight: 600;
            letter-spacing: .3px;
            text-transform: uppercase;
            /* Подписът се пренася на втори ред, а не се реже с „…": в половин
               ширина на 360px „Начин на плащане" ставаше „НАЧИН НА ПЛА…" и човек
               не разбира какво е числото (systest r1-G4-new1). Подписите, които
               се събират на един ред, не се променят. */
            white-space: normal;
            overflow-wrap: break-word;
        }
    /* Името/номерът, клиентът и действията са без подпис — личат си сами
           (общото правило в design-components слага подпис на всяка клетка). */
    .data-table-v2.data-table--labeled tbody td:first-child::before,
        .data-table-v2.data-table--labeled tbody td.td-check + td::before,
        .data-table-v2.data-table--labeled tbody td.td-client::before,
        .data-table-v2.data-table--labeled tbody td.td-wide::before,
        .data-table-v2.data-table--labeled tbody td.td-actions::before { content: none; display: none; }
    /* Името на артикул/клиент не се цепи на думи в тясна колона. */
    .data-table-v2.data-table--labeled tbody td .client-name { white-space: normal; }
    .data-table-v2.data-table--labeled tbody td.mono,
        .data-table-v2.data-table--labeled tbody td .mono { white-space: nowrap; }

    /* Картата на документ (§3.1) — `.data-table--doc-cards` до
       `.data-table--labeled` в списъците на документи (фактури, оферти,
       протоколи, разходи…): горе номерът и сумата (сумата без подпис, вдясно),
       отметката вляво до номера; под тях клиентът; после датата и статусът с
       подписи, а действията — вдясно на техния ред. Разстоянията са от
       мрежата, клетките са без вътрешен отстъп (документът е ~170px, не ~370px
       както в общата карта, където всяка клетка е на свой ред). Клетките се
       познават по класа: td-check, td-doc, td-client, td-date, td-amount,
       td-status, td-actions; всяка друга клетка е на цял ред под тях. */
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check doc    doc    amount"
            ".     client client client"
            ".     date   status actions";
        column-gap: var(--space-3);
        row-gap: var(--space-2);
        align-items: center;
    }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td { padding: 0; grid-column: 2 / -1; }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-check {
        grid-area: check;
        position: static;
        align-self: start;
    }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-check + td { padding-right: 0; }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-doc { grid-area: doc; }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-client { grid-area: client; }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-date { grid-area: date; white-space: nowrap; }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-status { grid-area: status; }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-amount {
        grid-area: amount;
        align-self: start;
        text-align: right;
        white-space: nowrap;
    }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-actions {
        grid-area: actions;
        align-self: end;
    }
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr > td.td-status .status-cell { white-space: normal; flex-wrap: wrap; }
    /* Сумата горе вдясно се чете сама — без подпис (по-тежко от общото правило за подписите). */
    .data-table-v2.data-table--labeled.data-table--doc-cards tbody tr td.td-amount[data-label]:not(:first-child):not(.td-client):not(.td-actions):not(.td-wide)::before { content: none; display: none; }
}
@media (min-width: 1001px) {
    /* Дълго име на клиент в таблицата (таблет в пейзаж и лаптоп, ≥1001px):
       името е на най-много два реда и после се реже с „…" (цялото е в
       подсказката). Така колоната на клиента взима точно остатъка от реда.
       С `nowrap` + многоточие името не свива колона в таблица с
       table-layout: auto, а с таван от 300px съседните широки колони (големи
       суми, „ДНИ СЛЕД ПАДЕЖА") пак изкарваха таблицата извън картата и
       действията извън екрана при 1001–1340px (systest M-04). */
    .data-table-v2 .client-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            min-width: 0;
            white-space: normal;
            /* `anywhere`, не `break-word`: само то сваля най-дългата дума от
               минималната ширина на колоната — „Транспортно-спедиторска" иначе
               пак изкарваше офертите извън картата при 1001px. Думите се цепят
               само ако не се побират в колоната. */
            overflow-wrap: anywhere;
        }
    /* „№ 0000000008" не се цепи на два реда — .doc-no е nowrap (раздел „Дребни общи"). */
}
.data-table--aging thead th.td-actions { width: auto; }
/* _shared/pagination.phtml (§5.13): „‹ Назад · 1 … 4 5 6 … 20 · Напред ›";
   на телефон номерата се свиват до „5 от 20". */
.pagination-pages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pagination .pagination-prev,
.pagination .pagination-next {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.pagination span.pagination-prev,
.pagination span.pagination-next {
    padding: 7px 12px;
    font-size: var(--text-label);
    color: var(--color-text-muted);
    cursor: default;
}
.pagination-gap { padding: 0 var(--space-1); color: var(--color-text-muted); }
.pagination-of { font-size: var(--text-label); color: var(--color-text-secondary); white-space: nowrap; }
@media (pointer: coarse) {
    .pagination a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* ListTotal (§3.1): „Общо по филтъра: постъпили 1 200,00 € · изтеглени …“ —
   редът под таблицата на разходите, постъпленията и касата (и на всеки
   списък, който показва сбор). Сумите са моноширинни (§1.4), „·“ е само
   разделител; на телефон редът е вляво.
     <div class="list-total" data-list-total>
         <span class="list-total-label">Общо по филтъра:</span>
         <span class="list-total-note">постъпили</span><strong class="list-total-value">…</strong>
         <span class="list-total-sep" aria-hidden="true">·</span> …
     </div> */
.list-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}
.list-total-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-text-primary);
}
.list-total-note { font-size: var(--text-label); }
.list-total-sep { color: var(--color-text-muted); }
@media (max-width: 560px) {
    .list-total { justify-content: flex-start; }
}

/* == Component: Modal == */
/* §5.14 — модал, лист отдолу на телефон, ChoiceList */
/* ChoiceList (§5.14): тяло-избор в модал — икона, заглавие, едно изречение. */
.choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.choice-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.choice-card:hover,
.choice-card:focus-visible { border-color: var(--brand-blue); background: var(--brand-blue-light); }
.choice-card > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-blue); margin-top: 2px; }
.choice-card-title { display: block; font-weight: 600; font-size: var(--text-small); }
.choice-card-text { display: block; font-size: var(--text-label); color: var(--color-text-secondary); }
/* Модал без промени — само „Затвори"; бутоните са долу вдясно (Отказ отляво). */
.modal-actions .btn + .btn { margin-left: var(--space-2); }
/* Под 560px модалът е лист отдолу: цяла ширина, до 90vh, бутоните се виждат. */
@media (max-width: 560px) {
    .modal-overlay.modal { align-items: flex-end; padding: 0; }
    .modal-overlay.modal > .modal-card {
        width: 100%;
        max-width: none;
        max-height: 90vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin: 0;
    }
    .modal-overlay.modal .modal-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-bg-card);
    }
    /* Три неща в лентата („Изчисти филтрите“ · Отказ · Покажи резултатите в
       „Още филтри“) не се побират на 412px — тихият линк излизаше вляво извън
       картата (−74px). Бутоните никога не излизат от картата (§5.14): линкът
       е на свой ред над бутоните, а „Отказ“ и основното остават вдясно. */
    .modal-overlay.modal .modal-actions:has(> :nth-child(3)) { flex-wrap: wrap; }
    .modal-overlay.modal .modal-actions:has(> :nth-child(3)) > .btn-link { flex: 1 0 100%; margin: 0; justify-content: center; }
    .modal-overlay.modal .modal-actions:has(> :nth-child(3)) > .btn-link + .btn { margin-left: 0; }
    /* Три бутона („Затвори · Премести към… · Редактирай“ на сделката) — един
       под друг, основният най-горе (§5.14), както „Върна ли парите?“ на
       фактурата; досега „Затвори“ излизаше вляво от картата. */
    .modal-overlay.modal .modal-actions:has(> .btn:not(.btn-link):not([hidden]) ~ .btn:not(.btn-link):not([hidden]) ~ .btn:not(.btn-link):not([hidden])) {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .modal-overlay.modal .modal-actions:has(> .btn:not(.btn-link):not([hidden]) ~ .btn:not(.btn-link):not([hidden]) ~ .btn:not(.btn-link):not([hidden])) > .btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}
.modal-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto;
    /* Скролът вътре в картата ползваше системния скролбар — на Windows това е
       широка сива лента със стрелки нагоре/надолу, забита в заобления ъгъл на
       модала. Тънката лента е същата като в страничния панел на фактурата. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
    /* Скролва тялото, не картата (§5.14, §9.7): главата и лентата с бутоните
       стоят на място и на десктоп — в „Още филтри" на 950px екран „Покажи
       резултатите" беше под ръба на картата, а полетата там не се прилагат
       сами. Скролът на самата карта остава резерва за модал без .modal-body. */
    display: flex;
    flex-direction: column;
}
/* Главата и бутоните не се свиват (min-height: auto на flex елемент); свива се
   и скролва само тялото — както списъкът в модала с известията. Елемент със
   свой скрол (overflow ≠ visible — лентата с табове „Текст · Преглед · Помощ“
   в шаблона за имейл) няма такава защита: min-height: auto за него е 0 и на
   телефон табовете се срязваха наполовина. Затова всичко освен тялото стои с
   цялата си височина (§5.14); без .modal-body скролва самата карта. */
.modal-card > :not(.modal-body):not(.notif-modal-body) { flex-shrink: 0; }
.modal-card > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.modal-card::-webkit-scrollbar,
.modal-card > .modal-body::-webkit-scrollbar { width: 8px; }
/* Отстъпът горе/долу държи лентата далеч от заоблените ъгли — иначе правият ѝ
   край стърчи от закръглението и изглежда като счупено ъгълче. */
.modal-card::-webkit-scrollbar-track { background: transparent; margin: var(--radius-lg) 0; }
.modal-card > .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-card::-webkit-scrollbar-thumb,
.modal-card > .modal-body::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}
/* Стрелките в двата края са това, което се вижда като „кутийки" върху ъглите. */
.modal-card::-webkit-scrollbar-button,
.modal-card > .modal-body::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
/* Модал с таблица (напр. „Управление на каси"): при 420px последната колона
   излиза извън картата и бутонът се реже. */
.modal-card--wide { max-width: 620px; }
.modal-card--wide .td-actions { white-space: nowrap; }
/* Таблицата е „от ръб до ръб", за да стига фонът на хедъра до краищата, но
   съдържанието на крайните колони трябва да е на същия отстъп като полетата
   на формата отдолу — иначе левият край изглежда сбит, а десният провиснал. */
.modal-card--wide > .data-table { width: 100%; }
.modal-card--wide > .data-table th:first-child,
.modal-card--wide > .data-table td:first-child { padding-left: var(--space-6); }
.modal-card--wide > .data-table th:last-child,
.modal-card--wide > .data-table td:last-child { padding-right: var(--space-6); }
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.modal-head h3 {
    font-size: var(--text-h4);
    font-weight: 700;
}
.modal-close {
    background: transparent;
    border: 0;
    font-size: var(--text-h3);
    color: var(--color-text-muted);
    cursor: pointer;
}
.modal-card form {
    padding: var(--space-5) var(--space-6);
}
/* Редовите action формички (един бутон) не са „формата на модала" — падингът
   отгоре ги правеше 72px високи и подуваше редовете на таблицата. */
.modal-card .inline-form { padding: 0; }
/* .row-actions дава разстоянието през `gap`; старият margin от
   `.data-table .td-actions form + form` се добавя отгоре, но само когато
   съседът е form — заради това бутоните подскачаха с 4px според реда. */
.modal-card .td-actions .row-actions > * + * { margin-left: 0; }
.modal-card input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    min-height: 40px;
}
.modal-card textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    overscroll-behavior: contain;
    resize: vertical;
    min-height: 96px;
}
/* Леко (0,1,0), за да печели общият вид на формите в приложението (F2 в);
   в .app-form в модал (шаблоните за имейл) — над .modal-card textarea, както досега. */
.app-form :where(textarea),
.modal-card .app-form :where(textarea) {
    line-height: 1.4;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.modal-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
/* Модал с много полета (качване на файл): на 768px лаптоп естествената му
   височина минава 90vh и се появява скролбар заради едни 60 пиксела. Свиваме
   отстъпите и текстовото поле — обичайният екран го побира наведнъж.
   ВАЖНО: блокът стои СЛЕД базовите `.modal-card form/label/textarea` — те са
   със същата специфичност и по-ранен вариант просто не се прилага. */
.modal-card--compact .modal-head { padding: var(--space-4) var(--space-5); }
.modal-card--compact form { padding: var(--space-4) var(--space-5); }
.modal-card--compact label { margin-bottom: var(--space-2); }
.modal-card--compact label > span { margin-bottom: 2px; }
.modal-card--compact input {
    padding: 8px 12px;
}
.modal-card--compact select {
    padding: 8px 12px;
}
.modal-card--compact textarea {
    padding: 8px 12px;
    min-height: 60px;
}
.modal-card--compact .modal-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
}
/* `overscroll-behavior: contain` на всеки скролващ слой (overlay → карта →
   textarea): без него, щом вътрешното поле стигне дъното, колелцето „прескача"
   в страницата отдолу и тя тръгва да скролва под отворения модал.
   Скролът на <body> се заключва от app-ux.js, докато модал е отворен. */
/* Modal improvements — make sure hidden works */
.modal-overlay {
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    inset: 0;
    background: var(--slate-900-a55);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    backdrop-filter: blur(4px);
}
.modal-overlay[hidden] {
    display: none !important;
}
.modal-body { padding: var(--space-5) var(--space-6); }
/* Модалът по §5.14: заглавие-въпрос (h2) с ред контекст под него, × вдясно. */
.modal-head h2 {
    margin: 0;
    font-size: var(--text-h4);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
}
.modal-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--text-label);
    font-weight: 400;
    color: var(--color-text-secondary);
}
.modal-head > .modal-close { flex-shrink: 0; align-self: flex-start; }
.modal-card > .modal-actions { margin-top: 0; padding: var(--space-4) var(--space-6); }
/* Клик по фона на модал, в който човек вече е писал, не го затваря — картата
   само се „подбутва", за да личи, че е още там (app-ux.js раздел 8). */
.modal-card.is-nudged { animation: modal-nudge var(--duration) var(--ease-out); }
@keyframes modal-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .modal-card.is-nudged { animation: none; }
}
/* ConfirmModal (§5.15): последствието — едно изречение; ReasonPicker —
   чиповете с причините и полето „Или напиши причината". */
.confirm-text { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.confirm-text + .confirm-reasons { margin-top: var(--space-4); }
.confirm-reasons { display: flex; flex-direction: column; gap: var(--space-2); }
.confirm-reasons-q { font-size: var(--text-label); font-weight: 600; color: var(--color-text-primary); }
.modal-card label.confirm-reason-other { margin: var(--space-2) 0 0; }
/* Модалът е само с въпрос (без последствие и причини) — без празно тяло. */
.confirm-modal .modal-body:not(:has(> :not([hidden]))) { display: none; }
/* Клавишните комбинации („?") — две колони: клавишите и какво правят. */
.kbd-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-small);
}
.kbd-list dt { white-space: nowrap; color: var(--color-text-secondary); }
.kbd-list dd { margin: 0; color: var(--color-text-primary); }
.kbd-list kbd {
    display: inline-block;
    min-width: 24px;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    text-align: center;
}
/* ChoiceList (§5.14): тялото на картата — заглавие, едно изречение и дребното
   юридическо име; скритият избор наистина изчезва (.choice-card е flex). */
.choice-card[hidden] { display: none; }
.choice-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-card-legal { font-size: var(--text-caption); color: var(--color-text-muted); }
a.choice-card { text-decoration: none; }
.choice-card.is-perm-locked { position: relative; padding-right: var(--space-8); }
.choice-card.is-perm-locked .perm-lock-ico { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; }
/* Изборът като радио във форма: label.choice-card срещу общото `.modal-card label`. */
label.choice-card,
.modal-card label.choice-card,
.app-form label.choice-card { display: flex; margin: 0; }
label.choice-card > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.choice-card { position: relative; }
label.choice-card:has(input:checked) { border-color: var(--brand-blue); background: var(--brand-blue-light); }
label.choice-card:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
/* „Нов документ за <клиент>": шестте избора в две колони на широк екран —
   виждат се наведнъж (както досега). */
@media (min-width: 720px) {
    .new-doc-modal .choice-list { display: grid; grid-template-columns: 1fr 1fr; }
}

/* == Component: PlanLock и абонамент == */
/* §5.15 — заключено по план, планове и лимити */
/* AccessDenied (§5.15): катинар, „Това може само …", едно действие. */
.access-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 520px;
    margin: var(--space-12) auto;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.access-denied > svg { width: 40px; height: 40px; color: var(--color-text-secondary); }
.access-denied-title { margin: 0; font-size: var(--text-h4); font-weight: 700; }
.access-denied-text { margin: 0; color: var(--color-text-secondary); }
/* Едно правило вместо две: дъното на файла преправяше същия клас за старите
   публични карти (h3 + долен отстъп) и печелеше по ред, тоест „Текущ план"
   в „Абонамент" открай време се рисуваше с ТЕЗИ стойности, не с h2 отгоре.
   Картите ги няма, затова печелившите стойности остават тук. */
.plan-name {
    font-size: var(--text-h3);
    font-weight: 800;
    color: var(--brand-blue);
    margin-top: 4px;
    margin-bottom: var(--space-2);
}
.billing-plans-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-8) 0 var(--space-4);
}
.billing-plans-head h2 {
    margin: 0;
}
/* Месечно / Годишно — сегментиран превключвател над решетката с планове. */
.period-switch {
    display: inline-flex;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 3px;
    gap: 2px;
}
.period-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
}
.period-btn.is-active {
    background: var(--color-bg-card);
    color: var(--brand-blue);
    box-shadow: var(--shadow-sm);
}
.period-save {
    color: var(--color-success);
    font-weight: 700;
}
.plans-grid-app {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
.plan-card-app {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    position: relative;
    display: flex;
    flex-direction: column;
}
.plan-card-app.is-hl {
    border-color: var(--brand-blue);
    border-width: 2px;
}
.plan-card-app.is-current {
    background: var(--brand-blue-light);
    border-color: var(--brand-blue);
}
.plan-current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-success);
    color: var(--color-text-inverted);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 700;
    white-space: nowrap;
}
.plan-current-badge.hl {
    background: var(--brand-blue);
}
.plan-card-app h3 {
    font-size: var(--text-h4);
    font-weight: 800;
    margin-bottom: 4px;
}
.plan-sub {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    min-height: 36px;
    margin-bottom: var(--space-4);
}
.plan-price-block {
    margin: var(--space-4) 0;
}
.plan-price-amt {
    font-size: var(--text-h2);
    font-weight: 800;
    color: var(--brand-blue);
}
.plan-price-amt small {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    font-weight: 500;
}
.plan-yearly-note {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}
.plan-limits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5) 0;
    font-size: var(--text-small);
    flex: 1;
}
.plan-limits li {
    padding: 4px 0;
}
/* „По договаряне“ (план без цена) — с цената на 32px се чупеше на два огромни
   реда; „+ …“ (какво добавя планът) е отделено с пунктир. Стойностите са тези
   на началната страница (§13 — замразена; досега <style> в
   _shared/plan-cards); „Абонамент“ ги надвива в pages/account.css. */
.plan-price-amt.plan-price-text { font-size: var(--text-xl); line-height: 1.25; padding: 6px 0; }
.plan-limits li.plan-adds {
    margin-top: 6px;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
}
@media (max-width: 600px) {
    .plans-grid {
            grid-template-columns: 1fr;
        }
}
.plan-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 24px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.plan-usage-free { font-size: var(--text-caption); font-weight: 400; color: var(--color-text-muted); }

/* == Component: QuickCreate: бързо добавяне == */
/* §5.16 — модалът за бързо добавяне от полетата за избор */
/* Бързото добавяне е общият Modal (quick-create.js → .modal-overlay.qc-host);
   тук — само редът на тялото. */
.qc-form > .segmented { margin-bottom: var(--space-3); }
/* „Стока | Услуга“ стои под „Име“ — отстъпът е като между полетата. */
.qc-form > * + .segmented { margin-top: var(--space-4); }
.qc-form > .qc-error { margin: var(--space-2) 0 0; }
/* „+“ в полето на реда — бързо добавяне на артикул */
.line-qc-btn {
    position: absolute;
    /* Центриран по височина и на 6px от ръба — точно както „Запази" в полето
       с името на клиента (.client-save-btn). При top:4px бутонът стоеше залепен
       за горния ръб и висеше над средата на реда (Trello #142). */
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-blue);
    border: 0;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: var(--color-text-inverted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast), background var(--duration-fast);
    opacity: 0;
}
.line-qc-btn:hover {
    color: var(--color-text-inverted);
    background: var(--brand-blue-dark);
}

/* == Component: Avatar и малки партиали == */
/* §5.17 — аватар, стъпки, времева линия */
/* Avatar (§5.17): инициал в кръг, цвят по crc32(име) % 8. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    color: var(--color-text-inverted);
    background: var(--slate-500);
}
.avatar.av-0 { background: var(--brand-blue); }
.avatar.av-1 { background: var(--color-success); }
.avatar.av-2 { background: var(--color-warning); }
.avatar.av-3 { background: var(--color-danger); }
.avatar.av-4 { background: var(--color-purple); }
.avatar.av-5 { background: var(--color-orange); }
.avatar.av-6 { background: var(--slate-600); }
.avatar.av-7 { background: var(--color-info); }
/* Stepper (§5.17): „1 Файл → 2 Преглед → 3 Готово". */
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.stepper-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.stepper-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    font-size: var(--text-caption);
}
.stepper-step.is-current { color: var(--color-text-primary); }
.stepper-step.is-current .stepper-num { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--color-text-inverted); }
.stepper-step.is-done .stepper-num { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
/* Wizard (§3.7): свитият отговор на минала стъпка — „✓ Получих стока ·
   Промени“ (икона check-circle 16, думата, `btn-link btn-sm` „Промени“).
   Един клас за всички стъпки — известието във фактурите, видът движение в склада. */
.wizard-chosen {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-primary);
}
.wizard-chosen > svg { color: var(--color-success); flex-shrink: 0; }
.wizard-chosen[hidden] { display: none; }
@media (max-width: 1000px) {
    .how-section .step::before {
            content: '';
            position: absolute;
            left: -30px;
            top: 24px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: var(--color-bg-card);
            border: 2px solid var(--brand-blue);
        }
    .how-section .step:last-child::before {
            border-color: var(--brand-amber);
        }
}
/* Плоски карти: номер и икона стоят в един ред с текста, не над него. */
.step {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--white-a72);
    backdrop-filter: blur(10px);
    border: 1px solid var(--slate-200-a85);
    border-radius: var(--radius-lg);
    transition: transform var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}
/* Леко стъпаловидно отместване вдясно — задържа „разместения" ритъм. */
.step:nth-child(2) { margin-left: 28px; }
.step:nth-child(3) { margin-left: 56px; }
.step:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
}
.step h3 {
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: 2px;
}
.step p {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}
@media (max-width: 1000px) {
    .step:nth-child(2),
        .step:nth-child(3) { margin-left: 0; }
}
/* _shared/avatar.phtml — размерите; _shared/stepper.phtml — списък без точки. */
.avatar--sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--text-small); }
ol.stepper { list-style: none; padding: 0; }
.stepper-sep { display: inline-flex; color: var(--color-text-muted); }
.stepper-num > svg { display: block; }

/* == Component: Командна палитра == */
/* §2.1 — ⌘K */
.cmd-input:focus { box-shadow: none; outline: none; }
.cmd-item:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}
.cmd-item.is-active {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}
/* --- Command palette --- */
.cmd-palette {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}
.cmd-palette[hidden] {
    display: none !important;
}
.cmd-box {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-legacy-11);
    width: min(600px, calc(100vw - 32px));
    overflow: hidden;
}
.cmd-input {
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-body);
    background: transparent;
    color: var(--color-text-primary);
    outline: none;
}
.cmd-input::placeholder { color: var(--color-text-muted); }
.cmd-results {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
.cmd-item {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-small);
    color: var(--color-text-primary);
}
.cmd-item:hover {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
}
.cmd-item.is-active {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
}
/* Групата вдясно („Отиди“, „Ново“, „Справки“, „Настройки“) — думи, не адрес (§7). */
.cmd-item-group {
    flex-shrink: 0;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}
.cmd-hint {
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
}
.cmd-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    margin: 0 2px;
}
/* Палитрата е Modal (§2.1): полето за търсене е лентата под заглавието, не
   поле с рамка — общото `.modal-card input` не важи за него. */
.cmd-box .cmd-input {
    min-height: 0;
    padding: 14px 24px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
}
@media (max-width: 560px) {
    /* На телефон остава само името — мястото е за него. */
    .cmd-item-group { display: none; }
    .cmd-hint { display: none; }
}

/* == Component: Известия == */
/* камбанката в хедъра, модалът и страницата */
/* (от раздел „ИЗВЕСТИЯ — камбанка в хедъра + страница“) Събитията идват отвън (клиент отваря/приема/отказва проформа), затова им
   трябва място в интерфейса, което преживява презареждане — flash съобщение
   не върши работа. */
.notif-btn { position: relative; }
@media (max-width: 720px) {
    .list-filter-row-v2 > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
}
/* Известията са в модал (Trello #105) — един екран вместо падащо пенкало с
   последните 10 плюс отделна страница с целия списък. */
/* Скролът е на списъка, не на цялата карта: лентата минаваше през заоблените
   ъгли и ги режеше — същото, което оправихме за шаблоните (Trello #96). */
.notif-modal {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-modal > .modal-head,
.notif-modal > .notif-modal-bar,
.notif-modal > .notif-modal-foot { flex: 0 0 auto; }
.notif-modal-body::-webkit-scrollbar { width: 8px; }
.notif-modal-body::-webkit-scrollbar-track { background: transparent; }
.notif-modal-body::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}
.notif-modal-body::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.notif-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}
/* Филтърът „Непрочетени" скрива прочетените, вместо да ходи до сървъра —
   редовете вече са в DOM-а. */
.notif-modal-list.is-unread-only .notif-item:not(.is-unread) { display: none; }
.notif-modal-list .notif-item { padding: 14px var(--space-6); align-items: center; }
.notif-modal-list .notif-item-actions { flex-direction: row; align-items: center; gap: 8px; }
@media (max-width: 640px) {
    .notif-modal-list .notif-item { align-items: flex-start; }
    .notif-modal-list .notif-item-actions { flex-direction: column; align-items: stretch; }
}
.notif-readall-form { margin: 0; }
.notif-readall {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand-blue);
    font: inherit;
    font-size: var(--text-label);
    cursor: pointer;
}
.notif-readall:hover { text-decoration: underline; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.is-unread { background: var(--brand-blue-a04); }
.notif-item-body strong { font-size: var(--text-small); font-weight: 600; line-height: 1.35; }
.notif-item-body small { font-size: var(--text-label); color: var(--color-text-secondary); line-height: 1.45; }
.notif-item-body time { font-size: var(--text-caption); color: var(--color-text-muted); }
.notif-item-actions form { margin: 0; }
.notif-done { font-size: var(--text-caption); color: var(--color-text-muted); white-space: nowrap; }
/* Цветна лента отляво според тежестта — отказана проформа трябва да се
   различава от „клиентът я отвори" още с периферното зрение. */
.notif-item--success { box-shadow: var(--shadow-inset-left-success); }
.notif-item--warning { box-shadow: var(--shadow-inset-left-brand-amber); }
.notif-item--error   { box-shadow: var(--shadow-inset-left-danger); }
.notif-page-list .notif-item { padding: 14px 18px; align-items: center; }
.notif-page-list .notif-item-actions { flex-direction: row; align-items: center; gap: 8px; }
/* Прочетените остават в списъка (Trello #79), затова новите трябва да се
   различават от пръв поглед. Лентата отляво НЕ се пипа — тя носи тежестта
   на събитието (грешка / предупреждение / успех); за „ново" остават лекият
   фон (.notif-item.is-unread) и значката. */
.notif-new-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-blue);
    color: var(--color-text-inverted);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: 1px;
}
/* Прочетените са тихи — присъстват, но не се борят за внимание с новите. */
.notif-page-list .notif-item:not(.is-unread) .notif-item-body strong { font-weight: 500; }
.notif-page-list .notif-item:not(.is-unread) { background: transparent; }
/* --- shell (§2.1, §9): модалът „Известия“ и общият ред notifications/_item --- */
/* Филтърът в модала е SegmentedTabs (§5.12) — без отстъпа под списъците. */
.notif-modal-bar .status-tabs { margin: 0; flex: 0 1 auto; min-width: 0; }
.notif-modal-bar .status-tab { flex: 0 0 auto; }
.notif-item-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Ред на телефон (§9): текстът — на цялата ширина, бутоните — под него, в
   един ред; досега текстът стоеше в колона от 90px, а бутоните излизаха от екрана. */
@media (max-width: 560px) {
    .notif-modal-bar { flex-wrap: wrap; padding: var(--space-2) var(--space-4); }
    .notif-item,
    .notif-modal-list .notif-item,
    .notif-page-list .notif-item { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .notif-modal-list .notif-item-actions,
    .notif-page-list .notif-item-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}

/* == Component: ClientBox и pickers == */
/* клиентът във формите, търсачките за клиент/артикул/фактура, ЕИК подсказките */
.invoice-picker { position: relative; }
/* VAT exempt reason — prominent highlight when visible (display controlled by JS) */
[data-vat-reason-wrap] {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
[data-vat-reason-wrap] > span {
    font-weight: 600 !important;
    color: var(--yellow-800) !important;
}
[data-vat-reason-wrap] select {
    background-color: var(--color-bg-card) !important;
    margin-top: 6px !important;
    border-color: var(--color-warning) !important;
}
/* number-picker overrides live at the bottom of this file (v2 form) */
/* Client picker autocomplete */
.client-picker,
[data-client-pick] {
    position: relative;
}
.client-picker-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-legacy-12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
}
.client-picker-results[hidden] {
    display: none !important;
}
.client-picker-result:last-child {
    border-bottom: 0;
}
.client-picker-result:hover,
.client-picker-result.is-active {
    background: var(--brand-blue-light);
}
.client-picker-result {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 100ms var(--ease-out);
    position: relative;
}
.client-picker-result small {
    display: block;
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.client-picker-result--tr {
    background: linear-gradient(to right, var(--violet-tr-a04), transparent);
}
.client-picker-result--tr:hover {
    background: var(--violet-tr-a08);
}
.client-picker-result--bulstat {
    background: linear-gradient(to right, var(--teal-700-a05), transparent);
}
.client-picker-result--bulstat:hover {
    background: var(--teal-700-a09);
}
/* Плаващ разделител, а не padding: отстоянието стеснява целия текстов блок и
   дългото име се накъсва по една дума на ред. Така се скъсява само първият. */
.client-picker-result--bulstat strong::before {
    content: '';
    float: right;
    width: 92px;
    height: 18px;
}
/* „Още се търси" на дъното — БУЛСТАТ отговаря за 3–5 s и без този ред
   мълчанието се чете като „няма такава фирма". */
.client-picker-loading {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}
.client-picker-loading:first-child {
    border-top: 0;
}
.client-picker-loading::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: picker-loading-pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .client-picker-loading::before { animation: none; opacity: 0.6; }
}
/* Notice banner inside picker (e.g. "ТР temporarily unavailable") */
.client-picker-notice {
    padding: 8px 14px;
    background: var(--cream-25);
    border-bottom: 1px solid var(--sand-200);
    font-size: var(--text-caption);
    color: var(--brown-700);
    line-height: 1.4;
}
.client-picker-empty {
    padding: 14px;
    text-align: center;
    font-size: var(--text-label);
    color: var(--color-text-muted);
}
/* VAT reason wrap with select + textarea */
[data-vat-reason-wrap] label > span {
    font-weight: 600 !important;
    color: var(--yellow-800) !important;
}
[data-vat-reason-wrap] textarea {
    background: var(--color-bg-card) !important;
    border-color: var(--color-warning) !important;
}
/* --- Cloudflare Turnstile iframe styling --- */
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}
.eik-hint:empty { display: none; }
/* Главата на картата „Клиент“ — като .card-head (§5.5), с „Фирма | Гражданин“ вдясно. */
.client-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.client-box-head h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
}
.client-box .form-card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px var(--space-4);
}
.client-box .form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; grid-column: span 2; }
.client-box .form-card-grid > .form-field--full,
.client-box .form-card-grid--header > .form-field--full { grid-column: 1 / -1; }
.client-box .form-label {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-height: 18px;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
    text-transform: none;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-box .form-label--required::after {
    content: "*";
    color: var(--color-danger);
    margin-left: 2px;
}
/* Client data grid — named grid-areas, layout changes based on data-client-type */
.client-box .form-card-grid--client {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "name name eik eik vat vat"
        "mol mol city city recipient recipient"
        "addr addr addr addr addr addr";
    row-gap: 10px;
}
.client-box .form-card-grid--client > .form-field--name { grid-area: name; }
.client-box .form-card-grid--client > .form-field--eik { grid-area: eik; }
.client-box .form-card-grid--client > .form-field--vat { grid-area: vat; }
.client-box .form-card-grid--client > .form-field--mol { grid-area: mol; }
.client-box .form-card-grid--client > .form-field--city { grid-area: city; }
.client-box .form-card-grid--client > .form-field--recipient { grid-area: recipient; }
.client-box .form-card-grid--client > .form-field--address { grid-area: addr; }
/* Physical person: no ДДС №, no МОЛ, no ЗДДС checkbox — redistribute row cols */
.client-box .form-card-grid--client[data-client-type="physical"] {
    grid-template-areas: "name name name name eik eik"
        "city city city recipient recipient recipient"
        "addr addr addr addr addr addr";
}
.client-box .form-card-grid--client[data-client-type="physical"] [data-legal-only] {
    display: none !important;
}
@media (max-width: 1080px) {
    .client-box .form-card-grid--client {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "name name"
                "eik vat"
                "mol city"
                "recipient recipient"
                "addr addr";
    }
    .client-box .form-card-grid--client[data-client-type="physical"] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "name name"
                "eik vat"
                "mol city"
                "recipient recipient"
                "addr addr";
    }
    .client-box .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name name"
                "eik eik"
                "city city"
                "recipient recipient"
                "addr addr";
        }
}
@media (max-width: 640px) {
    .client-box .form-card-grid--client {
        grid-template-columns: 1fr;
        grid-template-areas: "name"
                "eik"
                "vat"
                "mol"
                "city"
                "recipient"
                "addr";
    }
    .client-box .form-card-grid--client[data-client-type="physical"] {
        grid-template-columns: 1fr;
        grid-template-areas: "name"
                "eik"
                "vat"
                "mol"
                "city"
                "recipient"
                "addr";
    }
    .client-box .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name"
                "eik"
                "city"
                "recipient"
                "addr";
        }
}
/* EIK input — VIES badge on the right as auto-fill affordance */
.client-box .eik-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.client-box .eik-input-wrap > input {
    flex: 1 1 auto;
    padding-right: 54px !important;
}
.client-box .eik-vies-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-blue);
    background: var(--brand-blue-a10);
    border-radius: 4px;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
/* VIES is VAT-only — hide badge and restore input padding in physical mode */
.client-box .form-card-grid--client[data-client-type="physical"] .eik-vies-badge {
    display: none;
}
.client-box .form-card-grid--client[data-client-type="physical"] .eik-input-wrap > input {
    padding-right: 12px !important;
}
/* Label row — allows a small chip toggle (ЗДДС) next to the label text, same height as a plain form-label */
.client-box .form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
}
.client-box .form-label-row > .form-label {
    margin: 0;
    min-height: 0;
    height: 18px;
    align-items: center;
}
/* Variant for the Наименование label — allows a tiny trailing hint (e.g. "нов клиент")
   right after the label text, without the fixed height clamp. */
.client-box .form-label-row--name {
    justify-content: flex-start;
    gap: 8px;
    height: auto;
    min-height: 18px;
    max-height: none;
    align-items: baseline;
}
.client-box .name-hint {
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--color-success);
    white-space: nowrap;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.client-box .name-hint:empty { display: none; }
.client-box .name-hint--new  { color: var(--color-success); }
.client-box .name-hint--warn { color: var(--color-warning); }
/* ЗДДС chip — compact toggle with visible checkbox + label text (18px tall to match form-label) */
.client-box .zdds-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 18px;
    box-sizing: border-box;
    padding: 0 8px 0 20px;
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.client-box .zdds-chip-text {
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: 1;
    white-space: nowrap;
}
/* Checkbox square — absolutely positioned for guaranteed vertical centering vs. text glyph */
.client-box .zdds-chip-box {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg-card);
    transition: background var(--duration-fast), border-color var(--duration-fast);
    box-sizing: border-box;
}
.client-box .zdds-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.client-box .zdds-chip:hover {
    border-color: var(--brand-blue);
    color: var(--color-text-primary);
}
.client-box .zdds-chip:hover .zdds-chip-box {
    border-color: var(--brand-blue);
}
.client-box .zdds-chip:has(input:checked) {
    background: var(--brand-blue-a10);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.client-box .zdds-chip:has(input:checked) .zdds-chip-box {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}
.client-box .zdds-chip:has(input:checked) .zdds-chip-box::after {
    content: '';
    position: absolute;
    inset: 1px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Превключвателят „Фирма | Гражданин“ е Segmented (§5.10). */
/* Client picker dropdown positioned under EIK and Name fields */
.client-box .form-field.client-picker { position: relative; }
.client-box .form-field.client-picker > .client-picker-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 260px;
    overflow: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-legacy-13);
    z-index: 20;
}
/* ЮЛ/ФЛ превключвател — глобална версия (клиентската форма и бъдещи употреби) */
[data-client-type="physical"] [data-legal-only] { display: none !important; }
/* --- Картата на контрагента: поле „Държава" (client-box) -------------------
   От държавата зависи ДДС режимът и за доставчика/платеца (самоначисляване,
   покупка от ЕС), затова полето е в общата карта. Решетката получава място
   за него до адреса. */
.client-box .form-card-grid--client > .form-field--country { grid-area: country; }
.client-box .form-card-grid--client {
    grid-template-areas: "name name eik eik vat vat"
        "mol mol city city recipient recipient"
        "addr addr addr addr country country";
}
.client-box .form-card-grid--client[data-client-type="physical"] {
    grid-template-areas: "name name name name eik eik"
        "city city city recipient recipient recipient"
        "addr addr addr addr country country";
}
@media (max-width: 1080px) {
    .client-box .form-card-grid--client {
            grid-template-areas: "name name"
                "eik vat"
                "mol city"
                "recipient recipient"
                "addr addr"
                "country country";
        }
    .client-box .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name name"
                "eik eik"
                "city city"
                "recipient recipient"
                "addr addr"
                "country country";
        }
}
@media (max-width: 640px) {
    .client-box .form-card-grid--client {
            grid-template-areas: "name" "eik" "vat" "mol" "city" "recipient" "addr" "country";
        }
    .client-box .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name" "eik" "city" "recipient" "addr" "country";
        }
}
/* --- EIK auto-fill hint ---
   Rendered as a sibling of .eik-input-wrap inside .form-field, so warn text
   flows BELOW the input rather than overlapping the absolute VIES badge. */
/* Бутоните до бележката под ЕИК/адреса (auto-fill.js): „Провери пак",
   „Сложи BG…", „Допиши улица" — действието стои до съобщението. */
.eik-hint {
    font-size: var(--text-2xs);
    line-height: 1.3;
    color: var(--color-text-muted);
    margin-top: 2px;
    transition: color var(--duration-fast) var(--ease-out);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}
.eik-hint-warn { color: var(--color-warning); }
.eik-hint-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--brand-blue); font: inherit; font-weight: 600; font-size: var(--text-caption);
}
.eik-hint-btn:hover { text-decoration: underline; }
.eik-hint-ok { color: var(--color-success); }
/* client-box: доставчик/платец от чужбина — „ДДС номер" на мястото на ЕИК и МОЛ. */
.client-box .form-card-grid--client[data-client-type="legal"][data-client-origin="foreign"] {
    grid-template-areas: "name name name vat vat vat"
        "city city city recipient recipient recipient"
        "addr addr addr addr country country";
}
@media (max-width: 1080px) {
    .client-box .form-card-grid--client[data-client-type="legal"][data-client-origin="foreign"] {
            grid-template-areas: "name name" "vat vat" "city recipient" "addr addr" "country country";
        }
}
@media (max-width: 640px) {
    .client-box .form-card-grid--client[data-client-type="legal"][data-client-origin="foreign"] {
            grid-template-areas: "name" "vat" "city" "recipient" "addr" "country";
        }
}
/* client-box: превключвателят е Segmented „Фирма | Гражданин" (§5.10) — в
   главата на картата, със същата височина като досегашния. */
.client-box-head .segmented > label { min-height: 30px; }
/* client-box с $compact: видими са Име и ЕИК, останалото е в „Още данни". */
.client-box .form-card-grid--client.form-card-grid--compact,
.client-box .form-card-grid--client.form-card-grid--compact[data-client-type="physical"],
.client-box .form-card-grid--client.form-card-grid--compact[data-client-origin="foreign"] {
    grid-template-areas: "name name name name eik eik" "more more more more more more";
}
.client-box .form-card-grid--compact > .client-box-more { grid-area: more; }
.client-box-more-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "vat vat mol mol city city" "recipient recipient addr addr country country";
    gap: 10px var(--space-4);
}
.client-box-more-grid > .form-field--vat { grid-area: vat; }
.client-box-more-grid > .form-field--mol { grid-area: mol; }
.client-box-more-grid > .form-field--city { grid-area: city; }
.client-box-more-grid > .form-field--recipient { grid-area: recipient; }
.client-box-more-grid > .form-field--address { grid-area: addr; }
.client-box-more-grid > .form-field--country { grid-area: country; }
@media (max-width: 640px) {
    .client-box .form-card-grid--client.form-card-grid--compact,
    .client-box .form-card-grid--client.form-card-grid--compact[data-client-type="physical"],
    .client-box .form-card-grid--client.form-card-grid--compact[data-client-origin="foreign"] { grid-template-areas: "name" "eik" "more"; }
    .client-box-more-grid { grid-template-columns: 1fr; grid-template-areas: "vat" "mol" "city" "recipient" "addr" "country"; }
}

/* == Component: Документ: форма == */
/* общата форма на документите (фактура, проформа, известия, оферта, протокол…) — inv-* партиалите */
.invoice-form { display: flex; flex-direction: column; gap: var(--space-4); }
/* Invoice lines */
.line-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 100px 70px 100px 32px;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.line-row input,
.line-row textarea,
.line-row select { width: 100%; }
@media (max-width: 720px) {
    .line-row { grid-template-columns: 1fr 80px 80px; }
    .line-row > :nth-child(n+4) { grid-column: span 3; }
}
.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-small);
}
.totals-row strong { font-family: var(--font-mono); font-weight: 600; }
.client-picker-result strong {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-primary);
    padding-right: 40px;
}
.totals-grand { border-top: 2px solid var(--color-border); padding-top: var(--space-3); font-size: var(--text-body-lg); font-weight: 800; }
.totals-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    min-width: 320px;
}
.invoice-form .totals-card {
    background: transparent;
    border: 0;
    padding: 0;
}
.invoice-form .totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: var(--text-label);
    border: 0;
    align-items: center;
}
.invoice-form .totals-row span:first-child {
    color: var(--color-text-secondary);
    font-weight: 500;
}
.invoice-form .totals-row strong {
    font-size: var(--text-small);
    font-weight: 700;
}
.invoice-form .totals-grand {
    border-top: 1px solid var(--color-border) !important;
    margin-top: 12px;
    padding-top: 14px !important;
}
.invoice-form .totals-grand strong {
    font-size: var(--text-xl) !important;
    color: var(--brand-blue) !important;
}
.invoice-form .discount-input {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.invoice-form .discount-input input {
    width: 90px !important;
    padding: 6px 10px !important;
    font-size: var(--text-label) !important;
}
.invoice-form .discount-input select {
    padding: 6px 8px !important;
    font-size: var(--text-label) !important;
    width: auto !important;
}
.invoice-form .inline-vat {
    width: 60px !important;
    padding: 4px 8px !important;
    margin-left: 6px !important;
    font-size: var(--text-caption) !important;
    display: inline-block !important;
}
/* VAT toggles group */
.invoice-form .vat-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.invoice-form .vat-toggles .legal-check {
    margin: 0;
    flex: 0 1 auto;
    min-height: 38px;
}
/* Invoice lines — refined */
.invoice-form .invoice-lines {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.invoice-form .col-vat {
    display: none;
}
.invoice-form.show-per-row-vat .line-head,
.invoice-form.show-per-row-vat .line-row {
    grid-template-columns: minmax(0, 1fr) 90px 90px 110px 70px 120px 36px;
}
.invoice-form .col-unit select {
    padding: 8px 6px !important;
    font-size: var(--text-caption) !important;
    border-radius: 6px !important;
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    width: 100%;
}
.invoice-form .col-unit select:focus {
    outline: none;
    border-color: var(--brand-blue) !important;
    box-shadow: var(--ring-brand-blue-a12);
}
.invoice-form.show-per-row-vat .col-vat {
    display: block;
}
.invoice-form .line-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px 110px 120px 36px;
    gap: 10px;
    padding: 10px 14px;
    align-items: center;
    background: var(--color-bg-subtle);
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-border);
}
.invoice-form .line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px 110px 120px 36px;
    gap: 10px;
    padding: 10px 14px;
    align-items: center;
    border-top: 1px solid var(--color-border);
}
.invoice-form .line-row:first-child {
    border-top: 0;
}
.invoice-form .line-row input {
    padding: 8px 10px !important;
    font-size: var(--text-label) !important;
    border-radius: 6px !important;
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}
.invoice-form .line-row input:focus {
    border-color: var(--brand-blue) !important;
    background: var(--color-bg-card) !important;
}
.invoice-form .col-total {
    text-align: right;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.invoice-form .btn-icon {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: var(--text-body-lg);
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.invoice-form .btn-icon:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
@media (max-width: 900px) {
    .invoice-form .line-head {
            display: none;
        }
    .invoice-form .line-row {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 12px;
        }
}
/* „Простите редове“ (.simple-line, .wr-line, .store-line, .periodic-line —
   сив фон, прозрачна рамка, !important) са махнати (docs-r2): редовете на
   протокола и на гаранционната карта са `.protocol-lines` / `.docs-wr-line`
   в pages/docs.css, а на складовото движение — `.mv-line`; старите класове
   не се ползват никъде. */
.number-display-value {
    flex: 1;
    min-width: 0;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
}
.number-display .number-edit-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--duration-fast);
}
.number-editor select.number-options,
.number-editor input.number-manual {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px !important;
    font-size: var(--text-label) !important;
    border: 1px solid var(--brand-blue) !important;
    border-radius: var(--radius) !important;
    background-color: var(--color-bg-card) !important;
    box-shadow: var(--ring-brand-blue-a12) !important;
    min-height: 38px !important;
    height: 38px !important;
}
.number-editor .number-lock-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--brand-blue);
    color: var(--color-text-inverted);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--duration-fast), box-shadow var(--duration-fast);
    box-shadow: var(--shadow-legacy-16);
}
.invoice-form-v2 .note-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px var(--space-4);
}
.invoice-form-v2 .note-ref-grid > .form-field { grid-column: span 1; }
@media (max-width: 640px) {
    .invoice-form-v2 .note-ref-grid > .form-field,
        .invoice-form-v2 .note-ref-grid > .form-field--full { grid-column: 1 / -1; }
}
.invoice-form-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: 96px; /* room for sticky action bar */
}
/* Картата „Клиент“ (_shared/inv-client-card, 'clientBox') във форма без
   .invoice-form-v2 — протокол, гаранционна карта: обвивката носи вида на
   картата, но не е форма (без колоната и мястото за лентата долу). */
.invoice-form-v2.inv-client-scope { display: block; padding-bottom: 0; }
/* Картата на документната форма е Card (§1.3, §5.5): отстъп 24, под 560px 16. */
.invoice-form-v2 .form-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-legacy-1);
}
@media (max-width: 560px) {
    .invoice-form-v2 .form-card { padding: var(--space-4); }
}
.invoice-form-v2 .form-card--totals {
    padding: 0;
    overflow: hidden;
}
.invoice-form-v2 .form-card--totals > .form-card-grid--totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0;
}
.invoice-form-v2 .totals-options { padding: var(--space-6); border-right: 1px solid var(--color-border); }
.invoice-form-v2 .totals-panel { padding: var(--space-6); background: var(--color-bg-subtle); }
@media (max-width: 880px) {
    /* minmax(0, 1fr), не 1fr: голото 1fr има минимум = най-широкото
           съдържание (падащото меню „Начин на плащане", бележката за ДДС с
           бутона) и на телефон колоната излизаше вдясно от картата — сумите се
           режеха до „0.". */
    .invoice-form-v2 .form-card--totals > .form-card-grid--totals { grid-template-columns: minmax(0, 1fr); }
    .invoice-form-v2 .totals-options { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .invoice-form-v2 .totals-panel { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}
@media (max-width: 560px) {
    .invoice-form-v2 .totals-options,
        .invoice-form-v2 .totals-panel { padding: var(--space-4); }
}
/* Главата на картата — като .card-head (§5.5, една глава навсякъде): икона 20
   без кръгче, 16/700, без линия отдолу; вдясно — Segmented или инструментите. */
.invoice-form-v2 .form-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.invoice-form-v2 .form-card-head--tight { margin-bottom: var(--space-3); }
.invoice-form-v2 .lines-head-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.invoice-form-v2 .lines-vat-toggle { margin: 0; }
.invoice-form-v2 .form-card-head h2 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
}
.invoice-form-v2 .form-card-head h2 > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-secondary); }
/* Document card — visually distinct with a soft gradient top accent */
.invoice-form-v2 .form-card--doc {
    position: relative;
    overflow: hidden;
}
/* (градиентната лента върху първата карта на документната форма отпадна —
   §5.5: картите са само с рамка; оцветена е само „Следваща стъпка") */
.invoice-form-v2 .form-card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px var(--space-4);
}
.invoice-form-v2 .form-card-grid--header {
    grid-template-columns: minmax(220px, 1.8fr) 1fr 1fr 1fr minmax(80px, 0.6fr);
    gap: 18px var(--space-4);
}
/* Proforma / debit / credit only have 4 fields (3 when edit proforma) — use 4-col layout */
.invoice-form-v2 .form-card-grid--header[data-doc-type="proforma"],
.invoice-form-v2 .form-card-grid--header[data-doc-type="debit"],
.invoice-form-v2 .form-card-grid--header[data-doc-type="credit"] {
    grid-template-columns: minmax(220px, 1.8fr) 1fr 1fr minmax(80px, 0.6fr);
}
.invoice-form-v2 .form-card-grid--header > .form-field:not(.form-field--full) {
    grid-column: span 1;
    min-width: 0;
}
/* Currency column stays compact */
.invoice-form-v2 .form-card-grid--header > .form-field:has(select[name="currency"]) {
    max-width: 110px;
    justify-self: start;
    width: 100%;
}
@media (max-width: 1080px) {
    /* Селекторът с [data-doc-type] е по-специфичен от .form-card-grid--header —
       без да е изброен тук, проформата и известията пазеха четирите си колони
       (първата ≥ 220px) и на телефон „Валута" излизаше извън екрана. */
    .invoice-form-v2 .form-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .invoice-form-v2 .form-card-grid--header,
        .invoice-form-v2 .form-card-grid--header[data-doc-type] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-card-grid,
        .invoice-form-v2 .form-card-grid--header,
        .invoice-form-v2 .form-card-grid--header[data-doc-type] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .invoice-form-v2 .form-card-grid,
        .invoice-form-v2 .form-card-grid--header,
        .invoice-form-v2 .form-card-grid--header[data-doc-type] { grid-template-columns: minmax(0, 1fr); }
}
.invoice-form-v2 .form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; grid-column: span 2; }
.invoice-form-v2 .form-card-grid--header > .form-field { grid-column: span 1; }
.invoice-form-v2 .form-card-grid > .form-field--full {
    grid-column: 1 / -1;
}
/* Dashed separator under the doc-type switcher row (whole-row border, keeps siblings aligned) */
.invoice-form-v2 .form-card-grid--header > .form-field--full {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--color-border);
    grid-column: 1 / -1;
}
.invoice-form-v2 .form-label {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-height: 18px;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
    text-transform: none;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invoice-form-v2 .form-label--required::after {
    content: "*";
    color: var(--color-danger);
    margin-left: 2px;
}
/* Един маркер за задължително (§5.10): звездата е на 2px от думата, както в
   останалите форми. В картата „Клиент“ (документ, разход, ClientBox) етикетът
   е flex с gap 4px — без компенсацията звездата стоеше на 6px. */
:is(.client-box, .invoice-form-v2) .form-label > .req,
:is(.client-box, .invoice-form-v2) .form-label--required::after { margin-left: calc(2px - 4px); }
.invoice-form-v2 :where(textarea) {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 64px;
    height: auto;
    resize: vertical;
}
.invoice-form-v2 :where(select) {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 40px;
    height: 38px;
    padding-right: 30px;
}
.invoice-form-v2 input::placeholder,
.invoice-form-v2 textarea::placeholder { color: var(--color-text-muted); opacity: 0.85; }
.invoice-form-v2 .vat-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius);
    border: 1px dashed var(--color-border);
}
.invoice-form-v2 .invoice-lines {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    /* НЕ hidden: менюто на picker-а за артикули живее В клетката на реда и се
       режеше на долния ръб. Ъглите се правят на крайните деца, както в .list-shell. */
    overflow: visible;
    background: var(--color-bg-card);
}
.invoice-form-v2 .invoice-lines > :first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.invoice-form-v2 .invoice-lines > :last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.invoice-form-v2 .line-row + .line-row { border-top: 1px solid var(--color-border); }
.invoice-form-v2 .line-row:hover { background: var(--color-bg-subtle); }
.invoice-form-v2 .line-row input:focus,
.invoice-form-v2 .line-row select:focus,
.invoice-form-v2 .line-row textarea:focus {
    background-color: var(--color-bg-card);
    border-color: var(--brand-blue);
}
/* Общо за заглавието и клетките е само подравняването вдясно — иначе
   заглавието „Сума" хващаше стила на стойностите (14px/700/тъмно) и стърчеше
   спрямо съседните заглавия, които са 11px главни букви. */
.invoice-form-v2 .col-total { text-align: right; }
.invoice-form-v2 .line-row .col-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-small);
    color: var(--color-text-primary);
}
.invoice-form-v2 .btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-fast);
}
.invoice-form-v2 .btn-icon:hover {
    background: var(--color-danger-bg);
    border-color: var(--red-200);
    color: var(--color-danger);
}
.invoice-form-v2 .invoice-add-line {
    margin-top: var(--space-3);
    align-self: flex-start;
}
/* Колоната „Отстъпка" на реда.
   Колоната „ДДС %" е скрита, докато не е включено „ДДС на всеки ред", и
   скритите grid items не заемат колона — затова шаблоните са два.
   Правилата за .show-per-row-vat са с една точка специфичност повече
   (елемент + два класа), затова -v2 вариантът трябва да я догони, иначе
   печели старият шестколонен шаблон от .invoice-form. */
.invoice-form-v2 .line-head {
    display: grid;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary);
    grid-template-columns: minmax(0, 1fr) 62px 62px 84px 110px 112px 34px;
}
.invoice-form-v2 .line-row {
    display: grid;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    grid-template-columns: minmax(0, 1fr) 62px 62px 84px 110px 112px 34px;
}
.invoice-form-v2.show-per-row-vat .line-head,
.invoice-form-v2.show-per-row-vat .line-row {
    grid-template-columns: minmax(0, 1fr) 60px 60px 80px 106px 58px 104px 34px;
}
.invoice-form-v2 .col-discount { text-align: right; }
/* „Въведените цени са с/без ДДС" — стои в главата на картата с редовете,
   защото сменя смисъла на цялата колона „Ед. цена". */
.price-mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.price-mode .price-mode-label {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}
.price-mode .price-mode-opt {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.price-mode .price-mode-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.price-mode .price-mode-opt > span {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: var(--text-label);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    transition: all var(--duration-fast);
}
.price-mode .price-mode-opt input[type="radio"]:checked + span {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-weight: 600;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-legacy-14);
}
.price-mode .price-mode-opt:hover input[type="radio"]:not(:checked) + span {
    color: var(--color-text-secondary);
}
.price-mode .price-mode-opt input[type="radio"]:focus-visible + span {
    box-shadow: var(--shadow-focus);
}
@media (max-width: 900px) {
    .invoice-form-v2 .line-head { display: none; }
    /* На телефон и таблет в портрет редът е малка карта с подписани полета:
           в таблицата колоната „Артикул" оставаше ~40px, а на телефон заглавният
           ред е скрит и голите „1", „0.00", „0 EUR" не казваха кое какво е.
           Разположението е изрично (grid-template-areas), защото старото общо
           `.line-row > :nth-child(n+4) { grid-column: span 3 }` в двуколонна
           мрежа раждаше скрита трета колона и полетата се разминаваха.
           Таблет (721–900px): името на цял ред, числата — на един ред под него. */
    .invoice-form-v2 .line-row {
        grid-template-columns: repeat(5, minmax(0, 1fr)) 34px;
        grid-template-areas: "name name  name name  name  act"
                "qty  unit  price disc total total";
        gap: var(--space-2) var(--space-3);
        padding: var(--space-3);
        border-top: 1px solid var(--color-border);
        align-items: end;
    }
    .invoice-form-v2.show-per-row-vat .line-row {
        gap: var(--space-2) var(--space-3);
        padding: var(--space-3);
        border-top: 1px solid var(--color-border);
        align-items: end;
        grid-template-columns: repeat(6, minmax(0, 1fr)) 34px;
        grid-template-areas: "name name  name  name name  name  act"
                "qty  unit  price disc vat   total total";
    }
    .invoice-form-v2 .line-row > .col-name     { grid-area: name; }
    .invoice-form-v2 .line-row > .col-qty      { grid-area: qty; }
    .invoice-form-v2 .line-row > .col-unit     { grid-area: unit; }
    .invoice-form-v2 .line-row > .col-price    { grid-area: price; }
    .invoice-form-v2 .line-row > .col-discount { grid-area: disc; }
    .invoice-form-v2 .line-row > .col-vat      { grid-area: vat; }
    .invoice-form-v2 .line-row > .col-total    { grid-area: total; text-align: left; align-self: center; padding-top: var(--space-1); }
    .invoice-form-v2 .line-row > .col-act      { grid-area: act; justify-self: end; align-self: center; }
    /* Подписите — същите думи като в заглавния ред на широк екран. */
    .invoice-form-v2 .line-row > .col-qty::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-text-muted);
        content: "Количество";
    }
    .invoice-form-v2 .line-row > .col-unit::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-text-muted);
        content: "Мярка";
    }
    .invoice-form-v2 .line-row > .col-price::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-text-muted);
        content: "Ед. цена";
    }
    .invoice-form-v2 .line-row > .col-discount::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-text-muted);
        content: "Отстъпка";
    }
    .invoice-form-v2 .line-row > .col-vat::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-text-muted);
        content: "ДДС %";
    }
    .invoice-form-v2 .line-row > .col-total::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-text-muted);
        content: "Сума";
    }
    /* Режимът „въведените цени са с ДДС" сменя смисъла на колоната —
           подписът го следва, както заглавието ѝ на широк екран. */
    .invoice-form-v2:has([data-price-mode-gross]:checked) .line-row > .col-price::before { content: "Ед. цена с ДДС"; }
    .invoice-form-v2:has([data-price-mode-gross]:checked):not(:has([data-vat-exempt]:checked)) .line-row > .col-total::before { content: "Сума с ДДС"; }
    .invoice-form-v2 .line-row > .col-discount .discount-input { width: 100%; }
}
@media (min-width: 721px) and (max-width: 900px) {
    .invoice-form-v2 .line-row > .col-total { text-align: right; }
    .invoice-form-v2 .line-row > .col-total::before { text-align: right; }
    .invoice-form-v2 .line-row > .col-act { align-self: start; }
}
@media (max-width: 720px) {
    /* Телефон: две колони — количество и мярка, цена и отстъпка, после сумата. */
    .invoice-form-v2 .line-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "name  name"
                "qty   unit"
                "price disc"
                "total act";
    }
    .invoice-form-v2.show-per-row-vat .line-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "name  name"
                "qty   unit"
                "price disc"
                "vat   vat"
                "total act";
    }
}
/* min-width: 0 — общото .totals-card { min-width: 320px } на телефон
   правеше сумите по-широки от картата и ги режеше вдясно. */
.invoice-form-v2 .totals-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.invoice-form-v2 .totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 6px 0;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    min-height: 32px;
}
.invoice-form-v2 .totals-row strong { font-size: var(--text-small); color: var(--color-text-primary); font-weight: 600; }
.invoice-form-v2 .totals-row--discount,
.invoice-form-v2 .totals-row--vat { align-items: center; }
/* Discount inline compact controls */
.invoice-form-v2 .discount-input {
    display: inline-flex;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    overflow: hidden;
}
.invoice-form-v2 .discount-input input:focus,
.invoice-form-v2 .discount-input select:focus {
    box-shadow: none !important;
}
.invoice-form-v2 .discount-input:focus-within {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
/* Същата контрола в ред на документа — рамката и радиусът са като на
   съседните полета в реда, а не по-тихи от тях.
   Блокът е СЛЕД базовия .discount-input нарочно: селекторите са с еднаква
   специфичност и редът тук е това, което го прави да важи. */
.invoice-form-v2 .discount-input--line {
    display: flex;
    width: 100%;
    border-radius: 6px;
}
.invoice-form-v2 .discount-input--line:focus-within { border-color: var(--brand-blue); }
.invoice-form-v2 .discount-input--line:hover select,
.invoice-form-v2 .discount-input--line:focus-within select {
    background-color: var(--color-bg-subtle) !important;
    border-left-color: var(--color-border) !important;
}
/* VAT row — inline rate pill */
.invoice-form-v2 .totals-vat-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.invoice-form-v2 .totals-vat-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    padding: 0 8px 0 0;
    height: 32px;
    gap: 0;
}
.invoice-form-v2 .totals-vat-pill:focus-within {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
.invoice-form-v2 .totals-vat-pill .inline-vat {
    width: 52px !important;
    padding: 0 8px !important;
    font-size: var(--text-label) !important;
    margin: 0 !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 32px !important;
    background: transparent !important;
}
.invoice-form-v2 .totals-vat-pill .inline-vat:focus { box-shadow: none !important; }
.invoice-form-v2 .totals-vat-pct {
    font-size: var(--text-label);
    color: var(--color-text-secondary);
    font-weight: 600;
}
.invoice-form-v2 .totals-grand {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 2px solid var(--color-text-primary);
    min-height: 44px;
}
.invoice-form-v2 .totals-grand strong {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--brand-blue-dark);
    letter-spacing: -0.01em;
}
/* Mobile — cards are handled by .data-table-v2 rules below */
/* client-search-row deprecated — search is now inline via EIK + Name fields */
/* Client data grid — named grid-areas, layout changes based on data-client-type */
.invoice-form-v2 .form-card-grid--client {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "name name eik eik vat vat"
        "mol mol city city recipient recipient"
        "addr addr addr addr addr addr";
    row-gap: 10px;
}
.invoice-form-v2 .form-card-grid--client > .form-field--name { grid-area: name; }
.invoice-form-v2 .form-card-grid--client > .form-field--eik { grid-area: eik; }
.invoice-form-v2 .form-card-grid--client > .form-field--vat { grid-area: vat; }
.invoice-form-v2 .form-card-grid--client > .form-field--mol { grid-area: mol; }
.invoice-form-v2 .form-card-grid--client > .form-field--city { grid-area: city; }
.invoice-form-v2 .form-card-grid--client > .form-field--recipient { grid-area: recipient; }
.invoice-form-v2 .form-card-grid--client > .form-field--address { grid-area: addr; }
/* Physical person: no ДДС №, no МОЛ, no ЗДДС checkbox — redistribute row cols */
.invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
    grid-template-areas: "name name name name eik eik"
        "city city city recipient recipient recipient"
        "addr addr addr addr addr addr";
}
.invoice-form-v2 .form-card-grid--client[data-client-type="physical"] [data-legal-only] {
    display: none !important;
}
@media (max-width: 1080px) {
    .invoice-form-v2 .form-card-grid--client {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "name name"
                "eik vat"
                "mol city"
                "recipient recipient"
                "addr addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "name name"
                "eik vat"
                "mol city"
                "recipient recipient"
                "addr addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name name"
                "eik eik"
                "city city"
                "recipient recipient"
                "addr addr";
        }
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-card-grid--client {
        grid-template-columns: 1fr;
        grid-template-areas: "name"
                "eik"
                "vat"
                "mol"
                "city"
                "recipient"
                "addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
        grid-template-columns: 1fr;
        grid-template-areas: "name"
                "eik"
                "vat"
                "mol"
                "city"
                "recipient"
                "addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name"
                "eik"
                "city"
                "recipient"
                "addr";
        }
}
/* EIK input — VIES badge on the right as auto-fill affordance */
.invoice-form-v2 .eik-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.invoice-form-v2 .eik-input-wrap > input {
    flex: 1 1 auto;
    padding-right: 54px !important;
}
.invoice-form-v2 .eik-vies-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-blue);
    background: var(--brand-blue-a10);
    border-radius: 4px;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
.app-form .eik-vies-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-blue);
    background: var(--brand-blue-a10);
    border-radius: 4px;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
/* VIES is VAT-only — hide badge and restore input padding in physical mode */
.invoice-form-v2 .form-card-grid--client[data-client-type="physical"] .eik-vies-badge {
    display: none;
}
.invoice-form-v2 .form-card-grid--client[data-client-type="physical"] .eik-input-wrap > input {
    padding-right: 12px !important;
}
/* Label row — allows a small chip toggle (ЗДДС) next to the label text, same height as a plain form-label */
.invoice-form-v2 .form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
}
.invoice-form-v2 .form-label-row > .form-label {
    margin: 0;
    min-height: 0;
    height: 18px;
    align-items: center;
}
/* Variant for the Наименование label — allows a tiny trailing hint (e.g. "нов клиент")
   right after the label text, without the fixed height clamp. */
.invoice-form-v2 .form-label-row--name {
    justify-content: flex-start;
    gap: 8px;
    height: auto;
    min-height: 18px;
    max-height: none;
    align-items: baseline;
}
.invoice-form-v2 .name-hint {
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--color-success);
    white-space: nowrap;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.invoice-form-v2 .name-hint:empty { display: none; }
.invoice-form-v2 .name-hint--new  { color: var(--color-success); }
.invoice-form-v2 .name-hint--warn { color: var(--color-warning); }
/* Бутон „Запази" вътре в полето с името — вдига се само за контрагент, който
   още не е в регистъра (client-save.js). Padding-ът на input-а се разширява
   само тогава, за да не зее празно място при вече вързан клиент. */
.invoice-form-v2 .client-name-wrap,
.client-box .client-name-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.invoice-form-v2 .client-name-wrap > input,
.client-box .client-name-wrap > input {
    flex: 1 1 auto;
    width: 100%;
}
.invoice-form-v2 .client-name-wrap.has-save-btn > input,
.client-box .client-name-wrap.has-save-btn > input {
    padding-right: 92px !important;
}
.invoice-form-v2 .client-save-btn,
.client-box .client-save-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    font-family: inherit;
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-inverted);
    background: var(--brand-blue);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    z-index: 2;
    transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.invoice-form-v2 .client-save-btn:hover,
.client-box .client-save-btn:hover {
    background: var(--brand-blue-dark);
}
.invoice-form-v2 .client-save-btn[disabled],
.client-box .client-save-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}
.invoice-form-v2 .client-save-btn[hidden],
.client-box .client-save-btn[hidden] { display: none; }
/* Отговорът от inline записа — под полето, за да може да е дълъг текст. */
.invoice-form-v2 .client-save-msg,
.client-box .client-save-msg {
    margin-top: 4px;
    font-size: var(--text-2xs);
    line-height: 1.35;
}
.invoice-form-v2 .client-save-msg:empty,
.client-box .client-save-msg:empty { display: none; }
.invoice-form-v2 .client-save-msg--ok,
.client-box .client-save-msg--ok { color: var(--color-success); }
.invoice-form-v2 .client-save-msg--warn,
.client-box .client-save-msg--warn { color: var(--color-warning); }
.invoice-form-v2 .client-save-msg--error,
.client-box .client-save-msg--error { color: var(--color-danger); }
/* ЗДДС chip — compact toggle with visible checkbox + label text (18px tall to match form-label) */
.invoice-form-v2 .zdds-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 18px;
    box-sizing: border-box;
    padding: 0 8px 0 20px;
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.invoice-form-v2 .zdds-chip-text {
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: 1;
    white-space: nowrap;
}
/* Checkbox square — absolutely positioned for guaranteed vertical centering vs. text glyph */
.invoice-form-v2 .zdds-chip-box {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg-card);
    transition: background var(--duration-fast), border-color var(--duration-fast);
    box-sizing: border-box;
}
.invoice-form-v2 .zdds-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.invoice-form-v2 .zdds-chip:hover {
    border-color: var(--brand-blue);
    color: var(--color-text-primary);
}
.invoice-form-v2 .zdds-chip:hover .zdds-chip-box {
    border-color: var(--brand-blue);
}
.invoice-form-v2 .zdds-chip:has(input:checked) {
    background: var(--brand-blue-a10);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.invoice-form-v2 .zdds-chip:has(input:checked) .zdds-chip-box {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}
.invoice-form-v2 .zdds-chip:has(input:checked) .zdds-chip-box::after {
    content: '';
    position: absolute;
    inset: 1px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Превключвателят „Фирма | Гражданин“ е Segmented (§5.10). */
/* Client picker dropdown positioned under EIK and Name fields */
.invoice-form-v2 .form-field.client-picker { position: relative; }
.invoice-form-v2 .form-field.client-picker > .client-picker-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 260px;
    overflow: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-legacy-13);
    z-index: 20;
}
/* Two toggles side by side — row inside grid */
.invoice-form-v2 .form-toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius);
    border: 1px dashed var(--color-border);
    align-items: stretch;
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-toggle-row { grid-template-columns: 1fr; }
}
/* Structured toggle item: title + muted sub-line */
.invoice-form-v2 .toggle-item[hidden] { display: none; }
.invoice-form-v2 .toggle-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 60px;
}
.invoice-form-v2 .toggle-item:hover { border-color: var(--color-text-muted); }
.invoice-form-v2 .toggle-item:has(input:checked) {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-brand-blue-a08);
    background: var(--color-bg-card);
}
.invoice-form-v2 .toggle-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    accent-color: var(--brand-blue);
    cursor: pointer;
    flex-shrink: 0;
}
.invoice-form-v2 .toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
}
.invoice-form-v2 .toggle-title {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-primary);
}
.invoice-form-v2 .toggle-sub {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1.35;
}
/* Extra-options grid — simpler 2-column layout */
.invoice-form-v2 .form-card-grid--extra {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-card-grid--extra { grid-template-columns: 1fr; }
}
.invoice-form-v2 .form-card-grid--extra > .form-field { grid-column: span 1; }
.invoice-form-v2 .form-card-grid--extra > .form-field.form-field--full { grid-column: 1 / -1; }
/* (от раздел „ФАКТУРЕНИЯТ СТИЛ ЗА ВСИЧКИ ФОРМИ — заглавия с кръгла иконка, същите“) размери на полетата, същите карти. (Останалите форми изглеждаха „скучни",
   защото само .invoice-form-v2 носеше тези стилове.) */
/* Иконата в главата на карта във формата (.form-card-icon около Icon::svg) —
   като в .card-head (§5.5, една глава навсякъде): 20, сива, без кръгче.
   Вариантът --brand (досега синьо кръгче) вече изглежда същото. */
.form-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    flex: 0 0 auto;
}
.form-card-icon > svg { width: 20px; height: 20px; }
/* Компактните select-и в редовете на документа са тесни (мерна единица,
   валута) — стрелката се дърпа по-навътре, за да остане място за текста. */
.invoice-form-v2 .line-row select:not([multiple]):not([size]),
.line-row select:not([multiple]):not([size]) {
    background-position: right 6px center;
    background-size: 12px;
    padding-right: 22px !important;
}
/* „нов клиент — ще бъде запомнен" под името */
.invoice-form-v2 .client-save-msg--note { color: var(--color-text-secondary); font-size: var(--text-caption); }
/* Лимитът на клиентите: бележката + бутонът към плана до нея (client-save.js). */
/* Цветът е на съобщението (зелено/жълто/червено): --color-primary не
   съществуваше и линкът го наследяваше — същото, изрично. */
.invoice-form-v2 .client-save-msg-link { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }
/* --- Картата „Клиент" във фактурата: имейл на видно място, МОЛ и получател
       свити, чуждестранен клиент — „ДДС номер" на мястото на ЕИК ---------- */
.invoice-form-v2 .form-card-grid--client > .form-field--email { grid-area: email; }
.invoice-form-v2 .form-card-grid--client {
    grid-template-areas: "name name eik eik vat vat"
        "city city email email email email"
        "addr addr addr addr addr addr";
}
.invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
    grid-template-areas: "name name name name eik eik"
        "city city email email email email"
        "addr addr addr addr addr addr";
}
.invoice-form-v2 .form-card-grid--client[data-client-type="legal"][data-client-origin="foreign"] {
    grid-template-areas: "name name name vat vat vat"
        "city city email email email email"
        "addr addr addr addr addr addr";
}
.form-card-grid--client[data-client-origin="foreign"] [data-bg-only],
.form-card:has(.form-card-grid--client[data-client-origin="foreign"]) .client-more [data-bg-only],
.form-card:has(.form-card-grid--client[data-client-type="physical"]) .client-more [data-legal-only],
/* Разгъването само с „Управител“ (протокол, гаранционна карта — без получател). */
.form-card:has(.form-card-grid--client[data-client-origin="foreign"]) .client-more[data-bg-only],
.form-card:has(.form-card-grid--client[data-client-type="physical"]) .client-more[data-legal-only] { display: none !important; }
@media (max-width: 1080px) {
    .invoice-form-v2 .form-card-grid--client {
        grid-template-areas: "name name" "eik vat" "city email" "addr addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="legal"] {
        grid-template-areas: "name name" "eik vat" "city email" "addr addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name name" "eik eik" "city email" "addr addr";
        }
    .invoice-form-v2 .form-card-grid--client[data-client-type="legal"][data-client-origin="foreign"] {
            grid-template-areas: "name name" "vat vat" "city email" "addr addr";
        }
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-card-grid--client {
        grid-template-areas: "name" "eik" "vat" "city" "email" "addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="legal"] {
        grid-template-areas: "name" "eik" "vat" "city" "email" "addr";
    }
    .invoice-form-v2 .form-card-grid--client[data-client-type="physical"] {
            grid-template-areas: "name" "eik" "city" "email" "addr";
        }
    .invoice-form-v2 .form-card-grid--client[data-client-type="legal"][data-client-origin="foreign"] {
            grid-template-areas: "name" "vat" "city" "email" "addr";
        }
}
.invoice-form-v2 .client-more { margin-top: 10px; }
/* „Още данни — управител, получател“: надписът е общият Disclosure (син, с
   шеврона) — като „Още данни — ДДС №, адрес, имейл“ в client-box; отстъпът до
   полетата е този на отвореното разгъване. Двете полета са едно до друго
   (общото span 2 на .form-field ги правеше на цял ред едно под друго). */
.invoice-form-v2 .client-more-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-4);
}
.invoice-form-v2 .client-more-grid > .form-field { grid-column: auto; }
@media (max-width: 640px) {
    .invoice-form-v2 .client-more-grid { grid-template-columns: 1fr; }
}
/* --- „Защо без ДДС?" и ставката като текст (inv-settings-card) --------- */
.invoice-form-v2 .vat-why { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.invoice-form-v2 .vat-why > legend { font-size: var(--text-small); font-weight: 600; margin-bottom: 6px; padding: 0; color: var(--color-text-primary); }
.invoice-form-v2 .vat-why-opt { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--text-label); line-height: 1.4; cursor: pointer; font-weight: 500; }
.invoice-form-v2 .vat-why-opt input { margin-top: 2px; flex: 0 0 auto; }
.invoice-form-v2 .vat-why.is-attention { outline: 2px solid var(--color-warning); outline-offset: 6px; border-radius: 6px; }
.invoice-form-v2 .vat-why-none { margin: 4px 0 0; font-size: var(--text-label); color: var(--color-text-secondary); }
.invoice-form-v2 .vat-why-none[hidden] { display: none; }
.invoice-form-v2.vat-open .totals-vat-rate-text { display: none; }
.invoice-form-v2 .totals-vat-rate-text { font-weight: 600; }
/* --- Режим „марж" (inv-settings-card, LEG2-07) -------------------------- */
.invoice-form-v2 .vat-margin { padding-top: 10px; border-top: 1px dashed var(--color-border); }
.invoice-form-v2 .vat-margin-fields { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0 24px; }
.invoice-form-v2 .vat-margin-fields[hidden] { display: none; }
.invoice-form-v2 .vat-margin-kinds { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-label); }
.invoice-form-v2 .vat-margin-kind { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: 500; }
.invoice-form-v2 .vat-margin-cost { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--text-label); font-weight: 600; }
.invoice-form-v2 .vat-margin-cost-input { display: inline-flex; align-items: center; gap: 8px; }
.invoice-form-v2 .vat-margin-calc { margin: 0; font-size: var(--text-label); color: var(--color-text-secondary); }
.invoice-form-v2 .vat-margin-calc:empty { display: none; }
@media (max-width: 640px) {
    .invoice-form-v2 .vat-margin-fields { margin-left: 0; }
}
@media (min-width: 1081px) {
    /* Периодичната има свое поле за имейл — тогава градът взима мястото му. */
    .invoice-form-v2 .form-card-grid--client:not(:has(> .form-field--email)) > .form-field--city { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1080px) {
    .invoice-form-v2 .form-card-grid--client:not(:has(> .form-field--email)) > .form-field--city { grid-column: 1 / -1; }
}
.invoice-form-v2 .totals-row[hidden] { display: none; }
.invoice-form-v2:not(.vat-open) .totals-vat-pill .inline-vat--select {
    display: none !important;
}
.invoice-form-v2:not(.vat-open) .totals-vat-pill { border-color: transparent !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; gap: 2px; }
.invoice-form-v2:not(.vat-open) .totals-vat-pill .totals-vat-pct { padding: 0 !important; }
.invoice-form-v2 .vat-supply-q { font-weight: 600; color: var(--color-text-primary); }
.invoice-form-v2 .vat-supply.is-attention { outline: 2px solid var(--color-warning); outline-offset: 3px; border-radius: 6px; padding: 2px 6px; }
/* --- Меню „Още": групи по задача, модулите — свити под „Включи още модули" */
.nav-more-panel > .nav-more-extra { grid-column: 1 / -1; display: block; }
.nav-more-extra[open] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--space-2); }
@media (max-width: 720px) {
    .nav-more-extra[open] { grid-template-columns: 1fr; }
}

/* == Component: Документ: изглед == */
/* общият изглед на документ — лентата, прегледът, колоната с действията, свързаните документи */
.invoice-page { padding: var(--space-5) 0 var(--space-12); }
.app-page--list { padding-top: 0; padding-bottom: var(--space-12); }
.invoice-preview-wrap {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}
.invoice-view-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6);
    margin-top: var(--space-6);
}
@media (max-width: 900px) {
    .invoice-view-grid {
            grid-template-columns: 1fr;
        }
}
.amount-due { color: var(--color-warning); font-weight: 700; }
.invoice-view-v2 .invoice-view-grid-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-4);
    align-items: stretch;
}
@media (max-width: 960px) {
    .invoice-view-v2 .invoice-view-grid-v2 { grid-template-columns: 1fr; align-items: start; }
}
.invoice-view-v2 .invoice-preview-wrap { min-width: 0; }
/* Sidebar matches preview height, scrolls internally when taller */
.invoice-view-v2 .invoice-view-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 100%;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.invoice-view-v2 .invoice-view-sidebar::-webkit-scrollbar { width: 6px; }
.invoice-view-v2 .invoice-view-sidebar::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
@media (max-width: 960px) {
    .invoice-view-v2 .invoice-view-sidebar { max-height: none; overflow: visible; }
}
@media (max-width: 960px) {
    /* Телефон и таблет: основното действие („Клиентът плати", „Върна ли парите?",
       „Издай фактура") е над прегледа на документа, а не след него — иначе е на
       две екранни дължини надолу. Останалите карти остават под документа. */
    .invoice-view-v2 .invoice-view-grid-v2 > .invoice-view-sidebar { display: contents; }
    .invoice-view-v2 .invoice-view-grid-v2 > .invoice-preview-wrap { order: 1; }
    .invoice-view-v2 .invoice-view-sidebar > * { order: 2; }
}

/* „Свързани файлове“ (LinkedFilesCard, §3.2.4) — една карта за документите
   (partials/_linked_files: фактури, оферти, протоколи, гаранционни карти),
   разхода и постъплението (едно място за файла — своя разметка със същите
   класове). Досега правилата бяха в pages/invoices.css и копие в pages/money.css. */
.linked-files-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.linked-files-list > li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-small);
}
.linked-files-list a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow-wrap: anywhere;
}
.linked-files-list a > svg { flex-shrink: 0; color: var(--color-text-secondary); }
.linked-files-meta { font-size: var(--text-label); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.linked-files-empty { margin: 0 0 var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }
/* Модалът „Качи файл“: грешката е точно под полето за файла, а следващото поле
   („Категория“ — <label>-ът е извън .form-field) не се лепи за него. */
.linked-files-upload .file-drop + .field-error { margin-top: var(--space-2); }
.linked-files-upload :is(.file-drop, .file-drop + .field-error):has(+ .form-field) { margin-bottom: var(--space-4); }

/* == Component: Публичната страница на документ == */
/* §3.9 — /v/{token} и плащането */
/* Логото и бутоните стоят в СЪЩИЯ контейнер като документа отдолу и на лента с
   височината на хедъра в „Начало" (.site-header .header-wrap) — иначе бяха
   залепени за ръбовете на прозореца и не се връзваха с нищо (Trello #164). */
.public-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    height: 64px;
    margin: 0 auto;
}
.public-logo { display: inline-flex; align-items: center; text-decoration: none; }
.public-logo img { height: 32px; }
@media (max-width: 560px) {
    /* Телефон: логото отгоре, действията отдолу на цяла ширина — на 375px
       логото и двата бутона на един ред се сплескват (Trello #112). */
    .public-nav-inner {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-3);
            height: auto;
            padding-top: var(--space-3);
            padding-bottom: var(--space-3);
        }
    .public-nav-actions > .btn { flex: 1; justify-content: center; }
    .public-container { padding: 0 var(--space-3); }
    .public-preview-wrap { padding: var(--space-3); }
}
.public-preview-wrap {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}
/* (от раздел „Invoice document preview — wrapper-ите около документа.“) Самият документ (.doc-*) живее в assets/document.css — един файл,
   който браузърът зарежда и dompdf inline-ва, за да са еднакви
   изгледът в сайта и PDF-ът. */
.invoice-preview-wrap {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 1400px;
}
/* (The actual invoice body lives inside _preview.phtml with its own inline
   PDF-safe styles; we only wrap it here.) */
/* Логото на документа се стилизира в assets/document.css. */
.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-bg-subtle);
}
.public-nav {
    padding: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.public-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}
.public-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    padding: var(--space-8) 0;
}
.public-footer a {
    color: var(--brand-blue);
}
a:hover {
    color: var(--brand-blue-dark);
}
.main-nav a {
    padding: 8px 14px;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--text-small);
    border-radius: var(--radius);
    transition: all var(--duration-fast) var(--ease-out);
}
/* Public view wrapper — махаме max-height/padding за пълен изглед */
.public-preview-wrap { max-height: none; padding: 0; background: transparent; border: 0; overflow: visible; }
@media (max-width: 480px) {
    /* На телефон сивата подложка около „листа" е тънка — всеки пиксел отива за
       колоната с артикулите (при 390px тя беше 42px и думите се цепеха). */
    .invoice-preview-wrap { padding: var(--space-2); }
}
/* Public nav in publicdoc/show (shown above the document) */
.public-nav-actions {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
body.page-public-doc .main-content { padding-top: 0; }
/* Публичната страница е една за фактура, проформа, оферта, протокол и
   гаранционна карта (§3.9): фирмата-доставчик горе, съобщенията,
   „Приемате ли?“ и отказът с причина — едно място за всички видове.
   Платежните данни (.public-payinfo*) са само на фактурата — те са в
   pages/invoices.css. */
.public-firm { display: inline-flex; align-items: center; min-width: 0; }
.public-firm-logo { max-height: 40px; max-width: 220px; width: auto; object-fit: contain; }
.public-firm-name {
    font-size: var(--text-body-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-messages { display: flex; flex-direction: column; gap: var(--space-2); }
.public-messages:has(> *) { margin-bottom: var(--space-4); }
.public-firm-preview { margin: 0 0 var(--space-4); }
.public-messages > .alert { margin: 0; }
.public-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-5);
}
.public-decision .card-head { margin-bottom: var(--space-1); }
.public-decision-text p { margin: 0; font-size: var(--text-small); color: var(--color-text-secondary); }
.public-decision-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.public-accept-form { margin: 0; }
.public-decline > summary { list-style: none; }
.public-decline > summary::-webkit-details-marker { display: none; }
/* Член на фирмата гледа като клиента — бутоните не са за него. */
.public-decline > summary[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.public-decline[open] { flex-basis: 100%; }
.public-decline-form { margin-top: var(--space-3); }
.public-decline-submit { margin-top: var(--space-3); }
/* В модала „Изпрати“ е долу вдясно (form="decline-form"), не във формата.
   Преместената форма не добавя свой отстъп (общото `.modal-card form`) —
   полето е на 24 от ръба на картата, както в модалите на програмата. */
.public-decline-form.is-in-modal { margin-top: 0; padding: 0; }
.public-decline-form.is-in-modal .public-decline-submit { display: none; }
.public-modal { z-index: var(--z-modal); }
/* „Защо не приемате?“ е обикновен Modal (§5.14): главата и лентата с бутоните
   са на същите отстъпи като „Клиентът плати?“ (24), не на компактните (20). */
.public-modal .modal-card--compact > .modal-head { padding: var(--space-5) var(--space-6); }
.public-modal .modal-card--compact > .modal-actions { margin-top: 0; padding: var(--space-4) var(--space-6); }
@media (max-width: 560px) {
    .public-decision-actions { width: 100%; }
    .public-decision-actions > * { flex: 1 1 0; }
    .public-decision-actions .btn { width: 100%; justify-content: center; }
}

/* == Component: Layout: работното поле на приложението == */
/* Логнатото приложение ползва почти целия екран (вместо тесния 1320px
   маркетингов стълб). Публичните страници остават тесни. */
body.is-app .container,
body.is-app .app-page .container,
body.is-app .container-hero {
    max-width: min(97vw, 1880px);
}

/* == Component: Табло: общи парчета == */
/* парчета от таблото, ползвани и другаде */
/* Dashboard setup checklist — extracted from inline gradient */
.setup-checklist {
    background: linear-gradient(135deg, var(--indigo-50), var(--violet-50));
    border: 1px solid var(--indigo-200);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 20px;
    position: relative;
}
.setup-checklist-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: var(--text-body-lg);
    cursor: pointer;
    color: var(--gray-500);
    padding: 4px 8px;
    border-radius: 4px;
}
.setup-checklist-close:hover { background: var(--black-a05); }
.setup-checklist-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 16px;
}
.setup-checklist-head h2 {
    margin: 0;
    color: var(--indigo-800);
    font-size: var(--text-body-lg);
}
.setup-checklist-head p { margin: 4px 0 0; }
.setup-checklist-progress {
    width: 200px;
    background: var(--color-bg-card);
    border-radius: 999px;
    overflow: hidden;
    height: 8px;
    flex: 0 0 auto;
}
.setup-checklist-progress-bar {
    background: var(--indigo-600);
    height: 100%;
    transition: width .3s;
}
.setup-checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}
.setup-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-card);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--gray-200);
    transition: transform .15s;
}
.setup-checklist-item.is-done { border-color: var(--emerald-100); }
.setup-checklist-item:hover { transform: translateY(-1px); }
.setup-checklist-item-ico { font-size: var(--text-body-lg); }
.setup-checklist-item.is-done .setup-checklist-item-label {
    text-decoration: line-through;
    color: var(--gray-500);
}
/* --- Dashboard --- */
.dashboard {
    padding: var(--space-10) 0 var(--space-16);
}

/* == Component: Дребни общи == */
/* бисквитки, skip link, утилити и др. */
/* Пари, номера, числа в колони — моноширинни, с подравнени цифри (§1.2). */
.money,
.doc-no {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Нов или променен ред след запис — 3 s (§8). */
.is-highlight { animation: is-highlight-fade 3s var(--ease-out); }
/* Само на телефон / само на по-широко (560px — §1.3). */
.show-sm { display: none; }
@media (max-width: 560px) {
    .hide-sm { display: none; }
    .show-sm { display: revert; }
}
@media (prefers-reduced-motion: reduce) {
    .is-highlight { animation: none; }
}
/* ActionItem (§5.2): действие с POST е малка форма — не чупи реда. Неактивното
   действие изглежда неактивно и казва защо при клик (app-ux.js, data-why — §8). */
.action-form { display: inline-flex; margin: 0; }
.is-disabled[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cookie-notice {
    position: fixed;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-legacy-13);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
    font-size: var(--text-label);
    color: var(--color-text-secondary);
}
.cookie-notice[hidden] {
    display: none;
}
.cookie-notice-msg {
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 260px;
}
.cookie-notice-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Focus styles — a11y polish */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: 8px 12px;
    background: var(--color-bg-card);
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    z-index: var(--z-skip);
    text-decoration: none;
}
.skip-link:focus {
    left: 10px !important;
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
/* Бутон/линк към форма, която служителят няма право да отвори
   (Init::deniedLinks → app-ux.js, раздел 12), и бутон за запис при „само
   преглед“ (раздел 13): остава видим, с катинар 14 пред надписа и с
   НОРМАЛЕН текст (§8) — избледнялото изглеждаше като изключено; кликът
   показва защо, вместо да води до отказ след попълването.
   button — подавач с data-perm-href („Създай нов документ" при клиента). */
a.is-perm-locked,
button.is-perm-locked {
    cursor: not-allowed;
}
/* Иконка без надпис (моливът в реда): катинар не се събира — знакът е
   приглушаването, иначе нищо не казва, че е заключено. */
:where(.row-action, .btn-icon, .icon-btn).is-perm-locked:not(:has(.perm-lock-ico)) {
    opacity: .55;
}
a.is-perm-locked .perm-lock-ico,
button.is-perm-locked .perm-lock-ico {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    vertical-align: -1px;
}
/* Катинарът е ВМЕСТО иконата на действието (§8), не до нея: „🔒 💳 Клиентът
   плати“ ставаше с две икони. Скрива се само водещата икона (веднага след
   катинара) — шевронът на меню-бутон в края остава. */
.is-perm-locked > .perm-lock-ico + svg { display: none; }
/* „Още“ в хедъра: иконата на раздела е в span.nav-more-ico — катинарът стои
   на нейното място и в нейната колона (22px), надписите остават на една вертикала. */
.nav-more-item.is-perm-locked > .perm-lock-ico + .nav-more-ico { display: none; }
.nav-more-item.is-perm-locked > .perm-lock-ico { flex-shrink: 0; width: 22px; height: 20px; margin: 0; justify-content: center; }
/* В бутон и в ред от меню разстоянието до надписа го дава gap-ът (както на иконата). */
.btn.is-perm-locked > .perm-lock-ico,
.menu-item.is-perm-locked > .perm-lock-ico { margin-right: 0; }
/* В менюто катинарът (14) стои в колоната на иконите (16) — надписите остават на една вертикала. */
.menu-item.is-perm-locked > .perm-lock-ico { width: 16px; justify-content: center; }
.create-new-item span:not(.create-new-ico) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
@media (max-width: 1180px) {
    /* Responsive: collapse labels, hide "Още" label, hide mobile-nav below 980.
       Само без скрипта на хедъра (data-nav-fit) — с него надписите остават,
       докато се побират (Component: Header, „хедърът се нагажда по мястото“). */
    .site-header:not([data-nav-fit]) .main-nav .nav-item span {
            position: absolute;
            width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
        }
}
@media (max-width: 640px) {
    .btn-create span:first-of-type,
        .btn-create span:nth-of-type(2) { display: none; }
}
.pipeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    min-height: 400px;
}
@media (max-width: 1100px) {
    .pipeline {
            grid-template-columns: repeat(3, 1fr);
        }
}
.opp-amount {
    font-size: var(--text-body);
    color: var(--brand-blue);
    font-weight: 700;
    margin-top: 4px;
}
.ocr-status {
    margin-top: var(--space-4);
    font-size: var(--text-small);
    padding: var(--space-3);
    border-radius: var(--radius);
}
.ocr-status.loading {
    background: var(--color-info-bg);
    color: var(--color-info);
}
.ocr-status.ok {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.ocr-status.err {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.ocr-status.warn {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-left: 3px solid var(--color-warning);
}
/* Inline form helper — replaces ad-hoc style="display:inline;" */
.inline-form {
    margin: 0;
    display: inline;
}
.notif-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-item-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.onboarding-card .lead {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: var(--text-body);
}
.switch-card .lead {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: var(--text-body);
}
.onb-actions .btn-primary { flex: 1; }
@media (max-width: 560px) {
    .onb-actions .btn { width: 100%; }
}
/* --- EIK input visual states (driven by auto-fill.js class toggles) --- */
input[data-eik-autofill].is-filled {
    border-color: var(--color-success) !important;
    box-shadow: var(--ring-green-500-a18);
    transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
input[data-eik-autofill].is-missing {
    border-color: var(--color-warning) !important;
    box-shadow: var(--ring-amber-500-a14);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
input[data-eik-autofill].is-checking {
    border-color: var(--brand-blue) !important;
    box-shadow: var(--ring-brand-blue-a12);
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
/* Без transition: важи този на общия вид на полетата (.app-form … input),
   както досега, когато той беше по-тежък (F2 в). */
.invoice-form-v2 input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    min-height: 40px;
    height: 38px;
}
.invoice-form-v2 input[type="email"] {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    min-height: 40px;
    height: 38px;
}
.invoice-form-v2 input[type="number"] {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    min-height: 40px;
    height: 38px;
}
.invoice-form-v2 input[type="date"] {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--text-small);
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    min-height: 40px;
    height: 38px;
}
.invoice-form-v2 input:focus,
.invoice-form-v2 select:focus,
.invoice-form-v2 textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.invoice-form-v2 .line-row input {
    padding: 6px 8px;
    font-size: var(--text-label);
    min-height: 34px;
    border-color: transparent;
    background-color: transparent;
}
.invoice-form-v2 .line-row select {
    padding: 6px 8px;
    font-size: var(--text-label);
    min-height: 34px;
    border-color: transparent;
    background-color: transparent;
}
/* Полетата с текст в реда (името и описанието): вид като на останалите
   полета (общият вид на .app-form печели рамката, фона и отстъпа), само
   по-ниско. 12px от стария <style> на inv-lines-card вече го няма —
   описанието е в pages/invoices.css; тук правилото държи на 14px името на
   реда на широк екран (§11.1); под 560px всички полета са 16px (края на файла). */
.invoice-form-v2 .line-row textarea {
    font-size: var(--text-small);
    min-height: 34px;
}
@media (max-width: 900px) {
    .invoice-form-v2 .line-row input,
        .invoice-form-v2 .line-row select,
        .invoice-form-v2 .line-row textarea { border-color: var(--color-border); background-color: var(--color-bg-card); }
}
.invoice-form-v2 .vat-margin-cost-input input { max-width: 160px; }
.invoice-form-v2 .line-row textarea {
    /* Без нативния грип за resize — полето расте само (виж autosize в
       invoice-form.js), а грипът се събираше в същия ъгъл с бутона „запази
       като артикул" и двете изглеждаха като струпани иконки.
       overflow:hidden маха и лентата за скролиране — на празен ред тя рисуваше
       две стрелки до полето, защото placeholder-ът не се брои за съдържание и
       autosize-ът не го оразмерява. */
    resize: none;
    overflow: hidden;
    min-height: 34px;
    line-height: 1.35;
}
.invoice-form-v2 .col-qty input,
.invoice-form-v2 .col-price input,
.invoice-form-v2 .col-vat input { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-form-v2 .discount-input input {
    width: 78px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 6px 10px !important;
    font-size: var(--text-label) !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 32px !important;
    background: transparent !important;
}
/* Без width и color: печелят общият вид на полетата и .invoice-form
   .discount-input select (!important), както досега (F2 в). */
.invoice-form-v2 .discount-input select {
    min-width: 52px;
    padding: 0 22px 0 8px !important;
    font-size: var(--text-label) !important;
    border: 0 !important;
    border-left: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    min-height: 32px !important;
    background-color: var(--color-bg-subtle) !important;
    font-weight: 600;
}
/* Числото поема остатъка, а мерната единица („EUR" / „%") не се свива —
   иначе валутата излиза отрязана като „EUF". */
.invoice-form-v2 .discount-input--line input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
}
.invoice-form-v2 .discount-input--line select {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 0 18px 0 6px !important;
}
/* (от раздел „SELECT — стрелка на всяко падащо меню“) Базовото правило в design-base.css вече слага chevron като background-image,
   но десетки правила из трите файла го триеха, задавайки `background:` (кратка
   форма), която нулира и background-image. Тези декларации са сменени на
   `background-color`, а блокът тук е предпазната мрежа: гарантира стрелката и
   достатъчно място отдясно, за да не минава текстът под нея.
   padding-right е с !important, защото го застъпват правила с по-висока
   специфичност (напр. `.invoice-form-v2 .line-row select`). Едно нарочно
   изключение тук е за предпочитане пред това стрелката да се чупи всеки път,
   щом някой добави ново правило за select. */
select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
    padding-right: 30px !important;
}
/* VIES badge pulses while the lookup is in flight */
input[data-eik-autofill].is-checking ~ .eik-vies-badge {
    animation: eikViesPulse 1.1s ease-in-out infinite;
}
input[data-eik-autofill].is-filled ~ .eik-vies-badge {
    color: var(--color-text-inverted);
    background: var(--color-success);
}
input[data-eik-autofill].is-missing ~ .eik-vies-badge {
    color: var(--color-text-inverted);
    background: var(--color-warning);
}
.invoice-form-v2 .totals-grand > span:first-child {
    font-size: var(--text-btn);
    font-weight: 700;
    color: var(--color-text-primary);
}
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .hero--center .hero-cta .btn {
            width: 100%;
        }
}
/* --- Sections --- */
.section-title {
    color: var(--color-text-primary);
    font-size: var(--text-h1);
    font-weight: 800;
    text-align: center;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}
/* (от раздел „AUTH PAGES — deliberate 1:1 port of cgbg's auth styling.“) This is the single source of truth for .auth-* rules; the three earlier
   partial blocks in this file (which fought each other with !important)
   were folded in here. Values are cgbg's literals rather than idbg tokens
   wherever the two differ — the point of this block is that the two apps
   render identically, so a token that is merely "close" (e.g. --color-border
   #E2E8F0 vs cgbg's #e8e8e8) would defeat it. Tokens are used only where
   they are an exact match (--brand-blue, --radius). */
.auth-card .btn-block {
    padding: 10px 18px;
    font-size: var(--text-btn);
    font-weight: 600;
    border-radius: var(--radius);
}
@media (max-width: 960px) {
    .section-title {
            font-size: var(--text-h2);
        }
}
@media (max-width: 600px) {
    .hero-cta .btn {
            width: 100%;
        }
}
.hidden {
    display: none !important;
}
.notif-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-danger);
    color: var(--color-text-inverted);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
@media (max-width: 600px) {
    /* Телефон: „+ Ново" и превключвателят на фирми се отварят в ширината на
       екрана (по 16px отстрани), а не спрямо бутона — иначе менюто „Ново"
       започваше вляво извън екрана, а това на фирмите избутваше страницата
       вдясно (systest M-02). Бутоните са в горната лента, затова 66px отгоре. */
    .create-new-panel,
        .firm-dropdown {
            position: fixed;
            top: 66px;
            left: 16px;
            right: 16px;
            min-width: 0;
            width: auto;
            max-height: calc(100vh - 82px);
            overflow-y: auto;
        }
}
/* Месецът в календара на flatpickr също е select. */
.flatpickr-calendar select.flatpickr-monthDropdown-months {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 12px;
    padding-right: 18px !important;
}
@media (max-width: 640px) {
    /* Сделки (CRM) на телефон: етапите са един под друг, затова празният етап е
       само заглавие и брой — не кутия от 300px с „—" (systest M-21). */
    .pipeline {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: var(--space-2);
    }
}

/* Телефон: полетата във формите и модалите — 16px и поне 44px (§1.2, §9).
   Първите три реда са със същата тежест като общия вид на формите на записи
   (раздел Layout) — иначе текстовите полета там оставаха 14px и iOS
   увеличаваше страницата при докосване (клиент, артикул, склад, разход). */
@media (max-width: 560px) {
    .app-page--list > .container > .app-form:not(.invoice-form-v2) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .app-page--list > .container > .app-form:not(.invoice-form-v2) select,
    .app-page--list > .container > .app-form:not(.invoice-form-v2) textarea,
    .app-form input[type="text"],
    .app-form input[type="email"],
    .app-form input[type="tel"],
    .app-form input[type="number"],
    .app-form input[type="date"],
    .modal-card select,
    .app-form select,
    .modal-card input,
    .modal-card textarea,
    .app-form textarea,
    .modal-card .app-form textarea,
    .invoice-form-v2 textarea,
    .invoice-form-v2 select,
    .invoice-form-v2 input[type="text"],
    .invoice-form-v2 input[type="email"],
    .invoice-form-v2 input[type="number"],
    .invoice-form-v2 input[type="date"] {
        font-size: var(--text-body);
        min-height: 44px;
    }
    /* Редовете на документите (количество, цена, мярка, отстъпка, името на
       реда, серийният номер) държат дребния си шрифт с !important в общите
       правила за реда (.invoice-form .line-row input — 13px, мярката — 12px)
       — на телефон iOS увеличаваше страницата при всяко докосване. „Всички полета под
       560px са 16px“ (§1.2) се надвива само така; само размерът, само тук. */
    .app-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
        font-size: var(--text-body) !important;
    }
}
/* Текст само за екранния четец („Действия“ в заглавието на колоната, „Още“ в
   иконен бутон). Ползват го изгледите на всички модули — затова е тук, а
   не в секция на един модул в design-pages.css. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* == Component: Анимации == */
/* @keyframes на компонентите */
@keyframes is-highlight-fade {
    from { background-color: var(--brand-blue-light); }
    to   { background-color: transparent; }
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes picker-loading-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}
@keyframes eikViesPulse {
    0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.45; transform: translateY(-50%) scale(0.9); }
}