/* Account area (design v3 „Dashboard“, docs/design/v3.md) – builds on core/static/css/traxer.css:
   .app-layout / .side-nav / .app-main, .kpis / .kpi, .panel, .daybox, .bar, .match, .reasons, forms, alerts.
   This file keeps the account-only pieces: the app shell (the sidebar with its icons and the company card, the phone
   strip), the page head inside the main column, the one-column layout of the auth pages, the dashboard and its
   „Първи стъпки“, and the legacy rows / 2FA blocks. */

/* ------------------------------------------------------------ layout */
/* With the sidebar the app spans the window (as the mock-up's dashboard): the header follows it, and the
   footer sits directly under the sidebar's canvas. */
body:has(.app-layout > .side-nav) .site-header > .container { max-width: none; }
main:has(> .app-layout) + .site-footer { margin-top: 0; }
main:has(> .app-layout) { display: flex; flex-direction: column; }
main > .app-layout { flex: 1 0 auto; width: 100%; }
.acct-main { gap: 0; padding-bottom: var(--s-9); }
.acct-body { min-width: 0; }
.acct-body > .section:first-child { padding-top: 0; }
.acct-body > .section:last-child { padding-bottom: 0; }
.acct-body .rows + p, .acct-body .rows + .small { margin-top: 12px; }
.side-nav a.is-parent { color: var(--ink); font-weight: 500; }
.side-nav__sub { margin: 2px 0 4px 12px !important; padding-left: 8px !important; border-left: 1px solid var(--line); }
.side-nav__sub a { font-size: 13.5px; padding-block: 6px; }

/* the sidebar (design v3): 248px on the canvas, an icon before each item (a CSS mask: the links keep their plain
   text), the counts in Montserrat on the right, the current page white with the accent icon */
.app-layout { grid-template-columns: 248px minmax(0, 1fr); border-bottom-color: var(--line-soft); }
.side-nav { padding: 20px 14px; border-right-color: var(--line-soft); }
.side-nav a { justify-content: flex-start; min-height: 38px; padding: 0 10px 0 12px; font-weight: 500; }
.side-nav [class*="sn-"] > a::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--faint-deco);
  -webkit-mask: var(--ic) center / 16px no-repeat; mask: var(--ic) center / 16px no-repeat; }
