/* ═══════════════════════════════════════════════════════════════════════════
   AllurePOS SuperAdmin: the surface's own rules on top of the design system
   (css/allure-ds/tokens.css + ds.css). Tokens only: every colour, space,
   radius, size and layer is a var(--token), so the five themes work. The one
   deliberate exception is the Google result preview on the SEO page (section
   8), a picture of a third-party rendering that keeps Google's own colours.

   SuperAdmin has no fiscal content, so .k-scope sits on <body>.
   Hover lives only inside (hover: hover) and (pointer: fine), like ds.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Base and page skeleton ──────────────────────────────────────────── */

.sa-body {
  margin: 0;
  background: var(--paper);
}
/* The shell fills the window and .k-main is the scroller (the page itself
   never scrolls, and never sideways). */
.sa-layout {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
/* Visually hidden labels are absolutely positioned: keep them inside the
   scrolling main area, so they can never widen or lengthen the page. */
.sa-layout > .k-main { position: relative; }
.sa-layout .k-table { position: relative; }
.sa-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.sa-page--narrow { max-width: 880px; }
/* A PageHeader may name a long tenant: let the title wrap instead of the
   design system's single line. */
.sa-page .k-view-title { white-space: normal; overflow-wrap: anywhere; }
.sa-page .k-view-title > .ti { flex-shrink: 0; }
.sa-page .k-pagehead__text { flex: 1 1 320px; }
.sa-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
.sa-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sa-grid--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
  .sa-grid--2-1,
  .sa-grid--1-1 { grid-template-columns: minmax(0, 1fr); }
}
/* List pages on a desktop fill the main area, so a long table scrolls inside
   its card and its header row stays in view. */
@media (min-width: 900px) {
  .sa-section.sa-fill { flex: 1 1 auto; min-height: 0; }
  .sa-fill > .sa-page { height: 100%; min-height: 0; }
  .sa-fill .k-table { flex: 0 1 auto; min-height: 0; }
}
/* Numbers, money and time. */
.sa-num { font-variant-numeric: tabular-nums lining-nums; }
.sa-muted { color: var(--ink-3); }
.sa-warn-ink { color: var(--warn-ink); }
.sa-danger-ink { color: var(--danger); }


/* ── 2. AppShell additions ──────────────────────────────────────────────── */

/* The version line in the side-nav foot. */
.sa-nav-foot { font-variant-numeric: tabular-nums lining-nums; }

/* Više: the side-nav rows folded in (899px and below only), the language
   and theme groups, back to the portal, the version. */
.sa-menu { width: 320px; }
.sa-menu-nav { display: none; }
.sa-menu__label {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--ink-3);
  font: var(--text-meta-strong);
}
.sa-menu__group {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
  border-top: 1px solid var(--line);
}
.sa-menu__group--last { padding-bottom: var(--space-1); }
.k-menu .k-menu__item.sa-menu__row[aria-current="page"] {
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--sunken);
  box-shadow: inset 3px 0 0 var(--ink);
}
@media (max-width: 899px) {
  .sa-menu-nav {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-1);
  }
}
/* On a desktop the nav rows are hidden, so the language row opens the menu:
   no rule above it. */
@media (min-width: 900px) {
  .sa-menu > .k-menu__lang {
    margin-top: 0;
    padding-top: var(--space-1);
    border-top: 0;
  }
}
/* Theme rows: a real sample of each theme (the swatch carries its own
   data-theme, so --paper, --navy and --brass resolve to that theme), the
   name, and a check on the chosen one. */
.sa-theme-row > .sa-theme-row__check {
  margin-left: auto;
  visibility: hidden;
}
.sa-theme-row[aria-pressed="true"] > .sa-theme-row__check { visibility: visible; }
.sa-swatch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: var(--r-control);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.sa-swatch > span { flex: 1 1 0; border-radius: 2px; }
.sa-swatch > span:first-child { background: var(--navy); }
.sa-swatch > span:last-child { background: var(--brass); }
.sa-swatch--system {
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface);
  color: var(--slate);
  font-size: 18px;
  line-height: 1;
}
.k-menu__item > .sa-swatch { width: 28px; }


/* ── 3. Login screen ────────────────────────────────────────────────────── */

/* Opaque, on paper, no blur: the kasir lock card. showLogin/hideLogin write
   the inline display. */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-lock);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--paper);
}
.sa-login__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(400px, 100%);
  margin: auto;
  padding: var(--space-6);
  border-radius: var(--r-sheet);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--sheet-edge), var(--e3);
}
.sa-login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.sa-login__mark {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--r-control);
  background: var(--on-navy);
  object-fit: contain;
}
.sa-login__word {
  color: var(--ink);
  font: var(--text-key-lg);
}
.sa-login__title {
  margin: 0;
  color: var(--ink);
  font: var(--text-title);
  text-align: center;
}
.sa-login__desc {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--slate);
  font: 400 15px/1.4 var(--font-sans);
  text-align: center;
}
.sa-login__card .k-field-error { text-align: center; }
/* k-btn--block grows along a row; in this column it must keep its 48px. */
.sa-login__card .k-btn--block { flex: 0 0 auto; }
.sa-login__lang {
  display: flex;
  justify-content: center;
}


