/* ==========================================================================
   idbg — DESIGN PAGES (page-specific layouts and chrome)
   Header, footer, sidebar, dashboard, settings tabs, onboarding, auth,
   invoice form, invoice preview, public view, CRM kanban, etc.
   ========================================================================== */

/* ==========================================================================
   HEADER + NAV — redesigned Apr 2026 (PLAN7)
   Layout: [Logo] [Firm chip]  [Primary nav]  [+New] [Search] [Avatar]
   ========================================================================== */
.site-header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.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 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    font-weight: 800;
    color: var(--color-text-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.logo:hover { color: var(--color-text-primary); }
.logo img { display: block; height: 26px; width: auto; }

/* Wordmark lives in the DOM (not inside the SVG) so it always renders in
   Open Sans and can never be clipped by a fixed viewBox. cgbg sizes its
   logo text at 22px/800. */
.logo-mark { height: 28px !important; width: auto; flex-shrink: 0; }

/* 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: 22px;
    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; }

/* Public header nav (logged out) — distinct from public doc view .public-nav */
.site-header .site-public-nav {
    /* cgbg .main-nav gap is 4px */
    gap: var(--space-1);
    margin-left: var(--space-4);
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
}
/* 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: #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: #fff;
}

/* 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: #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: #fff;
    font-weight: 500;
}
.nav-item.is-active:hover {
    background: var(--brand-blue-dark);
    color: #fff;
}
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* "Още" mega-dropdown */
.nav-more { 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; }
.nav-more-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-more-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    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: 18px; 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: 11px; color: var(--color-text-muted); display: block; line-height: 1.3; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Firm switcher (left, next to logo) */
.firm-switcher { position: relative; }
.firm-chip {
    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); }
.firm-avatar {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.firm-avatar-sm { width: 22px; height: 22px; font-size: 11px; }
.firm-avatar-ghost {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px dashed 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 {
    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; }
.firm-dropdown-head {
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.6px;
    font-weight: 700;
}
.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: 11px; 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; }
.firm-item-add {
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-1);
    padding-top: var(--space-3);
}

/* "+ New" create button with dropdown */
.create-new { position: relative; }
.btn-create {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 12px;
}
.btn-create .chip-caret { color: rgba(255,255,255,0.7); }
.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: 18px; flex-shrink: 0; line-height: 1.2; }
.create-new-item span:not(.create-new-ico) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.create-new-item strong { font-size: var(--text-small); font-weight: 600; line-height: 1.3; }
.create-new-item small { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }
.create-new-item kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    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;
}
.create-new-sep {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) var(--space-2);
}

/* 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-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--slate-500), var(--slate-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}
.user-avatar:hover { box-shadow: var(--shadow-focus); }
.user-avatar-lg { width: 44px; height: 44px; font-size: 17px; }
.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: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-dropdown-sep { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }
.user-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--text-small);
    font-weight: 500;
    transition: background var(--duration-fast) var(--ease-out);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.user-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.user-item-ico {
    width: 18px;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.user-item-logout { color: var(--color-danger); }
.user-item-logout:hover { background: var(--color-danger-bg); color: var(--color-danger); }

/* 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);
    box-shadow: var(--shadow-lg);
    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);
}
.mobile-nav-backdrop {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    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); }
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-item.is-active { background: var(--brand-blue); color: #fff; font-weight: 600; }
.mobile-nav-accent { background: var(--brand-blue); color: #fff; }
.mobile-nav-accent:hover { background: var(--brand-blue-dark); color: #fff; }
.mobile-nav-sep { height: 1px; background: var(--color-border); margin: var(--space-3) var(--space-3); }

/* Responsive: collapse labels, hide "Още" label, hide mobile-nav below 980 */
@media (max-width: 1180px) {
    .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;
    }
    .main-nav .nav-item { padding: 8px 10px; }
    .firm-name { display: none; }
}
@media (max-width: 860px) {
    .main-nav { display: none; }
    .mobile-only { display: inline-flex; }
}
@media (max-width: 640px) {
    .btn-create span:first-of-type,
    .btn-create span:nth-of-type(2) { display: none; }
    .btn-create { padding: 8px; width: 36px; justify-content: center; }
    .btn-create .chip-caret { display: none; }
    .firm-chip { padding: 4px; }
    .firm-chip .chip-caret { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) 0 var(--space-6);
    margin-top: var(--space-16);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-6);
}
@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
.footer-brand img { margin-bottom: var(--space-2); }
.footer-brand p {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    margin: 0 0 var(--space-1);
}
.footer-brand .footer-muted {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
}
.footer-col .footer-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    font-weight: 700;
    margin: 0 0 var(--space-2);
}
.footer-col a {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    text-decoration: none;
    padding: 3px 0;
}
.footer-col a:hover { color: var(--brand-blue); }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dashboard { padding: var(--space-6) 0 var(--space-12); }
.dash-welcome { margin-bottom: var(--space-6); }
.dash-welcome h1 { font-size: var(--text-h2); font-weight: 800; margin-bottom: var(--space-1); }
.dash-welcome .lead { color: var(--color-text-secondary); font-size: var(--text-body); }
.upgrade-link { color: var(--color-warning); font-weight: 600; }

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.quick-action {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--ease-out);
    display: block;
    text-align: center;
}
.quick-action:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    color: var(--color-text-primary);
}
.qa-icon { font-size: 26px; margin-bottom: var(--space-2); line-height: 1; }
.qa-title { font-size: var(--text-small); font-weight: 700; margin-bottom: 2px; }
.qa-sub { font-size: var(--text-caption); color: var(--color-text-muted); }

/* Dashboard grid — recent invoices, tasks, overdue */
.dash-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.dash-card h3 {
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    font-weight: 700;
    margin-bottom: var(--space-3);
}
.dash-card h3 a { color: inherit; }
.dash-card h3 a:hover { color: var(--brand-blue); }
.dash-chart { grid-column: 1 / 2; }

.chart-svg { width: 100%; height: auto; }
.chart-svg polyline { stroke: var(--brand-blue); stroke-width: 2.5; fill: none; }
.chart-svg polygon { fill: var(--brand-blue); opacity: 0.08; }
.chart-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-small);
}

.mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}
.mini-row:last-child { border-bottom: 0; }
.mini-row:hover { color: var(--brand-blue); }
.mini-amount { font-family: var(--font-mono); font-weight: 600; }
.status-green { color: var(--color-success); }
.status-red   { color: var(--color-danger); }
.status-blue  { color: var(--color-info); }
.status-amber { color: var(--color-warning); }
.status-muted { color: var(--color-text-muted); }

/* Setup checklist widget */
.setup-checklist {
    position: relative;
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
    border: 1px solid #C7D2FE;
    border-radius: var(--radius-md);
}
/* Кръгче с точен размер, а не текст с padding: „×" е 18px глиф и с
   вертикален padding ховърът порастваше надолу върху progress bar-а.
   line-height: 1 + flex центриране държат кутията точно 28×28. */
.setup-checklist-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
}
.setup-checklist-close:hover { background: rgba(0,0,0,0.05); color: var(--color-text-primary); }
/* Мястото на бутона е запазено, за да не застава лентата под него —
   иначе двете се застъпват в горния десен ъгъл независимо от ховъра. */
.setup-checklist-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-right: 34px;
}
.setup-checklist-head h2 { margin: 0; color: #3730A3; font-size: var(--text-body-lg); }
.setup-checklist-progress {
    width: 200px;
    height: 8px;
    background: #fff;
    border-radius: var(--radius-full);
    overflow: hidden;
}
.setup-checklist-progress-bar {
    height: 100%;
    background: #4F46E5;
    transition: width var(--duration) var(--ease-out);
}
.setup-checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2);
}
.setup-checklist-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid #E5E7EB;
    text-decoration: none;
    color: inherit;
    font-size: var(--text-small);
    transition: all var(--duration-fast) var(--ease-out);
}
.setup-checklist-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); color: inherit; }
.setup-checklist-item.is-done { border-color: #D1FAE5; }
.setup-checklist-item.is-done .setup-checklist-item-label {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.setup-checklist-item-ico { font-size: 16px; }
.setup-checklist-item-label { flex: 1; }

/* ==========================================================================
   AUTH (login / register)
   ========================================================================== */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: radial-gradient(circle at 20% 20%, rgba(11, 95, 255, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 176, 46, 0.04) 0%, transparent 50%),
                var(--color-bg-subtle);
}
/* .auth-card lives in the consolidated "Auth pages" block below. */
.auth-footer {
    text-align: center;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

/* ==========================================================================
   ONBOARDING / SWITCH
   ========================================================================== */
.onboarding-section,
.switch-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: var(--color-bg-subtle);
}
.onboarding-wrap { width: 100%; max-width: 720px; }
.onboarding-logo { display: block; text-align: center; margin-bottom: var(--space-6); }
.onboarding-card,
.switch-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10);
}
.onboarding-card h1,
.switch-card h1 {
    font-size: var(--text-h2);
    font-weight: 800;
    margin-bottom: var(--space-2);
    text-align: center;
}
.onboarding-card .lead,
.switch-card .lead {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-6);
    font-size: var(--text-body);
}
.onb-note {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    margin-top: var(--space-4);
}

.tenants-grid { display: grid; gap: var(--space-2); }
.tenant-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--ease-out);
}
.tenant-card:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    color: var(--color-text-primary);
}
.tenant-card.is-current { border-color: var(--brand-blue); background: var(--brand-blue-light); }
.tenant-avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.tenant-info { flex: 1; min-width: 0; }
.tenant-name { font-weight: 700; font-size: var(--text-small); margin-bottom: 2px; }
.tenant-meta { font-size: var(--text-caption); color: var(--color-text-muted); }
.tenant-arrow { color: var(--color-text-muted); font-size: 20px; }

/* ==========================================================================
   SETTINGS layout
   ========================================================================== */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 720px) {
    .settings-layout { grid-template-columns: 1fr; }
}
.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    position: sticky;
    top: 80px;
}
.settings-tab {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}
.settings-tab:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.settings-tab.is-active {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    font-weight: 700;
}
@media (max-width: 720px) {
    .settings-tabs { flex-direction: row; flex-wrap: wrap; position: static; }
    .settings-tab { flex: 1 1 auto; text-align: center; }
}

.settings-content { min-width: 0; }
.settings-content .data-table-wrap { margin: var(--space-2) 0 var(--space-3); }

/* ==========================================================================
   INVOICE FORM (page-specific)
   ========================================================================== */
.invoice-page { padding: var(--space-5) 0 var(--space-12); }
.invoice-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* doc-type-switcher rules are defined in design-components.css */
/* number-picker overrides live at the bottom of this file (v2 form) */

/* Client picker autocomplete */
.client-picker { position: relative; }
.invoice-picker { position: relative; }
.client-picker-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.client-picker-results[hidden] { display: none; }
.client-picker-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-small);
}
.client-picker-item:last-child { border-bottom: 0; }
.client-picker-item:hover { background: var(--color-bg-subtle); }

/* 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-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.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; }
.totals-grand { border-top: 2px solid var(--color-border); padding-top: var(--space-3); font-size: var(--text-body-lg); font-weight: 800; }

.field-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.field-label { font-weight: 600; font-size: var(--text-small); color: var(--color-text-primary); }

/* ==========================================================================
   INVOICE PREVIEW / PDF wrapper — visible in web + generated PDF
   ========================================================================== */
.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);
}
/* (The actual invoice body lives inside _preview.phtml with its own inline
   PDF-safe styles; we only wrap it here.) */

/* Логото на документа се стилизира в assets/document.css. */

/* ==========================================================================
   PUBLIC DOC VIEW (client's invoice view / pay)
   ========================================================================== */
.public-shell {
    min-height: 100vh;
    background: var(--color-bg-subtle);
    display: flex;
    flex-direction: column;
}
.public-nav {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
}
/* Логото и бутоните стоят в СЪЩИЯ контейнер като документа отдолу и на лента с
   височината на хедъра в „Начало" (.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; }
.public-nav-actions { display: flex; gap: var(--space-2); }
/* Телефон: логото отгоре, действията отдолу на цяла ширина — на 375px
   логото и двата бутона на един ред се сплескват (Trello #112). */
@media (max-width: 560px) {
    .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-container {
    max-width: 900px;
    margin: var(--space-6) auto;
    padding: 0 var(--space-4);
    width: 100%;
}
.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);
}
.public-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    padding: var(--space-4);
}
.accept-bar {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ==========================================================================
   CRM KANBAN
   ========================================================================== */
.crm-board {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-4);
}
.crm-column {
    flex: 0 0 280px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}
.crm-column h3 {
    font-size: var(--text-small);
    font-weight: 700;
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: space-between;
}
.crm-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--text-small);
    cursor: grab;
    box-shadow: var(--shadow-sm);
}
.crm-card:hover { box-shadow: var(--shadow); }

/* ==========================================================================
   BRANDING (settings) — logo upload
   ========================================================================== */
.branding-logo-preview {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.branding-logo-img { max-width: 220px; max-height: 70px; border-radius: var(--radius-sm); background: var(--color-bg-card); padding: var(--space-2); }
.branding-logo-meta { flex: 1; }
.branding-logo-empty {
    padding: var(--space-8);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   DOCUMENTS — folder grid
   ========================================================================== */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.folder-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) var(--space-3);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-fast) var(--ease-out);
}
.folder-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.folder-tile-ico { font-size: 32px; margin-bottom: var(--space-2); }
.folder-tile-name { font-weight: 600; text-align: center; font-size: var(--text-small); }

/* ==========================================================================
   HELP / LEGAL text pages
   ========================================================================== */
.prose {
    max-width: 760px;
    margin: 0 auto;
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
}
.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose p { margin-bottom: var(--space-3); }
.prose ul, .prose ol { margin: 0 0 var(--space-3) var(--space-5); }
.prose li { margin-bottom: var(--space-1); }

/* ==========================================================================
   BILLING / plans
   ========================================================================== */

/* ==========================================================================
   REPORT TABS — shared navigation across /reports/* pages
   Implemented via App/View/reports/_tabs.phtml
   ========================================================================== */
.report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.report-tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: 600;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.report-tab:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.report-tab.is-active {
    background: var(--brand-blue);
    color: #fff;
}
.report-tab.is-active:hover {
    background: var(--brand-blue-dark);
    color: #fff;
}

/* ==========================================================================
   TEAM — role legend info box
   ========================================================================== */
.role-legend {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.role-legend h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-h4);
}
.role-legend ul {
    margin: 0;
    padding-left: var(--space-5);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}
.role-legend ul li { margin-bottom: var(--space-1); }
.role-legend p { margin-top: var(--space-3); margin-bottom: 0; }

/* ==========================================================================
   TEAM — permissions table
   ========================================================================== */
.perm-col-default { width: 120px; }
.perm-col-override { width: 360px; }
.perm-override-cell { white-space: nowrap; }
.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--space-3);
    font-size: var(--text-small);
}
.radio-inline:last-child { margin-right: 0; }

/* ==========================================================================
   PAGE DESCRIPTION — generic subtitle under page head
   ========================================================================== */
.page-description {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    max-width: 720px;
}

/* Footer compliance disclaimer. Без opacity: #888 върху тъмния футър е
   4.9:1, а с .75 падаше под 4.5:1 (WCAG AA). */
.footer-disclaimer {
    font-size: 11px;
    line-height: 1.45;
    margin-top: var(--space-3);
}

/* ==========================================================================
   DASHBOARD — redesigned PLAN7
   ========================================================================== */
.dashboard { padding: var(--space-8) 0 var(--space-16); }

.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}
.dash-title {
    font-size: var(--text-h2);
    font-weight: 800;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.dash-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}
.dash-firm-label {
    font-weight: 600;
    color: var(--color-text-primary);
}
.dash-plan-chip {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary);
}
.dash-plan-chip-paid {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}
.dash-header-actions { display: flex; gap: var(--space-2); }

/* Upgrade banner — cleaner block CTA instead of amber chip */
.dash-upgrade-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    background: linear-gradient(135deg, #FFF6E4 0%, #FFE9BF 100%);
    border: 1px solid #FDE68A;
    border-radius: var(--radius-md);
}
.dash-upgrade-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--brand-amber);
    color: #fff;
}
.dash-upgrade-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.dash-upgrade-body strong { color: #78350F; font-size: 15px; }
.dash-upgrade-body span { color: #78350F; font-size: 13px; opacity: 0.8; }
.dash-upgrade-banner .btn { flex-shrink: 0; }
@media (max-width: 560px) {
    .dash-upgrade-banner { flex-wrap: wrap; }
    .dash-upgrade-banner .btn { width: 100%; }
}

/* KPI strip — 4 clickable cards in row */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.kpi-item {
    display: block;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.kpi-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-border);
}
.kpi-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--color-border-strong);
    color: inherit;
}
.kpi-brand::before { background: var(--brand-blue); }
.kpi-warn::before { background: var(--brand-amber); }
.kpi-danger::before { background: var(--color-danger); }
.kpi-success::before { background: var(--color-success); }

.kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    font-weight: 600;
}
.kpi-icon {
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
}
.kpi-brand .kpi-icon { color: var(--brand-blue); }
.kpi-warn .kpi-icon { color: var(--brand-amber-dark); }
.kpi-danger .kpi-icon { color: var(--color-danger); }
.kpi-success .kpi-icon { color: var(--color-success); }

.kpi-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: var(--space-1);
    color: var(--color-text-primary);
}
.kpi-brand .kpi-value { color: var(--brand-blue); }
.kpi-warn .kpi-value { color: var(--brand-amber-dark); }
.kpi-danger .kpi-value { color: var(--color-danger); }
.kpi-success .kpi-value { color: var(--color-success); }
.kpi-foot {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

/* Main grid — 2-col with main content and side */
.dash-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: var(--space-5);
}
.dash-col { display: flex; flex-direction: column; gap: var(--space-4); }

/* Generic panel */
.panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-2);
    gap: var(--space-3);
}
.panel-head h3 {
    font-size: var(--text-body);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}
.panel-head-link {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}
.panel-head-link:hover { color: var(--brand-blue); }
.panel-head-link-title { color: inherit; text-decoration: none; }
.panel-head-link-title:hover { color: var(--brand-blue); }

.panel-danger { border-color: var(--color-danger); }
.panel-danger .panel-head h3 { color: var(--color-danger); }

.panel-list { padding: 0 var(--space-2) var(--space-2); }
.panel-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--duration-fast) var(--ease-out);
}
.panel-row:hover { background: var(--color-bg-subtle); color: inherit; }
.panel-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.panel-row-main strong { font-size: var(--text-small); font-weight: 700; color: var(--color-text-primary); }
.panel-row-sub { font-size: var(--text-caption); color: var(--color-text-muted); }
.panel-row-end { font-weight: 600; font-size: var(--text-small); flex-shrink: 0; text-align: right; }

/* Chart — bar chart */
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 140px;
    padding: 0 var(--space-4) var(--space-3);
}
.chart-bar-col {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 4px;
}
.chart-bar {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-dark));
    border-radius: 2px 2px 0 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.chart-bar-col:hover .chart-bar { opacity: 0.85; }
.chart-legend {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-4) var(--space-4);
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Status colors for numbers */
.status-green { color: var(--color-success); }
.status-red, .status-danger { color: var(--color-danger); }
.status-blue { color: var(--brand-blue); }
.status-muted { color: var(--color-text-muted); }

/* Shortcut grid */
.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
}
.shortcut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: 600;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
    text-align: center;
}
.shortcut-item:hover {
    border-color: var(--brand-blue);
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
}
.shortcut-ico { font-size: 20px; line-height: 1; }

/* Empty state compact variant for panels */
.empty-state-compact {
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
.empty-state-compact .empty-state-icon { font-size: 32px; margin-bottom: var(--space-2); }
.empty-state-compact p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--text-small); }

/* Responsive */
@media (max-width: 1100px) {
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .dash-main { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dash-title { font-size: var(--text-h3); }
    .kpi-value { font-size: 22px; }
    .shortcut-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   LIST / TABLE PAGES — PLAN7 polish
   ========================================================================== */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.page-head-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.page-head h1 {
    font-size: var(--text-h2);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}
.count-badge {
    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);
}
.page-head-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* 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, .filter-date {
    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;
}
.filter-select {
    min-width: 160px;
    max-width: 220px;
    padding-right: 32px;
}
.filter-date {
    min-width: 140px;
    max-width: 160px;
    font-family: inherit;
}

.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;
}

/* Status chip-tabs */
.status-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
    flex-wrap: wrap;
}
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    line-height: 1;
}
.status-chip:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.status-chip.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.status-chip.is-active:hover { background: var(--brand-blue-dark); }

/* Advanced filters panel */
.advanced-panel {
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.advanced-panel[hidden] { display: none; }
.advanced-panel-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.adv-section {
    border: 0;
    padding: 0;
    margin: 0;
}
.adv-section legend {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: 700;
    margin-bottom: var(--space-2);
    padding: 0;
}
.adv-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2) var(--space-3);
}
.adv-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adv-field > span {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0;
}
.adv-field > input,
.adv-field > select {
    width: 100%;
    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;
}
.adv-field > input:focus,
.adv-field > select:focus {
    outline: 0;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}

.adv-tri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}
.tri-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
}
.tri-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.tri-group .tri-pill + .tri-pill { margin-left: 4px; }
.tri-group > .tri-pill:first-of-type { margin-left: 0; }
.tri-group .tri-pills-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tri-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.2;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.tri-pill:hover { background: var(--color-bg-subtle); }
.tri-pill.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.tri-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.advanced-panel-actions {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* 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;
}
.bulk-toolbar[hidden],
.list-shell .bulk-toolbar[hidden] { display: none !important; }
.bulk-actions-menu { position: relative; }
.btn-actions-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bulk-actions-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    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;
}
.bulk-actions-panel[hidden] { display: none; }
.bulk-actions-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: 700;
    padding: 6px 12px 4px;
}
.bulk-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    font-size: var(--text-small);
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast) var(--ease-out);
}
.bulk-action-item:hover { background: var(--color-bg-subtle); }
/* Действие, което не важи за текущия избор (data-bulk-requires) — сиво, а не
   скрито: иначе менюто подскача и не личи защо го няма. Причината е в title-а. */
.bulk-action-item:disabled { opacity: .45; cursor: not-allowed; }
.bulk-action-item:disabled:hover { background: transparent; }
.bulk-action-ico {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.bulk-action-danger { color: var(--color-danger); }
.bulk-action-danger:hover { background: var(--color-danger-bg); }
.bulk-action-danger:disabled:hover { background: transparent; }
.bulk-actions-sep {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

/* Status inline dropdown in table cells */
.status-menu { position: relative; display: inline-block; }
.status-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.3;
    padding: 3px 9px;
}
.status-trigger svg { width: 10px; height: 10px; flex-shrink: 0; }
.status-trigger:hover { filter: brightness(0.96); }
.status-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 190px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    animation: none;
}
.status-menu-panel[hidden] { display: none; }
.status-menu-form { margin: 0; }
.status-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    font-size: var(--text-small);
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast) var(--ease-out);
}
.status-menu-item:hover { background: var(--color-bg-subtle); }
.status-menu-danger { color: var(--color-danger); }
.status-menu-danger:hover { background: var(--color-danger-bg); }
.status-menu-sep { height: 1px; background: var(--color-border); margin: 4px 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: var(--color-success); }
.dot-amber { background: var(--color-warning); }
.dot-red { background: var(--color-danger); }
.dot-blue { background: var(--brand-blue); }
.dot-indigo { background: #6366F1; }
.dot-gray { background: var(--color-text-muted); }
.list-shell .bulk-count {
    font-weight: 700;
    color: var(--brand-blue-dark);
    font-size: var(--text-small);
}

.list-shell .data-table {
    margin: 0;
    width: 100%;
}
.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;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}
.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.6;
}
.empty-state-title {
    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;
}