.side-nav a[aria-current="page"] { font-weight: 600; }
.side-nav [class*="sn-"] > a[aria-current="page"]::before, .side-nav [class*="sn-"] > a.is-parent::before { background: var(--accent); }
.side-nav .num { margin-left: auto; color: var(--muted); }
.side-nav hr { margin: 10px 4px; }
.side-nav .sn-grid > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='2'/%3E%3C/svg%3E"); }
.side-nav .sn-target > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000'/%3E%3C/svg%3E"); }
.side-nav .sn-bookmark > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
.side-nav .sn-search > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.side-nav .sn-clipboard > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E"); }
.side-nav .sn-folder > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.side-nav .sn-tool > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3.5 17.5a2.1 2.1 0 0 0 3 3l5.8-5.8a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.side-nav .sn-chart > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V11M10 20V5M16 20v-6M21 20H3'/%3E%3C/svg%3E"); }
.side-nav .sn-building > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M15 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M3 21h18M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
.side-nav .sn-receipt > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.side-nav .sn-repeat > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16'/%3E%3Cpath d='M3 12A9 9 0 0 1 18.5 5.8L21 8'/%3E%3Cpath d='M21 3v5h-5M3 21v-5h5'/%3E%3C/svg%3E"); }
.side-nav .sn-users > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5'/%3E%3C/svg%3E"); }
.side-nav .sn-card > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.side-nav .sn-lock > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E"); }
.side-nav .sn-settings > a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
/* the company under the menu: name, ЕИК, verified or not, the role */
.side-card { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.side-card p { margin: 0; }
.side-card__name { font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.side-card__meta { font-size: 12.5px; color: var(--muted); }
.side-card__role { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px !important; font-size: 12.5px; color: var(--muted); }
.side-card .pill { min-height: 20px; padding: 0 8px; font-size: 11.5px; gap: 5px; }
.side-card .dot { width: 6px; height: 6px; }

@media (max-width: 900px) {
  /* phones and tablets: the menu is a strip of pills under the header, the current one navy (the mock-up) */
  .app-layout { grid-template-columns: 1fr; }
  .side-nav { padding: 10px 40px 10px var(--gutter); gap: 6px; border-bottom-color: var(--line-soft);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .side-nav ul { gap: 6px; }
  .side-nav a { min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg);
    font-size: 13px; gap: 6px; }
  .side-nav [class*="sn-"] > a::before { display: none; }
  .side-nav a[aria-current="page"], .side-nav a.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; box-shadow: none; }
  .side-nav a[aria-current="page"] .num { color: var(--line-strong); }
  .side-nav .num { margin-left: 0; font-size: 11.5px; }
  .side-nav > ul + ul::before { content: ""; align-self: center; width: 1px; height: 18px; background: var(--line); margin-right: 2px; }
  .side-nav li:has(> .side-nav__sub), .side-nav__sub { display: contents !important; }
  .side-nav__sub a { font-size: 13px; }
  .side-card { display: none; }
}

/* page head: title (+ overline, lede) left, one action right */
.acct-main { padding: 28px 32px var(--s-9); }
.acct-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin: 0 0 var(--s-6); }
.acct-head .app-main__title { font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.acct-head__action .ic16 { margin-right: -2px; }
/* the dashboard's line under the greeting: the date and the last sync („Поръчките са обновени в 14:32“) */
.acct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.acct-meta__sync { display: inline-flex; align-items: center; gap: 6px; }
.acct-meta .ic16 { color: var(--faint-deco); flex: none; }
.acct-meta--text { display: block; }
.acct-head__text { min-width: 0; flex: 1 1 420px; }
.acct-head__overline:empty { display: none; }
.acct-head__overline { margin-bottom: 8px; }
.acct-head__overline a { color: inherit; text-decoration: none; }
.acct-head__overline a:hover { text-decoration: underline; }
.acct-head .app-main__title { text-wrap: balance; overflow-wrap: anywhere; }
.acct-head .lede, .acct-head .lead { margin-top: 8px; font-size: 15px; max-width: 47.664em; } /* 72ch */
.acct-head > .btn, .acct-head__actions { flex: none; }
@media (max-width: 640px) {
  .acct-main { padding: 20px var(--gutter) 40px; }
  .acct-head { margin-bottom: var(--s-5); align-items: flex-start; }
  .acct-head .app-main__title { font-size: 24px; }
  .acct-head > .acct-head__action { flex: 1 1 100%; }
}

/* auth pages (logged out, or a page that blanks acct_nav): one centred column */
.app-layout--solo, .app-layout:not(:has(> .side-nav)) { display: block; min-height: 0; background: var(--canvas); border-bottom: 1px solid var(--line); }
.app-layout--solo > .acct-main, .app-layout:not(:has(> .side-nav)) > .acct-main {
  max-width: 528px; margin: 0 auto; padding: var(--s-9) var(--gutter) var(--s-10); display: block; }
.app-layout--solo .form, .app-layout:not(:has(> .side-nav)) .form { max-width: none; }
.app-layout--solo .acct-body, .app-layout:not(:has(> .side-nav)) .acct-body {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px; }
.app-layout--solo .acct-head, .app-layout:not(:has(> .side-nav)) .acct-head { margin-bottom: var(--s-5); }
.app-layout--solo:has(.form--wide) > .acct-main, .app-layout:not(:has(> .side-nav)):has(.form--wide) > .acct-main { max-width: 860px; }
@media (max-width: 640px) {
  .app-layout--solo > .acct-main, .app-layout:not(:has(> .side-nav)) > .acct-main { padding-block: var(--s-7) var(--s-9); }
  .app-layout--solo .acct-body, .app-layout:not(:has(> .side-nav)) .acct-body { padding: 20px 16px; border-radius: var(--r); }
}

/* ------------------------------------------------------------ dashboard (design v3 „Dashboard“) */
.dash { display: grid; gap: var(--s-5); }
.dash > .alert { margin: 0; }
.dash .kpis { margin: 0; }
.kpi__value--none { color: var(--faint); }
.kpi__note .link { font-size: 12.5px; }
.kpi__link { color: inherit; text-decoration: none; }
.kpi__link:hover { color: var(--accent-ink); }
/* KPI tiles: label + icon, the big figure (a pill beside it), a note */
.dash-kpis .kpi { padding: 16px 18px 15px; border-radius: 16px; box-shadow: var(--shadow-sm); }
.dash-kpis .kpi__label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-kpis .kpi__label .ic16 { color: var(--faint-deco); flex: none; }
.dash-kpis .kpi__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 30px; line-height: 1.1; }
.dash-kpis .kpi__pill { min-height: 20px; font-size: 11.5px; font-family: var(--font-sans); letter-spacing: 0; }
.dash-kpis .kpi__note { margin: 6px 0 0; font: 400 12.5px/1.45 var(--font-sans); letter-spacing: 0; color: var(--muted); }
.kpi__strong { font-weight: 600; }
.kpi-amt { font-weight: 500; color: var(--ink-2); }
.kpi-amt__c { color: var(--faint); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.dash-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid--start { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.dash-col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.dash .panel__head { min-height: 62px; padding-block: 12px; }
.dash .panel__head .btn--text { min-height: 34px; margin-right: -8px; }
.dash-panel { padding: 0; overflow: hidden; box-shadow: var(--shadow-sm); border-radius: 16px; }
/* a panel's head: the title (with a line under it) and one text link; the rows below carry the separators */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.dash-head h2 { font: 700 17px/1.3 var(--font-display); letter-spacing: -.01em; margin: 0; }
.dash-head h2 .pill { vertical-align: 2px; margin-left: 6px; }
.dash-head__sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.dash-link { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--accent); text-decoration: none; }
.dash-link:hover { color: var(--accent-ink); }
@media (max-width: 1180px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid, .dash-grid--even, .dash-grid--start { grid-template-columns: 1fr; }
  /* one column: deadlines, (another branch's block), new tenders, documents, balance, the tools, the company */
  .dash-grid--main > .dash-col { display: contents; }
  .dash-grid--main .dash-panel--deadlines { order: 1; } .dash-grid--main .dash-col--side > :not(.dash-panel) { order: 2; }
  .dash-grid--main .dash-panel--new { order: 3; } .dash-grid--main .dash-panel--docs { order: 4; }
  .dash-grid--main .dash-billing { order: 5; } .dash-grid--main .dash-panel--tools { order: 6; }
  .dash-grid--main .dash-panel--company { order: 7; }
}

/* rows inside the dashboard panels */
.dash-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.panel__head + .dash-row, .panel__head + .dash-empty, .dash-firms > .dash-row:first-child { border-top: 0; }
.dash-row--match { grid-template-columns: minmax(0, 1fr) auto; }
.dash-row--doc { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 13px 20px; }
.dash-row--firm { grid-template-columns: minmax(0, 1fr) auto; }
.dash-row__main, .dl-row__main, .nt-row__main { min-width: 0; }
.dash-row__title { margin: 0; font: 600 14.5px/1.35 var(--font-sans); letter-spacing: 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-row--doc .dash-row__title, .dash-row--firm .dash-row__title { display: block; font-size: 14px; }
.dash-row__title a { color: inherit; text-decoration: none; }
.dash-row__title a:hover { color: var(--accent); }
.dash-row__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
/* the deadlines' and the new tenders' meta: separate facts (each in its own span) with a gap */
.dl-row .dash-row__meta, .nt-row .dash-row__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.dash-row .reasons { margin-top: 4px; font-size: 12px; }
.dash-row form { margin: 0; }
.dash-empty { padding: 4px 20px 20px; color: var(--muted); font-size: 14px; display: grid; gap: 10px; justify-items: start;
  border-top: 1px solid var(--line-soft); padding-top: 16px; }
.dash-empty p { margin: 0; }

/* „Предстоящи срокове“: day counter | tender | the state (package, readiness bar, what we wait for) */
.dl-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 212px; gap: 16px; align-items: center; padding: 14px 20px;
  border-top: 1px solid var(--line-soft); }
.dl-row .daybox { width: 56px; height: 56px; min-width: 0; padding: 0; border-radius: 12px; line-height: 1; }
.dl-row .daybox b { font: 600 21px/1 var(--font-num); letter-spacing: -.02em; }
.dl-row .daybox span { font-size: 11px; font-weight: 600; margin-top: 4px; }
.daybox--word b { font: 600 14px/1 var(--font-sans) !important; letter-spacing: 0 !important; }
.dl-row__event { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); }
.dl-state { min-width: 0; }
.dl-state__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dl-state__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-state__top .pill { min-height: 20px; font-size: 11.5px; padding: 0 8px; flex: none; }
.dl-state__pct { font-size: 13px; }
.dl-state .bar { margin-top: 7px; }
.dl-state .bar--warn > i { background: var(--warn); }
.dl-state__note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.dl-state__note a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.dl-state__note--wait { color: var(--warn-ink); font-weight: 600; }
.dl-state__note .dot { width: 6px; height: 6px; }
.dash-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 20px;
  border-top: 1px solid var(--line-soft); background: var(--canvas); font-size: 13px; color: var(--muted); }