/* ── 4. Modals, confirm, toasts ─────────────────────────────────────────── */

/* The JS opens a modal by adding .open to its overlay; ds.css reads
   .active/.is-open, so map it here. */
.sa-modal-overlay:not(.open) { display: none; }
.sa-modal-overlay.open > .k-modal { transform: none; }
/* A modal with two steps (the certificate): each step is a head/body/foot
   column. The JS toggles the inline display; '' falls back to flex. */
.sa-step {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sa-modal__close { margin-right: calc(-1 * var(--space-2)); }
/* The thing the confirm acts on (a restaurant, an article, a version). */
.sa-confirm__subject {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.k-toast__title { overflow-wrap: anywhere; }


/* ── 5. Data: tables, key/value rows, meters ────────────────────────────── */

/* SuperAdmin writes its table headers in sentence case in the language file,
   so it opts out of the design system's lowercase trick: that trick would
   print "PURS", "IP", "ID" and "L-PFR" as "Purs", "Ip", "Id", "L-pfr". */
.k-table__grid th { text-transform: none; }
.k-table__grid th::first-letter { text-transform: none; }
.sa-slate { color: var(--slate); }
/* A table row's secondary line may wrap (a long subdomain and schema). */
.k-table__grid .k-table__meta { overflow-wrap: anywhere; }
/* Audit detail: one line of key=value pairs, full text in the title. */
.k-table__grid td.sa-audit-detail {
  max-width: 320px;
  overflow: hidden;
  color: var(--slate);
  font: var(--text-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ruled label / value rows inside a flush panel (database, system details). */
.sa-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--hit);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.sa-kv:last-child { border-bottom: 0; }
.sa-kv__label {
  flex-shrink: 0;
  color: var(--slate);
  font: var(--text-label);
}
.sa-kv__value {
  min-width: 0;
  color: var(--ink);
  font: var(--text-body);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.sa-kv__value.k-table__status { font-weight: 600; }
/* .sa-kv__value paints ink and loads after ds.css, so the state colour needs the same weight. */
.sa-kv__value.k-table__status--ok { color: var(--ok); }
.sa-kv__value.k-table__status--danger { color: var(--danger); }

/* A panel foot that is a note, not actions. */
.k-panel__foot.sa-panel-note {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  color: var(--ink-3);
  font: var(--text-meta);
}
.sa-panel-note > .ti { color: var(--ok); font-size: 16px; line-height: 1; }

/* Resource meters: label and value, then an 8px ink bar on a sunken track
   (never navy, never a gradient). */
.sa-meter-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sa-meter-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.sa-meter-row__label { color: var(--slate); font: var(--text-label); }
.sa-meter-row__value {
  color: var(--ink);
  font: var(--text-body);
  font-variant-numeric: tabular-nums lining-nums;
}
.sa-meter {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-control);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--control-edge);
}
.sa-meter[hidden] { display: none; }
.sa-meter--stat { margin-top: var(--space-2); }
.sa-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
}


/* Status words (a dot and the word) also outside a DataTable. */
.k-table__status { font-weight: 600; white-space: nowrap; }
.sa-status--neutral { color: var(--slate); }


/* ── 6. Restaurants: list, detail, devices ──────────────────────────────── */

.sa-filter { align-self: flex-start; }
.sa-tenants td:nth-child(2) { min-width: 200px; }
.sa-tenants td:nth-child(3) .k-table__meta { white-space: nowrap; }
/* Suspenduj / Aktiviraj share one width, so the row actions line up. */
.sa-tenants .sa-toggle { min-width: 104px; }
.sa-back { margin-left: calc(-1 * var(--space-3)); }

/* Ruled rows inside a flush panel (certificates, staff, transactions): no
   boxes, 44px or more, like order lines. */
.sa-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.sa-row:last-child,
.sa-row:has(+ .sa-pwd-row:last-child) { border-bottom: 0; }
.sa-row__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sa-row__title {
  color: var(--ink);
  font: var(--text-label);
  overflow-wrap: anywhere;
}
.sa-row__meta {
  color: var(--ink-3);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums lining-nums;
}
.sa-row__side {
  flex-shrink: 0;
  color: var(--slate);
  font: var(--text-body);
}
.sa-row__side--left { flex: 1 1 auto; }
.sa-row__amount {
  flex-shrink: 0;
  min-width: 112px;
  color: var(--ink);
  font: var(--text-price);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}
.sa-empty-row {
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--slate);
  font: var(--text-body);
}
/* The inline "set password" row under a staff member (display toggled by JS). */
.sa-pwd-row {
  align-items: center;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--line);
}
.sa-pwd-row:last-child { border-bottom: 0; }
.sa-pwd-row > .k-field { flex: 1 1 auto; }
.sa-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sa-help {
  margin: 0;
  color: var(--ink-3);
  font: var(--text-meta);
}
@media (max-width: 560px) {
  .sa-row-stack { flex-direction: column; }
}