/* Responsive filter row */
@media (max-width: 900px) {
    .list-filter-row { flex-direction: column; align-items: stretch; }
    .search-field, .filter-select, .filter-date { min-width: 0; width: 100%; }
    .list-more-filters { margin-left: 0; }
}

/* ==========================================================================
   DATA TABLE WRAP — upgrade legacy .data-table-wrap to match .list-shell polish
   (auto-applies to clients, offers, expenses, protocols, warranties, etc.)
   ========================================================================== */
.data-table-wrap {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.data-table-wrap > .data-toolbar {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.data-table-wrap > .data-toolbar input[type="search"],
.data-table-wrap > .data-toolbar input[type="text"],
.data-table-wrap > .data-toolbar select {
    width: auto;
    height: 36px;
    padding: 8px 12px;
    font-size: var(--text-small);
}
.data-table-wrap > .data-toolbar input[type="search"],
.data-table-wrap > .data-toolbar input[type="text"] {
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 360px;
}
.data-table-wrap > .data-toolbar select {
    min-width: 160px;
    max-width: 220px;
    padding-right: 32px;
    flex: 0 0 auto;
}
.data-table-wrap > .data-toolbar input[type="date"] {
    width: auto;
    height: 36px;
    min-width: 140px;
    max-width: 160px;
    padding: 8px 10px;
    font-size: var(--text-small);
}
.data-table-wrap > .data-toolbar label {
    margin: 0;
    font-size: var(--text-small);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Pagination inside list shell */
.data-table-wrap > .pagination,
.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 */
.data-table-wrap > .data-table,
.list-shell > .data-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Bulk toolbar polish */
.bulk-toolbar {
    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: #fff;
    border-radius: var(--radius-full);
    margin-right: var(--space-2);
}

/* ==========================================================================
   idbg — Page-specific styles (merged from design-legacy.css)
   ========================================================================== */

/* ==========================================================================
   Page-specific sections
   ========================================================================== */

/* ===== dashboard/index.phtml ===== */
.dashboard {
    padding: var(--space-8) 0 var(--space-16);
}

.dash-welcome {
    margin-bottom: var(--space-8);
}

.dash-welcome h1 {
    font-size: var(--text-h2);
    font-weight: 800;
}

.dash-welcome .lead {
    color: var(--color-text-secondary);
    font-size: var(--text-body-lg);
    margin-top: 4px;
}

.upgrade-link {
    color: var(--brand-amber-dark);
    font-weight: 700;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    border-left: 4px solid var(--color-border);
}

.stat-card.primary {
    border-left-color: var(--brand-blue);
    background: var(--brand-blue-light);
}

.stat-card.amber {
    border-left-color: var(--color-warning);
}

.stat-card.red {
    border-left-color: var(--color-danger);
}

.stat-card.green {
    border-left-color: var(--color-success);
}

.stat-label {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    margin: 4px 0;
    color: var(--color-text-primary);
}

.stat-card.primary .stat-value {
    color: var(--brand-blue);
}

.stat-sub {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.quick-action {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-text-primary);
    text-align: center;
    transition: all var(--duration-fast) var(--ease-out);
}

.quick-action:hover {
    border-color: var(--brand-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: var(--color-text-primary);
}

.qa-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.qa-title {
    font-size: var(--text-small);
    font-weight: 700;
}

.qa-sub {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
}

.dash-grid .dash-chart {
    grid-column: span 3;
}

@media (max-width: 1100px) {
    .dash-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dash-grid .dash-chart {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-grid .dash-chart {
        grid-column: span 1;
    }
}

.dash-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.dash-card.dash-card-red {
    border-left: 4px solid var(--color-danger);
}

.dash-card h3 {
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--text-small);
}

.mini-row:last-of-type {
    border-bottom: 0;
}

.mini-sub {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.muted {
    color: var(--color-text-muted);
    font-size: var(--text-small);
}

.mini-link {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-small);
    color: var(--brand-blue);
    text-align: right;
}

.chart-svg {
    width: 100%;
    height: 160px;
    display: block;
}

.chart-empty {
    color: var(--color-text-muted);
    padding: var(--space-10) 0;
    text-align: center;
}

/* ===== exports/index.phtml ===== */
.exports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.export-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.export-card:hover {
    border-color: var(--brand-blue);
}

.export-icon {
    font-size: 32px;
    margin-bottom: var(--space-2);
}

.export-card h3 {
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.export-card .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.export-card label {
    display: block;
}

.export-card label > span {
    display: block;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.export-card input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-size: var(--text-small);
}

/* Полето „Данъчен период" е flatpickr alt input — само за четене, отваря се с клик. */
.export-card input[readonly] {
    background: var(--color-bg-card);
    cursor: pointer;
}

/* НАП карта — двуколонно оформление: обяснението вляво в картата,
   действието (данъчен период + „Изтегли ZIP") се събира в дясната част. */
.export-card--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: var(--space-6);
    align-items: center;
}

.export-card__info {
    min-width: 0;
}

.export-card__info h3 {
    margin-bottom: var(--space-2);
}

.export-card__desc {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-text-muted);
}

.export-card__desc strong {
    color: var(--color-text-primary);
}

/* Форматните карти стават флекс-колона, за да се подравнят полетата „От/До"
   и бутонът най-долу дори при описания с различна дължина. */
.export-card:not(.export-card--split) {
    display: flex;
    flex-direction: column;
}

/* Описанието (между заглавието и полетата за период) запълва свободното
   пространство и избутва периода + бутона най-долу. */
.export-card > .export-card__desc {
    margin: 0 0 var(--space-4);
    flex: 1 0 auto;
}

/* Дясната колона събира само едно поле — да заеме цялата ѝ ширина. */
.export-card--split .form-grid-2 {
    grid-template-columns: 1fr;
    margin-bottom: var(--space-3);
}

@media (max-width: 720px) {
    .export-card--split {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        align-items: stretch;
    }
}

/* ===== crm/tasks.phtml ===== */
.tasks-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 720px) {
    .tasks-board {
        grid-template-columns: 1fr;
    }
}

.task-col {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.task-col h3 {
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.col-count {
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.task-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Заглавие вляво, иконките вдясно. Иконките не се свиват, заглавието се пренася. */
.task-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.task-title {
    font-weight: 600;
    font-size: var(--text-small);
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-card-actions {
    flex-shrink: 0;
    margin: -4px -4px 0 0;
}

.task-card-actions .row-action { width: 28px; height: 28px; }

/* Описанието се пише свободно — празните редове са част от текста, затова
   pre-wrap. На картата се виждат само първите 3 реда; целият текст си остава
   в DOM-а и се чете от бутона „Преглед". */
.task-desc {
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    margin-top: 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Разгънато описание — махаме отрязването, текстът се показва цял. */
.task-desc.is-expanded {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
}

/* „Виж повече" стои под описанието и изглежда като линк, не като бутон —
   на карта с два същински бутона трети би се борил за внимание. */
.task-desc-more {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 2px;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--brand-blue);
    cursor: pointer;
}
.task-desc-more:hover { text-decoration: underline; }
.task-desc-more[hidden] { display: none; }

/* ===== Модал „Преглед на задача" ===== */
.modal-body { padding: var(--space-5) var(--space-6); }

.task-view-title {
    font-size: var(--text-h4);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.task-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--space-3);
    align-items: center;
    margin-top: var(--space-3);
}

.task-view-metaitem {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Дългото описание скролва вътре в модала, а не разтяга картата. */
.task-view-desc {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.task-view-desc.is-empty { color: var(--color-text-muted); font-style: italic; }

.task-meta {
    display: flex;
    gap: 6px var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.task-client, .task-due {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Бутоните бяха слепени един за друг и за мета реда над тях. */
.task-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.col-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-6) 0;
    font-size: 11px;
}

.col-empty[hidden] {
    display: none;
}

/* ===== crm/pipeline.phtml ===== */
.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);
    }
}

@media (max-width: 640px) {
    .pipeline {
        grid-template-columns: 1fr;
    }
}

.pipeline-col {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-height: 300px;
}

.pipeline-col.col-won {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.pipeline-col.col-lost {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
}

.col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: var(--text-small);
}

/* Скопирано до борда: .col-total се ползва и за колоната „Сума" в редовете на
   фактурата, а тукашният margin-bottom я избутваше 6px нагоре спрямо полетата
   вляво (центрирана клетка с долен margin). */
.pipeline-col > .col-total {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* „Спечелен"/„Загубен" нямат ред със сума — запазваме мястото му (4px собствен
   margin + височината на .col-total + неговия margin), за да не тръгват картите
   по-нагоре от съседните колони. */
.pipeline-col.col-won .col-head,
.pipeline-col.col-lost .col-head {
    margin-bottom: calc(4px + var(--text-caption) * 1.6 + var(--space-3));
}

.opp-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    cursor: grab;
    transition: all var(--duration-fast) var(--ease-out);
}

.opp-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--brand-blue);
}

/* Действията стоят най-долу вдясно, на свой ред: колоните на дъската са
   тесни и три бутона до заглавието го режеха на срички. */
.opp-card-actions {
    display: flex;              /* .row-actions е inline-flex — тук трябва цял ред */
    justify-content: flex-end;
    margin: var(--space-2) -4px -2px 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.opp-card-actions .row-action { width: 28px; height: 28px; }

.opp-title {
    font-weight: 600;
    font-size: var(--text-small);
    min-width: 0;
    overflow-wrap: break-word;
}

.opp-client {
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.opp-amount {
    font-size: var(--text-body);
    color: var(--brand-blue);
    font-weight: 700;
    margin-top: 4px;
}

.opp-date {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ===== periodic/form.phtml ===== */
.periodic-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.periodic-line {
    display: grid;
    grid-template-columns: 3fr 70px 70px 100px 70px;
    gap: var(--space-2);
}

.periodic-line input,
.periodic-line select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
}

/* ===== store/form.phtml ===== */
.store-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.store-line {
    display: grid;
    grid-template-columns: 3fr 120px 120px;
    gap: var(--space-2);
}

.store-line select,
.store-line input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
}

/* ===== warranties/form.phtml ===== */
.number-preview {
    font-size: var(--text-h4);
    color: var(--color-text-muted);
    margin-left: 12px;
    font-weight: 500;
}

.wr-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wr-line {
    display: grid;
    grid-template-columns: 3fr 100px 160px;
    gap: var(--space-2);
}

.wr-line input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
}

.timeline-simple {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-simple li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-small);
}

.timeline-simple li p {
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* ===== protocols/form.phtml ===== */
.simple-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.simple-line {
    display: grid;
    grid-template-columns: 3fr 80px 60px 100px;
    gap: var(--space-2);
}

.simple-line input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
}

/* ===== cashbox/index.phtml ===== */
.register-tabs {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.register-tab {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--ease-out);
    min-width: 180px;
}

.register-tab:hover {
    border-color: var(--brand-blue);
}

.register-tab.is-active {
    border-color: var(--brand-blue);
    background: var(--brand-blue-light);
}

.reg-name {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.reg-balance {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-top: 2px;
}

.stats-row {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.stat-chip {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    flex: 1;
    min-width: 180px;
    border-left-width: 4px;
}

.stat-chip.green {
    border-left-color: var(--color-success);
}

.stat-chip.red {
    border-left-color: var(--color-danger);
}

.stat-chip.blue {
    border-left-color: var(--brand-blue);
}

.stat-chip .muted-label {
    display: block;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-chip strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    margin-top: 2px;
}

/* ===== pay/show.phtml ===== */
.public-shell {
    min-height: 100vh;
    background: var(--color-bg-subtle);
}

.public-nav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.pay-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6);
}

.pay-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10);
    text-align: center;
}

.pay-header h1 {
    font-size: var(--text-h3);
    font-weight: 700;
    margin: 4px 0 var(--space-6);
}

.pay-amount {
    margin: var(--space-8) 0;
}

.pay-amount .amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--brand-blue);
    margin: var(--space-2) 0;
}

.pay-amount .sub {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.pay-cta {
    margin-bottom: var(--space-4);
    padding: 16px 24px;
    font-size: 17px;
}

.pay-secure {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.pay-alt {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
}

.pay-alt p {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    margin: var(--space-2) 0 var(--space-4);
}

.pay-success {
    border-color: var(--color-success);
}

.pay-success h1 {
    color: var(--color-success);
}

.pay-icon {
    font-size: 64px;
    margin-bottom: var(--space-4);
}

.pay-cancel {
    border-color: var(--color-warning);
}

/* ===== publicdoc/show.phtml ===== */
.public-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.public-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.doc-type-label {
    display: inline-block;
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    font-weight: 700;
}

.public-title h1 {
    font-size: 32px;
    font-weight: 800;
    margin: 4px 0 8px;
}

.public-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.public-parties {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

@media (max-width: 640px) {
    .public-parties {
        grid-template-columns: 1fr;
    }
}

.party-block {
    font-size: var(--text-small);
    line-height: 1.6;
}

.party-block strong {
    display: block;
    margin-top: 4px;
    color: var(--color-text-primary);
    font-size: var(--text-body);
}

.public-lines {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.public-lines th {
    background: var(--brand-blue);
    color: #fff;
    text-align: left;
    padding: 10px 16px;
    font-size: var(--text-small);
    font-weight: 700;
}

.public-lines td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-small);
    vertical-align: top;
}

.public-lines .num {
    text-align: right;
    white-space: nowrap;
}

.line-desc {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    margin-top: 2px;
}

.public-totals {
    display: flex;
    justify-content: flex-end;
    margin: var(--space-6) 0;
}

.totals-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    min-width: 320px;
}

.totals-card .row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--text-small);
}

.totals-card .row.grand {
    border-top: 2px solid var(--color-border-strong);
    margin-top: 8px;
    padding-top: 10px;
    font-size: var(--text-body-lg);
}

.totals-card .row.grand strong {
    color: var(--brand-blue);
    font-size: 22px;
}

.public-notes {
    background: var(--color-bg-card);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--brand-blue);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    margin: var(--space-6) 0;
}

.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);
}

/* ===== billing/index.phtml ===== */
.billing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.current-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Едно правило вместо две: дъното на файла преправяше същия клас за старите
   публични карти (h3 + долен отстъп) и печелеше по ред, тоест „Текущ план"
   в „Абонамент" открай време се рисуваше с ТЕЗИ стойности, не с h2 отгоре.
   Картите ги няма, затова печелившите стойности остават тук. */
.plan-name {
    font-size: var(--text-h3);
    font-weight: 800;
    color: var(--brand-blue);
    margin-top: 4px;
    margin-bottom: var(--space-2);
}

.sub-meta {
    color: var(--color-text-secondary);
    margin-top: 4px;
    font-size: var(--text-small);
}

.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, var(--color-bg-page));
    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, 0 1px 2px rgba(0, 0, 0, .08));
}

.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: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    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: 32px;
    font-weight: 800;
    color: var(--brand-blue);
}

.plan-price-amt small {
    font-size: 14px;
    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;
}

/* ===== invoices/view.phtml ===== */
.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;
    }
}

.invoice-preview {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 900px;
}

.invoice-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.invoice-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.action-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.action-card h3 {
    font-size: var(--text-body);
    margin-bottom: var(--space-3);
    font-weight: 700;
}

.action-card label {
    display: block;
    margin-bottom: var(--space-3);
}

.action-card label > span {
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.action-card input,
.action-card textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--text-small);
}

.muted-desc {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.action-card-danger {
    border-color: var(--color-danger-bg);
}

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.timeline li:last-child {
    border-bottom: 0;
}

.timeline strong {
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
}

.timeline small {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
}

/* ===== expenses/form.phtml ===== */
.ocr-zone {
    background: linear-gradient(135deg, rgba(11, 95, 255, .04), rgba(255, 176, 46, .04));
    border: 2px dashed var(--brand-blue);
    border-radius: var(--radius-lg);
    padding: var(--space-10);
    text-align: center;
    margin-bottom: var(--space-6);
    transition: all var(--duration-fast) var(--ease-out);
}

.ocr-zone.is-dragover {
    border-color: var(--brand-amber);
    background: rgba(255, 176, 46, .08);
}

.ocr-icon {
    font-size: 48px;
    margin-bottom: var(--space-3);
}

.ocr-zone h3 {
    font-size: var(--text-h4);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.ocr-zone p {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    margin-bottom: var(--space-4);
}

.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);
}

/* ===== Dashboard: clickable stat cards + card-header links ===== */
.stat-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all var(--duration-fast) var(--ease-out);
}
.stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: inherit;
}

.dash-card h3 a.dash-card-link {
    color: inherit;
    text-decoration: none;
}
.dash-card h3 a.dash-card-link:hover {
    color: var(--brand-blue);
}

/* ===== Copy-link row (invoice view) ===== */
.copy-link-row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.copy-link-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-secondary);
    min-width: 0;
}
.copy-link-preview { font-size: var(--text-small); }
[data-copy-btn].is-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* ===== Clients list ===== */
.inline-badge { margin-left: 8px; }
.inline-form { display: inline; }
.toolbar-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 var(--space-2);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}
.toolbar-check input[type="checkbox"] {
    accent-color: var(--brand-blue);
    cursor: pointer;
}
.amount-due { color: var(--color-warning); font-weight: 700; }
.amount-zero { color: var(--color-text-muted); }
.is-deleted { opacity: 0.5; }
.btn-mt-4 { margin-top: 16px; }

/* ===== Clients edit page: balance + docs tab ===== */
.client-balance-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.client-balance-tile {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border-left: 4px solid var(--color-border);
}
.client-balance-tile.warn { border-left-color: var(--color-warning); }
.client-balance-tile.muted-label { font-size: var(--text-caption); text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; letter-spacing: .5px; }
.client-balance-tile strong { display: block; font-size: 22px; font-weight: 800; margin-top: 4px; }

/* ===== Client documents section ===== */
.client-docs-section { margin-top: var(--space-8); }
.section-title {
    font-size: var(--text-h4);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

/* ===== Client edit — tab navigation ===== */
.tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}
.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.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
[data-tab-panel] { display: none; }
[data-tab-panel].active { display: block; }
/* ===== Client edit — tab panel form fix ===== */
[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: 0 1px 2px rgba(15,23,42,0.02);
}
[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;
}
/* ===== Tab panel — list-shell--form fix ===== */
[data-tab-panel] > .list-shell--form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
[data-tab-panel] > .list-shell--form .app-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
[data-tab-panel] > .list-shell--form .app-form > label,
[data-tab-panel] > .list-shell--form .app-form > .form-grid-2,
[data-tab-panel] > .list-shell--form .app-form > .form-stack {
    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;
}
[data-tab-panel] > .list-shell--form .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;
}
[data-tab-panel] .form-grid-2 > .legal-check {
    align-self: end;
    margin: 0 !important;
}
/* ===== Cashbox amount colors (extracted from inline style) ===== */
.cash-amt-green { color: var(--color-success); }
.cash-amt-red   { color: var(--color-danger); }

/* CRM: convert-to-invoice button */
.opp-convert { margin-top: var(--space-2); }

/* ===== Store stock alerts ===== */
.stock-alerts {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.stock-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    border-left: 4px solid;
    flex: 1;
    min-width: 220px;
}
.stock-alert-danger {
    background: var(--color-danger-bg);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}
.stock-alert-warn {
    background: var(--color-warning-bg);
    border-left-color: var(--color-warning);
    color: var(--color-warning);
}
.stock-out { color: var(--color-danger); font-weight: 700; }
.stock-low { color: var(--color-warning); font-weight: 700; }

/* ============================================================
   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;
}

/* Public view wrapper — махаме max-height/padding за пълен изглед */
.public-preview-wrap { max-height: none; padding: 0; background: transparent; border: 0; overflow: visible; }

/* Public nav in publicdoc/show (shown above the document) */
.public-nav-actions { display: inline-flex; gap: var(--space-2); align-items: center; }

/* ===== CRM pipeline drag-drop ===== */
.opp-card[draggable="true"] { cursor: grab; user-select: none; }
.opp-card[draggable="true"]:active { cursor: grabbing; }
.opp-card.is-dragging { opacity: 0.4; }
.pipeline-col.is-drop-target {
    outline: 2px dashed var(--brand-blue);
    outline-offset: -2px;
    background: var(--brand-blue-light);
}

/* ===== Settings page ===== */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 720px) {
    .settings-layout { grid-template-columns: 1fr; }
}
.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px;
    position: sticky;
    top: 90px;
}
.settings-tab {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}
.settings-tab:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.settings-tab.is-active {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    font-weight: 700;
}
.settings-form .form-section:last-child { border-bottom: 0; }
.gdpr-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

/* ===== Partial payment UI ===== */
.mark-paid-full { margin-top: var(--space-2); }

/* ===== Branding / logo upload ===== */
.branding-logo-preview {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.branding-logo-img {
    max-width: 200px;
    max-height: 80px;
    object-fit: contain;
    background: #fff;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.branding-logo-meta { flex: 1; }
.branding-logo-empty {
    padding: var(--space-5);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--space-3);
}
.branding-logo-delete { margin: 0; }
.branding-upload-form input[type="file"] {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    width: 100%;
}

/* ===== Настройки → Меню в хедъра (лични бутони) ===== */
.nav-slot-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.nav-slot-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.nav-slot-chip.is-locked {
    background: transparent;
    border-style: dashed;
    color: var(--color-text-muted);
    font-weight: 500;
}
.nav-slot-chip.is-empty { color: var(--color-text-muted); font-weight: 500; }

/* ===== Settings content — unified card layout ===== */
.settings-content {
    min-width: 0; /* allow grid child to shrink */
}
.settings-content .form-section {
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    padding: 22px 24px;
    margin-bottom: 16px;
}
.settings-content .form-section > h2 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}
.settings-content .form-section > h3 {
    margin: 22px 0 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-secondary);
}
.settings-content .form-section > h3:first-child { margin-top: 0; }
.settings-content .form-section > p.muted,
.settings-content .form-section > p {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-align: left;
}
.settings-content .form-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
}