.dash-strip__cal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dash-strip__cal .ic16 { color: var(--faint-deco); }
.dash-strip a { color: var(--accent); font-weight: 600; text-decoration: none; }
.dash-strip__end { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }

/* „Нови поръчки за Вас“: tender + reasons | value and days | match % */
.dash-hint { display: flex; align-items: center; gap: 10px; margin: 0 20px 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--canvas); font-size: 12.5px; color: var(--muted); }
.dash-hint .ic16 { color: var(--muted); flex: none; }
.dash-hint span { flex: 1; min-width: 0; }
.dash-hint a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.nt-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px 96px; gap: 18px; align-items: start; padding: 15px 20px;
  border-top: 1px solid var(--line-soft); }
.nt-row__val { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.nt-row__val .t-val { font-size: 14.5px; }
.nt-row__days { font-size: 12px; color: var(--muted); white-space: nowrap; }
.nt-row__none { font-size: 12.5px; color: var(--faint); }
.nt-row__match { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.nt-row .match { flex-direction: column; align-items: flex-end; gap: 7px; }
.nt-row .match__txt { font-size: 20px; line-height: 1.1; }
.nt-row .match__bar { width: 64px; height: 5px; }
.nt-row .match__bar--mid i { background: var(--warn); }
.nt-row__mlabel { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.nt-row .match--none { font-size: 12px; white-space: normal; }
/* the reasons as chips: ✓ green, ⚠ orange, ✕ red – the same <ul class="reasons"> with its details for screen readers */
.nt-row .reasons { gap: 6px; margin-top: 9px; }
.nt-row .reasons li { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; background: var(--soft); color: var(--ink-2); white-space: nowrap; }
.nt-row .reasons li::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: var(--rm) center / 11px no-repeat; mask: var(--rm) center / 11px no-repeat;
  --rm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23000'/%3E%3C/svg%3E"); }
.nt-row .reasons .is-ok { background: var(--ok-soft); color: var(--ok); }
.nt-row .reasons .is-ok::before { --rm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.nt-row .reasons .is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.nt-row .reasons .is-warn::before { --rm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20z'/%3E%3Cpath d='M12 10v5'/%3E%3C/svg%3E"); }
.nt-row .reasons .is-crit { background: var(--crit-soft); color: var(--crit); }
.nt-row .reasons .is-crit::before { --rm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

/* „Документи, които изтичат“: an icon tile by kind, coloured by urgency */
.doc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--ink-2); }
.doc-ic--warn { background: var(--warn-soft); color: var(--warn); }
.doc-ic--crit { background: var(--crit-soft); color: var(--crit); }
.doc-ic--ok { background: var(--ok-soft); color: var(--ok); }
.doc-left { font-weight: 600; }

/* „Абонамент“ (subscriptions/_dash_tile.html, the mock-up's subscription tile): a navy head with the plan, its discount
   and two figures, then the minimum term, the next payment and the actions – every figure from the card */
.dsub__top { position: relative; overflow: hidden; padding: 20px 20px 18px; background: var(--ink); color: #FFFFFF; }
.dsub__top::after { content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 91, 234, .45), rgba(47, 91, 234, 0)); pointer-events: none; }
.dsub__top > * { position: relative; z-index: 1; }
.dsub__eb { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #8A94A6; }
.dsub__status { margin-left: auto; min-height: 20px; padding: 0 8px; font-size: 11px; letter-spacing: 0; text-transform: none;
  background: rgba(255, 255, 255, .12); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .18); }
.dsub__status--warn { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.dsub__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; color: #FFFFFF;
  font: 800 24px/1.2 var(--font-display); letter-spacing: -.03em; }
.dsub__name--offer { font-size: 20px; }
.dsub__pct { min-height: 24px; padding: 0 9px; font-size: 12px; letter-spacing: 0; background: rgba(255, 255, 255, .12); color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .18); }
.dsub__line { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--line-strong); }
.dsub__line .num { color: #FFFFFF; }
.dsub__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12); }
.dsub__stats > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
.dsub__stats > div + div { padding-left: 16px; margin-left: 16px; border-left: 1px solid rgba(255, 255, 255, .12); }
.dsub__stats dt { font-size: 12px; line-height: 1.35; color: #8A94A6; }
.dsub__stats dd { margin: 0; font-size: 13px; color: #8A94A6; }
.dsub__stats b { font: 600 24px/1.15 var(--font-num); letter-spacing: -.01em; color: #FFFFFF; }
.dsub__stats small { font-size: 13px; white-space: nowrap; }
.dsub__body { display: grid; gap: 12px; padding: 16px 20px 18px; }
.dsub__body > * { margin: 0; }
.dsub__term > p { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-2); }
.dsub__term-v { font-weight: 500; color: var(--muted); }
.dsub__term-v .num { font-weight: 600; color: var(--ink); }
.dsub__met { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dsub__bar { width: 100%; max-width: none; margin-top: 9px; height: 8px; }
.dsub__bar > i { max-width: 100%; background: var(--ink); }
.dsub__bar--met > i { background: var(--ok); }
.dsub__term .dsub__uses { margin: 8px 0 0; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.dsub__next { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); }
.dsub__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg);
  border: 1px solid var(--line); color: var(--ink-2); }
.dsub__next p { margin: 0; }
.dsub__k { font-size: 12px; color: var(--muted); }
.dsub__v { font-size: 14px; font-weight: 600; color: var(--ink); }
.dsub__vat { font-weight: 500; color: var(--faint); }
.dsub__end { font-size: 13px; color: var(--ink-2); }
.dsub__unpaid { margin: 0; font-size: 13px; }
.dsub__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dsub__acts .btn { flex: 1 1 0; min-width: max-content; gap: 6px; }
.dsub__fine { font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1180px) { .dash-grid--main .dash-panel--subscription { order: 2; } }

/* the balance with its latest movements */
.dash-bal { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.dash-bal p { margin: 0; }
.dash-bal__label { margin: 0; font: 400 13px/1.4 var(--font-sans); letter-spacing: 0; color: var(--muted); }
.dash-bal__amount { margin-top: 2px !important; }
.dash-bal__amount .bal-amt { font: 600 26px/1.1 var(--font-num); letter-spacing: -.02em; color: var(--ink); }
.bal-amt__c { color: var(--faint-deco); font-weight: 500; }
.dash-bal__note { margin-top: 4px !important; font-size: 12px; color: var(--faint); }
.ledger-rows { list-style: none; margin: 0; padding: 0; }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 20px;
  border-top: 1px solid var(--line-soft); }
.ledger-row p { margin: 0; }
.ledger-row__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.ledger-row__meta { margin-top: 2px !important; font-size: 12px; color: var(--muted); }
.ledger-row__amount { text-align: right; white-space: nowrap; }
.ledger-row__amount .bal-amt { font: 600 14px var(--font-num); color: var(--ink); }
.ledger-row__amount--in .bal-amt { color: var(--ok); }
.dash-bal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line-soft); }
.dash-billing__amount { margin: 6px 0 0; font-size: 32px; }