/* A DataTable inside a panel: no second card, it scrolls sideways on its own. */
.sa-panel-table { position: relative; overflow-x: auto; }
.sa-panel-table > .k-empty-line { padding: var(--space-5) var(--space-4); }
.sa-devices th { position: static; }
/* Narrower than this the table scrolls inside the panel instead of breaking
   host names and addresses mid-word. */
.sa-devices { min-width: 820px; }
.sa-devices td:first-child > .k-table__strong,
.sa-devices td:first-child > .k-table__meta { white-space: nowrap; }
.k-panel:has(> #td-installations) > .k-panel__head {
  flex-wrap: wrap;
  row-gap: var(--space-1);
  padding-block: var(--space-2);
}
.sa-devices td.sa-fiscal-cell { min-width: 240px; }
/* What a till reports about its fiscal device (sa-cells.js saLpfrInstallLine):
   shown verbatim, never re-cased, coloured by its level. */
.sa-lpfr-line {
  display: block;
  font: var(--text-meta);
  overflow-wrap: anywhere;
}
.sa-lpfr-line b { font-weight: 600; }
.sa-lpfr-line--danger { color: var(--danger); }
.sa-lpfr-line--warn { color: var(--warn-ink); }
.sa-lpfr-line--muted { color: var(--ink-3); }
/* The till's AllurePOS version; "behind" asks for an update, so it is amber
   (act), with the word. */
