/* vk-shell.css: QuoteCall's additions to the Vk shell (components.css): brand, rail extras, launcher search, account flyout,
 * notifications, page transitions, toasts/messages/busy for ABP. Tokens only (tokens.css), light and dark. */

/* dark mode: components that use the light-only greys (--neutral-10/25) */
html[data-color-scheme="dark"] .vk-btn--tertiary { background: #24282e; border-color: #24282e; }
html[data-color-scheme="dark"] .vk-tab:hover, html[data-color-scheme="dark"] .vk-stage:not(.is-done):not([aria-current]) { background: #24282e; }
html[data-color-scheme="dark"] .vk-stage:not(.is-done):not([aria-current]) { color: var(--color-text-secondary); }

/* ---------- icons (sprite, Lucide; stroke tuned to the reference's ~1.5px at 20px) ---------- */
.vk-i:not([width]) { width: 20px; height: 20px; }
.vk-i { flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.vk-i--spin { animation: vk-spin .8s linear infinite; }

/* ---------- brand (D3, docs/brand): .qc-mark the Symbol (_QuoteCallMark), .qc-lockup the logo, Symbol and Wordmark (_QuoteCallLogo); both ink ---------- */
svg.qc-mark { display: block; width: 24px; height: 24px; flex: none; color: var(--color-text-emphasis); }   /* svg. to outrank components.css svg:not([width]) */
svg.qc-lockup { display: block; width: 104px; height: auto; aspect-ratio: 5725 / 920; flex: none; color: var(--color-text-emphasis); }   /* sized by width; 104px = 12.9px capitals, as the reference's launcher logo. svg. to outrank components.css svg:not([width]) */
.qc-tenant-logo { display: block; max-width: 40px; max-height: 40px; object-fit: contain; flex: none; }
.qc-powered { display: flex; align-items: center; gap: 8px; margin-top: 24px; font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.qc-powered .qc-lockup { width: 100px; }   /* the logo's smallest size (docs/brand) */

/* ---------- body / window: only .vk-main scrolls (components.css); Metronic's body styles are neutralised ---------- */
html:has(.vk-app) { background: var(--color-background-back); }
body.vk-body { margin: 0; padding: 0; background: var(--color-background-back); color: var(--color-text); font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
.vk-content { min-height: 100%; }

/* ---------- rail extras ---------- */
.vk-rail__brand { margin-bottom: 10px; }
.vk-rail__brand .qc-tenant-logo { margin-left: 4px; }
.vk-rail__brand:hover, .vk-rail__brand.is-peek { background: transparent; }
.vk-rail__brand .vk-rail__label { font-weight: 700; color: var(--color-text-emphasis); }
.vk-rail.is-open .vk-rail__brand .qc-tenant-logo { max-width: 200px; }
.vk-rail__pages { margin-top: 20px; }
.vk-rail__item .vk-i { width: 24px; height: 24px; margin-left: 8px; }
.vk-rail__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
img.vk-rail__avatar { object-fit: cover; padding: 0; }
.vk-rail__item .vk-rail__badge[hidden], .vk-drawer__foot .vk-rail__badge[hidden] { display: none; }
.vk-drawer__foot .vk-btn { position: relative; }
.vk-drawer__foot .vk-rail__badge { left: 22px; top: 2px; }
/* dark-mode button: the moon shows in light, the sun in dark */
html[data-color-scheme="dark"] .vk-theme-moon, html:not([data-color-scheme="dark"]) .vk-theme-sun { display: none; }

/* ---------- launcher: tiles + page search ---------- */
.vk-product[aria-current="true"] { background: var(--color-background-front-selected); }
.vk-product:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.vk-launcher .vk-launcher__search .vk-i { justify-self: center; }
.vk-launcher__brand .qc-lockup { margin-left: 10px; }   /* measured: the reference's logo starts 10px into its 115px slot */
.vk-launcher__grid { grid-template-columns: repeat(auto-fill, 100px); justify-content: start; }
.vk-search-results { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; max-height: 360px; overflow: auto; }
.vk-search-results[hidden] { display: none; }
.vk-search-result { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; color: var(--color-text); text-decoration: none; }
.vk-search-result[hidden] { display: none; }
.vk-search-result:hover, .vk-search-result.is-active { background: var(--menu-color-background-hover); color: var(--color-text-emphasis); text-decoration: none; }
.vk-search-result__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-search-result__product { font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.vk-search-empty { margin: 8px 12px; color: var(--color-text-secondary); }
.vk-launcher.is-searching .vk-search-results:not([hidden]) ~ .vk-launcher__hint { display: none; }
.vk-drawer__pane--search .vk-search-results { padding: 0 10px; max-height: none; }
.vk-drawer__searchhint { padding: 4px 20px 0; font-size: 14px; }
.vk-drawer__searchhint[hidden] { display: none; }
.vk-drawer__item .vk-i { width: 24px; height: 24px; margin: 0 8px; }

/* ---------- phone top bar extras ---------- */
.vk-topbar__brand { display: grid; place-items: center; width: 36px; height: 36px; flex: none; }
.vk-topbar__brand .qc-mark { width: 22px; height: 22px; }
.vk-topbar__brand .qc-tenant-logo { max-width: 96px; max-height: 32px; }
.vk-topbar__brand:has(.qc-tenant-logo) { width: auto; }

/* ---------- account flyout additions ---------- */
.vk-flyout__tile--logo, .vk-flyout__tile--brand { background: var(--color-background-front); border: 1px solid var(--color-divider); overflow: hidden; }
.vk-flyout__tile--logo img { max-width: 48px; max-height: 48px; object-fit: contain; }
.vk-flyout__tile--brand .qc-mark { width: 28px; height: 28px; }
.vk-flyout__row .vk-i, .vk-flyout__small .vk-i { flex: none; }
.vk-flyout__row--warn { color: var(--color-text-warning); }
button.vk-flyout__small { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.vk-flyout__small:hover, .vk-flyout__row:hover { color: var(--link-primary-color-text); }
.vk-flyout__small + .vk-linked:not([hidden]) { margin: 12px 0 0; }
.vk-linked { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 10px; }
.vk-linked + .vk-flyout__small { margin-top: 20px; }
.vk-linked__user { border: 0; background: none; padding: 0; font: 400 13px/18px "Open Sans", sans-serif; color: var(--color-text); cursor: pointer; }
.vk-linked__user:hover { color: var(--link-primary-color-text); }
.vk-langs__chev { margin-left: auto; transition: transform var(--vk-motion-morph); }
.vk-langs [aria-expanded="true"] .vk-langs__chev { transform: rotate(180deg); }
.vk-langs .vk-flyout__row { width: 100%; }
.vk-langs__list { list-style: none; margin: 0; padding: 12px 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.vk-langs__list a { color: var(--color-text); text-decoration: none; }
.vk-langs__list a:hover { color: var(--link-primary-color-text); }
.vk-scheme { display: flex; flex-direction: column; gap: 10px; }
.vk-scheme__label { display: flex; align-items: center; gap: 8px; font: 600 14px/20px "Open Sans", sans-serif; color: var(--button-tertiary-color-text); }
.vk-segmented--text { width: 100%; height: 36px; }
.vk-segmented--text label { flex: 1 1 auto; width: auto; height: 34px; padding: 0 10px; font: 600 13px/18px "Open Sans", sans-serif; white-space: nowrap; transition: background-color var(--vk-motion-hover), color var(--vk-motion-hover); }
.vk-segmented--text label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
html[data-color-scheme="dark"] .vk-segmented { background: #24282e; }
html[data-color-scheme="dark"] .vk-segmented label:has(input:checked) { background: var(--color-background-front-active); }

/* ---------- folds (components.css has .vk-fold; keep it inert when shut) ---------- */
.vk-fold:not(.is-open) .vk-fold__inner { visibility: hidden; }
.vk-fold > .vk-fold__inner { transition: visibility var(--vk-motion-fold); }   /* shutting: the content stays until the row has folded */

/* ---------- notifications panel ---------- */
.vk-notes { width: 380px; max-width: calc(100vw - 80px); max-height: min(560px, 80vh); display: flex; flex-direction: column; overflow: hidden; position: fixed; left: 64px; bottom: 60px; z-index: var(--z-index-popover); opacity: 1; visibility: visible; transition: opacity var(--vk-motion-popover); }
.vk-notes[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--vk-motion-popover), visibility 0s linear .25s; }
.vk-notes__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; font-size: 16px; line-height: 24px; color: var(--color-text-emphasis); }
.vk-notes__tools { display: inline-flex; align-items: center; gap: 8px; }
.vk-notes__list { overflow: auto; min-height: 0; }
.vk-notes__empty { margin: 0; padding: 24px 16px; border-top: 1px solid var(--color-divider); color: var(--color-text-secondary); text-align: center; }
a.vk-note { color: inherit; text-decoration: none; }
a.vk-note:hover { background: var(--color-background-front-hover); }
.vk-note__text { color: var(--color-text-emphasis); overflow-wrap: anywhere; }
.vk-note__read { font-size: 12px; line-height: 16px; }
.vk-notes__foot { padding: 12px 16px; border-top: 1px solid var(--color-divider); }

/* ---------- banners at the top of the page ---------- */
.vk-main > .vk-banner--strip { gap: 10px; }
.vk-banner--strip a { color: inherit; font-weight: 600; }
.vk-page-alerts { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 0; }
.vk-page-alerts .vk-banner b { margin-right: 6px; display: inline; }

/* ---------- toasts (abp.notify) ---------- */
.vk-toast { pointer-events: auto; }
.vk-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vk-toast__text b { display: inline; }
.vk-toast .vk-btn--icon.vk-btn--sm { color: #fff; }
.vk-toast.is-leaving { opacity: 0; transform: translateY(12px); transition: opacity .2s ease-in, transform .2s ease-in; }
.vk-toasts { pointer-events: none; }

/* ---------- messages / confirm (abp.message) ---------- */
dialog.vk-msg { animation: vk-fade-in .15s linear; }
dialog.vk-msg.is-closing { opacity: 0; transition: opacity .15s linear; }
dialog.vk-msg::backdrop { animation: vk-fade-in .15s linear; }
.vk-msg .vk-modal__panel--sm { max-width: calc(100% - 32px); }
.vk-msg .vk-modal__head { grid-template-columns: 1fr; }
.vk-msg .vk-modal__title { display: flex; align-items: center; gap: 12px; color: var(--color-text-emphasis); }
.vk-msg__icon { display: grid; flex: none; }
.vk-msg__icon .vk-i { width: 24px; height: 24px; }
.vk-msg--success .vk-msg__icon { color: var(--color-text-ok); }
.vk-msg--error .vk-msg__icon { color: var(--color-text-error); }
.vk-msg--warn .vk-msg__icon, .vk-msg--confirm .vk-msg__icon { color: var(--color-text-warning); }
.vk-msg--info .vk-msg__icon { color: var(--link-primary-color-text); }
.vk-msg__body { font-size: 14px; line-height: 20px; color: var(--color-text); overflow-wrap: anywhere; }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) { dialog.vk-msg .vk-modal__panel--sm { top: auto; bottom: 0; } }

/* ---------- busy (abp.ui.setBusy) ---------- */
.vk-pagebusy { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: transparent; animation: vk-fade-in .2s linear; cursor: progress; }
.vk-pagebusy.is-quiet .vk-spinner { visibility: hidden; }   /* blocks clicks at once; the spinner shows after 150ms (vk-abp.js) */
.vk-toast.is-clickable .vk-toast__text { cursor: pointer; }
.vk-busy__spin { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.vk-busy > .vk-busy__spin ~ * { pointer-events: none; }
@keyframes vk-fade-in { from { opacity: 0; } }

/* ---------- page loads: the content cross-fades, the chrome holds still (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
.vk-rail { view-transition-name: vk-rail; }
.vk-topbar { view-transition-name: vk-topbar; }
::view-transition-group(vk-rail), ::view-transition-group(vk-topbar) { animation: none; }
::view-transition-old(vk-rail), ::view-transition-old(vk-topbar) { display: none; }
::view-transition-new(vk-rail), ::view-transition-new(vk-topbar) { animation: none; }
::view-transition-old(root) { animation: vk-vt-out .12s ease-in both; }
::view-transition-new(root) { animation: vk-vt-in .18s ease-out both; }
@keyframes vk-vt-out { to { opacity: 0; } }
@keyframes vk-vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .vk-i--spin, .vk-toast, dialog.vk-msg, .vk-pagebusy { animation: none !important; }
  .vk-toast.is-leaving, dialog.vk-msg.is-closing, .vk-notes, .vk-notes[hidden] { transition: none; }
  /* the shell's own slides and fades: the panels still open and close, at once */
  .vk-rail, .vk-rail *, .vk-drawer, .vk-drawer *, .vk-scrim, .vk-flyout, .vk-flyout[hidden], .vk-launcher, .vk-launcher[hidden], .vk-bsmodal, .vk-bsmodal .modal-dialog { transition: none !important; }
}

/* ================================================================================================================
 * Page kit for converted ABP pages (Stage B/C). Use these instead of Bootstrap rows; see the re-skin run log.
 * ================================================================================================================ */
/* list page: title strip, toolbar (search pill + filters + actions), table card, filters panel beside it */
.vk-page__titles { min-width: 0; }
.vk-page__sub { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.vk-page__header .vk-page__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vk-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.vk-listbar .vk-searchgroup { flex: 0 1 420px; }
.vk-listbar .vk-search { flex: 1; }
.vk-searchgroup .vk-btn[aria-expanded="true"] { background: var(--color-background-front); box-shadow: var(--color-shadow-small); }
.vk-filter__head h2 { margin: 0; font: 700 16px/24px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-filter__head .vk-btn { margin-left: auto; }
.vk-filter__fields { display: flex; flex-direction: column; gap: 16px; padding: 8px 4px 0; }
.vk-filter__fields .vk-ffield, .vk-filter__fields .form-group { margin-bottom: 0; }
.vk-btn:has(> .vk-badge-count) { position: relative; }
.vk-withpanel > .vk-filter { box-shadow: rgba(3,14,22,.08) 0 2px 1px -1px, rgba(3,14,22,.12) 0 1px 3px 0; border-radius: 12px; }
.vk-withpanel > .vk-filter[hidden] { display: block; visibility: hidden; }
.vk-withpanel.is-open > .vk-filter:not([hidden]) { overflow: visible; }   /* open: pickers inside the panel may spill out of it */
.vk-tablecard { min-width: 0; }

/* read-only values in view modals: key-value rows (.vk-kv, components.css) and long text blocks */
.modal .vk-kv:first-child { border-top: 0; }
.modal .vk-kv { padding: 12px 0; min-height: 0; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.modal .vk-kv__value { padding: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.vk-pre { margin: 0; padding: 12px 16px; border-radius: 8px; background: var(--color-background-back); font: 400 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-text-emphasis); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) { .modal .vk-kv { grid-template-columns: 1fr; } }

/* card body (components.css has the card and its header only) */
.vk-card__body { padding: 0 24px 24px; }
.vk-card__header + .vk-card__body { padding-top: 4px; }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) { .vk-card__body { padding: 0 16px 16px; } }

/* converted DataTables lists (.table.vk-table): the row's main link, phone cards */
.vk-rowlink { color: var(--color-text-emphasis) !important; font-weight: 600; text-decoration: none; }
.vk-rowlink:hover { text-decoration: underline; }
.vk-table tbody tr:has([data-vk-row-main]) { cursor: pointer; }
/* desktop: fixed layout so the table narrows (cells end in an ellipsis) when the filters panel slides open beside it */
@media (min-width: 501px) and (min-height: 501px) {
  .vk-body table.table.vk-table { table-layout: fixed; }
  .vk-body table.table.vk-table > thead > tr > th, .vk-body table.table.vk-table > tbody > tr > td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vk-body table.table.vk-table > thead > tr > th { width: auto !important; }
  .vk-body table.table.vk-table.vk-table--namefirst > thead > tr > th:first-child { width: 38% !important; }   /* opt-in: a wide name column */
  .vk-body table.table.vk-table > thead > tr > th.vk-col-actions { width: 64px !important; }
  .vk-body table.table.vk-table td.vk-col-actions { overflow: visible; }
}
/* a list with many columns (e.g. Emails): natural column widths, the card scrolls sideways inside itself, the pager stays put */
@media (min-width: 501px) and (min-height: 501px) {
  .vk-body table.table.vk-table.vk-table--wide { table-layout: auto; display: block; overflow-x: auto; max-width: 100%; }
  .vk-body table.table.vk-table.vk-table--wide > thead > tr > th { width: auto !important; }
}
/* the search pill's go-arrow appears once there is something to search for (typing searches by itself after a pause) */
.vk-search .vk-search__go { transition: opacity var(--vk-motion-hover); }
.vk-search input:placeholder-shown ~ .vk-search__go { opacity: 0; pointer-events: none; }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-body .table.vk-table { border-radius: 12px; }
  .vk-body .table.vk-table thead { display: none; }
  .vk-body .table.vk-table tbody tr { padding: 10px 8px 10px 16px; align-items: center; border-bottom: 1px solid var(--color-divider); }
  .vk-body .table.vk-table tbody tr:last-child { border-bottom: 0; }
  .vk-body .table.vk-table tbody td { height: auto; padding: 0 !important; border: 0 !important; }
  .vk-body .table.vk-table tbody td.vk-m-secondary { color: var(--color-text-secondary); white-space: normal; }
  .vk-body .table.vk-table tbody td.vk-m-primary { white-space: normal; }
  .vk-body .table.vk-table tbody td.dataTables_empty { display: block; grid-column: 1 / -1; padding: 24px 0 !important; white-space: normal; }   /* a "nowrap" table's empty sentence wraps, or it scrolls the page sideways */
  .vk-body .dataTables_wrapper:has(.vk-table) { overflow: visible; }
}

/* Phone lists (approved 27 Oct): the page actions and search stay on the page background; the list below is one full-width sheet
 * (rounded top corners, a hairline along that edge, no side gaps) that runs to the bottom of the screen, as the reference's newest phone
 * screens do. Only a list on the page itself: tables in modals (lookups) keep their card. */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-body .vk-content { min-height: calc(100% - 64px); }   /* the 64px top bar sits inside .vk-main: no empty overscroll */
  .vk-body .vk-content:has(> .vk-page .vk-tablecard) { display: flex; flex-direction: column; }
  .vk-body .vk-page { --vk-gutter: 12px; }   /* the page's side padding on phones (12px), which full-width blocks bleed through */
  .vk-body .vk-page:has(.vk-tablecard) { --vk-gutter: 16px; flex: 1 0 auto; display: flex; flex-direction: column; padding: 0 var(--vk-gutter); }
  .vk-body .vk-page:has(.vk-tablecard) > .vk-page__header { padding: 12px 0 4px; }
  .vk-body .vk-page:has(.vk-tablecard) .vk-listbar { margin: 0; padding: 8px 0 16px; }
  .vk-body .vk-page > .vk-withpanel:has(> .vk-tablecard) { flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; }   /* the filter panel is a fixed sheet here */
  .vk-body .vk-page .vk-tablecard:not(.modal .vk-tablecard) {   /* bleeds through the page's 16px sides, however deep it sits (tabs, panels) */
    flex: 1 0 auto; margin-left: calc(-1 * var(--vk-gutter)); margin-right: calc(-1 * var(--vk-gutter)); background: var(--color-background-front); border-radius: 16px 16px 0 0;
    box-shadow: 0 0 0 1px var(--color-divider); padding-top: 4px;
  }
  .vk-body .vk-page .vk-tablecard:not(.modal .vk-tablecard) .table.vk-table { margin: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; }
  .vk-body .vk-page .vk-tablecard:not(.modal .vk-tablecard) .table.vk-table tbody tr { padding-left: 16px; padding-right: 16px; }   /* 16 both sides, as the reference's rows */
  .vk-body .vk-page .vk-tablecard:not(.modal .vk-tablecard) .table.vk-table tbody tr:last-child { border-bottom: 1px solid var(--color-divider); }
  .vk-body .vk-page .vk-tablecard:not(.modal .vk-tablecard) .dataTables_wrapper .bottom { padding: 12px 16px 16px; }
}

/* Phone cards (approved 27 Oct, option A): a page's cards become full-width blocks (no side gaps or rounded corners, a hairline above
 * and below) with a thin band of the page background between them, so each section stays its own unit. Cards in modals, cards inside
 * cards and the dashboard's small stat tiles (not .vk-card) keep their shape. */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-body .vk-page .vk-card:not(.modal .vk-card):not(.vk-card .vk-card) {
    margin-left: calc(-1 * var(--vk-gutter)); margin-right: calc(-1 * var(--vk-gutter)); border-radius: 0 !important; border-left: 0; border-right: 0;
    box-shadow: 0 -1px 0 var(--color-divider), 0 1px 0 var(--color-divider) !important;
  }
  /* an 8px band between blocks (the stacks' own gaps are 12 to 16px on wider screens) */
  .vk-body .trec .trec-grid, .vk-body .vk-dash__grid { row-gap: 8px; }
  .vk-body .diary-settings .diary-card, .vk-body .diary-attention { margin-bottom: 8px; }
  .vk-body .vk-page > .vk-card + .vk-card { margin-top: 8px; }
}

/* floating-label field (the reference's form fields): the label sits in the box like a placeholder and floats into the notch on focus or
 * once filled. Markup: <div class="vk-ffield form-group"><input class="form-control" id=… placeholder=" "><label for=…>Name</label></div>
 * (the placeholder must be one space; "form-group" lets ABP's validation mark it). Works for input, select and textarea; jQuery Validate
 * puts its message (div.form-control-feedback) between the input and the label, hence "~". */
.vk-ffield { position: relative; display: block; margin-bottom: 16px; }
.vk-body .vk-ffield > .form-control, .vk-body .vk-ffield > input, .vk-body .vk-ffield > select, .vk-body .vk-ffield > textarea { width: 100%; }
.vk-body .vk-ffield > label { position: absolute; left: 12px; top: 8px; max-width: calc(100% - 24px); margin: 0; padding: 0 4px; margin-left: -4px; border-radius: 4px;
  background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--field-placeholder-color-text); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; transition: top .15s ease, font-size .15s ease, line-height .15s ease, color .15s ease, background-color .15s ease; }
.vk-body .vk-ffield > :is(input, textarea):not(:placeholder-shown) ~ label, .vk-body .vk-ffield > :is(input, textarea, select):focus ~ label, .vk-body .vk-ffield > select ~ label, .vk-body .vk-ffield.is-filled > label {
  top: -8px; font-size: 12px; line-height: 16px; color: var(--field-label-color-text); background: var(--color-background-front);
}
.vk-body .vk-ffield > :is(input, textarea, select):focus ~ label { color: var(--field-color-border-focus); }
.vk-body .vk-ffield.has-danger > label { color: var(--color-text-error) !important; }
.vk-body .vk-ffield > :is(input, textarea)::placeholder { color: transparent; }
.vk-body .vk-ffield .form-text, .vk-body .vk-ffield .vk-hint { padding: 4px 4px 0; }
.vk-busy-slot:not([data-vk-ico]) { display: none !important; }
.vk-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.vk-formgrid > .vk-span2 { grid-column: 1 / -1; }
.vk-formsection { margin: 8px 0 12px; font: 700 14px/20px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-formnote { margin: -4px 0 16px; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) { .vk-formgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vk-ffield > label { transition: none; } }

/* ---------- sign-in family (Views/Account; components.css .vk-auth*) ---------- */
body.vk-auth-body { min-height: 100vh; background: var(--color-background-back); }
.vk-auth { padding-top: 48px; }
.vk-auth__logo { height: auto; min-height: 72px; justify-content: flex-start; }
.vk-auth__logo .qc-lockup { width: 150px; }
.qc-auth-logo { display: block; max-width: 240px; max-height: 56px; object-fit: contain; }
.vk-auth__card { padding-top: 0; box-shadow: rgba(3,14,22,.06) 0 2px 1px -1px, rgba(3,14,22,.1) 0 1px 3px 0; }
html[data-color-scheme="dark"] .vk-auth__card { box-shadow: 0 0 0 1px #2e3238; }
.vk-auth__tenant { padding: 16px 48px 0; font-size: 14px; color: var(--color-text-secondary); }
.vk-auth__tenant .tenant-change-component { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vk-auth__tenant strong { color: var(--color-text-emphasis); font-weight: 600; }
.vk-auth__section { gap: 12px; }
.vk-auth__lead { margin: 0; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.vk-auth__form { display: grid; gap: 0; padding-top: 8px; }
.vk-auth__between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; }
.vk-auth__between .m-checkbox { margin: 0; }
.vk-auth__submit { width: 100%; }
.vk-auth__actions { display: flex; justify-content: flex-end; gap: 8px; }
.vk-auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.vk-auth__providers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vk-auth__facts .vk-kv { padding: 10px 0; min-height: 0; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.vk-auth__facts .vk-kv:first-child { border-top: 0; }
.vk-auth__facts .vk-kv__value { padding: 0; font-size: 14px; }
.vk-auth__foot .language-switch-area { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.vk-auth__foot .language-switch-area a { color: var(--color-text-secondary); text-decoration: none; }
.vk-auth__foot .language-switch-area a[aria-current="true"] { color: var(--color-text-emphasis); font-weight: 600; }
.qc-powered--auth { margin: 0; }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-auth { padding-top: 0; }
  .vk-auth__tenant { padding: 16px 24px 0; }
  .vk-auth__actions { flex-direction: column-reverse; } .vk-auth__actions .vk-btn { width: 100%; }
}

/* ---------- error pages (Views/Error) ---------- */
body.vk-error-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-background-back); color: var(--color-text); font: 400 14px/20px "Open Sans", sans-serif; }
.vk-error-page__brand { padding: 20px 24px; }
.vk-error-page__brand a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.vk-error-page__brand .qc-lockup { width: 125px; }
.vk-error-page { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px 16px 15vh; }   /* one column no wider than the screen, so the text wraps on phones */
.vk-error { width: 480px; max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.vk-error__code { font: 700 64px/72px "Open Sans", sans-serif; letter-spacing: -1px; color: var(--neutral-200); }
.vk-error__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--color-background-front); color: var(--color-text-secondary); box-shadow: var(--color-shadow-small); }
.vk-error__icon .vk-i { width: 36px; height: 36px; }
.vk-error__title { margin: 8px 0 0; font: 700 24px/32px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-error__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.vk-error__list { margin: 0; padding: 0; list-style: none; color: var(--color-text); }
.vk-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }

/* ---------- phone ---------- */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  /* the title moves to the top bar, but a converted page's actions (Create, Save all…) stay on the page, right-aligned */
  .vk-page__header { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-height: 0; padding: 12px 12px 4px; }
  .vk-page__header > .vk-page__titles, .vk-page__header > .vk-h1, .vk-page__header > .vk-toolbar__spacer { display: none; }
  .vk-page__header:not(:has(.vk-page__actions, .vk-btn, button, a)) { display: none; }
  .vk-page { padding: 0 12px 16px; }
  .vk-listbar { margin: 4px 0 12px; }
  .vk-listbar .vk-searchgroup { flex: 1 1 auto; }
  .vk-notes { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; }
  .vk-page-alerts { padding: 12px 12px 0; }
  .vk-toasts { left: 12px; right: 12px; transform: none; bottom: 16px; }
}

/* ---------- print (invoices, records): the page only, no chrome, no window clipping ---------- */
@media print {
  .vk-rail, .vk-topbar, .vk-drawer, .vk-scrim, .vk-flyout, .vk-notes, .vk-toasts, .vk-launcher, .vk-banner--strip, .d-print-none { display: none !important; }
  html:has(.vk-app), body:has(.vk-app), body.vk-body { overflow: visible !important; height: auto !important; background: #fff !important; }
  .vk-app { display: block; height: auto; }
  .vk-main { overflow: visible; }
  .vk-body .m-portlet, .vk-card, .vk-body .card { box-shadow: none !important; }
}

/* The drawer's launcher dots come from the shared partial, wrapped so the products pane can swap them for the X (components.css). */
.vk-drawer__switch .vk-drawer__dots { display: inline-flex; }