/* „Първи стъпки“ (design v3, prev-New5) */
.fs__count { font-size: 13px; color: var(--muted); }
.fs__bar { width: auto; margin: 0 20px 6px; }
.fs__steps { list-style: none; margin: 0; padding: 0; }
.fs-step { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.fs-step--current { background: var(--canvas); }
.fs-step__mark { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); color: var(--faint-deco); font: 600 12px/1 var(--font-num); }
.fs-step--done .fs-step__mark { border: 0; background: var(--ok-soft); color: var(--ok); }
.fs-step--current .fs-step__mark { border: 2px solid var(--accent); color: var(--accent); }
.fs-step__main { flex: 1; min-width: 0; }
.fs-step__main p { margin: 0; }
.fs-step__title { font-weight: 600; font-size: 15px; line-height: 1.4; }
.fs-step--done .fs-step__title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint-deco); }
.fs-step__text { margin-top: 2px !important; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.fs-step__link { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.fs-step form { margin: 0; flex: none; }
.fs-step .pill { flex: none; }
.fs-firm { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 20px 18px; }
.fs-firm p { margin: 0; }
.fs-firm__name { font-weight: 600; overflow-wrap: anywhere; }
.fs-firm__meta { font-size: 13px; color: var(--muted); }
.fs-get { background: linear-gradient(180deg, var(--bg), var(--canvas)); }
.fs-get__list { list-style: none; margin: 0; padding: 0 20px 18px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.fs-get__list li { display: flex; gap: 8px; align-items: baseline; }
.fs-get__list .ic16 { flex: none; color: var(--ok); transform: translateY(1px); }
.fs-get__list b { color: var(--ink); }

@media (max-width: 640px) {
  .dash-kpis { gap: 10px; }
  .dash-kpis .kpi { padding: 13px 14px; }
  .dash-kpis .kpi__value { font-size: 24px; }
  .dash-kpis .kpi__note { font-size: 12px; }
  .dash, .dash-col { gap: 16px; }
  .dash-head { padding: 16px 16px 12px; align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
  .dash-head > div { flex: 1 1 200px; min-width: 0; }
  .dash-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; }
  .dash-row--match, .dash-row--firm { grid-template-columns: minmax(0, 1fr) auto; }
  .dash-row--doc { grid-template-columns: 36px minmax(0, 1fr); align-items: start; padding: 12px 16px; }
  .dash-row--doc > .btn { grid-column: 2; justify-self: start; }
  .dash-row .daybox { min-width: 56px; }
  .dash-row > .btn { padding-inline: 12px; }
  .dash .panel__head { padding: 16px; }
  .dash-empty { padding: 14px 16px 16px; }
  .dl-row { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; padding: 14px 16px; }
  .dl-row .daybox { width: 48px; height: 48px; }
  .dl-row .daybox b { font-size: 18px; }
  .dl-state { grid-column: 2 / -1; }
  .dash-strip { padding: 12px 16px; }
  .dash-hint { margin: 0 16px 12px; align-items: flex-start; flex-wrap: wrap; }
  .nt-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; }
  .nt-row__val { grid-column: 1; grid-row: 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; text-align: left; }
  .nt-row__match { grid-column: 2; grid-row: 1; }
  .nt-row .reasons { margin-top: 8px; }
  .dash-bal { padding: 16px 16px 12px; }
  .ledger-row { padding: 11px 16px; }
  .dash-bal__actions { padding: 12px 16px 14px; }
  .fs-step { padding: 14px 16px; flex-wrap: wrap; }
  .fs-step__main { flex-basis: calc(100% - 40px); }
  .fs-step > form, .fs-step > .fs-step__link, .fs-step > .pill { margin-left: 40px; }
  .fs__bar { margin-inline: 16px; }
  .fs-firm { padding: 0 16px 16px; }
  .fs-get__list { padding: 0 16px 16px; }
}

/* „Инструменти“ (accounts/_dash_tools.html): what the balance opens, or the links to the open tools */
.dash-tools { display: grid; gap: 12px; justify-items: start; border-top: 1px solid var(--line-soft); }
.dash-tools p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 41em; }
.dash-tools p.small { font-size: 12.5px; color: var(--muted); }
.dash-tools p.dash-tools__label { font-size: 13px; color: var(--muted); }
/* the tools as small chips: locked ones grey, open ones links */
.dash-tools__list, .dash-tools__links { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 13px; }
.dash-tools__list li { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--soft); color: var(--ink-2); }
.dash-tools__links a { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.dash-tools__links a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .dash-tools { padding: 16px; } }