.sa-ver {
  color: var(--slate);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.sa-ver--behind { color: var(--warn-ink); font-weight: 600; }
/* A release's notes (sa-cells.js saChangelogBlocks). */
.sa-changelog {
  margin-top: var(--space-1);
  color: var(--slate);
  font: var(--text-meta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sa-changelog:first-child { margin-top: 0; }
.sa-changelog b { color: var(--ink); font-weight: 600; }
.sa-error-state > .ti,
.sa-error-state > p { color: var(--danger); }


/* ── 7. Modals: add restaurant, certificate, confirm ────────────────────── */

.sa-ok-ink { color: var(--ok); }
.k-modal__text.sa-modal__subject {
  color: var(--ink);
  font-weight: 600;
}
.sa-fieldset {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sa-fieldset > legend { padding: 0; margin-bottom: var(--space-1); }
.sa-radio { border-bottom: 1px solid var(--line); }
.sa-radio:last-child { border-bottom: 0; }
.sa-radio__name { font: var(--text-label); }
.sa-radio__desc {
  margin-left: auto;
  color: var(--ink-3);
  font: var(--text-meta);
  text-align: right;
}
/* Certificate output: a sunken panel in meta type, never under 13px; it may
   scroll. Fira Sans, not monospace (the only monospace is the receipt). */
.sa-output {
  max-height: 240px;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--sunken);
  color: var(--ink);
  font: var(--text-meta);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cert-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* The package / terminals / date pills of an issued certificate (neutral). */
.cert-meta-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--r-round);
  background: var(--sunken);
  color: var(--slate);
  font: 600 15px/1 var(--font-condensed);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--control-edge);
}
.sa-confirm .k-modal__title > .ti { color: var(--danger); }
.sa-confirm__subject[hidden] { display: none; }


/* ── 8. Website: SEO, blog, plans; organizations ────────────────────────── */

.sa-self-start { align-self: flex-start; }
/* A character counter under a field, at its right edge. */
.sa-counter {
  align-self: flex-end;
  color: var(--ink-3);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums lining-nums;
}
.k-formrow__control > textarea.k-field { min-height: calc(2 * var(--hit)); }

/* Deliberate exception to the token rule: the Google result preview is a
   picture of Google's own rendering, so it keeps Google's literal colours
   and Arial on a white plate in every theme (as the receipt is a picture of
   paper). It is not themed on purpose, also in Malam. */
.seo-preview {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #ffffff;
  font-family: arial, sans-serif;
}
.seo-preview__url { color: #202124; font-size: 13px; line-height: 1.3; }
.seo-preview__title { margin: 2px 0; color: #1a0dab; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.seo-preview__desc { color: #4d5156; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

/* Blog: a list of articles beside the editor. */
.sa-blog {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1000px) {
  .sa-blog { grid-template-columns: minmax(0, 1fr); }
}
.k-panel__head.sa-blog__filters {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.sa-blog__filters > .k-search > .k-field { height: var(--hit); padding-right: var(--space-3); }
.sa-blog__filter { flex: 0 0 112px; }
.sa-blog__items {
  display: flex;
  flex-direction: column;
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1000px) {
  .sa-blog__items { max-height: none; }
}
/* An article row: ruled, not a card; the chosen one is sunken with an ink
   bar, like the selected side-nav row. */
.blog-item {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--hit);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.blog-item:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .blog-item:hover { background: var(--sunken); }
}
.blog-item:active { background: var(--sunken-press); }
.blog-item.active {
  background: var(--sunken);
  box-shadow: inset 3px 0 0 var(--ink);
}
.blog-item:focus-visible { outline-offset: -2px; }
.blog-item__pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.blog-item__title {
  display: -webkit-box;
  overflow: hidden;
  font: var(--text-label);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.blog-item__slug {
  overflow: hidden;
  color: var(--ink-3);
  font: var(--text-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-panel__head.sa-blog__edhead {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-1);
}
.sa-blog__lang { flex: 0 0 120px; }
.sa-blog__content { font: 400 15px/1.5 var(--font-sans); }
.sa-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.sa-faq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.sa-faq__title { margin: 0; color: var(--ink); font: var(--text-label); }
.sa-faq__list { display: flex; flex-direction: column; }
/* One question: a ruled group, no box. */
.blog-faq-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}
.blog-faq-card__foot { display: flex; justify-content: flex-end; }

/* Plans: inputs in the table, a small grid per period. */
.sa-plans .k-field { height: var(--hit); }
.sa-plans__price { width: 112px; }
.sa-plans__disc { width: 88px; }
.sa-periods {
  display: grid;
  grid-template-columns: auto repeat(4, 72px);
  align-items: center;
  gap: var(--space-1) 6px;
  padding: var(--space-1) 0;
}
.sa-periods__head {
  color: var(--slate);
  font: var(--text-meta-strong);
  text-align: center;
}
.sa-periods__label {
  padding-right: var(--space-1);
  color: var(--slate);
  font: var(--text-meta-strong);
  white-space: nowrap;
}
.sa-periods > .k-field { padding: 0 var(--space-2); }

/* Organizations: one panel per group. */
.sa-orgs { display: flex; flex-direction: column; gap: var(--space-4); }
.sa-org-new__field { width: 240px; }
.k-panel__head.sa-org__head { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-block: var(--space-1); }
.sa-org__branches { padding: 0 var(--space-4); }
.sa-org__add {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}
.sa-org__add > .k-field { flex: 1 1 auto; max-width: 520px; }
.sa-org__report:not(:empty) { border-top: 1px solid var(--line); }
.sa-org__note { margin: 0; padding: var(--space-3) var(--space-4); color: var(--slate); font: var(--text-body); }
.sa-report th { position: static; }
.sa-report tfoot td {
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  font-weight: 600;
}
@media (max-width: 899px) {
  .sa-org-new { width: 100%; }
  .sa-org-new__field { flex: 1 1 auto; width: auto; }
  .sa-org__add { flex-direction: column; }
  .sa-org__add > .k-field { flex: none; max-width: none; }
}


/* ── 9. Till releases, platform settings ────────────────────────────────── */

.sa-rel-upload { max-width: 880px; }
/* A native file input whose button is drawn like a secondary k-btn (44px). */
.sa-file {
  display: block;
  width: 100%;
  min-height: var(--hit);
  color: var(--slate);
  font: var(--text-body);
  cursor: pointer;
}
.sa-file::file-selector-button {
  height: var(--hit);
  margin-right: var(--space-3);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: var(--text-label);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .sa-file:hover::file-selector-button { background: var(--sunken); }
}
.sa-file:active::file-selector-button { background: var(--sunken-press); }
/* Upload progress: a determinate 6px ink bar on a sunken track, full width
   under the fields. */
.sa-progress {
  height: 6px;
  margin: 0 var(--space-4) var(--space-3);
  overflow: hidden;
  border-radius: var(--r-round);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--control-edge);
}
/* At rest (uploadRelease writes width 0%) the empty track would read as a
   stray rule: hide it, keeping its space so nothing jumps. */
.sa-progress:has(> .sa-progress__bar[style*="width: 0%"]) { visibility: hidden; }
.sa-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transition: width 120ms cubic-bezier(.2, .7, .2, 1);
}
.sa-releases td.sa-rel-notes { min-width: 280px; max-width: 56ch; }
/* Rilis filter bar (1.21.1): search, two selects, reset, then the "Showing n of total" count. */
.sa-rel-filter > .k-search { flex: 1 1 240px; }
.sa-rel-filter > .k-field--select { flex: 0 1 220px; width: auto; min-width: 150px; }
.sa-rel-filter > .k-search > .k-field { height: var(--hit); }
.sa-rel-filter > .sa-rel-count { font-size: var(--fs-sm, 0.875rem); white-space: nowrap; }
@media (max-width: 560px) {
  .sa-rel-filter > .k-field--select,
  .sa-rel-filter > .k-search,
  .sa-rel-filter > .k-btn { flex: 1 1 100%; }
}
.sa-empty-title { color: var(--ink); font-weight: 600; }
.sa-field-num { max-width: 200px; }


/* ── 10. Controls the design system leaves open ─────────────────────────── */

/* A disabled icon button (the primary restaurant cannot be deleted). */
.k-iconbtn:disabled,
.k-iconbtn:disabled:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink-3);
  cursor: default;
}


/* ── 11. L-PFR licences and activation codes (js/sa-lpfr.js) ────────────── */

/* Card ids (JID), PIBs, licence and batch numbers, activation codes: the sans
   face with tabular figures and a slashed zero where the font has it, never
   monospace (the only monospace is the receipt). */
.sa-code {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  font-feature-settings: "zero";
  overflow-wrap: anywhere;
}
.sa-upper { text-transform: uppercase; }
.sa-nowrap,
.sa-date { white-space: nowrap; }
.sa-strong { font-weight: 600; }
/* A status word that may wrap (long sentences such as the issuer key line). */
.k-table__status.sa-wrap { white-space: normal; }

/* The issuer key line under the PageHeader. */
.sa-lpfr-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font: var(--text-body);
}
.sa-lpfr-keys__detail { color: var(--slate); font-variant-numeric: tabular-nums lining-nums; }

/* An alert block: what happened in the state colour, detail under it.
   Danger on danger-tint (the licence server is off); act-now on warn-tint
   with its 1px warn-line (codes shown only once, offline revocation). */
.sa-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--r-card);
}
.sa-alert > .ti { flex-shrink: 0; font-size: 20px; line-height: 1.25; }
.sa-alert__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sa-alert__title { margin: 0; font: var(--text-label); overflow-wrap: anywhere; }
.sa-alert__detail { margin: 0; color: var(--ink); font: var(--text-meta); overflow-wrap: anywhere; }
.sa-alert--danger { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); }
.sa-alert--warn { border-color: var(--warn-line); background: var(--warn-tint); color: var(--warn-ink); }
.sa-alert--ok { border-color: var(--ok); background: var(--ok-tint); color: var(--ok-ink); }
/* Text set by textContent (no icon, no inner elements). */
.sa-alert--text { font: var(--text-body); overflow-wrap: anywhere; }

/* StatTiles: 13 figures in one strip. A figure takes its state colour only
   when it is above zero; the label names the state in words. */
/* 13 tiles: two rows of 7 and 6 on a desktop, 5 across on a narrower window. */
.sa-lpfr-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1279px) { .sa-lpfr-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sa-lpfr-stats[hidden] { display: none; }
.k-stat.sa-stat--danger .k-stat__value { color: var(--danger); }
.k-stat.sa-stat--warn .k-stat__value { color: var(--warn-ink); }
.k-stat.sa-stat--info .k-stat__value { color: var(--info); }
@media (max-width: 560px) {
  .sa-lpfr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-lpfr-stats .k-stat { padding: var(--space-2); }
  .sa-lpfr-stats .k-stat__label { overflow-wrap: anywhere; }
  .sa-lpfr-stats .k-stat__value { font-size: 24px; }
}

/* Tabs (k-tabs) over the panes: a strip on its own edge, like a panel head. */
.sa-lpfr-work { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.sa-lpfr-tabs {
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.sa-lpfr-tabs .k-tab { align-self: flex-end; }
.sa-lpfr-pane > * + * { margin-top: var(--space-3); }
.sa-lpfr-help {
  max-width: 88ch;
  margin: 0;
  color: var(--slate);
  font: var(--text-body);
  line-height: 1.4;
}
.sa-lpfr-help--panel { max-width: none; padding-top: var(--space-3); }
/* Help text on the left, the pane's own actions on the right. */
.sa-lpfr-panehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.sa-lpfr-panehead > .sa-lpfr-help { flex: 1 1 420px; }
.sa-lpfr-panehead__actions { flex-shrink: 0; }
/* Filters: search, selects and a checkbox row that wrap on narrow screens. */
.sa-lpfr-filter > .k-search { flex: 1 1 240px; }
.sa-lpfr-filter > .k-field--select { flex: 0 1 188px; width: auto; min-width: 140px; }
.sa-lpfr-filter > .sa-lpfr-filter__exp { flex-basis: 150px; }
.sa-lpfr-filter > .sa-lpfr-filter__batch { flex-basis: 280px; }
.sa-lpfr-filter > .k-search > .k-field { height: var(--hit); }
@media (max-width: 560px) {
  .sa-lpfr-filter > .k-field--select,
  .sa-lpfr-filter > .k-search,
  .sa-lpfr-filter > .k-btn { flex: 1 1 100%; }
}
/* Wide tables scroll inside their card instead of breaking ids mid-word. */
.sa-lpfr-table--lic { min-width: 1040px; }
.sa-lpfr-table--unk,
.sa-lpfr-table--tr { min-width: 820px; }
.sa-lpfr-table--codes { min-width: 1080px; }
.sa-lpfr-table--codes td:nth-child(5) { min-width: 8em; }   /* Seller (after Created, 1.17.3) */
.sa-lpfr-table--ven { min-width: 960px; }
/* Vendors: the quota line and the two numeric headers may wrap, so the row actions stay in view. */
.sa-lpfr-table--ven td.k-table__num .k-table__meta { max-width: 13em; margin-left: auto; white-space: normal; }
.sa-lpfr-table--ven th.k-table__num { white-space: normal; }
.sa-lpfr-table td:first-child .k-table__strong,
.sa-lpfr-table td:first-child .k-table__meta,
.sa-lpfr-table .sa-date,
.sa-lpfr-table .sa-keep { white-space: nowrap; overflow-wrap: normal; }
/* Licences: the taxpayer keeps a readable width; a long state word may take two lines. */
.sa-lpfr-table--lic td:nth-child(2) { min-width: 11em; }
.sa-lpfr-table--lic td:nth-child(3) { min-width: 8em; }
.sa-lpfr-table--lic td:nth-child(5) .k-table__status { white-space: normal; }
/* A till build ("1.4.2+9f31c2a7d0b4") stays on one line. */
.sa-lpfr-table .k-table__meta.sa-code { white-space: nowrap; overflow-wrap: normal; }
.sa-holder { display: inline-flex; align-items: center; gap: var(--space-1); }
.sa-holder > .ti { flex-shrink: 0; color: var(--slate); font-size: 16px; line-height: 1; }
.k-table__grid .k-table__meta > .ti { font-size: 14px; vertical-align: -2px; }
.k-table__actions { white-space: nowrap; }
.k-table__actions > .k-iconbtn { vertical-align: middle; }

/* Settings: one flush panel of FormRows in three groups, then the issuer keys. */
.sa-lpfr-settings { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; }
.sa-formgroup {
  margin: 0;
  padding: var(--space-4) 0 var(--space-1);
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  font: var(--text-meta-strong);
}

/* Modals: a two-column form grid (one column on phones), a mid width, the
   subject line of a detail, ruled key and value rows, sunken logs. */
.sa-modal--md { --modal-w: 640px; }
.sa-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 560px) {
  .sa-form-grid { grid-template-columns: minmax(0, 1fr); }
}
.sa-lpfr-quota { margin: 0; color: var(--slate); font: var(--text-meta-strong); }
.sa-lpfr-quota:empty { display: none; }
/* Generate codes: the optional "send to the buyer" section (1.17.3), a bordered disclosure like the support diagnostics. */
.sa-lpfr-buyer { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sa-lpfr-buyer > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--hit); cursor: pointer; font: var(--text-label); color: var(--ink); list-style: none; }
.sa-lpfr-buyer > summary::-webkit-details-marker { display: none; }
.sa-lpfr-buyer > .sa-help { margin: var(--space-1) 0 var(--space-2); }
.sa-lpfr-buyer > .sa-help:empty { display: none; }
.sa-lpfr-buyer > .sa-subhead { margin: var(--space-3) 0 var(--space-1); }
.sa-lpfr-account { margin: 0 0 var(--space-3); }
.sa-subject {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.sa-subject__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sa-subject__title { margin: 0; color: var(--ink); font: var(--text-heading); overflow-wrap: anywhere; }
.sa-subject__meta { margin: 0; color: var(--ink-3); font: var(--text-meta); overflow-wrap: anywhere; }
.sa-subject > .k-table__status { flex-shrink: 0; padding-top: 2px; }
.sa-kvlist { display: flex; flex-direction: column; }
.sa-kvlist > .sa-kv { min-height: 0; padding: var(--space-2) 0; }
.sa-kvlist .sa-kv__value .k-iconbtn { vertical-align: middle; }
.sa-inline { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sa-inline > .k-field { flex: 1 1 auto; }
.sa-inline--end { flex-wrap: wrap; justify-content: flex-end; }
.sa-lpfr-sub { display: flex; flex-direction: column; gap: var(--space-2); }
.sa-lpfr-sub[hidden] { display: none; }
.sa-subhead { margin: 0; color: var(--slate); font: var(--text-meta-strong); }
.sa-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--sunken);
}
.sa-log__line {
  margin: 0;
  color: var(--ink);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.sa-textarea { height: auto; min-height: calc(2 * var(--hit)); padding-block: var(--space-2); resize: vertical; }
.sa-btnrow__gap { flex: 1 1 auto; }
@media (max-width: 560px) { .sa-btnrow__gap { flex-basis: 100%; height: 0; } }
.sa-row__icon { flex-shrink: 0; color: var(--slate); font-size: 20px; line-height: 1; }
.sa-row--tight { min-height: var(--hit); }

/* The codes shown once: a sunken panel (the list may scroll, never under
   13px), its copy action in the head. Customers type these codes in, so they
   are set in the label style, tabular, with a slashed zero. */
.sa-codes { overflow: hidden; }
.sa-codes > .k-panel__head { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-block: var(--space-1); }
.sa-codes__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-4);
  max-height: 280px;
  overflow: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--sunken);
  color: var(--ink);
  font: var(--text-label);
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  font-feature-settings: "zero";
  user-select: all;
}
.sa-codes__code { white-space: nowrap; }

/* Vendor: quota as three StatTiles, adding quota, the quota history. */
.sa-lpfr-seats { gap: var(--space-3); }
.sa-lpfr-seats__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sa-quota { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-quota .k-stat { padding: var(--space-2) var(--space-3); }
.sa-quota .k-stat__value { font-size: 24px; }
@media (max-width: 560px) {
  .sa-quota { grid-template-columns: minmax(0, 1fr); }
}
.sa-lpfr-seats__add {
  display: grid;
  grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2) var(--space-3);
}
@media (max-width: 560px) {
  .sa-lpfr-seats__add { grid-template-columns: minmax(0, 1fr); }
}
.sa-lpfr-ledger { max-height: 208px; overflow-y: auto; }
.sa-lpfr-ledger > .sa-row:last-child { border-bottom: 0; }
/* The vendor status key: red while it suspends, a plain secondary key when
   it activates a suspended vendor (the JS sets data-next). */
.sa-foot-start { margin-right: auto; }
#lpfr-v-status-btn[data-next="active"] { border-color: var(--line-strong); color: var(--ink); }

/* Tenant detail: PIB and policy side by side, then the reported cards and
   the licences as ruled rows. */
.sa-lpfr-td__max { flex: 0 0 88px; width: 88px; }
.k-panel:has(> #td-lpfr) > .k-panel__head {
  flex-wrap: wrap;
  row-gap: var(--space-1);
  padding-block: var(--space-2);
}
.k-panel:has(> #td-lpfr) > .k-panel__head > .k-panel__title { flex: 0 0 auto; white-space: nowrap; }
.sa-lpfr-td .k-table__status { font: var(--text-meta-strong); }
@media (max-width: 560px) {
  .sa-lpfr-td .sa-inline:has(> .k-field--select) { flex-wrap: wrap; }
  .sa-lpfr-td .sa-inline > .k-field--select { flex: 1 1 100%; }
  .sa-lpfr-td .sa-inline > .sa-lpfr-td__max { flex: 1 1 auto; width: auto; }
}

/* The confirm modal in its navy tone (accepting a transfer) and its field. */
.sa-confirm--primary .k-modal__title > .ti { color: var(--ink); }
#sa-confirm-field[hidden] { display: none; }

/* ── Phase-1 insight pages (1.8.0) ── */
.sa-stack { display: grid; gap: var(--space-4); }
.sa-more { display: flex; justify-content: center; padding: var(--space-3) 0; }
.sa-td-pane { display: grid; gap: var(--space-4); }
.sa-td-pane[hidden] { display: none; }
.sa-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.sa-filterbar .k-group { margin: 0; }
.sa-filterbar__grow { flex: 1 1 16rem; }
.sa-hc-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sa-hc-summary > .ti { font-size: 28px; }
.sa-hc-summary--ok > .ti { color: var(--ok); }
.sa-hc-summary--warn > .ti { color: var(--warn-ink); }
.sa-hc-summary--fail > .ti { color: var(--danger); }
.sa-hc-summary__title { margin: 0; font: var(--text-label); color: var(--ink); }
.sa-hc-summary__meta { margin: 0; font: var(--text-meta); color: var(--slate); }
.sa-hc-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sa-hc-row:last-child { border-bottom: 0; }
.sa-hc-row__name { margin: 0; font: var(--text-label); color: var(--ink); }
.sa-hc-row__hint { margin: var(--space-1) 0 0; font: var(--text-meta); color: var(--slate); }
.sa-hc-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; }
.sa-hc-row__value { font: var(--text-meta); color: var(--slate); font-variant-numeric: tabular-nums; }
.sa-hc-passed > summary { cursor: pointer; list-style: none; min-height: var(--hit); }
@media (max-width: 640px) {
  .sa-hc-row { flex-direction: column; }
  .sa-hc-row__side { align-items: flex-start; text-align: left; }
}
.sa-pc-hint { margin: 0 0 var(--space-3); font: var(--text-body); color: var(--ink); }
.sa-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); }
.sa-help-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-card); }
.sa-help-card__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-label); color: var(--ink); }
.sa-help-card__desc { flex: 1; margin: 0; font: var(--text-meta); color: var(--slate); }
.sa-help-faq { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.sa-help-faq:last-child { border-bottom: 0; }
.sa-help-faq > summary { display: flex; align-items: center; min-height: var(--hit); cursor: pointer; font: var(--text-label); color: var(--ink); }
.sa-help-faq > p { margin: var(--space-1) 0 var(--space-2); font: var(--text-body); color: var(--slate); }
/* Folded sections: an arrow on the right that turns when the section opens (Safari's own marker hidden). */
.sa-chevron { margin-left: auto; transition: transform .15s; }
details[open] > summary .sa-chevron { transform: rotate(180deg); }
.sa-hc-passed > summary::-webkit-details-marker, .sa-help-faq > summary::-webkit-details-marker { display: none; }
.sa-more[hidden] { display: none; }
.sa-filterbar .k-seg__btn { width: auto; padding: 0 var(--space-3); white-space: nowrap; }

/* SuperAdmin fase 2A: a filter field that is hidden until "Choose dates"; a text-style button in a table. */
.sa-filterbar .k-group[hidden] { display: none; }
.sa-linkbtn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sa-linkbtn:hover { text-decoration-thickness: 2px; }
.sa-linkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* SuperAdmin fase 2B: Support — the open count beside the menu, the list/detail switch, one conversation. */
.sa-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; border-radius: var(--r-round); background: var(--danger); color: var(--on-danger); font: 700 13px/1 var(--font-sans); font-variant-numeric: tabular-nums lining-nums; }
.sa-nav-count[hidden] { display: none; }
#sec-support [hidden] { display: none; }
.sa-sup-tenantfilter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.sa-sup-head { margin: 0 0 var(--space-3); }
.sa-sup-head__title { margin: 0 0 var(--space-1); font: var(--text-heading); color: var(--ink); overflow-wrap: anywhere; }
.sa-sup-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; font: var(--text-meta); color: var(--slate); }
.sa-sup-diagbox { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sa-sup-diagbox > summary { display: flex; align-items: center; min-height: var(--hit); cursor: pointer; font: var(--text-label); color: var(--ink); list-style: none; }
.sa-sup-diagbox > summary::-webkit-details-marker { display: none; }
.sa-sup-diag { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0; font: var(--text-meta); }
.sa-sup-diag dt { color: var(--slate); }
.sa-sup-diag dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.sa-sup-thread { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.sa-sup-msg { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sa-sup-msg--support { background: var(--info-tint); }
.sa-sup-msg__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font: var(--text-label); color: var(--ink); }
.sa-sup-msg__body { margin: 0; font: var(--text-body); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sa-sup-att { display: inline-block; margin-top: var(--space-2); padding: 0; border: 1px solid var(--line); border-radius: var(--r-control); background: none; cursor: zoom-in; }
.sa-sup-att img { display: block; max-width: 14rem; max-height: 10rem; }
.sa-sup-att:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sa-sup-reply { width: 100%; min-height: 8rem; resize: vertical; }
.sa-sup-actions { display: flex; justify-content: flex-end; margin-top: var(--space-3); }

/* Backups page (C1) */
.sa-bk-banner { margin: 0 0 var(--space-3); border-radius: var(--r-card); }
.sa-bk-banner code { font: var(--text-meta-strong); }
.sa-bk-head { margin: 0 0 var(--space-3); }
.sa-bk-head__title { margin: 0 0 var(--space-1); font: var(--text-heading); color: var(--ink); }
.sa-bk-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; font: var(--text-meta); color: var(--slate); overflow-wrap: anywhere; }
.sa-bk-preview { margin: var(--space-4) 0 0; }
.sa-bk-preview .sa-subhead { margin: var(--space-3) 0 var(--space-1); }
.sa-bk-preview__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.sa-bk-restores { margin: var(--space-4) 0 0; }

/* L-PFR packages tab (C2) */
.sa-esc-sub { margin: var(--space-3) var(--space-4) 0; }
.sa-esc-dl { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sa-esc-dl .k-field { width: auto; min-width: 8rem; }

/* Tills part of Backups (C3) */
.sa-bk-tills { margin: var(--space-4) 0 0; }
.sa-tb-sub { margin: var(--space-2) var(--space-4) 0; }

/* Paketi: catalog editor (1.16.0) */
.sa-catalog__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px 16px; align-items: center; }
/* Price + "U prodaji" in one cell (1.20.0) */
.sa-catalog__cell { display: flex; align-items: center; gap: 12px; }
.sa-catalog__cell > .k-field { flex: 0 0 160px; width: 160px; }
.sa-catalog__grid .k-label { margin: 0; }