/* ===== Settings list tables (banks, numbering, payments, vat) ===== */
.settings-list-table {
    margin: 4px 0 0;
    font-size: 13px;
    width: 100%;
    border-collapse: collapse;
}
.settings-list-table thead th {
    background: var(--color-bg-subtle, #f8fafc);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}
.settings-list-table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
    color: var(--color-text-primary);
}
.settings-list-table tbody tr:last-child td { border-bottom: 0; }
.settings-list-table tbody tr:hover { background: var(--color-bg-hover, rgba(11, 95, 255,0.03)); }
.settings-list-table .td-num { text-align: right; white-space: nowrap; }
.settings-list-table .td-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.settings-list-table .td-actions .btn + .btn,
.settings-list-table .td-actions form + form,
.settings-list-table .td-actions form + .btn,
.settings-list-table .td-actions .btn + form { margin-left: 6px; }
.settings-list-table .td-actions form { display: inline-block; margin: 0; }

/* Sub-groups inside numbering tab */
.settings-content .form-section > h3 + .data-table-wrap { margin-bottom: 18px; }
.settings-content .data-table-wrap {
    overflow-x: auto;
    margin: 0 -24px 12px;
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
}
.settings-content .settings-list-table {
    width: 100%;
    table-layout: auto;
}

/* Номерации: всеки тип документ е в отделна таблица една под друга (фактури,
   проформи, дебитни, кредитни, оферти, протоколи, гаранции). С table-layout:
   auto всяка си мери колоните по собственото си съдържание и колоните не се
   падат на една вертикала. Фиксиран растер = един и същ ляв ръб на всяка
   колона във всички таблици.
   Ширините са в ПРОЦЕНТИ (сборът е 100), за да се разпределя излишъкът между
   всички колони — с px ширини и една „гумена" колона целият излишък отиваше в
   „Име на серията" и останалото се струпваше вдясно. Процентите са спрямо
   естествено нужното на всяка колона (133/80/57/98/118/60/80/192px), затова и
   при min-width: 900px никоя не пада под своя минимум.
   NB: calc() с процент не работи за колони при table-layout: fixed — браузърът
   го парсва, но не го прилага и колоните излизат равни. Само чисти проценти.
   Само над 720px — под този праг таблицата се разпада на карти (виж mobile
   блока по-долу) и фиксираните ширини нямат смисъл. */
@media (min-width: 721px) {
    .settings-content .settings-list-table--numbering {
        table-layout: fixed;
        min-width: 900px;   /* под тази ширина .data-table-wrap скролва, вместо да смачка колоните */
    }
    .settings-list-table--numbering th:nth-child(1) { width: 20%; }   /* Име на серията */
    .settings-list-table--numbering th:nth-child(2) { width: 10%; }   /* Префикс */
    .settings-list-table--numbering th:nth-child(3) { width: 7%; }    /* Поле */
    .settings-list-table--numbering th:nth-child(4) { width: 11%; }   /* Следващ № */
    .settings-list-table--numbering th:nth-child(5) { width: 14%; }   /* Пример */
    .settings-list-table--numbering th:nth-child(6) { width: 7%; }    /* Осн. */
    .settings-list-table--numbering th:nth-child(7) { width: 9%; }    /* Активна */
    .settings-list-table--numbering th.td-actions   { width: 22%; }
}
/* Text wrap control on list tables */
.settings-list-table td { line-height: 1.4; }
.settings-list-table td.wrap-label { white-space: normal; max-width: 200px; }
.settings-list-table td.mono,
.settings-list-table th + td.mono,
.settings-list-table .mono { font-size: 12px; }
/* Нумерации / payments list cells are usually compact */
.settings-list-table td { padding: 10px 8px; }
/* Compact action buttons in settings list tables */
.settings-list-table .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.3;
}
.settings-list-table .td-actions {
    font-size: 0; /* collapse whitespace between inline-blocks */
}
.settings-list-table .td-actions > * { font-size: 12px; }

/* ===== Email шаблони: заглавен ред + модал с табове (Trello #96) ===== */
.settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.settings-content .form-section > .settings-section-head > h2 { margin: 0; }

/* Съдържанието е тема + многоредово тяло — на 620px текстът се чупи на всеки
   3-4 думи и не се вижда как ще изглежда писмото. */
.tpl-modal { max-width: 720px; }

/* Скролът е на отворения таб, не на цялата карта (Trello #96, т2 фиг G6).
   Докато скролваше картата, лентата минаваше през заоблените ъгли горе-дясно
   и долу-дясно и ги режеше. Сега шапката, табовете и бутоните стоят на място,
   `overflow: hidden` пази ъглите, а лентата живее в средата на картата. */
.tpl-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Табовете са различно високи (помощта е най-дългата) — подът пази
       картата да не подскача при превключване, без да пречи на смъкването
       под 90vh на нисък екран. */
    min-height: min(560px, 90vh);
}
.tpl-modal > .modal-head,
.tpl-modal > .tpl-tabs { flex: 0 0 auto; }
/* min-height: 0 по цялата верига — без него flex-детето не се свива под
   съдържанието си и скролът се връща на картата. */
.tpl-modal .tpl-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    /* `.app-form` носи собствена рамка, радиус и `margin: 0 auto`. В колонен
       flex контейнер авто-марджините изместват разтягането и формата се свива
       до ширината на съдържанието си, центрирана в картата. Рамката пък е
       излишна — картата на модала вече я рисува. */
    margin: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.tpl-modal .tpl-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-5) var(--space-6);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.tpl-modal .tpl-pane::-webkit-scrollbar { width: 8px; }
.tpl-modal .tpl-pane::-webkit-scrollbar-track { background: transparent; }
.tpl-modal .tpl-pane::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}
.tpl-modal .tpl-pane::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.tpl-modal .modal-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-card);
}

.tpl-tabs {
    display: flex;
    gap: 2px;
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}
.tpl-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 14px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.tpl-tab:hover { color: var(--color-text-primary); }
.tpl-tab.is-active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}
.tpl-tab:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.tpl-pane[hidden] { display: none; }

.tpl-modal .email-preview { margin: 0; }
.tpl-modal .email-preview-card { margin-bottom: var(--space-2); }

.tpl-help p.muted { font-size: 13px; line-height: 1.55; }
.tpl-vars {
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tpl-var {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.tpl-var:last-child { border-bottom: 0; }
.tpl-var:nth-child(odd) { background: var(--color-bg-subtle); }
.tpl-var dt { margin: 0; }
.tpl-var dt code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.tpl-var dd {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}
@media (max-width: 640px) {
    .tpl-var { grid-template-columns: 1fr; gap: 2px; }
}

/* Vertical stack of checkbox rows (used on Payments form) */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

/* Danger-ghost button tweaks */
.btn-danger-ghost { color: var(--color-danger, #dc2626); }
.btn-danger-ghost:hover { background: rgba(220, 38, 38, 0.08); }

/* Compact smaller form widths for settings */
.settings-content .app-form input[type=number]:not(.wide) { max-width: 160px; }
.settings-content .app-form input[type=text],
.settings-content .app-form input[type=email],
.settings-content .app-form input[type=url] { max-width: 100%; }
.settings-content .form-grid-2 { gap: 14px 20px; }

/* Mobile: stack tabs at top */
@media (max-width: 720px) {
    .settings-tabs { flex-direction: row; flex-wrap: wrap; position: static; }
    .settings-tab { flex: 1 1 auto; text-align: center; }
    .settings-list-table { font-size: 12px; }
    .settings-list-table thead { display: none; }
    .settings-list-table tbody, .settings-list-table tr, .settings-list-table td { display: block; width: 100%; }
    .settings-list-table tr { border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 10px; padding: 10px; }
    .settings-list-table tbody td { border: 0; padding: 4px 0; }
    .settings-list-table .td-actions { padding-top: 8px; margin-top: 8px; border-top: 1px dashed var(--color-border); }
}


/* Auth form rules live in the consolidated "Auth pages" block below. */

/* ====== Onboarding — centered wider ====== */
.onboarding-card,
.switch-card {
    max-width: 640px;
}

.onboarding-card .form-section,
.switch-card .form-section {
    padding: 20px 0;
}

/* ====== Invoice form specific — dual column на desktop ====== */
.invoice-form .totals-section {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
    background: var(--color-bg-subtle);
    border-top: 2px solid var(--color-border);
}

@media (max-width: 900px) {
    .invoice-form .totals-section {
        grid-template-columns: 1fr;
    }
}

.invoice-form .totals-left {
    padding: 24px 32px;
}

.invoice-form .totals-right {
    padding: 24px 32px;
    background: var(--color-bg-card);
    border-left: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .invoice-form .totals-right {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
}

.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: 13px;
    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: 14px;
    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: 22px !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: 13px !important;
}

.invoice-form .discount-input select {
    padding: 6px 8px !important;
    font-size: 13px !important;
    width: auto !important;
}

.invoice-form .inline-vat {
    width: 60px !important;
    padding: 4px 8px !important;
    margin-left: 6px !important;
    font-size: 12px !important;
    display: inline-block !important;
}

/* Field row helper */
.invoice-form .field-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.invoice-form .field-row .field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    min-width: 140px;
}

/* 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;
}

/* VAT exempt reason — prominent highlight when visible (display controlled by JS) */
[data-vat-reason-wrap] {
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

[data-vat-reason-wrap] > span {
    font-weight: 600 !important;
    color: #854D0E !important;
}

[data-vat-reason-wrap] select {
    background-color: #fff !important;
    margin-top: 6px !important;
    border-color: #F59E0B !important;
}

/* 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 .line-head,
.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;
}

.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: 12px !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: 0 0 0 3px rgba(11, 95, 255, 0.12);
}

.invoice-form.show-per-row-vat .col-vat {
    display: block;
}

.invoice-form .line-head {
    background: var(--color-bg-subtle);
    font-size: 11px;
    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 {
    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: 13px !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: #fff !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: 18px;
    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;
    }
}

/* Number preview */
.number-preview {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 10px;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    vertical-align: middle;
}

/* Muted label helper */
.muted-label {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 11px;
    margin-left: 4px;
}

/* Simple line rows (protocols, warranties, store, periodic) */
.simple-line,
.wr-line,
.store-line,
.periodic-line {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    gap: 10px;
    align-items: center;
}

.simple-line input,
.wr-line input,
.wr-line select,
.store-line input,
.store-line select,
.periodic-line input,
.periodic-line select {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background-color: var(--color-bg-subtle) !important;
}

.simple-line input:focus,
.wr-line input:focus,
.store-line input:focus,
.periodic-line input:focus {
    background: #fff !important;
    border-color: var(--brand-blue) !important;
}

/* ---- Page head за forms ---- */
.app-page .page-head {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.app-page.invoice-page .page-head,
.page-head-wide {
    max-width: 1100px !important;
}

/* Expense OCR zone — full width, aligns with form sections */
.ocr-zone {
    max-width: none;
    margin: 0 0 24px;
}

/* Auth page rules live in the consolidated "Auth pages" block below. */

/* ==== Number picker (locked + dropdown) ==== */
.number-picker { display: block; }

.number-display {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 6px 0 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    height: 38px;
    min-height: 38px;
    overflow: hidden;
    transition: border-color var(--duration-fast);
    box-sizing: border-box;
}
.number-display:hover { border-color: var(--color-text-muted); }

.number-display-value {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    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-display .number-edit-btn:hover {
    background: rgba(11, 95, 255, 0.08);
    color: var(--brand-blue);
}

.number-editor {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-wrap: nowrap;
}

.number-editor[hidden],
.number-display[hidden],
.number-editor input.number-manual[hidden] {
    display: none !important;
}

.number-editor select.number-options,
.number-editor input.number-manual {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border: 1px solid var(--brand-blue) !important;
    border-radius: var(--radius) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.12) !important;
    min-height: 38px !important;
    height: 38px !important;
}
/* When manual input is active, editor wraps: select on top (full width), input + check below */
.number-editor:has(.number-manual:not([hidden])) {
    flex-wrap: wrap;
}
.number-editor:has(.number-manual:not([hidden])) > select.number-options {
    flex: 1 1 100%;
    width: 100%;
}

.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: #fff;
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--duration-fast), box-shadow var(--duration-fast);
    box-shadow: 0 1px 2px rgba(11, 95, 255, 0.25);
}
.number-editor .number-lock-btn:hover {
    background: var(--brand-blue-dark, #2450D8);
    box-shadow: 0 2px 6px rgba(11, 95, 255, 0.35);
}
.number-editor .number-lock-btn:active { transform: translateY(1px); }

/* ==== Debit / Credit note reference section ==== */
.invoice-form-v2 .note-ref-row {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: #FEF9F1;
    border: 1px solid #F5D9A8;
    border-radius: var(--radius);
}
.invoice-form-v2 .note-ref-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B5A1A;
    margin-bottom: var(--space-3);
}
.invoice-form-v2 .note-ref-head .muted-label {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    color: #B07A3A;
    font-size: 11px;
}
.invoice-form-v2 .note-ref-head svg { color: #B07A3A; flex-shrink: 0; }
.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; }
.invoice-form-v2 .note-ref-grid > .form-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .invoice-form-v2 .note-ref-grid { grid-template-columns: 1fr; }
    .invoice-form-v2 .note-ref-grid > .form-field,
    .invoice-form-v2 .note-ref-grid > .form-field--full { grid-column: 1 / -1; }
}

/* ==== Client flag row — subtle pill-like toggle row ==== */
.invoice-form-v2 .client-flag-row {
    margin-top: var(--space-2);
    padding: 10px 14px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius);
    border: 1px dashed var(--color-border);
}
.invoice-form-v2 .client-flag-row > .form-label--inline {
    padding: 0;
    min-height: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.invoice-form-v2 .client-flag-row > .form-label--inline input[type="checkbox"]:checked + span {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ==== Client picker ==== */
.client-picker {
    position: relative;
}

.client-picker-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--color-bg-input);
}

.client-picker-input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.12);
}

.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: 0 8px 24px rgba(15, 23, 42, 0.1);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
}

.client-picker-results[hidden] {
    display: none !important;
}

.client-picker-result {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 100ms var(--ease-out);
}

.client-picker-result:last-child {
    border-bottom: 0;
}

.client-picker-result:hover {
    background: var(--brand-blue-light);
}

.client-picker-result {
    position: relative;
}
.client-picker-result strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    padding-right: 40px;
}

.client-picker-result small {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* 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: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 999px;
    line-height: 1.2;
}
.picker-badge--tr {
    background: #7B4FD3;
    color: #fff;
    box-shadow: 0 1px 2px rgba(123, 79, 211, 0.25);
}
.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;
}
.client-picker-result--tr {
    background: linear-gradient(to right, rgba(123, 79, 211, 0.04), transparent);
}
.client-picker-result--tr:hover {
    background: rgba(123, 79, 211, 0.08);
}
/* БУЛСТАТ — вторият регистър, друг цвят, защото редът идва от друго място. */
.picker-badge--bulstat {
    background: #0F766E;
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 118, 110, 0.25);
}
.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;
}
.client-picker-result--bulstat {
    background: linear-gradient(to right, rgba(15, 118, 110, 0.05), transparent);
}
.client-picker-result--bulstat:hover {
    background: rgba(15, 118, 110, 0.09);
}
/* Плаващ разделител, а не padding: отстоянието стеснява целия текстов блок и
   дългото име се накъсва по една дума на ред. Така се скъсява само първият. */
.client-picker-result--bulstat strong::before {
    content: '';
    float: right;
    width: 92px;
    height: 18px;
}

/* Официалните имена са дълги, а полето е тясно. Само под името: picker-ът на
   ЕИК е в средната колона и оттам разширяването излиза извън картата. */
.form-field--name .client-picker-results {
    min-width: 320px;
    max-width: calc(100vw - 32px);
}

/* „Още се търси" на дъното — БУЛСТАТ отговаря за 3–5 s и без този ред
   мълчанието се чете като „няма такава фирма". */
.client-picker-loading {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 11px;
    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;
}
@keyframes picker-loading-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}
@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: #FEF9F1;
    border-bottom: 1px solid #F5D9A8;
    font-size: 11.5px;
    color: #8B5A1A;
    line-height: 1.4;
}

.client-picker-empty {
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* VAT reason wrap with select + textarea */
[data-vat-reason-wrap] label > span {
    font-weight: 600 !important;
    color: #854D0E !important;
}

[data-vat-reason-wrap] textarea {
    background: #fff !important;
    border-color: #F59E0B !important;
}
/* ==========================================================================
   Phase 1 additions — onboarding, switch, dashboard layouts
   ========================================================================== */

.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;
    }
}

/* --- Onboarding --- */
.onboarding-section,
.switch-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: radial-gradient(circle at 20% 20%, rgba(11, 95, 255, .04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 176, 46, .04) 0%, transparent 50%),
    var(--color-bg-subtle);
}

.onboarding-wrap {
    width: 100%;
    max-width: 720px;
}

.onboarding-logo {
    display: block;
    text-align: center;
    margin-bottom: var(--space-8);
}

.onboarding-card,
.switch-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10);
}

.onboarding-card h1,
.switch-card h1 {
    font-size: var(--text-h2);
    font-weight: 800;
    margin-bottom: var(--space-2);
    text-align: center;
}

.onboarding-card .lead,
.switch-card .lead {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: var(--text-body);
}

.onb-note {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    margin-top: var(--space-4);
}

/* Match .form-grid-2's own margin-bottom so
   every row in the form is spaced the same. */
.onboarding-card .auth-form > label {
    margin-bottom: var(--space-3);
}

/* Логото над картата. При първа фирма е <span> (неактивен), иначе <a> към
   началната страница — margin-а е един и същ и в двата случая. */
.onb-logo {
    /* .logo е display:flex → без това <a>-то се разпъва на цялата ширина
       на .onboarding-wrap и кликаема става и празнотата вдясно. */
    width: fit-content;
    margin-bottom: 26px;
}

/* "Назад" и "Създай фирмата" на един ред. Primary-то е flex:1, така че когато
   "Назад" го няма (първа фирма) само́ заема целия ред — без модификатор. */
.onb-actions {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.onb-actions .btn-primary { flex: 1; }

/* Под 560px (същия праг като .form-grid-2) двата .btn-lg не се събират на ред
   — .btn е white-space:nowrap, така че се редят вертикално, с primary отгоре. */
@media (max-width: 560px) {
    .onb-actions {
        flex-direction: column-reverse;
    }

    .onb-actions .btn { width: 100%; }
}

/* --- Switch (firm picker) --- */
.tenants-grid {
    display: grid;
    gap: var(--space-3);
}

.tenant-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--ease-out);
}

.tenant-card:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    color: var(--color-text-primary);
}

.tenant-card.is-current {
    border-color: var(--brand-blue);
    background: var(--brand-blue-light);
}

.tenant-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tenant-info {
    flex: 1;
    min-width: 0;
}

.tenant-name {
    font-weight: 700;
    font-size: var(--text-body);
    margin-bottom: 2px;
}

.tenant-meta {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.tenant-arrow {
    color: var(--color-text-muted);
    font-size: 24px;
}

/* --- Dashboard --- */
.dashboard {
    padding: var(--space-10) 0 var(--space-16);
}

.dash-welcome {
    margin-bottom: var(--space-10);
}

.dash-welcome h1 {
    font-size: var(--text-h2);
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.dash-welcome .lead {
    color: var(--color-text-secondary);
    font-size: var(--text-body-lg);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.quick-action {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--duration) var(--ease-out);
    display: block;
}

.quick-action:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--color-text-primary);
}

.qa-icon {
    font-size: 32px;
    margin-bottom: var(--space-3);
}

.qa-title {
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: 4px;
}

.qa-sub {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.dash-coming-soon {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    color: #725400;
}

.dash-coming-soon h2 {
    font-size: var(--text-h4);
    margin-bottom: var(--space-2);
}

.dash-coming-soon p {
    font-size: var(--text-small);
    margin-bottom: var(--space-1);
}

.dash-coming-soon .muted {
    opacity: 0.75;
}

/* --- Cloudflare Turnstile iframe styling --- */
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}

/* --- 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. */
.eik-hint {
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-muted);
    margin-top: 2px;
    transition: color var(--duration-fast) var(--ease-out);
}
.eik-hint:empty { display: none; }
.eik-hint-warn { color: var(--color-warning); }

/* --- 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: 0 0 0 3px rgba(34, 197, 94, 0.18);
    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: 0 0 0 3px rgba(245, 158, 11, 0.14);
    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: 0 0 0 3px rgba(11, 95, 255, 0.12);
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
/* 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: #fff;
    background: var(--color-success);
}
input[data-eik-autofill].is-missing ~ .eik-vies-badge {
    color: #fff;
    background: var(--color-warning);
}
@keyframes eikViesPulse {
    0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1); }
    50%      { opacity: 0.45; transform: translateY(-50%) scale(0.9); }
}
/* ==========================================================================
   IDBG — App styles
   Extends brand-tokens.css
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    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);
}

a:hover {
    color: var(--brand-blue-dark);
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.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; }

body.page-public-doc .main-content { padding-top: 0; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn-primary {
    background: var(--brand-blue);
    color: #fff;
}

/* cgbg buttons are flat — no lift, no shadow. */
.btn-primary:hover {
    background: var(--brand-blue-dark);
    color: #fff;
    transform: none;
    box-shadow: none;
}

/* cgbg ghost = brand-blue outline that fills in on hover. */
.btn-ghost {
    background: transparent;
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-ghost:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.btn-amber {
    background: var(--brand-amber);
    color: var(--slate-900);
}

.btn-amber:hover {
    background: var(--brand-amber-dark);
    color: #fff;
}

/* cgbg sizes: sm 7px/12px @13px, lg 14px/28px @17px */
.btn-sm {
    padding: 7px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 17px;
}

.btn-block {
    width: 100%;
}

/* --- Header --- */
/* cgbg: solid white, hairline rule, no glass/blur. */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: var(--space-3) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.site-header .nav-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
}

.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);
}

.main-nav a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.main-nav a.nav-active {
    color: var(--brand-blue);
    background: var(--brand-blue-light);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
}

/* --- Hero --- */
.hero {
    padding: var(--space-24) 0 var(--space-20);
    background: radial-gradient(circle at 20% 10%, rgba(11, 95, 255, .06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 176, 46, .06) 0%, transparent 50%),
    var(--color-bg);
    position: relative;
    overflow: hidden;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-16);
}

.hero-inner {
    max-width: 560px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.hero-title {
    font-size: var(--text-hero);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-5);
}

.hero-title .hl {
    color: var(--brand-blue);
}

.hero-title .hl-amber {
    color: var(--brand-amber-dark);
}

.hero-lead {
    font-size: var(--text-body-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    line-height: var(--leading-relaxed);
}

.hero-cta {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

/* Trust points under the hero CTA — check ticks, mirroring cgbg's
   .hero-bullets. Left-aligned here (idbg's hero is a split layout, not
   cgbg's centred column), so no auto margin or max-width. */
.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero-bullets li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.hero-bullet-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: rgba(11, 95, 255, 0.08);
    color: var(--brand-blue);
}

.hero-bullet-ico svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   Hero — светъл, две колони: текст вляво, илюстрация вдясно.
   Илюстрацията е unDraw (MIT) — виж App/View/partials/hero-art.phtml.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Общ поток на началната страница.

   Hero, стъпките, модулите и цените споделят ЕДИН фон, вместо всяка секция
   да си носи свой. Така преходите са преливащи, а не отрязани. Секциите вътре
   са прозрачни; цветът се променя плавно надолу през няколко меки петна.
   -------------------------------------------------------------------------- */
.page-flow {
    position: relative;
    background:
        radial-gradient(52% 26% at 70% 6%, rgba(11, 95, 255, .11), transparent 70%),
        radial-gradient(44% 20% at 10% 20%, rgba(255, 138, 0, .07), transparent 72%),
        radial-gradient(50% 20% at 24% 44%, rgba(11, 95, 255, .07), transparent 72%),
        radial-gradient(46% 18% at 84% 60%, rgba(255, 138, 0, .06), transparent 72%),
        radial-gradient(52% 22% at 30% 82%, rgba(11, 95, 255, .06), transparent 72%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 34%, #f6f9fd 62%, #fbfcfe 84%, #ffffff 100%);
}

.page-flow > section {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Нишката лежи зад съдържанието и се разтяга по цялата височина на потока. */
.flow-thread {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Под 1000px всичко е в една колона и странични полета няма — гутерът е 24px.
   Разтегната по височината на такава страница нишката се изражда във
   вертикална черта през съдържанието, затова там я махаме. */
@media (max-width: 1000px) {
    .flow-thread { display: none; }

    /* Вместо нишката: къса вертикална връзка с ромбче между всеки две
       секции. Прави се с псевдоелементи върху самата секция, за да няма
       допълнителна разметка само за декорация. */
    .page-flow > section + section::before,
    .page-flow > section + section::after {
        content: '';
        position: absolute;
        left: 50%;
        pointer-events: none;
    }

    .page-flow > section + section::before {
        top: 0;
        width: 1px;
        height: 46px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, transparent, rgba(11, 95, 255, .3));
    }

    .page-flow > section + section::after {
        top: 46px;
        width: 7px;
        height: 7px;
        border-radius: 2px;
        transform: translate(-50%, -50%) rotate(45deg);
        background: var(--brand-blue);
        opacity: .5;
    }

    /* Стъпките стават таймлайн — релса с възли, вместо три еднакви кутии. */
    .how-section .steps {
        position: relative;
        padding-left: 36px;
    }

    .how-section .steps::before {
        content: '';
        position: absolute;
        left: 11px;
        top: 24px;
        bottom: 24px;
        width: 2px;
        border-radius: 1px;
        background: linear-gradient(180deg,
            rgba(11, 95, 255, .38),
            rgba(11, 95, 255, .22) 60%,
            rgba(255, 138, 0, .32));
    }

    .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);
    }
}



/* --------------------------------------------------------------------------
   Hero — центрирана композиция: заглавие горе, илюстрацията в средата,
   предимствата я обграждат отляво и отдясно, CTA отдолу. Всичко седи върху
   едно общо светлинно поле, за да няма усещане за разделен на две екран.
   Илюстрацията е unDraw (MIT) — виж App/View/partials/hero-art.phtml.
   -------------------------------------------------------------------------- */
.hero--center {
    position: relative;
    overflow: hidden;
    padding: var(--space-10) 0 var(--space-12);
}

/* Собственото сияние на hero-то, но БЕЗ плътен цвят отдолу — иначе би
   закрило общия фон на .page-flow и преходът пак би станал рязък.
   Селекторът е по-специфичен от `.page-flow > section`, за да не се нулира. */
.page-flow > .hero--center {
    background:
        radial-gradient(56% 50% at 52% 44%, rgba(11, 95, 255, .09), transparent 68%),
        radial-gradient(40% 42% at 10% 86%, rgba(255, 138, 0, .06), transparent 70%);
}

/* Базовото .hero .container е grid 1fr 1fr — тук композицията е вертикална. */
.hero--center .container {
    display: block;
}

.hero-head {
    max-width: 860px;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.hero--center .hero-title {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-4);
}

.hero--center .hero-lead {
    font-size: var(--text-body-lg);
    max-width: 46ch;
    margin: 0 auto;
}

.hero--center .hero-tag {
    margin-bottom: var(--space-5);
}

/* Трите колони са нарочно неравни: вляво само имена на модули, вдясно
   по-едри карета с описание, а илюстрацията е изместена вдясно от центъра. */
.hero-stage {
    display: grid;
    grid-template-columns: minmax(170px, 232px) minmax(0, 1fr) minmax(230px, 310px);
    align-items: center;
    gap: var(--space-4);
    max-width: 1180px;
    margin-inline: auto;
}

/* Лявата колона — компактен списък само с имена. */
.hero-names {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-name {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-3);
    text-align: right;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hero-name-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--brand-blue-light);
    color: var(--brand-blue);
}

/* Дясната колона — по-едра типография с описание. */
.hero-feats {
    display: flex;
    flex-direction: column;
    gap: var(--space-7, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-feat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.hero-feat-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--brand-blue-light);
    color: var(--brand-blue);
}

.hero-feat-txt {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.hero-feat-txt strong {
    display: block;
    font-size: var(--text-h4, 19px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 3px;
}

/* Изричното width:100% е нужно: с margin-inline:auto grid елементът спира да
   се разтяга и inline SVG-то пада до дефолтните 300px за replaced елемент. */
.hero-art {
    position: relative;
    width: 100%;
    max-width: 580px;
    justify-self: end;
    transform: translateX(5%);
}

/* Ореолът зад монитора се разлива под съседните колони и слепва трите. */
.hero-art::before {
    content: '';
    position: absolute;
    inset: -18% -26% -12%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(11, 95, 255, .16), transparent 72%);
}

.hero-art-svg {
    display: block;
    width: 100%;
    height: auto;
    /* Колоните на графиката и логото са currentColor — оттук идва брандът. */
    color: var(--brand-blue);
}

.hero-foot {
    margin-top: var(--space-6);
    text-align: center;
}

.hero--center .hero-cta {
    justify-content: center;
    margin-bottom: var(--space-4);
}

/* Upstream стилизира .hero-bullets за split hero — вертикално и подравнено
   вляво. Тук hero-то е центрирано, затова ги подреждаме в един центриран ред. */
.hero--center .hero-bullets {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
}

@media (max-width: 1080px) {
    /* Илюстрацията минава отгоре, предимствата се подреждат в две колони. */
    .hero-stage {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8) var(--space-10);
    }

    /* order:-1 я изважда преди двата списъка — иначе застава между тях. */
    .hero-art {
        order: -1;
        grid-column: 1 / -1;
        max-width: 520px;
        justify-self: center;
        transform: none;
        margin-bottom: var(--space-4);
    }

    .hero-names {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3) var(--space-6);
    }

    .hero-name {
        flex-direction: row;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .hero--center {
        padding: var(--space-10) 0 var(--space-10);
    }

    .hero-stage {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .hero-names {
        grid-template-columns: 1fr;
    }

    .hero--center .hero-cta {
        flex-direction: column;
    }

    .hero--center .hero-cta .btn {
        width: 100%;
    }
}

/* --- Sections --- */
.section-title {
    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);
}

/* Същият син акцент като в hero-то, но за заглавията на секциите
   (Trello #87, фиг199-202). */
.section-title .hl { color: var(--brand-blue); }

.section-sub {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-body-lg);
    max-width: 640px;
    margin: 0 auto var(--space-12);
}

/* --------------------------------------------------------------------------
   Секциите под hero-то следват същия „разместен" ритъм: заглавието и
   подзаглавието са едно до друго вместо центрирани, стъпките са разместени
   по вертикала, а каретата са bento решетка с различни ширини.
   -------------------------------------------------------------------------- */
.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.section-head .section-title {
    text-align: left;
    margin: 0;
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.section-head .section-sub {
    text-align: left;
    margin: 0 0 var(--space-2);
    max-width: 42ch;
}

/* --- How it works: карти вляво, обяснение вдясно --- */
.how-section {
    padding: var(--space-12) 0 var(--space-16);
}

.how-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
}

/* В кода обяснението е преди картите (H2 преди H3-ите на стъпките), а
   вляво картите ги слага order. */
.how-split > .steps { order: -1; }

.steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Плоски карти: номер и икона стоят в един ред с текста, не над него. */
.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: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, .85);
    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-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand-blue);
    opacity: .22;
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f5ff 0%, #e0ecff 100%);
    color: var(--brand-blue);
}

.step-icon svg { stroke-width: 1.8; }

.step h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.step p {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.how-text .section-title {
    text-align: left;
    margin: 0 0 var(--space-4);
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.how-text p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    max-width: 46ch;
}

@media (max-width: 1000px) {
    .section-head {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .how-split {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* Един стълб: обяснението над картите — както е в кода. */
    .how-split > .steps { order: 0; }

    .step:nth-child(2),
    .step:nth-child(3) { margin-left: 0; }
}

/* --- Features: каретата стоят подравнени едно до друго --- */
.features-section {
    padding: var(--space-12) 0 var(--space-16);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .features-grid { grid-template-columns: 1fr; }
}

.feature-card {
    /* Полупрозрачни, за да пропускат общия фон — оттам идва „преливането". */
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, .85);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
    transition: all var(--duration) var(--ease-out);
}

.feature-card:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Matches cgbg's .feature-icon exactly: 56px chip, 12px radius, blue gradient. */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f5ff 0%, #e0ecff 100%);
    color: var(--brand-blue);
}
.feature-icon svg { stroke-width: 1.8; }

.feature-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.feature-card p {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* cgbg's Pro badge is a blue gradient pill with an 8px radius, not amber. */
.feature-pro .feature-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-mid));
    color: #fff;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Направено за българския бизнес --- */
.local-section {
    padding: var(--space-12) 0 var(--space-16);
}

.local-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5) var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* След като „Готови за еврото" отпадна, точките са четири — 2×2 стои по-добре
   от 3+1 (Trello #85, фиг174). */
.local-grid--2x2 { grid-template-columns: repeat(2, 1fr); }

/* Заглавието и абзацът отдясно тръгват от един и същи ред. Общото правило
   лепи двете колони за долния ръб (align-items: end) и добавя 8px отдолу на
   абзаца, така че нито горе, нито долу се получаваше линия. */
.local-section .section-head { align-items: start; }
.local-section .section-head .section-sub { margin-bottom: 0; }

.local-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.local-item strong {
    display: block;
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.local-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--brand-blue-light);
    color: var(--brand-blue);
}

/* --- Въпроси --- */
.faq-section {
    padding: var(--space-12) 0 var(--space-16);
}

/* Подзаглавието кани да пишеш — затова до него стои и бутонът, с който да го
   направиш (Trello #85, фиг175). */
/* Заглавието и текстът вдясно тръгват от един ред. `.section-head` е
   `align-items: end`, което работи за две текстови колони, но тук дясната носи
   и бутон — долното подравняване я вдигаше над заглавието (Trello #85,
   коментар по №175). */
.faq-section .section-head { align-items: start; }
.faq-section .section-head .section-sub { margin-bottom: 0; }

.faq-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}
.faq-sub p { margin: 0; }

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-6);
    align-content: start;
}

.faq-item {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, .85);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    height: fit-content;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary { text-wrap: pretty; }

/* Иконките са в синьото на марката, като тези на модулите горе (Trello #85,
   коментар по №175) — емотиконките се рисуваха от системния emoji шрифт, тоест
   различно на всяка платформа и в чужди цветове. Фиксираната кутия държи
   въпросите на един вертикал независимо от иконката. */
.faq-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    color: var(--brand-blue);
}

/* Емотиконката е самостоятелен flex елемент, а summary е space-between —
   без това въпросът увисва в средата, разкъсан между иконката и „+".
   Знакът се държи вдясно от собствения си margin, не от разпределението. */
.faq-item summary { justify-content: flex-start; }
.faq-item summary::after { margin-left: auto; }

.faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--brand-blue);
    flex: 0 0 auto;
    transition: transform var(--duration) var(--ease-out);
}

/* Знакът се СМЕНЯ на „−" (виж по-долното правило за content). Останалото от
   по-старата версия въртене на 45° го превръщаше в наклонена чертичка —
   точно това, което се вижда на фиг175. */
.faq-item[open] summary::after {
    transform: none;
}

.faq-item p {
    margin-top: var(--space-3);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

@media (max-width: 900px) {
    .local-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-list   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .local-grid,
    .local-grid--2x2 { grid-template-columns: 1fr; }
}

/* --- Цени на началната страница (Trello #196) --- */
.pricing-section {
    padding: var(--space-12) 0 var(--space-20);
}

/* „Цени" е котва към средата на дългата начална страница, а заглавката е
   sticky — без този отстъп секцията спира под нея и заглавието е отрязано. */
.pricing-section[id] {
    scroll-margin-top: 72px;
}

/* --- FAQ --- */
.faq-section {
    padding: var(--space-20) 0;
    background: var(--color-bg-subtle);
}

.faq-grid {
    display: grid;
    gap: var(--space-3);
    max-width: 720px;
    margin: var(--space-10) auto 0;
}

.faq-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    transition: all var(--duration-fast) var(--ease-out);
}

.faq-item[open] {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-sm);
}

.faq-item summary {
    font-weight: 600;
    cursor: pointer;
    font-size: var(--text-body);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    float: right;
    color: var(--color-text-muted);
    font-size: 20px;
    font-weight: 300;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
}

/* ==========================================================================
   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).
   ========================================================================== */

/* cgbg's body is #fafafa; idbg's is white, so the auth page opts in to the
   tint locally — otherwise the white card on white reads as a flat box. */
body.page-auth {
    background: #fafafa;
}

.auth-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.auth-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 40px;
    max-width: 420px;
    width: 100%;
}

/* Headings are left-aligned in cgbg, not centred. */
.auth-card h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: normal;
    text-align: left;
    margin-bottom: 6px;
}

.auth-sub {
    font-size: 16px;
    color: #666;
    text-align: left;
    margin-bottom: 24px;
}

/* verify_sent opts into a centred card; the left-aligned defaults above
   would otherwise strand its heading beside a centred icon. */
.auth-card.text-center h1,
.auth-card.text-center .auth-sub {
    text-align: center;
}

/* Everything below is scoped to .auth-card on purpose: .auth-form and
   .legal-check are also used by onboarding and the invoice form, which are
   not part of this port and must keep their own styling. */
.auth-card .auth-form label {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #444;
}

/* idbg wraps label text in a <span> on some forms (reset, forgot);
   cgbg puts it straight in the <label>. Both must render the same.
   Scoped away from the two labels whose <span> is not a field caption —
   they set their own type below and would otherwise lose to this rule,
   which outweighs a bare `.legal-check span` on specificity. */
.auth-card .auth-form label:not(.legal-check):not(.auth-remember-me) > span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #444;
    margin-bottom: 0;
}

.auth-card .auth-form input[type="text"],
.auth-card .auth-form input[type="email"],
.auth-card .auth-form input[type="password"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 15px;
    /* idbg's base line-height (1.6) would make these 4px taller than
       cgbg's, which leaves inputs at the browser default. */
    line-height: normal;
    background: #fff;
    color: var(--color-text-primary);
    margin-top: 4px;
}

.auth-card .auth-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: none;
}

.auth-card .btn-block {
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius);
}

/* Remember-me row. cgbg carries these as inline styles on the <label>;
   they live here instead so the markup stays clean. Selector is qualified
   with .auth-form so it outweighs `.auth-form label` above — otherwise the
   generic label rule would flatten this back to display:block. */
.auth-card .auth-form label.auth-remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 15px;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    cursor: pointer;
}

.auth-card .auth-remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-blue);
    cursor: pointer;
}

.auth-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: #666;
}

/* Qualified as `label.legal-check` for the same reason as .auth-remember-me:
   it has to outweigh `.auth-card .auth-form label` above. */
.auth-card .auth-form label.legal-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fafbfd;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    margin: 14px 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    cursor: pointer;
}

.auth-card .legal-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--brand-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-card .legal-check span {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.auth-card .legal-check a {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* 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;
}

.captcha-placeholder {
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
    text-align: center;
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}

/* --- Alerts --- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    font-size: var(--text-small);
}

.alert-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.alert-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* --- 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 {
    background: #1a1a1a;
    color: #aaa;
    padding: var(--space-16) 0 var(--space-6);
    margin-top: 0;
}

.footer-grid {
    display: grid;
    /* Трите колони с връзки се събират в десния край на футъра. */
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
}

.footer-brand {
    max-width: 440px;
}

/* Footer logo: brand-blue mark + white wordmark, like cgbg's blue/white
   footer logo. No invert filter — the mark should keep its brand colour. */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-3);
}
/* 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: #fff; }
.footer-brand img {
    margin-bottom: 0;
}

.footer-brand p {
    font-size: 13px;
    color: #888;
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-2);
}

.footer-muted {
    color: #888 !important;
    font-size: var(--text-caption) !important;
}

.footer-col .footer-heading {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.footer-col a {
    display: block;
    padding: 4px 0;
    color: #aaa;
    font-size: 13px;
    transition: color var(--duration-fast) var(--ease-out);
}

.footer-col a:hover {
    color: var(--brand-blue-mid);
}

/* Долната лента: копирайтът стои сам, центриран, отделен с тънка линия —
   както в cgbg. Единственото място, където се изписва годината. */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: var(--space-5);
    text-align: center;
    font-size: 12px;
    color: #9aa0ae;
}
.footer-bottom p {
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .hero .container {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .hero-title {
        font-size: 42px;
    }

    .section-title {
        font-size: 32px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 600px) {
    .hero {
        padding: var(--space-12) 0 var(--space-10);
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .main-nav {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .plans-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Utility --- */
.text-center {
    text-align: center;
}

.hidden {
    display: none !important;
}

.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;
}

/* ==========================================================================
   Invoice form v2 — compact, tidy, scannable layout
   ========================================================================== */
.invoice-form-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: 96px; /* room for sticky action bar */
}

.invoice-form-v2 .form-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.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-5) var(--space-6); border-right: 1px solid var(--color-border); }
.invoice-form-v2 .totals-panel { padding: var(--space-5) var(--space-6); background: var(--color-bg-subtle); }
@media (max-width: 880px) {
    .invoice-form-v2 .form-card--totals > .form-card-grid--totals { grid-template-columns: 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); }
}

.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);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.invoice-form-v2 .form-card-head--tight { margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
.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: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
}
.invoice-form-v2 .form-card-head h2 > svg { color: var(--brand-blue); }

/* Circular icon bubble for card heads */
.invoice-form-v2 .form-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.invoice-form-v2 .form-card-icon--brand {
    background: rgba(11, 95, 255, 0.10);
    color: var(--brand-blue);
}

/* Document card — visually distinct with a soft gradient top accent */
.invoice-form-v2 .form-card--doc {
    position: relative;
    overflow: hidden;
}
.invoice-form-v2 .form-card--doc::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b5fff 0%, #7B61FF 60%, #FF6BA1 100%);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

/* Compact doc-type switcher in card head (replaces full-width row) */
.invoice-form-v2 .doc-type-switcher--head {
    display: inline-flex !important;
    grid-template-columns: none !important;
    gap: 2px !important;
    padding: 3px !important;
    width: auto !important;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    margin: 0;
}
.invoice-form-v2 .doc-type-switcher--head .doc-type-opt {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    cursor: pointer;
    position: relative;
    font-weight: 500;
}
.invoice-form-v2 .doc-type-switcher--head .doc-type-opt:hover {
    background: transparent !important;
}
.invoice-form-v2 .doc-type-switcher--head .doc-type-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.invoice-form-v2 .doc-type-switcher--head .doc-type-opt > span {
    display: inline-block !important;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border-radius: 999px;
    transition: all var(--duration-fast);
    white-space: nowrap;
    line-height: 1.4;
}
.invoice-form-v2 .doc-type-switcher--head .doc-type-opt input[type="radio"]:checked + span {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(11, 95, 255, 0.25);
}
.invoice-form-v2 .doc-type-switcher--head .doc-type-opt:hover input[type="radio"]:not(:checked) + span {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.6);
}
.invoice-form-v2 .form-card-hint { font-size: 12px; color: var(--color-text-muted); }

.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);
}
/* Картата „Периодичност" има свои полета и свой брой колони — гридът на
   „Документ" е кроен за номер/дати/валута и там етикетите се режеха. */
.invoice-form-v2 .form-card-grid--periodic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px var(--space-4);
}
.invoice-form-v2 .form-card-grid--periodic > .form-field:not(.form-field--full) {
    grid-column: span 1;
    min-width: 0;
}
/* 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%;
}
/* 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);
}
@media (max-width: 1080px) {
    .invoice-form-v2 .form-card-grid { grid-template-columns: repeat(3, 1fr); }
    .invoice-form-v2 .form-card-grid--header { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-card-grid,
    .invoice-form-v2 .form-card-grid--header { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .invoice-form-v2 .form-card-grid,
    .invoice-form-v2 .form-card-grid--header { grid-template-columns: 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,
.invoice-form-v2 .form-card-grid--header > .form-field--full { grid-column: 1 / -1; }

.invoice-form-v2 .form-label {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-height: 18px;
    font-size: 12.5px;
    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 .muted-label {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.invoice-form-v2 .form-label--required::after {
    content: "*";
    color: var(--color-danger);
    margin-left: 2px;
}
.invoice-form-v2 .form-label--inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    padding-top: 0;
    min-height: 0;
    white-space: normal;
    overflow: visible;
}
.invoice-form-v2 .form-label--inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-blue);
    cursor: pointer;
    flex-shrink: 0;
}
.invoice-form-v2 .form-field > .form-label--inline { padding-top: 26px; }

.invoice-form-v2 input[type="text"],
.invoice-form-v2 input[type="email"],
.invoice-form-v2 input[type="number"],
.invoice-form-v2 input[type="date"],
.invoice-form-v2 select,
.invoice-form-v2 textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.35;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: #fff;
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 38px;
    height: 38px;
}
.invoice-form-v2 textarea { min-height: 64px; height: auto; resize: vertical; }
.invoice-form-v2 select { padding-right: 30px; }
.invoice-form-v2 input::placeholder,
.invoice-form-v2 textarea::placeholder { color: var(--color-text-muted); opacity: 0.85; }
.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 .form-empty-note {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.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 .vat-toggles .form-label--inline { padding-top: 0; }

.invoice-form-v2 .form-collapse {
    margin-top: var(--space-4);
    border-top: 1px dashed var(--color-border);
    padding-top: var(--space-3);
}
.invoice-form-v2 .form-collapse > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
    user-select: none;
    list-style: none;
}
.invoice-form-v2 .form-collapse > summary::-webkit-details-marker { display: none; }
.invoice-form-v2 .form-collapse > summary::before {
    content: "+ ";
    font-weight: 700;
    margin-right: 4px;
}
.invoice-form-v2 .form-collapse[open] > summary::before { content: "− "; }
.invoice-form-v2 .form-collapse[open] > summary { color: var(--color-text-primary); margin-bottom: var(--space-3); }

/* ==== Invoice lines — compact table layout ==== */
.invoice-form-v2 .invoice-lines {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    /* НЕ hidden: менюто на picker-а за артикули живее В клетката на реда и се
       режеше на долния ръб. Ъглите се правят на крайните деца, както в .list-shell. */
    overflow: visible;
    background: #fff;
}
.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-head,
.invoice-form-v2 .line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 80px 110px 70px 120px 36px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
}
.invoice-form-v2 .line-head {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary);
}
.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,
.invoice-form-v2 .line-row select,
.invoice-form-v2 .line-row textarea {
    padding: 6px 8px;
    font-size: 13px;
    min-height: 34px;
    border-color: transparent;
    background-color: transparent;
}
.invoice-form-v2 .line-row input:focus,
.invoice-form-v2 .line-row select:focus,
.invoice-form-v2 .line-row textarea:focus {
    background-color: #fff;
    border-color: var(--brand-blue);
}
.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; }
/* Общо за заглавието и клетките е само подравняването вдясно — иначе
   заглавието „Сума" хващаше стила на стойностите (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: 14px;
    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: #FECACA;
    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,
.invoice-form-v2 .line-row {
    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: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    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: 12.5px;
    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: #fff;
    color: var(--color-text-primary);
    font-weight: 600;
    border-color: var(--brand-blue);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.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: 720px) {
    .invoice-form-v2 .line-head { display: none; }
    .invoice-form-v2 .line-row,
    .invoice-form-v2.show-per-row-vat .line-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        padding: var(--space-3);
        border-top: 1px solid var(--color-border);
    }
    .invoice-form-v2 .line-row .col-name { grid-column: 1 / -1; }
    .invoice-form-v2 .line-row .col-total { grid-column: 1 / -1; text-align: left; padding-top: var(--space-1); }
    .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: #fff; }
    .invoice-form-v2 .line-row .col-act { grid-column: 1 / -1; text-align: right; }
}

/* ==== Totals panel ==== */
.invoice-form-v2 .totals-card { display: flex; flex-direction: column; gap: 6px; }
.invoice-form-v2 .totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--color-text-secondary);
    min-height: 32px;
}
.invoice-form-v2 .totals-row strong { font-size: 14px; 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: #fff;
    overflow: hidden;
}
.invoice-form-v2 .discount-input input {
    width: 78px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 32px !important;
    background: transparent !important;
}
.invoice-form-v2 .discount-input select {
    width: auto;
    min-width: 52px;
    padding: 0 22px 0 8px !important;
    font-size: 12.5px !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;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.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;
}
/* Числото поема остатъка, а мерната единица („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;
}
.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: #fff;
    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: 13px !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: 12.5px;
    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 > span:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.invoice-form-v2 .totals-grand strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--brand-blue-dark, var(--brand-blue));
    letter-spacing: -0.01em;
}

/* ==== Лента с действията — стои най-долу, не следва скрола ====
   Беше `position: sticky` и плаваше върху таблицата с артикулите
   (Trello #125). Оформлението остава, лепкавостта пада. */
.invoice-form-v2 .form-sticky-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-sticky-actions { flex-direction: column-reverse; }
    .invoice-form-v2 .form-sticky-actions .btn { width: 100%; }
}

/* ==========================================================================
   Invoice view v2 — breadcrumb, compact header + summary, contained sidebar
   ========================================================================== */

/* Breadcrumb */
.invoice-view-v2 .invoice-view-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-3);
    font-size: 13px;
    color: var(--color-text-secondary);
}
.invoice-view-v2 .invoice-view-crumb-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.invoice-view-v2 .invoice-view-crumb-link:hover {
    background: var(--color-bg-subtle);
    color: var(--brand-blue);
}
.invoice-view-v2 .invoice-view-crumb-sep { color: var(--color-text-muted); }
.invoice-view-v2 .invoice-view-crumb-current { color: var(--color-text-primary); font-weight: 500; }

/* Compact header — no card wrapper, inline with meta */
.invoice-view-v2 .invoice-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.invoice-view-v2 .invoice-view-head-left {
    flex: 1 1 auto;
    min-width: 0;
}
.invoice-view-v2 .invoice-view-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.invoice-view-v2 .invoice-view-title h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.invoice-view-v2 .invoice-view-title h1 .mono {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.invoice-view-v2 .invoice-view-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.invoice-view-v2 .meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--color-text-secondary);
}
.invoice-view-v2 .meta-pill--client {
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    border-color: transparent;
    font-weight: 600;
}
.invoice-view-v2 .invoice-view-head-right {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .invoice-view-v2 .invoice-view-head { flex-direction: column; align-items: stretch; }
    .invoice-view-v2 .invoice-view-head-right { width: 100%; }
    .invoice-view-v2 .invoice-view-head-right .btn { flex: 1; }
}

/* ==== Compact summary — small pills inline ==== */
.invoice-view-v2 .invoice-view-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.inv-sum {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    position: relative;
    min-width: 0;
}
.inv-sum::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--slate-300);
}
.inv-sum--total::before { background: var(--brand-blue); }
.inv-sum--paid::before { background: var(--color-success); }
.inv-sum--due::before { background: var(--color-warning); }
.inv-sum--settled::before { background: var(--color-success); }

/* ===== Периодични фактури ===== */
/* display:flex на самата <td> я вади от табличния layout — браузърът ѝ прави
   анонимна клетка и колоната „Име" се разминава с останалите (Trello #120). */
.td-periodic-name {
    min-width: 200px;
    font-weight: 600;
}

.inv-sum-list--schedule .inv-sum {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    align-items: baseline;
    width: 100%;
}
.inv-sum-list--schedule .inv-sum-value {
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}
.inv-sum-list--schedule .inv-sum--stack {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
}
.inv-sum-list--schedule .inv-sum--stack .inv-sum-value { text-align: left; }
.inv-sum-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    padding-left: var(--space-2);
}
.inv-sum-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.inv-sum--paid .inv-sum-value { color: var(--color-success); }
.inv-sum--due .inv-sum-value { color: #78350F; }
.inv-sum--settled .inv-sum-value { color: var(--color-success); }

/* ==== Grid: preview + sidebar — sidebar constrained to preview height ==== */
.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; }
}

/* ==== Action card v2 ==== */
.action-card-v2 {
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.action-card-v2 .action-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
}
.action-card-v2 .action-card-head svg { color: var(--brand-blue); flex-shrink: 0; }
.action-card-v2 .action-card-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.action-card-v2 .muted-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
/* Бутоните в картата бяха залепени: обвивката нямаше нито едно правило, а
   .inline-form е inline-block и не се разтягаше на ширината (Trello #102). */
.action-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.action-card-actions .inline-form { display: block; width: 100%; }
.action-card-v2 .action-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.action-card-v2 .action-field > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.action-card-v2 .action-field input,
.action-card-v2 .action-field textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
}
.action-card-v2 .action-field input:focus,
.action-card-v2 .action-field textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.action-card-v2 .copy-link-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.action-card-v2 .copy-link-row .copy-link-input {
    flex: 1;
    padding: 7px 10px;
    font-size: 12px;
    font-family: var(--font-mono);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}
.action-card-v2 .payment-progress {
    height: 6px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: var(--space-1) 0;
}
.action-card-v2 .payment-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), #16A34A);
    border-radius: var(--radius-full);
    transition: width 400ms var(--ease-out);
}
.action-card-v2 .payment-summary {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.action-card-v2.action-card--paid {
    background: linear-gradient(180deg, var(--color-success-bg), #fff 40%);
    border-color: #A7F3D0;
}
.action-card-v2.action-card--convert .action-card-head svg { color: var(--color-warning); }
.action-card-v2.action-card-danger { background: #FEF2F2; border-color: #FECACA; }
.action-card-v2.action-card-danger .action-card-head svg,
.action-card-v2.action-card-danger .action-card-head h3 { color: var(--color-danger); }

/* Compact timeline */
.action-card-v2 .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-3);
}
.action-card-v2 .timeline li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
    position: relative;
}
.action-card-v2 .timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3) - 5px);
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-blue);
    border: 2px solid var(--color-bg-card);
}
.action-card-v2 .timeline li strong { color: var(--color-text-primary); font-weight: 600; }
.action-card-v2 .timeline li small { color: var(--color-text-muted); font-size: 11px; }

/* ==========================================================================
   Invoice list polish — tighter mobile filter row, better table
   ========================================================================== */
.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);
    }
    .list-shell .list-filter-row > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
    .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-shell .list-more-filters { margin-left: 0; justify-content: center; }
    .list-shell .status-chips { padding: var(--space-2) var(--space-3); }
}

/* Compact status menu */
.status-menu-panel { min-width: 180px; }

/* Table tweaks — tighter rows, nicer hover */
.list-shell .data-table { 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: 11px;
}
.list-shell .data-table tbody td {
    padding: var(--space-3);
}
.list-shell .data-table tbody td.td-actions { padding: 6px var(--space-3); }
.list-shell .data-table tbody td.td-actions .btn { min-height: 30px; }
.list-shell .data-table .mono a { font-family: var(--font-mono); font-weight: 600; color: var(--color-text-primary); }
.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);
}

/* Заоблени ъгли на таблица, която е директно в list-shell (напр. паспорта на
   артикул/клиент — там няма филтри отгоре и пагинация отдолу). `.list-shell` е
   с overflow: visible, за да не се реже status dropdown-ът, затова ъглите не
   могат да дойдат от контейнера — рундваме самите крайни клетки. Това изисква
   border-collapse: separate (при collapse браузърът игнорира border-radius на
   клетки); с border-spacing: 0 рендерът е идентичен, защото клетките имат само
   border-bottom. Изключено под 721px, където таблиците стават карти. */
@media (min-width: 721px) {
    .list-shell > .data-table {
        border-collapse: separate;
        border-spacing: 0;
    }
    .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);
    }
}

/* Mobile — cards are handled by .data-table-v2 rules below */

/* ==========================================================================
   Invoice form v2 — polish (client search row, span3, toggle-row, grid-extra)
   ========================================================================== */
/* 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,
    .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,
    .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: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-blue);
    background: rgba(11, 95, 255, 0.10);
    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: 11px;
    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: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    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, var(--brand-blue));
}
.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: 11px;
    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: 10.5px;
    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: #fff;
    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: rgba(11, 95, 255, 0.10);
    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;
}

/* Client-type toggle — segmented chip control in card head */
/* Превключвателят ЮЛ/ФЛ се стилизира централно — виж .client-type-toggle. */

/* 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: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    z-index: 20;
}

/* Extra span helpers */
.invoice-form-v2 .form-card-grid > .form-field.form-field--span2 { grid-column: span 3; }
.invoice-form-v2 .form-card-grid > .form-field.form-field--span3 { grid-column: span 5; }
@media (max-width: 1080px) {
    .invoice-form-v2 .form-card-grid > .form-field.form-field--span2 { grid-column: span 2; }
    .invoice-form-v2 .form-card-grid > .form-field.form-field--span3 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .invoice-form-v2 .form-card-grid > .form-field.form-field--span2,
    .invoice-form-v2 .form-card-grid > .form-field.form-field--span3 { grid-column: 1 / -1; }
}

/* 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; }
}
.invoice-form-v2 .form-toggle-row .form-label--inline { padding-top: 0; flex: 1 1 240px; min-width: 0; }

/* Единичен превключвател — без групиращата рамка на .form-toggle-row.
   Картата застава точно по ширината на полетата отгоре (form-field--full я
   разпъва през целия грид), а отстъпът повтаря row-gap-а на грида: сивата
   кутия дотук вършеше и тази работа с padding-а си, така че без него двата
   реда се слепваха. */
.invoice-form-v2 .form-toggle-solo { margin-top: 18px; }

/* Structured toggle item: title + muted sub-line */
.invoice-form-v2 .toggle-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    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: 0 0 0 3px rgba(11, 95, 255, 0.08);
    background: #fff;
}
.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: 13.5px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.invoice-form-v2 .toggle-sub {
    font-size: 11.5px;
    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; }

/* ==========================================================================
   Data table v2 — polished look: client avatars, status pills, airy rows
   ========================================================================== */
.data-table-v2 {
    border: 0;
    font-size: 14px;
}
.data-table-v2 thead th {
    padding: var(--space-3) var(--space-4);
    font-size: 11px;
    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); }
.data-table-v2 tbody tr.row-draft td { opacity: 0.75; }
.data-table-v2 tbody tr.row-void td { opacity: 0.55; }

/* Document cell — number + type chip */
.data-table-v2 .td-doc { min-width: 170px; }
.data-table-v2 .doc-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-primary);
}
.data-table-v2 .doc-link:hover .doc-number { color: var(--brand-blue); }
.data-table-v2 .doc-number {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13.5px;
    transition: color var(--duration-fast);
}
.data-table-v2 .doc-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    background: var(--slate-100);
    color: var(--slate-600);
}
.data-table-v2 .doc-type-proforma { background: #DBEAFE; color: #1E3A8A; }
.data-table-v2 .doc-type-debit { background: #FEF3C7; color: #78350F; }
.data-table-v2 .doc-type-credit { background: #E0E7FF; color: #3730A3; }
/* Родена от периодично правило — надписът е дълъг, затова без разредка и
   на един ред (Trello #120). */
.data-table-v2 .doc-type-chip--periodic {
    background: #EDE9FE;
    color: #5B21B6;
    letter-spacing: 0;
    white-space: nowrap;
}

/* 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-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-blue-light), #DDE4FF);
    color: var(--brand-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.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: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Amount — prominent */
.data-table-v2 .td-amount {
    font-weight: 700;
    font-size: 14px;
    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: 12px;
    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;
}
.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: #1E3A8A; }
.data-table-v2 .status-blue .status-dot { background: var(--color-info); }
.data-table-v2 .status-blue:hover { background: #BFDBFE; }
.data-table-v2 .status-green { background: var(--color-success-bg); color: #065F46; }
.data-table-v2 .status-green .status-dot { background: var(--color-success); }
.data-table-v2 .status-green:hover { background: #A7F3D0; }
.data-table-v2 .status-amber { background: var(--color-warning-bg); color: #78350F; }
.data-table-v2 .status-amber .status-dot { background: var(--color-warning); }
.data-table-v2 .status-amber:hover { background: #FDE68A; }
.data-table-v2 .status-red { background: var(--color-danger-bg); color: #991B1B; }
.data-table-v2 .status-red .status-dot { background: var(--color-danger); }
.data-table-v2 .status-red:hover { background: #FECACA; }

.data-table-v2 .status-menu { position: relative; }
.data-table-v2 .status-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    padding: 4px;
}

/* 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;
}

/* Mobile — card layout */
@media (max-width: 720px) {
    .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;
        grid-template-columns: auto 1fr auto;
        gap: 8px var(--space-3);
        align-items: center;
    }
    .data-table-v2 tbody td { padding: 0; border: 0; min-width: 0; }
    .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: 13px; color: var(--color-text-secondary); }
    .data-table-v2 tbody .td-amount { grid-column: 3; grid-row: 3; text-align: right; }
    .data-table-v2 tbody .td-status { grid-column: 1; grid-row: 4; }
    .data-table-v2 tbody .td-actions { grid-column: 2 / -1; grid-row: 4; text-align: right; }
    .data-table-v2 tbody .td-actions .row-actions { justify-content: flex-end; }

    /* Складови движения — колоните тук не съвпадат с td-doc/td-client схемата
       по-горе, затова auto-placement-ът ги трупаше една върху друга (типът
       се застъпваше с името на склада). Разполагаме ги изрично по позиция:
       1 №, 2 дата, 3 тип, 4 склад, 5 стойност, 6 статус, 7 действия. */
    .data-table--movements tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .data-table--movements tbody td:nth-child(3) { grid-column: 2; grid-row: 1; }
    .data-table--movements tbody td:nth-child(7) { grid-column: 3; grid-row: 1; text-align: right; }
    .data-table--movements tbody td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
    .data-table--movements tbody td:nth-child(2) { grid-column: 1 / span 2; grid-row: 3; }
    .data-table--movements tbody td:nth-child(5) { grid-column: 3; grid-row: 3; text-align: right; }
    .data-table--movements tbody td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
    .data-table--movements tbody tr.empty-row td { grid-column: 1 / -1; grid-row: auto; }

    /* Оферти, протоколи и гаранции носят по колона повече от фактурите и по
       две дати. Картата има само три колони, а първата вече е чекбоксът —
       оставени на auto-placement, излишните клетки отиваха в най-тясната
       колона, свиваха първата и статусът се качваше върху иконките. Двете
       дати пък носят един и същ клас и се изписваха една върху друга.

       Сгъстяване в три колони не се получава: номерът в .td-doc се разлива
       върху колони 2–3 и свива останалите. Затова — цели редове:

           1  чекбокс + номер          4  дата | втора дата
           2  клиент                   5  статус
           3  тип / събития / стойност 6  действия                        */
    .data-table--status-wide tbody .td-type,
    .data-table--status-wide tbody .td-events  { grid-column: 1 / -1; grid-row: 3; }
    .data-table--status-wide tbody .td-date    { grid-column: 1; grid-row: 4; }
    .data-table--status-wide tbody .td-date--second { grid-column: 2 / -1; grid-row: 4; text-align: right; }
    .data-table--status-wide tbody .td-amount  { grid-column: 1 / -1; grid-row: 3; text-align: right; }
    .data-table--status-wide tbody .td-status  { grid-column: 1 / -1; grid-row: 5; }
    .data-table--status-wide tbody .td-actions { grid-column: 1 / -1; grid-row: 6; text-align: right; }
    /* Периодичните нямат номер, а име, и носят две свои колони (период и брой
       издадени). Името заема мястото на .td-doc, останалите две си делят реда
       на допълнителните — както датата и втората дата по-горе. */
    .data-table--status-wide tbody .td-periodic-name { grid-column: 2 / -1; grid-row: 1; }
    .data-table--status-wide tbody .td-period        { grid-column: 1 / span 2; grid-row: 3; }
    .data-table--status-wide tbody .td-issued        { grid-column: 3; grid-row: 3; text-align: right; }

    /* Разходите нямат нито чекбокс, нито номер (.td-doc), а носят две свои колони
       (категория и ДДС) — на auto-placement те свиваха първата колона до 44px и
       окото се изписваше ВЪРХУ лентата със статуса. Картата е с две колони —
       текст вляво, число вдясно; `max-content` пази „120,00 EUR" от рязане.

           1  доставчик              4  статус
           2  дата | сума            5  действия
           3  категория | ДДС                                                 */
    .data-table--expenses tbody tr           { grid-template-columns: minmax(0, 1fr) max-content; }
    .data-table--expenses tbody .td-client   { grid-column: 1 / -1; grid-row: 1; }
    .data-table--expenses tbody .td-date     { grid-column: 1; grid-row: 2; }
    .data-table--expenses tbody .td-amount   { grid-column: 2; grid-row: 2; text-align: right; }
    .data-table--expenses tbody .td-category { grid-column: 1; grid-row: 3; }
    .data-table--expenses tbody .td-vat      { grid-column: 2; grid-row: 3; text-align: right; }
    /* Цели редове, както при .data-table--status-wide: един до друг лентата със
       статуса вдига минимума на лявата колона и изяжда дясната. */
    .data-table--expenses tbody .td-status   { grid-column: 1 / -1; grid-row: 4; }
    /* `width: 100%` е изричен: .data-table td.td-actions { width: 1% } бие
       наследеното и свиваше клетката до 24px. */
    .data-table--expenses tbody .td-actions  { grid-column: 1 / -1; grid-row: 5; text-align: right; width: 100%; }
    .data-table--expenses tbody tr.empty-row td { grid-column: 1 / -1; grid-row: auto; }
    /* Заглавният ред е скрит — голото „20,00" не се чете като ДДС без етикет. */
    .data-table--expenses tbody .td-vat::before {
        content: attr(data-label) " ";
        color: var(--color-text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .3px;
    }
}

/* ==========================================================================
   Action card v2 — collapsible variants for invoice view sidebar
   ========================================================================== */
.action-card-v2.action-card-collapse {
    padding: 0;
}
.action-card-v2.action-card-collapse > summary.action-card-head {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast);
}
.action-card-v2.action-card-collapse > summary::-webkit-details-marker { display: none; }
.action-card-v2.action-card-collapse > summary:hover { background: var(--color-bg-subtle); }
.action-card-v2.action-card-collapse > summary h3 { flex: 1; margin: 0; }
.action-card-v2.action-card-collapse > summary .chev {
    color: var(--color-text-muted);
    transition: transform var(--duration-fast);
    flex-shrink: 0;
}
.action-card-v2.action-card-collapse[open] > summary .chev { transform: rotate(180deg); }
.action-card-v2.action-card-collapse[open] > summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }

.action-card-v2 .action-card-body {
    padding: 0 var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.action-card-v2 .action-card-body--stack > .btn + .btn,
.action-card-v2 .action-card-body--stack > form + .btn,
.action-card-v2 .action-card-body--stack > .btn + form,
.action-card-v2 .action-card-body--stack > form + form { margin-top: 0; }

/* Compact form inside action card (stacked inputs, no labels) */
.action-card-v2 .compact-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* `select` е тук заради „Гаранционно събитие" в страничното меню: без него
   падащото меню стоеше с браузърния си вид сред полета с наш. */
.action-card-v2 .compact-form input,
.action-card-v2 .compact-form textarea,
.action-card-v2 .compact-form select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-family: var(--font-ui);
}
.action-card-v2 .compact-form input:focus,
.action-card-v2 .compact-form textarea:focus,
.action-card-v2 .compact-form select:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Input with inline suffix (currency) */
.action-card-v2 .input-with-suffix {
    position: relative;
}
.action-card-v2 .input-with-suffix input { padding-right: 56px; }
.action-card-v2 .input-with-suffix .input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    pointer-events: none;
    font-family: var(--font-mono);
}

/* Compact variant — smaller padding, no body */
.action-card-v2.action-card--compact {
    padding: var(--space-3) var(--space-4);
}
.action-card-v2.action-card--compact .action-card-head { margin-bottom: 6px; }

/* Primary card — has accent border */
.action-card-v2.action-card--primary {
    border-left: 3px solid var(--brand-blue);
}

/* Danger card — отказана проформа: изключение, не действие. */
.action-card-v2.action-card--danger {
    border-left: 3px solid var(--color-danger);
}
.action-card-v2.action-card--danger .action-card-head svg { color: var(--color-danger); }

/* Small text link (e.g. "Маркирай изцяло платена →") */
.action-card-v2 .action-card-link {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-blue);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: color var(--duration-fast);
}
.action-card-v2 .action-card-link:hover { color: var(--brand-blue-dark); text-decoration: underline; }

.action-card-v2 .action-card-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    background: var(--slate-100);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Свързани документи — карта със сгъваем списък и постоянно видим бутон
   ========================================================================== */
/* <details>-ът е вътре в картата: „Качи файл" стои ПОД сгъващата се част.
   Вложеният .action-card-v2 е само за стиловете на сгъването — рамката и
   фонът остават на външната карта. */
.action-card-v2.action-card--files {
    padding: 0;
    gap: 0;
}
.action-card-v2.action-card--files > .action-card-v2 {
    background: transparent;
    border: 0;
    border-radius: 0;
}
.action-card-v2.action-card--files > .action-card-v2 .action-card-body {
    padding-bottom: var(--space-3);
}
.action-card-v2.action-card--files .action-card-foot {
    padding: 0 var(--space-4) var(--space-4);
}
/* Сгънат списък: заглавието вече носи долния си padding. */
.action-card-v2.action-card--files > .action-card-v2:not([open]) + .action-card-foot {
    padding-top: var(--space-1);
}

.action-card-v2 .doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.action-card-v2 .doc-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
}
.action-card-v2 .doc-list-link {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: none;
}
.action-card-v2 .doc-list-link:hover { text-decoration: underline; }
/* Документите стоят над файловете в същата карта — тънка черта ги разделя,
   без да ги разкъсва на две секции със заглавия. */
.action-card-v2 .doc-list--related + .doc-list {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}
.action-card-v2 .doc-list-link svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-text-muted);
}
/* Имена на файлове са дълъг низ без интервали — иначе излизат от лентата. */
.action-card-v2 .doc-list-name { overflow-wrap: anywhere; }
.action-card-v2 .doc-list small { color: var(--color-text-muted); font-size: 11px; }

/* Compact payment summary — reduce whitespace */
.action-card-v2 .payment-progress {
    height: 6px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 0 0 6px;
}
.action-card-v2 .payment-summary {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.4;
}
.action-card-v2 .mark-paid-full { margin-top: 2px; }

/* ==========================================================================
   Page bar — full-width header for list pages
   ========================================================================== */
.app-page--list { padding-top: 0; padding-bottom: var(--space-12); }
.app-page--list > .container { padding-top: var(--space-5); }

.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: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-text-primary);
}
.page-bar-count {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.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: 22px; }
    .page-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Status tabs v2 — polished segmented tab bar with counts
   ========================================================================== */
.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: 13.5px;
    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:hover {
    color: var(--color-text-primary);
    background: rgba(11, 95, 255, 0.04);
}
.status-tab.is-active {
    background: #fff;
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    border-color: var(--color-border);
}
.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: 11px;
    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: #78350F; }
.status-tab--red.is-active .status-tab-count { background: var(--color-danger-bg); color: #991B1B; }
.status-tab--green.is-active .status-tab-count { background: var(--color-success-bg); color: #065F46; }
.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: #991B1B;
}
.status-tab--amber:not(.is-active):has(.status-tab-count:not(:empty)) .status-tab-count {
    background: var(--color-warning-bg);
    color: #78350F;
}
.status-tab--green:not(.is-active):has(.status-tab-count:not(:empty)) .status-tab-count {
    background: #ECFDF5;
    color: #065F46;
}

@media (max-width: 720px) {
    .status-tabs { gap: 0; }
    .status-tab { font-size: 13px; padding: 9px 10px; }
}

/* ==========================================================================
   List filters v2 — cleaner, interactive filter row
   ========================================================================== */
.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-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.list-filter-row-v2 .search-input {
    padding: 9px 12px 9px 38px;
    height: 38px;
    font-size: 13.5px;
    width: 100%;
}

.list-filter-row-v2 .filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.list-filter-row-v2 .filter-select {
    height: 38px;
    padding: 0 32px 0 12px;
    min-width: 160px;
    max-width: 200px;
    font-size: 13.5px;
    background-color: #fff;
}
/* Начална и крайна дата са две самостоятелни полета, разделени с тире.
   Общият svg в разметката се скрива — иконата е фон на всяко от двете полета.
   Видимите полета са altInput на flatpickr; оригиналните остават type=hidden. */
.list-filter-row-v2 .filter-date-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    height: 38px;
    background: transparent;
    border: 0;
    flex-shrink: 0;
}
.list-filter-row-v2 .filter-date-icon { display: none; }
.list-filter-row-v2 .filter-date-range input:not([type="hidden"]) {
    width: 132px;
    height: 38px;
    padding: 0 10px 0 31px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 15px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: left;
    transition: border-color var(--duration-fast);
}
.list-filter-row-v2 .filter-date-range input:not([type="hidden"]):focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
.list-filter-row-v2 .filter-date-sep { color: var(--color-text-muted); font-size: 12px; flex-shrink: 0; }

.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;
}
.list-filter-row-v2 .btn { height: 38px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
.list-filter-row-v2 .btn svg { flex-shrink: 0; }
.list-filter-row-v2 .list-more-filters { position: relative; }
.list-filter-row-v2 .list-more-filters .chip-dot {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-blue);
}

@media (max-width: 1100px) {
    .list-filter-row-v2 { flex-wrap: wrap; }
    .list-filter-row-v2 .search-field { flex: 1 1 100%; }
    .list-filter-row-v2 .filter-group { flex: 1 1 auto; }
    .list-filter-row-v2 .filter-actions { margin-left: auto; }
}
@media (max-width: 720px) {
    .list-filter-row-v2 { flex-direction: column; align-items: stretch; }
    .list-filter-row-v2 > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
    .list-filter-row-v2 .search-field { flex: 0 0 auto; min-width: 0; max-width: none; }
    .list-filter-row-v2 .filter-group,
    .list-filter-row-v2 .filter-actions { max-width: none; min-width: 0; }
    .list-filter-row-v2 .filter-group { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .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; }
    .list-filter-row-v2 .filter-date-range input:not([type="hidden"]) { flex: 1 1 0; min-width: 0; width: auto; box-sizing: border-box; }
    .list-filter-row-v2 .filter-actions { margin-left: 0; }
    .list-filter-row-v2 .filter-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Advanced filters panel v2 — matches main filter row style
   ========================================================================== */
.adv-panel-v2 {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
}
.adv-panel-v2[hidden] { display: none; }
.adv-panel-v2-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.adv-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.adv-row + .adv-row { border-top: 1px dashed var(--color-border); }
.adv-row-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-text-muted);
    font-weight: 700;
    padding-top: 11px;
}
.adv-row-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.adv-row-controls .filter-select {
    height: 38px;
    padding: 0 32px 0 12px;
    min-width: 180px;
    max-width: 260px;
    font-size: 13.5px;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-primary);
}
.adv-row-controls .filter-select:focus {
    outline: 0;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}

/* Range pill — numeric & date */
/* Началото и краят на диапазона са две самостоятелни полета, разделени с тире —
   както в основния филтър. Иконата стои в самото поле (.filter-range-field). */
.filter-range-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    height: 38px;
    background: transparent;
    border: 0;
    flex-shrink: 0;
}
.filter-range-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.filter-range-pill .filter-date-icon {
    position: absolute;
    left: 10px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.filter-range-pill input {
    box-sizing: border-box;
    width: 128px;
    padding: 0 10px 0 31px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    height: 38px;
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast);
}
.filter-range-pill input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-focus);
}
.filter-range-pill .filter-range-num { width: 122px; }
.filter-range-pill .filter-range-num-sm { width: 104px; }
.filter-range-sep { color: var(--color-text-muted); font-size: 12px; flex-shrink: 0; }
/* Hide number input spinners for cleaner look */
.filter-range-pill input[type="number"]::-webkit-outer-spin-button,
.filter-range-pill input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-range-pill input[type="number"] { -moz-appearance: textfield; }

/* Flag groups grid */
.adv-flags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}
.adv-flag {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.adv-flag-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* Segmented control — a unified rail of pills with no gaps */
.adv-seg.tri-group,
.adv-seg {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
}
.adv-seg .adv-seg-btn,
.adv-seg-btn.tri-pill,
.adv-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 0;
    border-radius: calc(var(--radius) - 3px);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.2;
    background: transparent;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    min-width: 42px;
    margin: 0;
}
.adv-seg .adv-seg-btn:hover,
.adv-seg-btn.tri-pill:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); border-color: transparent; }
.adv-seg .adv-seg-btn.is-active,
.adv-seg-btn.tri-pill.is-active {
    background: var(--brand-blue);
    color: #fff;
    font-weight: 600;
    border-color: transparent;
}
.adv-seg .adv-seg-btn.is-active:hover,
.adv-seg-btn.tri-pill.is-active:hover { background: var(--brand-blue-dark, var(--brand-blue)); color: #fff; }
.adv-seg-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Footer actions */
.adv-panel-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-1);
}
.adv-panel-footer .btn { height: 36px; font-size: 13px; }

@media (max-width: 900px) {
    .adv-row { grid-template-columns: 1fr; gap: var(--space-2); }
    .adv-row-label { padding-top: 0; }
    .adv-flags-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .adv-flags-grid { grid-template-columns: 1fr; }
    .filter-range-pill { width: 100%; }
    .filter-range-field { flex: 1 1 0; min-width: 0; }
    .filter-range-pill input,
    .filter-range-pill .filter-range-num,
    .filter-range-pill .filter-range-num-sm { width: 100%; }
    .adv-seg { width: 100%; }
    .adv-seg-btn { flex: 1 1 0; }
    .adv-row-controls .filter-select { width: 100%; max-width: none; }
}

/* ==========================================================================
   QUICK-CREATE MODAL — inline entity creation from picker forms.
   Driven by quick-create.js + data-quick-create="<entity>" buttons.
   ========================================================================== */
.qc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: qc-fade-in 0.15s ease-out;
}
.qc-modal-overlay.qc-closing { animation: qc-fade-out 0.12s ease-in forwards; }
.qc-modal {
    background: var(--color-bg-card);
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    animation: qc-pop 0.18s ease-out;
}
@keyframes qc-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes qc-fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes qc-pop { from { transform: scale(0.95); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.qc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--color-border);
}
.qc-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}
.qc-modal-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.qc-modal-close:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.qc-modal-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.qc-field { display: flex; flex-direction: column; gap: 5px; }
.qc-field > span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
}
.qc-field input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13.5px;
    font-family: inherit;
    background: #fff;
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    width: 100%;
}
.qc-field input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.12);
}
.qc-modal-error {
    background: var(--color-danger-bg);
    color: #991B1B;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.4;
}
.qc-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 6px;
}

/* Inline "+ Нов" button next to a picker — sleek, low-key */
.qc-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue);
    background: transparent;
    border: 1px dashed var(--color-border);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius);
    margin-left: 6px;
    transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
    height: 38px;
    white-space: nowrap;
}
.qc-add-btn:hover {
    background: rgba(11, 95, 255, 0.06);
    border-color: var(--brand-blue);
    border-style: solid;
}
.qc-add-btn svg { width: 12px; height: 12px; }
.qc-add-btn--sm { padding: 4px 8px; height: 32px; font-size: 11.5px; }

/* Picker row — input + qc-add-btn aligned */
.qc-picker-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.qc-picker-row > select,
.qc-picker-row > input { flex: 1 1 auto; min-width: 0; }

/* 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;
}
.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: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast), background var(--duration-fast);
    opacity: 0;
}
.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; }
.line-qc-btn:hover {
    color: #fff;
    background: var(--brand-blue-dark, var(--brand-blue));
}

/* ==========================================================================
   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.
   ========================================================================== */

.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);
}

.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-5) var(--space-6);
    margin: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section:first-child {
    padding-top: var(--space-5);
}
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section:last-child {
    border-bottom: 1px solid var(--color-border);
}

/* Polished subhead inside each card */
.app-page--list > .container > .app-form:not(.invoice-form-v2) > .form-section > h2 {
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-3);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.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: 0 1px 2px rgba(15, 23, 42, 0.02);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
}

/* „Екип" — без карта около „Отказ"/„Запази"; бутоните стоят голи под формата.
   Заедно с фона пада и sticky лентата — прозрачен sticky bar размазва
   съдържанието, което минава под него. */
.app-page--list > .container > .app-form.team-form > .form-actions {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: static;
    backdrop-filter: none;
}

/* Client balance summary tiles — sleek summary row above the form */
.app-page--list > .container > .client-balance-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
}
.app-page--list > .container > .client-balance-bar > .client-balance-tile {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    border-left: 4px solid var(--brand-blue);
}
.app-page--list > .container > .client-balance-bar > .client-balance-tile.warn {
    border-left-color: var(--color-warning);
}
.app-page--list > .container > .client-balance-bar > .client-balance-tile .muted-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.app-page--list > .container > .client-balance-bar > .client-balance-tile strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Documents section under the client form — uses list-shell / data-table-v2.
   Селекторът е с потомци, а не с преки наследници: в редакцията на клиент
   секцията е обвита в таб панел, заради което заглавието наследяваше
   лендинг стила .section-title (42px, центриран). */
.app-page--list .client-docs-section {
    margin-top: var(--space-6);
}
.app-page--list .client-docs-section > .section-title,
.app-page--list .client-docs-section > h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
    text-transform: none;
}
.app-page--list .client-docs-section > .muted {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0;
}

/* Legal check polish inside detail forms */
.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: 13px;
    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: #fff;
}
.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: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Labels inside detail forms — tighter, cleaner */
.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: 12.5px;
    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"]),
.app-page--list > .container > .app-form:not(.invoice-form-v2) select,
.app-page--list > .container > .app-form:not(.invoice-form-v2) textarea {
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
    background-color: #fff;
    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) textarea {
    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: 0 0 0 3px rgba(11, 95, 255, 0.12);
}

/* ==========================================================================
   System-wide list/form polish — supports v2 patterns introduced
   in the system-wide UI consistency refactor.
   ========================================================================== */

/* Section header bar above a list-shell (sub-section h2 with optional count) */
.list-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-3);
    padding: 0 var(--space-1);
}
.list-section-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.list-section-head .count-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 2px 9px;
    margin-left: 6px;
}
.list-section-head--inner {
    margin: 0;
    padding: var(--space-4) var(--space-4) 0;
}

/* list-shell variant used for forms (no table inside) */
.list-shell--form .form-section-body {
    padding: var(--space-4);
}
.list-shell--form .app-form {
    padding: 0;
    border: 0;
    background: transparent;
}
.list-shell--form .form-section {
    border: 0;
    padding: 0;
    background: transparent;
    margin-bottom: 0;
}
.list-shell--form .form-section + .form-section { margin-top: var(--space-4); }

/* Bank upload section (upload form embedded in list-shell) */
.bank-upload-section {
    padding: var(--space-4);
}
.bank-upload-head h2 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}
.bank-upload-head p { margin: 0 0 var(--space-3); }
.bank-upload-form .form-grid-2 { gap: var(--space-3); }
.bank-upload-form .form-actions {
    margin-top: var(--space-3);
    border: 0;
    padding: 0;
}
.bank-match-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.bank-match-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
}

/* Import grid (two side-by-side import cards) */
.import-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-3);
}
@media (max-width: 720px) {
    .import-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Файлове — лента с филтри (свободно търсене · клиент · вид документ)
   ========================================================================== */
.doc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.doc-filter-field { display: flex; min-width: 160px; }
/* Падащите списъци стоят на естествената си ширина, за да не подскачат. */
.doc-filter-field--grow { flex: 1 1 260px; min-width: 200px; }
.doc-filters input[type="search"],
.doc-filters select {
    width: 100%;
    padding: 8px 12px;
    font-size: var(--text-small);
    color: var(--color-text-primary);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.doc-filters input[type="search"]:focus,
.doc-filters select:focus { border-color: var(--color-border-focus); outline: none; }
.doc-search-note { margin: 0 0 var(--space-3); font-size: var(--text-small); }
@media (max-width: 720px) {
    .doc-filter-field { min-width: 100%; }
    .doc-filters .btn { flex: 1 1 auto; }
}

/* Documents folder grid */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}
/* Кратко описание под името на файла — свободен текст, затова без
   уговорките на .muted-label (главни букви, разредка). */
.doc-note {
    margin-top: 2px;
    font-size: var(--text-caption);
    line-height: 1.4;
    color: var(--color-text-secondary);
    max-width: 46ch;
}
.folder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.folder-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.folder-card strong {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: inherit;
}

/* ×-ът не е в <a>-то (невалиден HTML), а е негов брат в обвивката. */
.folder-card-wrap {
    position: relative;
}
.folder-card-del {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    /* Видим и без hover — на тъч няма hover. */
    opacity: 0.55;
    transition: opacity var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}
.folder-card-wrap:hover .folder-card-del { opacity: 1; }
.folder-card-del:hover,
.folder-card-del:focus-visible {
    opacity: 1;
    background: var(--color-danger-bg, rgba(220, 38, 38, 0.08));
    color: var(--color-danger, #dc2626);
}
/* Не е .alert-*, за да не стане toast. */
.folder-del-warning {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-small);
    line-height: 1.45;
    color: var(--color-danger, #dc2626);
    background: var(--color-danger-bg, rgba(220, 38, 38, 0.08));
    border-radius: var(--radius-sm);
}
.crumb-sep {
    margin: 0 4px;
    color: var(--color-text-muted);
}

/* Error list (used in imports/result) */
.error-list {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--color-danger);
}
.error-list li + li { margin-top: 2px; }

/* На тесен екран „Dry-run" се пренасяше на тирето („Dry-/run"). */
.import-dryrun-alert strong { white-space: nowrap; }

/* „Импортирай наистина" под dry-run резултата. .app-form е колона, центрирана
   на 920px — тук полето и бутонът вървят в един ред, ширината е на шела. */
.app-form.import-commit-form {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: none;
    margin: 0;
}
.import-commit-form label { flex: 1 1 280px; margin-bottom: 0; }
.import-commit-form .btn { flex: 0 0 auto; }

/* Таблица за преглед на импорта (dry-run) — как ще изглеждат данните. */
.import-preview {
    table-layout: auto;
    white-space: nowrap;
}
.import-preview th:first-child,
.import-preview td:first-child {
    width: 1%;
    color: var(--color-text-muted);
}
.import-preview th:nth-child(2),
.import-preview td:nth-child(2) { width: 1%; }
.import-preview tbody td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.import-preview tbody tr.import-row--skip td { background: var(--color-warning-bg); }
.import-preview tbody tr.import-row--error td { background: var(--color-danger-bg); }
.import-preview .import-cell-empty { color: var(--color-text-muted); }
@media (max-width: 640px) {
    /* Под 640px .data-table става карти — там nowrap и тесните колони
       „Ред"/„Статус" (width: 1%) свиват клетките до няколко пиксела. */
    .import-preview,
    .import-preview tbody td { white-space: normal; max-width: none; }
    .import-preview th:first-child,
    .import-preview td:first-child,
    .import-preview th:nth-child(2),
    .import-preview td:nth-child(2) { width: auto; }
    .import-preview tbody tr.import-row--skip td,
    .import-preview tbody tr.import-row--error td { background: transparent; }
    .import-preview tbody tr.import-row--skip { background: var(--color-warning-bg); }
    .import-preview tbody tr.import-row--error { background: var(--color-danger-bg); }
}

/* Report summary inside list-shell */
.report-summary {
    padding: var(--space-3) var(--space-4) 0;
}
.report-summary .summary-grid,
.report-summary .kpi-grid {
    margin: 0 0 var(--space-3);
}

/* Дълбаене от ред в справка към документите зад него (виж app-ux.js §7).
   Целият ред е кликаем през data-row-href, но носещият елемент е котвата в
   клетката „Тип" — тя е и фокусируемото за клавиатура. */
tr.row-drill { cursor: pointer; }
tr.row-drill:hover td { background: var(--color-bg-subtle); }
tr.row-drill:focus-within td { background: var(--color-bg-subtle); }
.drill-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border-strong, var(--color-border));
}
tr.row-drill:hover .drill-link,
.drill-link:hover,
.drill-link:focus-visible {
    color: var(--brand-blue);
    border-bottom-color: currentColor;
}

/* Rank cell + percentage bar */
.rank-cell {
    width: 36px;
    text-align: center;
    color: var(--color-text-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pct-cell {
    min-width: 160px;
}
.pct-value {
    display: inline-block;
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-right: 8px;
    color: var(--color-text-secondary);
}
.pct-bar {
    display: inline-block;
    width: 100px;
    height: 8px;
    background: var(--color-bg-subtle);
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
}
.pct-bar-fill {
    height: 100%;
    background: var(--brand-blue);
    border-radius: 4px;
    transition: width var(--duration-base);
}

/* Cash amount colors (replacement for inline styles) */
.cash-amt-green { color: var(--color-success); font-weight: 600; }
.cash-amt-red { color: var(--color-danger); font-weight: 600; }
.cash-amt-blue { color: var(--brand-blue); font-weight: 600; }

/* Narrow container for short-form views (delete account, etc.) */
.container--narrow {
    max-width: 720px;
}

/* Toolbar checkbox label inside filter row */
.list-filter-row-v2 .toolbar-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    padding: 0 8px;
    height: 38px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
}
.list-filter-row-v2 .toolbar-check:hover {
    color: var(--color-text-primary);
}
.list-filter-row-v2 .toolbar-check input { margin: 0; }

/* 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-* */
}

/* Mobile tweaks for v2 patterns */
@media (max-width: 720px) {
    .page-bar-inner { gap: var(--space-2); }
    .page-bar-actions { width: 100%; }
    .page-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
    .list-section-head { margin-top: var(--space-4); }
}
/* 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-5) var(--space-6);
    margin: 0;
}

.app-page--list > .container > .app-form > .form-grid-2 > .form-section > h2 {
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-3);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
}
/* ==========================================================================
   PASSPORT HERO — пълноширинна „лична карта" за детайлните страници
   (паспорт на клиент / артикул / складово движение). Един компонент,
   три цветови варианта чрез modifier класове.
   ========================================================================== */
.passport-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 26px 30px;
    margin: 4px 0 22px;
    color: #fff;
    background: linear-gradient(118deg, #14224d 0%, var(--brand-blue) 52%, #6e4bff 100%);
    box-shadow: 0 18px 40px -18px rgba(31, 62, 204, .55);
}
.passport-hero--item {
    background: linear-gradient(118deg, #0c3a34 0%, #0e9384 55%, #0b5fff 130%);
    box-shadow: 0 18px 40px -18px rgba(14, 147, 132, .5);
}
.passport-hero--store {
    background: linear-gradient(118deg, #2b2316 0%, #b97a0e 60%, #FFB02E 125%);
    box-shadow: 0 18px 40px -18px rgba(216, 138, 15, .5);
}
/* Декорация: меки кръгове + фина мрежа */
.passport-hero::before,
.passport-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.passport-hero::before {
    width: 420px; height: 420px;
    right: -120px; top: -180px;
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
}
.passport-hero::after {
    width: 280px; height: 280px;
    left: 32%; bottom: -170px;
    background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
}
.passport-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse at 70% 20%, rgba(0,0,0,.9), transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 20%, rgba(0,0,0,.9), transparent 70%);
    pointer-events: none;
}
/* Голяма „водна" икона вдясно */
.passport-hero-watermark {
    position: absolute;
    right: 26px; bottom: -28px;
    opacity: .10;
    pointer-events: none;
}
.passport-hero-watermark svg { width: 190px; height: 190px; }

.passport-hero-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
/* Лявата зона се свива, за да остане KPI блокът вдясно на широк екран */
.passport-hero-inner > div:first-child {
    flex: 1 1 480px;
    min-width: 0;
    max-width: 760px;
}
.passport-kpis { flex: 0 0 auto; }
/* ЛЯВО: самоличност */
.passport-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 280px;
}
.passport-avatar {
    flex: 0 0 auto;
    width: 74px; height: 74px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(6px);
    text-transform: uppercase;
}
.passport-identity h1 {
    margin: 0 0 7px;
    font-size: 24px;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.01em;
}
.passport-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.94);
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    text-decoration: none;
    white-space: nowrap;
}
.hero-chip svg { width: 13px; height: 13px; opacity: .85; flex: 0 0 auto; }
.hero-chip--accent { background: rgba(255,255,255,.92); color: #14224d; }
.passport-hero--item .hero-chip--accent { color: #0c3a34; }
.passport-hero--store .hero-chip--accent { color: #2b2316; }

/* ДЯСНО: стъклени KPI карти */
.passport-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 10px;
}
.hero-kpi {
    padding: 11px 16px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(8px);
    min-width: 150px;
}
.hero-kpi .hero-kpi-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.66);
    margin-bottom: 3px;
}
.hero-kpi .hero-kpi-value {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    white-space: nowrap;
}
/* Легенда под справка — обяснява колоните, без да виси на hover. */
.report-legend {
    margin: 10px 2px 0;
    max-width: 90ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.report-legend strong { color: var(--color-text); font-weight: 650; }

.hero-kpi--alert .hero-kpi-value { color: #ffd9d9; }
.hero-kpi--ok .hero-kpi-value { color: #c9f7d6; }
/* Втори ред под числото — контекстът към KPI-то (напр. фактурирано срещу платено). */
.hero-kpi .hero-kpi-sub {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.62);
    line-height: 1.3;
}

/* Действия под самоличността */
.passport-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 13px;
}
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.30);
    color: #fff;
    background: rgba(255,255,255,.13);
    transition: background .15s ease;
}
/* Глобалното `a:hover { color: var(--brand-blue-dark) }` бие `.btn-hero` по
   специфичност и оцветяваше текста в синьо върху тъмния hero — фиксираме
   hover цвета изрично на „тъмнобяло". */
.btn-hero:hover,
a.btn-hero:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.42);
    color: #e4ecea;
}
.btn-hero--primary {
    background: #fff;
    color: #0a4cd1;
    border-color: #fff;
}
.passport-hero--item .btn-hero--primary { color: #0c6b5f; }
.passport-hero--store .btn-hero--primary { color: #9a6a0a; }
.btn-hero--primary:hover,
a.btn-hero--primary:hover { background: rgba(255,255,255,.92); border-color: #fff; color: #0a4cd1; }
.passport-hero--item .btn-hero--primary:hover { color: #0c6b5f; }
.passport-hero--store .btn-hero--primary:hover { color: #9a6a0a; }
.btn-hero svg { width: 15px; height: 15px; }
/* Недостъпно действие (напр. разход, който вече е в дневника за покупките) —
   както при .row-action:disabled, бутонът трябва да личи, че не е активен,
   иначе изглежда като счупен клик. Причината стои в title-а. */
.btn-hero:disabled,
.btn-hero:disabled:hover {
    opacity: .45;
    cursor: not-allowed;
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.30);
    color: #fff;
}

@media (max-width: 960px) {
    .passport-hero { padding: 22px; }
    .passport-hero-inner { flex-direction: column; align-items: stretch; }
    .passport-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .passport-kpis { grid-template-columns: 1fr; }
    .passport-avatar { width: 58px; height: 58px; font-size: 24px; border-radius: 16px; }
    .passport-identity h1 { font-size: 20px; }
}

/* ==========================================================================
   WELCOME CARD (табло) — поздрав + месечен резултат + илюстрация
   ========================================================================== */
.welcome-card {
    background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 60%, #eef3ff 100%);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px -18px rgba(31, 62, 204, .25);
    margin: 4px 0 20px;
    overflow: hidden;
}
.welcome-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px 24px;
}
.welcome-firm { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.welcome-title {
    margin: 0 0 4px;
    font-size: 26px;
    letter-spacing: -.015em;
    color: var(--color-text-primary);
}
.welcome-wave { display: inline-block; font-size: 24px; animation: welcome-wave 2.4s ease-in-out 1; transform-origin: 70% 70%; }
@keyframes welcome-wave {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(16deg); }
    30% { transform: rotate(-7deg); }
    45% { transform: rotate(14deg); }
    60% { transform: rotate(-4deg); }
    75% { transform: rotate(9deg); }
}
.welcome-sub { margin: 0 0 8px; color: var(--color-text-secondary); }
.welcome-amount-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.welcome-amount {
    font-size: 32px;
    font-weight: 800;
    color: var(--brand-blue);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.trend-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}
.trend-chip.trend-up { background: var(--color-success-bg); color: #15803d; }
.trend-chip.trend-down { background: var(--color-danger-bg); color: #b91c1c; }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.welcome-card-art { flex: 0 0 auto; }
.welcome-card-art svg { width: 300px; height: 188px; display: block; }
@media (max-width: 900px) {
    .welcome-card-art { display: none; }
    .welcome-title { font-size: 22px; }
    .welcome-amount { font-size: 26px; }
}

/* KPI карти — uplift: икони в цветни балончета (icon bubbles) */
.kpi-strip .kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-blue-light);
    color: var(--brand-blue);
    flex: 0 0 auto;
}
.kpi-strip .kpi-icon svg { width: 19px; height: 19px; }
.kpi-strip .kpi-warn .kpi-icon { background: var(--color-warning-bg); color: var(--brand-amber-dark); }
.kpi-strip .kpi-danger .kpi-icon { background: var(--color-danger-bg); color: var(--color-danger); }
.kpi-strip .kpi-success .kpi-icon { background: var(--color-success-bg); color: #15803d; }
.kpi-strip .kpi-item {
    transition: transform .14s ease, box-shadow .14s ease;
}
.kpi-strip .kpi-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -16px rgba(15, 23, 42, .28);
}

/* Цветни аватари — детерминистичен цвят по име (като премиум admin темите) */
.client-avatar.av-0 { background: #f0f5ff; color: #0a4cd1; }
.client-avatar.av-1 { background: #DCFCE7; color: #15803d; }
.client-avatar.av-2 { background: #FEF3C7; color: #b45309; }
.client-avatar.av-3 { background: #FEE2E2; color: #b91c1c; }
.client-avatar.av-4 { background: #F3E8FF; color: #7e22ce; }
.client-avatar.av-5 { background: #CFFAFE; color: #0e7490; }
.client-avatar.av-6 { background: #FCE7F3; color: #be185d; }
.client-avatar.av-7 { background: #ECFCCB; color: #4d7c0f; }

/* ==========================================================================
   PROFILE LAYOUT (Sneat-стил паспорт): банер + застъпващ аватар +
   лява „Детайли" колона + дясна колона със stat карти и табове.
   ========================================================================== */
.profile-cover {
    position: relative;
    height: 150px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: linear-gradient(118deg, #14224d 0%, var(--brand-blue) 52%, #6e4bff 100%);
}
.profile-cover .passport-hero-grid { border-radius: 18px 18px 0 0; }
.profile-cover::before {
    content: "";
    position: absolute;
    width: 380px; height: 380px;
    right: -90px; top: -210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
}
.profile-cover-watermark {
    position: absolute;
    right: 28px; bottom: -22px;
    opacity: .12;
}
.profile-cover-watermark svg { width: 150px; height: 150px; }

.profile-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    padding: 0 26px 18px;
    margin-bottom: 20px;
    box-shadow: 0 8px 22px -16px rgba(15, 23, 42, .18);
}
.profile-head-left { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.profile-avatar {
    width: 96px; height: 96px;
    margin-top: -44px;             /* застъпва банера */
    border-radius: 22px;
    border: 4px solid var(--color-bg-card);
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .35);
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; font-weight: 800;
    text-transform: uppercase;
    background: var(--brand-blue-light);
    color: var(--brand-blue-dark);
    flex: 0 0 auto;
}
.profile-id { padding: 14px 0 2px; min-width: 0; }
.profile-id h1 { margin: 0 0 6px; font-size: 23px; letter-spacing: -.012em; }
.profile-id-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--color-text-secondary); font-size: 13.5px; }
.profile-id-meta .id-meta {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.profile-id-meta .id-meta svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.profile-head-actions { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 14px; }

.profile-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) { .profile-layout { grid-template-columns: 1fr; } }

/* Лява „Детайли" карта */
.about-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 8px 22px -18px rgba(15, 23, 42, .16);
}
.about-card h3 {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.about-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
}
.about-row svg { width: 16px; height: 16px; color: var(--color-text-muted); flex: 0 0 auto; margin-top: 2px; }
.about-row .about-label { color: var(--color-text-muted); margin-right: 4px; white-space: nowrap; }
.about-row .about-value { color: var(--color-text-primary); font-weight: 600; word-break: break-word; }
.about-divider { border: 0; border-top: 1px solid var(--color-border); margin: 12px 0; }

/* Градиентна промо/CTA карта (като „Upgrade to premium") */
.statement-card {
    margin-top: 16px;
    border-radius: 16px;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(118deg, var(--brand-blue-dark) 0%, var(--brand-blue) 60%, #6e4bff 130%);
    box-shadow: 0 14px 30px -16px rgba(31, 62, 204, .55);
    position: relative;
    overflow: hidden;
}
.statement-card::after {
    content: "";
    position: absolute; right: -60px; bottom: -80px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
    z-index: 0;
    pointer-events: none;
}
/* Съдържанието стои НАД декоративния кръг (иначе бутонът се замъгляваше) */
.statement-card > * { position: relative; z-index: 1; }
.statement-card h4 { margin: 0 0 5px; color: #fff; font-size: 16px; }
.statement-card p { margin: 0 0 13px; color: rgba(255,255,255,.78); font-size: 13px; }
.statement-card .btn-hero--primary { color: var(--brand-blue-dark); }

/* Дясна колона: мини stat карти */
.stat-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.stat-mini {
    display: flex; align-items: center; gap: 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: 0 8px 22px -18px rgba(15, 23, 42, .14);
}
.icon-bubble {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    background: var(--brand-blue-light);
    color: var(--brand-blue);
}
.icon-bubble svg { width: 20px; height: 20px; }
.icon-bubble--green { background: var(--color-success-bg); color: #15803d; }
.icon-bubble--red { background: var(--color-danger-bg); color: var(--color-danger); }
.icon-bubble--amber { background: var(--color-warning-bg); color: var(--brand-amber-dark); }
.icon-bubble--violet { background: #F3E8FF; color: #7e22ce; }
.stat-mini-info { min-width: 0; }
.stat-mini-value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-mini-label { font-size: 11.5px; color: var(--color-text-muted); font-weight: 600; }

/* Табове (pill стил) + панели */
.pill-tabs {
    display: flex; gap: 7px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.pill-tab {
    appearance: none; border: 1px solid var(--color-border); cursor: pointer;
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font: 600 13px/1 inherit;
    font-family: inherit;
    padding: 9px 15px;
    border-radius: 10px;
    display: inline-flex; align-items: center; gap: 7px;
    transition: all .14s ease;
}
.pill-tab .pill-count {
    background: var(--color-bg-subtle);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    color: var(--color-text-muted);
}
.pill-tab:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.pill-tab.is-active {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(11, 95, 255, .55);
}
.pill-tab.is-active .pill-count { background: rgba(255,255,255,.2); color: #fff; }
.tab-panel[hidden] { display: none; }

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

/* Аватарът в профилната глава се рисуваше ПОД банера (банерът е positioned
   stacking context) и горната му половина изглеждаше „одрязана". */
.profile-head { position: relative; z-index: 2; }
.profile-avatar { position: relative; z-index: 3; }

/* ==========================================================================
   ФОРМИ В WORKSTATION РЕЖИМ — формата НЕ се разтяга на цял екран:
   ограничена ширина + (по избор) лепкав помощен панел отдясно.
   ========================================================================== */
/* Глобален таван: всяка форма остава четима и ЦЕНТРИРАНА, дори без панел */
body.is-app .app-page form.app-form {
    max-width: 920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Двуколонен form layout: помощен панел ВЛЯВО + форма (целият блок центриран) */
.form-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 880px);
    gap: 24px;
    justify-content: center;
    align-items: start;
}
/* по-силен селектор от body.is-app .app-page form.app-form.
   ВСЯКО не-aside дете отива в широката колона (вкл. div-обвивки като при
   гаранциите) — иначе обвивката взимаше order:0 и влизаше в тясната колона. */
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-обвивка (гаранции) запълва колоната */
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 елементи. */
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;
}
.form-layout > .form-aside { order: 1; }

/* „Фактурената" акцентна лента — върху първата карта на всяка форма */
body.is-app .app-page form.app-form > .form-section:first-of-type,
.form-layout > div > form.app-form > .form-section:first-of-type {
    position: relative;
    overflow: hidden;
}
body.is-app .app-page form.app-form > .form-section:first-of-type::before,
.form-layout > div > form.app-form > .form-section:first-of-type::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(90deg, var(--brand-blue) 0%, #6e4bff 55%, var(--brand-amber) 100%);
}

/* Широк вариант (фактурата): лява лента + редакторът заема остатъка */
.form-layout--wide {
    grid-template-columns: 300px minmax(0, 1fr);
    justify-content: stretch;
}

/* Повече въздух в картите на формата (бордерът на input-а не опира в картата) */
body.is-app .app-form .form-section { padding: 26px 28px 28px; }
.form-aside {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-aside .about-card h3 { margin-bottom: 8px; }
.form-aside .tip-row {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.form-aside .tip-row svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--brand-blue); }
@media (max-width: 1180px) {
    .form-layout { grid-template-columns: 1fr; }
    .form-aside { position: static; order: 3; }
}

/* ==========================================================================
   ФАКТУРЕНИЯТ СТИЛ ЗА ВСИЧКИ ФОРМИ — заглавия с кръгла иконка, същите
   размери на полетата, същите карти. (Останалите форми изглеждаха „скучни",
   защото само .invoice-form-v2 носеше тези стилове.)
   ========================================================================== */
/* Кръглата иконка от фактурата — глобален компонент */
.form-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    flex: 0 0 auto;
}
.form-card-icon--brand {
    background: rgba(11, 95, 255, 0.10);
    color: var(--brand-blue);
}

/* Заглавията на секциите — като .form-card-head на фактурата:
   14px uppercase + икона + долна линия по цялата ширина на картата */
body.is-app .app-page form.app-form .form-section > h2 {
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
}

/* Картите на секциите — като .form-card на фактурата.
   БЕЗ padding тук — въздухът (26/28px) се задава по-горе и не бива да се губи. */
body.is-app .app-page form.app-form .form-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

/* Полетата — точните размери от фактурата (9px/12px, 13.5px) */
body.is-app .app-page form.app-form input[type="text"],
body.is-app .app-page form.app-form input[type="email"],
body.is-app .app-page form.app-form input[type="tel"],
body.is-app .app-page form.app-form input[type="url"],
body.is-app .app-page form.app-form input[type="number"],
body.is-app .app-page form.app-form input[type="date"],
body.is-app .app-page form.app-form input[type="search"],
body.is-app .app-page form.app-form input[type="password"],
body.is-app .app-page form.app-form select,
body.is-app .app-page form.app-form textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 13.5px;
    line-height: 1.35;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: #fff;
    color: var(--color-text-primary);
    transition: border-color .12s ease, box-shadow .12s ease;
}
body.is-app .app-page form.app-form input:focus,
body.is-app .app-page form.app-form select:focus,
body.is-app .app-page form.app-form textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.12);
}

/* Етикетите — малки, плътни, като на фактурата */
body.is-app .app-page form.app-form .form-section label > span:first-child {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
body.is-app .app-page form.app-form .form-section > label:not(.legal-check) {
    display: block;
    margin-bottom: var(--space-4);
}
body.is-app .app-page form.app-form .form-section > label:last-child { margin-bottom: 0; }
/* legal-check остава flex (чекбокс + текст на един ред) — block би пуснал
   span-а (display:block от .app-form label > span) на нов ред */
body.is-app .app-page form.app-form .form-section .legal-check {
    display: flex;
    align-items: center;
}
body.is-app .app-page form.app-form .form-section .legal-check > span { margin-bottom: 0; }

/* Таблици с редове (оферти/протоколи/гаранции) — числовите полета не се
   свиват до нечетимост („20" ставаше „2"), по-компактен padding в клетките */
body.is-app .app-page form.app-form .form-section table input[type="number"] { min-width: 72px; }
body.is-app .app-page form.app-form .form-section table input,
body.is-app .app-page form.app-form .form-section table select {
    padding: 8px 10px;
    font-size: 13px;
}

/* Акцентна лента и при форми, започващи с две карти една до друга (офертата) */
body.is-app .app-page form.app-form > .form-grid-2:first-of-type > .form-section {
    position: relative;
    overflow: hidden;
}
body.is-app .app-page form.app-form > .form-grid-2:first-of-type > .form-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(90deg, var(--brand-blue) 0%, #6e4bff 55%, var(--brand-amber) 100%);
}

/* ==========================================================================
   КЛИЕНТСКИ БЛОК (.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; }
body.is-app .app-page form.app-form > .form-section.client-box,
.form-layout > div > form.app-form > .form-section.client-box,
body.is-app .app-page form.app-form > .form-grid-2 > .form-section.client-box {
    overflow: visible;
}

/* Същият капан, друга карта: picker-ът „Към фактура №" в протокола стои в
   ПЪРВАТА .form-section и менюто му свършваше на ръба ѝ — от десет
   предложения се виждаше и кликаше само първото. */
.app-form:has(.invoice-picker) { overflow: visible; }
body.is-app .app-page form.app-form > .form-section:has(.invoice-picker),
.form-layout > div > form.app-form > .form-section:has(.invoice-picker) {
    overflow: visible;
}
.client-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.client-box-head h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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: 12.5px;
    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 .muted-label {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.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,
    .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,
    .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: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-blue);
    background: rgba(11, 95, 255, 0.10);
    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: 11px;
    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: 10.5px;
    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: #fff;
    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: rgba(11, 95, 255, 0.10);
    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;
}
/* Client-type toggle — segmented chip control in card head */
/* Превключвателят ЮЛ/ФЛ се стилизира централно — виж .client-type-toggle. */
/* 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: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    z-index: 20;
}

/* ==========================================================================
   ШИРИНА НА ФОРМИТЕ — 80% от екрана с адекватен таван.
   form-layout страниците (aside + форма): до 1640px.
   Самостоятелните форми (склад, периодични, екип): до 1160px — полетата
   не бива да се разпъват до нечетимост.
   ========================================================================== */
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;
}
body.is-app .app-page .form-layout.form-layout--wide {
    grid-template-columns: 300px minmax(0, 1fr);
}
body.is-app .app-page--list > .container > .app-form:not(.invoice-form-v2) {
    width: min(80vw, 1160px);
    max-width: none !important;
}
@media (max-width: 1180px) {
    body.is-app .app-page .form-layout,
    body.is-app .app-page--list > .container > .app-form:not(.invoice-form-v2) {
        width: 100%;
    }
}

/* ЮЛ/ФЛ превключвател — глобална версия (клиентската форма и бъдещи употреби) */
[data-client-type="physical"] [data-legal-only] { display: none !important; }

/* --- Формата на клиента: значка 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;
}
.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: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-blue);
    background: rgba(11, 95, 255, 0.10);
    border-radius: 4px;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
/* 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; }
/* Превключвател „Юридическо / Физическо лице“ — един общ компонент за формите
   на клиент, фактура и оферта.
   Селекторите нарочно са с два класа: опциите са <label> и вътре в .app-form
   общите правила `.app-form label` (display:block + margin-bottom) иначе
   надделяват и двете опции увисват на различна височина. */
/* .pill-toggle е същият превключвател извън клиентския блок (с ДДС / без ДДС). */
.client-type-toggle,
.pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.client-type-toggle .client-type-opt,
.pill-toggle .pill-opt {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.client-type-toggle .client-type-opt input[type="radio"],
.pill-toggle .pill-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.client-type-toggle .client-type-opt > span,
.pill-toggle .pill-opt > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: 999px;
    transition: all var(--duration-fast);
    white-space: nowrap;
}
.client-type-toggle .client-type-opt input[type="radio"]:checked + span,
.pill-toggle .pill-opt input[type="radio"]:checked + span {
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.client-type-toggle .client-type-opt:hover input[type="radio"]:not(:checked) + span,
.pill-toggle .pill-opt:hover input[type="radio"]:not(:checked) + span {
    color: var(--color-text-secondary);
}

/* В колона на формата превключвателят не се разтяга по цялата ширина. */
.pill-toggle {
    align-self: flex-start;
    margin-top: 6px;
}

/* ==========================================================================
   СПРАВКИ В КЛИЕНТСКИЯ ПАСПОРТ — графика на оборота, платежна дисциплина,
   топ артикули. (clients/view → .insight-grid)
   ========================================================================== */
.insight-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin: 14px 0 18px;
}
@media (max-width: 1380px) { .insight-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (max-width: 1100px) { .insight-grid { grid-template-columns: 1fr 1fr; } .insight-card--chart { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .insight-grid { grid-template-columns: 1fr; } }

.insight-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    padding: 16px 18px;
    min-width: 0;
}
.insight-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.insight-head h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.insight-sub { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.insight-empty { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; padding: 8px 0; }

/* Бар графика — чист CSS, 12 колони */
.bar-chart {
    display: flex;
    align-items: stretch;
    gap: 7px;
    height: 150px;
}
.bar-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    cursor: default;
}
.bar-track {
    flex: 1;
    display: flex;
    align-items: flex-end;
    border-radius: 5px;
    background: linear-gradient(180deg, transparent calc(100% - 1px), var(--color-border) 100%);
}
.bar-fill {
    width: 100%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #6e8bff 0%, var(--brand-blue) 100%);
    transition: filter var(--duration-fast), transform var(--duration-fast);
    min-height: 2px;
}
.bar-col:hover .bar-fill { filter: brightness(1.12); }
.bar-fill--zero { background: var(--color-border); height: 2px !important; border-radius: 2px; }
.bar-label {
    margin-top: 6px;
    font-size: 9.5px;
    text-align: center;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
}

/* Платежна дисциплина */
.discipline-big { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.discipline-days { font-size: 38px; font-weight: 800; line-height: 1; color: var(--color-text-primary); letter-spacing: -0.02em; }
.discipline-unit { font-size: 11.5px; line-height: 1.35; color: var(--color-text-muted); }
.meter-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}
.meter-row strong { font-size: 12.5px; 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), #6e4bff);
}
.meter--soft > span { background: rgba(11, 95, 255, 0.35); }
.meter--warn > span { background: var(--color-warning, #f59e0b); }
.meter--full > span { background: var(--color-danger, #ef4444); }
.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: 11.5px; font-weight: 400; color: var(--color-text-muted); }
.meter--none { opacity: 0.45; }
.discipline-rate .insight-sub { display: block; margin-top: 6px; white-space: normal; }

/* Aging лента на отвореното салдо */
.aging-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.aging-strip {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    gap: 2px;
}
.aging-strip > span { display: block; height: 100%; }
.seg-green  { background: #2eb872; }
.seg-amber  { background: var(--brand-amber); }
.seg-orange { background: #ff7a3d; }
.seg-red    { background: #e5484d; }
.aging-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 8px;
}
.aging-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.aging-lab { font-size: 10.5px; color: var(--color-text-muted); margin-right: 6px; }

/* Топ артикули */
.top-item { margin-bottom: 10px; }
.top-item:last-child { margin-bottom: 0; }
.top-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

/* Ранк чип в hero-то */
.id-meta--rank {
    background: rgba(255, 176, 46, 0.14);
    border: 1px solid rgba(255, 176, 46, 0.45);
    color: #8a5a00;
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 600;
}
.id-meta--rank svg { color: var(--brand-amber); }

/* Компактна визитка на паспорта — хедърът живее в лявата колона,
   дясната (статистики/справки/табове) започва от самия връх. */
.passport-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px -18px rgba(15, 23, 42, .16);
    margin-bottom: 14px;
}
.passport-card-cover {
    position: relative;
    height: 64px;
    background: linear-gradient(118deg, #14224d 0%, var(--brand-blue) 52%, #6e4bff 100%);
    overflow: hidden;
}
.passport-card-body {
    padding: 0 18px 16px;
    text-align: center;
}
.profile-avatar--card {
    width: 72px;
    height: 72px;
    margin: -34px auto 10px;
    border-radius: 18px;
    font-size: 28px;
    border-width: 3px;
}
.passport-card-body h1 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.profile-id-meta--card {
    justify-content: center;
    font-size: 12px;
    gap: 5px 10px;
    margin-bottom: 14px;
}
.profile-id-meta--card .id-meta svg { width: 13px; height: 13px; }
.passport-card-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.passport-card-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

/* Детайлите — втора секция на визитката (една карта, без дублиране) */
.passport-card-details {
    border-top: 1px solid var(--color-border);
    padding: 14px 18px 16px;
    text-align: left;
}
.passport-card-details h3 {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ==========================================================================
   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;
}

/* Компактните 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;
}

/* Месецът в календара на 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;
}

/* ==========================================================================
   ИЗВЕСТИЯ — камбанка в хедъра + страница
   Събитията идват отвън (клиент отваря/приема/отказва проформа), затова им
   трябва място в интерфейса, което преживява презареждане — flash съобщение
   не върши работа.
   ========================================================================== */

.notif-btn { position: relative; }

.notif-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-danger, #e5484d);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Известията са в модал (Trello #105) — един екран вместо падащо пенкало с
   последните 10 плюс отделна страница с целия списък. */
.notif-modal { max-width: 720px; }

/* Скролът е на списъка, не на цялата карта: лентата минаваше през заоблените
   ъгли и ги режеше — същото, което оправихме за шаблоните (Trello #96). */
.notif-modal {
    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 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.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);
}

.notif-modal-tabs { display: flex; gap: 2px; }
.notif-modal-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -11px;
    padding: 6px 12px 10px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.notif-modal-tab:hover { color: var(--color-text-primary); }
.notif-modal-tab.is-active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}
.notif-modal-tab:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}
.notif-modal-tabcount {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    font-size: 11px;
}

/* Филтърът „Непрочетени" скрива прочетените, вместо да ходи до сървъра —
   редовете вече са в 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; }

.notif-modal-foot {
    display: block;
    padding: 10px var(--space-6);
    text-align: center;
    font-size: 12.5px;
    border-top: 1px solid var(--color-border);
    color: var(--brand-blue);
}

@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: 12.5px;
    cursor: pointer;
}
.notif-readall:hover { text-decoration: underline; }

.notif-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 13.5px;
}

.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: rgba(11, 95, 255, .04); }

.notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-item-body strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.notif-item-body small { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.45; }
.notif-item-body time { font-size: 11.5px; color: var(--color-text-muted); }

.notif-item-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.notif-item-actions form { margin: 0; }
.notif-link { font-size: 12.5px; color: var(--brand-blue); white-space: nowrap; }
.notif-done { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

/* Цветна лента отляво според тежестта — отказана проформа трябва да се
   различава от „клиентът я отвори" още с периферното зрение. */
.notif-item--success { box-shadow: inset 3px 0 0 var(--color-success, #16a34a); }
.notif-item--warning { box-shadow: inset 3px 0 0 var(--brand-amber, #ffb02e); }
.notif-item--error   { box-shadow: inset 3px 0 0 var(--color-danger, #e5484d); }

.notif-page-list {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}
.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: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    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; }

/* ==========================================================================
   МОДАЛ ПРИ ИЗДАВАНЕ — имейл или печат
   Издаването е необратимо (заделя номер), затова между клика и действието
   стои изричен избор какво да стане с готовия документ.
   ========================================================================== */
.issue-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.issue-modal[hidden] { display: none; }

.issue-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}

.issue-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--color-bg-card);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    padding: 26px;
}

.issue-modal-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.issue-modal-sub {
    font-size: 13.5px;
    color: var(--color-text-secondary);
    margin-bottom: 18px;
}

.issue-modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.issue-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.issue-option:hover,
.issue-option:focus-visible {
    border-color: var(--brand-blue);
    background: rgba(11, 95, 255, .04);
    outline: none;
}

.issue-option-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(11, 95, 255, .08);
    color: var(--brand-blue);
}

.issue-option-txt { display: flex; flex-direction: column; gap: 2px; }
.issue-option-txt strong { font-size: 14.5px; font-weight: 600; }
.issue-option-txt small { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.45; }

/* Опцията „Изпрати сега" в потвърждението на периодичната се МАРКИРА (после
   се натиска „Запази"), за разлика от опциите при издаване на фактура, които
   подават формата веднага. Затова тя има и състояние „избрана". */
.issue-option[aria-pressed="true"] {
    border-color: var(--brand-blue);
    background: rgba(11, 95, 255, .06);
}
.issue-option-check {
    margin-left: auto;
    align-self: center;
    font-weight: 700;
    color: var(--brand-blue);
}
.issue-option-check[hidden] { display: none; }

/* Отказ/Запази един до друг, вместо един под друг като при фактурата. */
.issue-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

body.modal-open { overflow: hidden; }

.stock-writeoff-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}
.stock-writeoff-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    font-size: 14px;
}
.stock-writeoff-list li + li { border-top: 1px solid var(--color-border); }
.stock-writeoff-name { color: var(--color-text-primary); }
.stock-writeoff-qty { color: var(--color-text-secondary); white-space: nowrap; }
/* Частично изписване — количество на ред. */
.stock-writeoff-list--qty li { align-items: center; }
.stock-writeoff-done {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.stock-writeoff-warn {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-warning, #9a6700);
}
.stock-writeoff-input {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}
.stock-writeoff-input input {
    width: 84px;
    text-align: right;
    padding: 5px 8px;
    font-variant-numeric: tabular-nums;
}
.stock-writeoff-unit {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    min-width: 28px;
}

/* Картата „Склад" на документа. */
.stock-pending, .stock-moves { list-style: none; margin: 8px 0 0; padding: 0; }
.stock-pending li, .stock-moves li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
}
.stock-pending li + li, .stock-moves li + li { border-top: 1px solid var(--color-border); }
.stock-pending span:last-child { color: var(--color-text-secondary); white-space: nowrap; }
.stock-moves { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--color-border); }
.stock-moves li span { color: var(--color-text-secondary); white-space: nowrap; }

.stock-writeoff-wh { display: block; margin-top: 14px; }
.stock-writeoff-wh > span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.stock-writeoff-wh select { width: 100%; }
.stock-writeoff-modal--bulk .issue-modal-card { max-width: 600px; }
.stock-writeoff-modal--bulk .stock-writeoff-list { max-height: 50vh; overflow-y: auto; }
.stock-writeoff-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.stock-writeoff-items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.stock-writeoff-items .stock-writeoff-qty { margin-left: 6px; }

/* ==========================================================================
   МОДАЛ „Създай нов документ" при клиента (Trello #80)
   Шест избора вместо три — картата не се побира на нисък екран, затова тук
   расте на ширина и превърта вътре в себе си, а не изнася заглавието и
   „Отказ" извън екрана.
   ========================================================================== */
.new-doc-modal .issue-modal-card {
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}
.new-doc-modal .new-doc-options {
    overflow-y: auto;
    /* Рамката на фокуса не бива да се реже от скрола. */
    padding: 2px;
    margin: 0 -2px 14px;
}
@media (min-width: 720px) {
    /* На широк екран шестте избора стоят в две колони и се виждат наведнъж. */
    .new-doc-modal .new-doc-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* Модал „Конвертирай" — .issue-option е display:flex, затова опция без URL
   не би се скрила само от атрибута [hidden]. */
.convert-doc-modal .issue-option[hidden] { display: none; }

/* Бележката в модала „Изтрий периодична фактура". Нарочно НЕ е .alert-*:
   app-ux.js превръща всеки такъв елемент в toast и го маха от документа. */
.issue-modal-note {
    display: block;
    margin: 0 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-warning);
    background: var(--color-warning-bg);
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.5;
}
.issue-modal-note[hidden] { display: none; }

/* Бележка в страничните карти на документа (напр. причината за отказ). */
.action-card-note {
    padding: 6px 16px 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* „Изпрати фактура" под полето за плащане в приета проформа. */
.proforma-invoice-form {
    margin: 10px 16px 16px;
}

/* ==========================================================================
   СТАТУСИ НА ДОКУМЕНТИ — палитра за списъка (.status-badge) и за изгледа
   на документа (.badge). Тоновете идват от
   App\Controllers\Invoices::STATUS_LABELS:

     Чернова      gray         с. сив фон / т. сив текст
     Изпратена    blue-soft    светло синьо
     Видяна       blue-soft    светло синьо
     Издадена     blue         синьо (по-наситено от горните)
     Отказана     red          червено
     Частично     orange       бледо жълт фон / т. жълто-кафяв текст
     Платена      green        зелено
     Просрочена   orange-red   с. оранжев фон / червен текст
     Анулирана    gray-strong  с. сив фон / черен текст
     Осчетоводена purple       лилаво

   gray/blue/green/red за таблицата вече са дефинирани по-горе и не се
   пипат — тук са само новите тонове.
   ========================================================================== */

/* --- Списък: .status-badge .status-<тон> --- */
.data-table-v2 .status-gray-strong       { background: var(--slate-100); color: #0F172A; }
.data-table-v2 .status-gray-strong       .status-dot { background: var(--slate-600); }
.data-table-v2 .status-gray-strong:hover { background: var(--slate-200); }

.data-table-v2 .status-blue-soft       { background: var(--color-info-bg-soft); color: #2563EB; }
.data-table-v2 .status-blue-soft       .status-dot { background: #60A5FA; }
.data-table-v2 .status-blue-soft:hover { background: var(--color-info-bg); }

/* „Частично" — бледо жълто. Оранжевият фон остава за „Просрочена"
   (.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: #B91C1C; }
.data-table-v2 .status-orange-red       .status-dot { background: var(--color-danger); }
.data-table-v2 .status-orange-red:hover { background: #FED7AA; }

.data-table-v2 .status-purple       { background: var(--color-purple-bg); color: var(--color-purple-text); }
.data-table-v2 .status-purple       .status-dot { background: var(--color-purple); }
.data-table-v2 .status-purple:hover { background: #DDD6FE; }

/* --- Изглед на документа: .badge-<тон>. Ограничено до .invoice-view, за да
       не мести баджовете в останалите модули (оферти, гаранции, протоколи). --- */
.invoice-view .badge-gray        { background: var(--slate-100);          color: var(--slate-700); }
.invoice-view .badge-gray-strong { background: var(--slate-100);          color: #0F172A; }
.invoice-view .badge-blue-soft   { background: var(--color-info-bg-soft); color: #2563EB; }
.invoice-view .badge-blue        { background: var(--color-info-bg);      color: #1E3A8A; }
.invoice-view .badge-green       { background: var(--color-success-bg);   color: #065F46; }
.invoice-view .badge-orange      { background: var(--color-yellow-bg);    color: var(--color-yellow-text); }
.invoice-view .badge-orange-red  { background: var(--color-orange-bg);    color: #B91C1C; }
.invoice-view .badge-red         { background: var(--color-danger-bg);    color: #991B1B; }
.invoice-view .badge-purple      { background: var(--color-purple-bg);    color: var(--color-purple-text); }

/* „Още действия" вече не е <details> — стои отворена постоянно. Тялото ѝ не
   бива да добавя втори padding върху този на самата карта (правилото
   .action-card-body е писано за collapse варианта, където картата е с
   padding: 0). */
.action-card-v2:not(.action-card-collapse) > .action-card-body {
    padding: 0;
}

/* ==========================================================================
   НАСТРОЙКИ — карти без вложени карти (#settings)
   .settings-content .form-section вече е картата (рамка + фон + padding).
   Глобалният `.app-form` обаче също е карта (рамка, radius, padding: 28px,
   max-width: 820px, margin: 0 auto), затова формите вътре в таб „Банкови
   сметки"/„Номерации"/… се рисуваха като втора рамка, центрирана в първата —
   полетата не съвпадаха със заглавието на секцията, а отстрани оставаха
   бели ивици. Тук `.app-form` се неутрализира само в настройките.
   ========================================================================== */
/* Селекторът нарочно е с тежестта на `body.is-app .app-page form.app-form`
   (max-width: 920px + margin auto), иначе формата остава центрирана в картата. */
.settings-content .app-form,
body.is-app .app-page .settings-content form.app-form {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    overflow: visible;
}

/* Долната лента с бутони.
   Вътре в карта (формите за един ред — сметка, серия, шаблон…) това е кратка
   форма: лепкава лента там оставяше сива ивица напряко на картата, затова е
   обикновен разделител. */
.settings-content .form-section .form-actions {
    position: static;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 14px 0 0;
    margin-top: 14px;
    border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
}
/* Лентата за целия таб („Фирмени данни", „Общи"…) остава лепкава — табовете са
   дълги — но като истинска лента: своя карта над съдържанието, не прозрачна
   ивица, която се врязва в следващата. */
.settings-content > .app-form > .form-actions {
    position: sticky;
    bottom: var(--space-3, 12px);
    z-index: 3;
    margin-top: var(--space-3, 12px);
    padding: 14px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    background: var(--color-bg-card, #fff);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10);
}

/* ---- Списъчните таблици: собствена рамка, която НЕ се допира до рамката на
        картата, и без бели ивици отстрани на сивия header ---------------- */
.settings-content .data-table-wrap {
    margin: 0 0 12px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.settings-content .form-section > .data-table-wrap:last-child { margin-bottom: 0; }
.settings-content .settings-list-table { margin: 0; }
/* Първата/последната клетка да опира до вътрешния ръб на рамката (radius-ът е
   на .data-table-wrap с overflow:hidden, но при overflow-x:auto ъглите се
   правят на самите клетки). */
.settings-content .settings-list-table thead th:first-child,
.settings-content .settings-list-table tbody td:first-child { padding-left: 14px; }
.settings-content .settings-list-table thead th:last-child,
.settings-content .settings-list-table tbody td:last-child { padding-right: 14px; }

/* ---- Подравняване на двойките полета -------------------------------------
   Чекбоксът няма надпис над себе си, затова стоеше залепен за горния ръб на
   реда, а полето до него — с ~26px по-ниско. Ляга на височината на полето. */
.settings-content .app-form .form-grid-2 > .legal-check,
.settings-content .app-form .form-grid-3 > .legal-check,
.settings-content .app-form .form-grid-2 > .form-stack,
.settings-content .app-form .form-grid-3 > .form-stack { align-self: end; }

/* Помощният текст под поле (напр. mod-97 при IBAN) не бива да мести полето до
   него — вече е извън потока на реда. */
.settings-content .app-form .form-grid-2 > label > small,
.settings-content .app-form .form-grid-3 > label > small { display: block; margin-top: 6px; }

/* Целта на „Редактирай" — кратко подсветване, за да е ясно къде е скочила
   страницата. */
.settings-content .form-section.is-edit-target {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.10);
}
.settings-content .form-section.is-edit-target.is-flash {
    animation: settings-edit-flash 1.2s var(--ease-out, ease-out) 1;
}
@keyframes settings-edit-flash {
    0%   { box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.28); }
    100% { box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
    .settings-content .form-section.is-edit-target.is-flash { animation: none; }
}

/* Поле с мерна единица във формите (ДДС %, валута в касата) — рамката е на
   .input-suffix-wrap, затова самото поле вътре е без своя рамка/фон/фокус.
   Селекторите повтарят тежестта на `body.is-app .app-page form.app-form 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, 8px);
    background: var(--color-bg-input, #fff);
    overflow: hidden;
}
.app-form label > span.input-suffix-wrap:hover,
body.is-app .app-page form.app-form label > span.input-suffix-wrap:hover {
    border-color: var(--color-border-strong);
}
.app-form label > span.input-suffix-wrap:focus-within,
body.is-app .app-page form.app-form label > span.input-suffix-wrap:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.12);
}
.app-form label > span.input-suffix-wrap > span.input-suffix {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
body.is-app .app-page form.app-form .input-suffix-wrap input.has-suffix,
body.is-app .app-page form.app-form .input-suffix-wrap input.has-suffix:hover,
body.is-app .app-page form.app-form .input-suffix-wrap input.has-suffix:focus {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}
/* Обвивката поема ширината, която иначе е на самото number поле (160px),
   иначе „%" оставаше в десния край на клетката, на педя от полето. */
.settings-content .app-form .input-suffix-wrap {
    width: 176px;
    max-width: 100%;
}

/* Гаранции — картата „Добави събитие" (Trello: гаранции).
   Тя е ОТДЕЛНА форма под основната и допираше нейните бутони „Отказ/Запази" —
   изглеждаше като част от тях. Разстоянието я отделя визуално, за да е ясно, че
   „Добави събитие" не запазва гаранцията. */
.warranty-event-section {
    margin-top: var(--space-6);
}
/* Описанието е на собствен ред и заема цялата ширина — в него се пише
   изречение, а не дума. */
.warranty-event-form .warranty-event-desc {
    display: block;
    margin-top: var(--space-3);
}
.warranty-event-form .warranty-event-desc textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
}

/* Гаранции — колоната „Събития".
   Не е 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);
}

/* ==========================================================================
   KPI БОРД на Начало (App/View/dashboard/_kpi_board.phtml) — два реда по 4
   плочки, всяка с два подреда. Подредовете се четат хоризонтално през четирите
   плочки, затова клетките са flex: 1.
   ========================================================================== */
.kpi-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.kpi-board-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.kpi-board-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.kpi-board-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.kpi-board-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
}
.kpi-board-row--income .kpi-board-title::before { background: var(--color-success); }
.kpi-board-row--expense .kpi-board-title::before { background: var(--color-orange); }
.kpi-board-notice {
    font-size: var(--text-caption);
    color: var(--brand-amber-dark);
    background: var(--color-warning-bg);
    border-radius: var(--radius-full);
    padding: 2px 10px;
}

/* Тонът минава през променлива — иначе всяка комбинация „тон × подред" иска правило. */
.kpi-strip--duo .kpi-item { --kpi-tone: var(--color-text-primary); }
.kpi-strip--duo .kpi-brand   { --kpi-tone: var(--brand-blue); }
.kpi-strip--duo .kpi-warn    { --kpi-tone: var(--brand-amber-dark); }
.kpi-strip--duo .kpi-danger  { --kpi-tone: var(--color-danger); }
.kpi-strip--duo .kpi-success { --kpi-tone: #15803d; }
.kpi-strip--duo .kpi-info    { --kpi-tone: var(--color-purple-text); }
.kpi-strip--duo .kpi-orange  { --kpi-tone: var(--color-orange-text); }

.kpi-info::before   { background: var(--color-purple); }
.kpi-orange::before { background: var(--color-orange); }
.kpi-strip .kpi-info .kpi-icon   { background: var(--color-purple-bg); color: var(--color-purple-text); }
.kpi-strip .kpi-orange .kpi-icon { background: var(--color-orange-bg); color: var(--color-orange-text); }

.kpi-strip--duo { margin-bottom: 0; }
/* Падингът слиза в клетките, за да може hover-ът да оцветява целия подред. */
.kpi-strip--duo .kpi-item {
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* Всяка половина е свой линк — вдига се клетката, не цялата плочка. */
.kpi-strip--duo .kpi-item:hover { transform: none; box-shadow: none; }
.kpi-strip--duo .kpi-head {
    padding: var(--space-3) var(--space-4) 0;
    margin-bottom: var(--space-2);
}
.kpi-strip--duo .kpi-icon { width: 32px; height: 32px; border-radius: 10px; }
.kpi-strip--duo .kpi-icon svg { width: 16px; height: 16px; }

.kpi-duo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.kpi-duo-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
    text-decoration: none;
    color: inherit;
    transition: background var(--duration-fast) var(--ease-out);
}
.kpi-duo-cell + .kpi-duo-cell { border-top: 1px solid var(--color-border); }
/* Глобалният `a:hover` в design-base.css е по-специфичен — цветът се връща изрично. */
.kpi-duo-cell:hover,
.kpi-duo-cell:focus-visible {
    background: var(--color-bg-subtle);
    color: inherit;
}
.kpi-duo-cell:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.kpi-duo-cell--empty { pointer-events: none; }

.kpi-duo-period {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.kpi-duo-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text-primary);
}
/* Тонът е само горе — така подредовете се четат като два реда, не като 8 числа. */
.kpi-duo-cell:first-child .kpi-duo-value { color: var(--kpi-tone); }
.kpi-duo-cell--success .kpi-duo-value { color: #15803d; }
.kpi-duo-note {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    min-height: 1.25em;
}

@media (max-width: 1100px) {
    .kpi-strip--duo { grid-template-columns: repeat(2, 1fr); }
}
/* На телефон плочките остават две на ред — осем цели-широки карти изтласкват
   графиката екран и половина надолу. */
@media (max-width: 640px) {
    .kpi-duo-value { font-size: 17px; }
    .kpi-duo-cell { padding: var(--space-2) var(--space-3) var(--space-3); gap: 1px; }
    .kpi-strip--duo .kpi-head { padding: var(--space-3) var(--space-3) 0; }
    .kpi-strip--duo .kpi-icon { width: 26px; height: 26px; border-radius: 8px; }
    .kpi-strip--duo .kpi-icon svg { width: 13px; height: 13px; }
    /* Два реда за всички бележки — иначе пренесената разминава разделителната
       линия между двете съседни плочки. */
    .kpi-duo-note { font-size: 11px; min-height: 2.6em; }
}
@media (max-width: 360px) {
    .kpi-strip--duo { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SEO: ключовата дума в H1 и страницата за 404
   ========================================================================== */

/* Надзаглавието е вътре в H1 на началната страница — изглежда като
   .hero-tag, но стои на собствен ред и не наследява едрия шрифт и сбитата
   разредка на заглавието. */
.hero-title .hero-tag--in-title {
    display: flex;
    width: fit-content;
    margin: 0 auto var(--space-5);
    letter-spacing: normal;
    line-height: 1.4;
}

.error-page {
    padding: var(--space-20) 0 var(--space-16);
    text-align: center;
}

.error-page .error-code {
    margin: 0 0 var(--space-2);
    font-size: clamp(64px, 12vw, 112px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--brand-blue);
    opacity: .18;
}

.error-page h1 {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: var(--space-3);
}

.error-page .error-lead {
    max-width: 46ch;
    margin: 0 auto var(--space-6);
    color: var(--color-text-secondary);
}

.error-page .error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}