/* the company panel */
.dash-kv { padding: 4px 20px 8px; border-top: 1px solid var(--line-soft); }
.dash-kv > div { grid-template-columns: 170px minmax(0, 1fr); padding: 11px 0; font-size: 14px; }
.dash-kv dt { font-size: 13px; }
.dash-firms { list-style: none; margin: 0; padding: 0; }
.status-dot--warn { background: var(--warn); }
@media (max-width: 640px) { .dash-kv { padding-inline: 16px; } .dash-kv > div { grid-template-columns: 1fr; } }

/* staff overview (accounts/_dash_staff.html): five tiles that open the admin list they count, the latest
   ЦАИС ЕОП syncs and the quick links. 5 → 3 (the sync tile spans two) → 2 (the sync tile spans the row). */
.kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis--5 > .kpi--wide { grid-column: span 2; } }
@media (max-width: 900px) { .kpis--5 { grid-template-columns: 1fr 1fr; } }
.kpi--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.kpi--link > span { display: block; }
.kpi--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); color: inherit; }
.kpi--link:focus-visible { outline: 0; box-shadow: var(--ring); }
.kpi--crit { border-color: #F4CCC5; background: var(--crit-soft); }   /* the border of .alert--crit */
.kpi--crit.kpi--link:hover { border-color: var(--crit); }
.kpi--crit .pill { background: var(--bg); }
.kpi .pill { vertical-align: 1px; margin-right: 4px; }
.dash-row--sync, .dash-row--link { grid-template-columns: minmax(0, 1fr) auto; }
.dash-row--link { position: relative; }
.dash-row--link:hover { background: var(--canvas); }
.dash-row--link .dash-row__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.dash-row--link > .ic { color: var(--faint-deco); }
.dash-row--link:hover > .ic { color: var(--accent); }

/* ------------------------------------------------------------ forms */
.code-input {
  font: 600 28px/1.2 var(--font-num); letter-spacing: .3em; text-align: center; max-width: 260px;
}

/* ------------------------------------------------------------ rows (team, sessions, saved searches) */
.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 20px;
  border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row__main { min-width: 0; flex: 1 1 260px; }
.row__title { font-weight: 500; overflow-wrap: anywhere; }
.row__meta { font-size: 13px; color: var(--muted); }
.row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.row__actions form { margin: 0; display: flex; gap: 10px; align-items: center; }
.row__actions .select-underline, .row__actions .select { min-height: 34px; font-size: 14px; }
@media (max-width: 640px) { .row { padding: 14px 16px; } }

/* ------------------------------------------------------------ 2FA setup */
.totp { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
@media (max-width: 640px) { .totp { grid-template-columns: 1fr; } }
.qr { width: 220px; max-width: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.qr svg { width: 100%; height: auto; display: block; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; overflow-wrap: anywhere; }
.codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.codes li { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; letter-spacing: .08em; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* quiet text actions in lists ("Премахни", "Оттегли", "Прекрати всички други") */
.acct-body .link-button.small { font-size: 13px; color: var(--muted); }
.acct-body .link-button.small:hover { color: var(--crit); }

/* „Продължаване с Google“ (accounts/_google_button.html): a white bordered button with Google's „G“, never the blue
   primary of the view; below it the divider to the form. */
.google-signin { max-width: 420px; margin: 0 0 8px; }
.btn--google { gap: 12px; min-height: 46px; font-weight: 600; }
.btn--google:hover { border-color: var(--faint-deco); }
.google-signin__mark { flex: none; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--faint); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }