/* Super Admin — DigitalMeni platform panel */

:root {
  --sa-brand: #19535C;
  --sa-ink: #19535C;
  --sa-ink-soft: #247a85;
  --sa-ink-mid: #1e6570;
  --sa-accent: #19535C;
  --sa-accent-hot: #1ca698;
  --sa-accent-dim: rgba(25, 83, 92, 0.12);
  --sa-warn: #d97706;
  --sa-danger: #dc2626;
  --sa-ok: #059669;
  --sa-surface: #f3f7f8;
  --sa-card: #ffffff;
  --sa-elevated: #f7fbfb;
  --sa-input-bg: #ffffff;
  --sa-line: rgba(25, 83, 92, 0.12);
  --sa-text: #0f172a;
  --sa-muted: #5b6b73;
  --sa-label: #0f172a;
  --sa-glava-h: 74px;   /* иста висина за брендот и топ-лентата */
  --sa-sidebar-w: 260px;
  --sa-radius: 10px;
  --sa-ctl-h: 40px;   /* edna visina za search, chipovi, kopcinja, toggler */
  --sa-radius-sm: 10px;
  --sa-shadow: 0 1px 2px rgba(25, 83, 92, 0.05), 0 8px 24px rgba(25, 83, 92, 0.08);
  --sa-font: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
  --sa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sa-grad: #19535C;
  --sa-grad-soft: #e8f2f3;
  --sa-topbar-bg: rgba(243, 246, 249, 0.88);
  --sa-toolbar-bg: rgba(243, 247, 248, 0.96);
  --sa-sidebar-bg: #ffffff;
  --sa-main-bg: var(--sa-surface);
  --sa-code-bg: rgba(12, 22, 36, 0.06);
  --sa-hover: rgba(25, 83, 92, 0.07);
  --sa-active-bg: #e6f1f2;
  --sa-active-ring: rgba(25, 83, 92, 0.22);
  --sa-bottom-nav-bg: rgba(255, 255, 255, 0.94);
  --sa-theme-meta: #19535C;
  color-scheme: light;
}

html[data-theme="dark"] {
  --sa-brand: #3db0bc;
  --sa-ink: #7ec8d0;
  --sa-ink-soft: #4db0bc;
  --sa-ink-mid: #3a8f9a;
  --sa-accent: #3db0bc;
  --sa-accent-hot: #5bc4ce;
  --sa-accent-dim: rgba(61, 176, 188, 0.18);
  --sa-warn: #f0b429;
  --sa-danger: #f87171;
  --sa-ok: #34d399;
  --sa-surface: #0d1618;
  --sa-card: #152226;
  --sa-elevated: #1a2c30;
  --sa-input-bg: #1a2c30;
  --sa-line: rgba(126, 200, 208, 0.14);
  --sa-text: #e8f2f3;
  --sa-muted: #8aa3a8;
  --sa-label: #e8f2f3;
  --sa-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
  --sa-grad: #19535C;
  --sa-grad-soft: #1a2c30;
  --sa-topbar-bg: rgba(13, 22, 24, 0.9);
  --sa-toolbar-bg: rgba(21, 34, 38, 0.96);
  --sa-sidebar-bg: #121c1f;
  --sa-main-bg: var(--sa-surface);
  --sa-code-bg: rgba(255, 255, 255, 0.06);
  --sa-hover: rgba(61, 176, 188, 0.1);
  --sa-active-bg: #1e3a40;
  --sa-active-ring: rgba(61, 176, 188, 0.35);
  --sa-bottom-nav-bg: rgba(18, 28, 31, 0.96);
  --sa-theme-meta: #0d1618;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body.sa-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sa-font);
  font-weight: 400;
  color: var(--sa-text);
  background: var(--sa-surface);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
code {
  font-size: 0.85em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: var(--sa-code-bg);
}

/* ── Login ─────────────────────────────────────────── */

.sa-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background: #e8f2f3;
}

.sa-login-page::before {
  display: none;
}

@keyframes sa-grid-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(48px, 48px); }
}

.sa-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 40px 36px;
  border-radius: 20px;
  background: var(--sa-card);
  box-shadow: 0 20px 50px rgba(15, 118, 110, 0.12);
  border: 1px solid var(--sa-line);
  animation: sa-rise 0.55s var(--sa-ease) both;
}

@keyframes sa-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.sa-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.sa-btn:disabled,
.sa-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* <a class="sa-btn"> nema :disabled — JS stava aria-disabled (Preview/Najava bez URL). */
.sa-btn[aria-disabled="true"] {
  pointer-events: none;
}

/* Znachkata e vistinskoto logo (dm-zelena.svg) — pozadinata ja nosi SVG. */
img.sa-login-mark {
  background: none;
  padding: 0;
  object-fit: contain;
}

.sa-login-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sa-grad);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 20px rgba(25, 83, 92, 0.35);
}

.sa-login-brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sa-login-sub {
  margin: 0 0 28px;
  color: var(--sa-muted);
  font-size: 14px;
}

.sa-login-card .sa-field { margin-bottom: 16px; }

.sa-login-card .sa-btn {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
  padding: 13px 18px;
  font-size: 15px;
}

/* ── Shell ─────────────────────────────────────────── */

.sa-shell {
  display: flex;
  min-height: 100vh;
}

.sa-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sa-sidebar-w);
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--sa-sidebar-bg);
  color: var(--sa-text);
  border-right: 1px solid var(--sa-line);
  transition: transform 0.35s var(--sa-ease);
}

/* Брендот и топ-лентата се две соседни кутии со долен раб. Ако не се исто
   високи, тие два раба се две линии на различна висина — она „скршено" во
   главата. Заедничка височина (`--sa-glava-h`) ги спојува во една. */
.sa-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--sa-glava-h);
  box-sizing: border-box;
  padding: 0 22px;
  border-bottom: 1px solid var(--sa-line);
}

.sa-sidebar-brand .sa-login-mark {
  width: 40px;
  height: 40px;
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(25, 83, 92, 0.28);
}

.sa-sidebar-brand strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sa-text);
}

.sa-sidebar-brand span {
  display: block;
  font-size: 12px;
  color: var(--sa-muted);
  margin-top: 2px;
}

.sa-nav {
  flex: 1;
  padding: 18px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sa-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sa-muted);
  padding: 10px 12px 6px;
}

.sa-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--sa-muted);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.sa-nav-link i {
  width: 20px;
  text-align: center;
  font-size: 15px;
  opacity: 0.9;
}

.sa-nav-link:hover {
  background: var(--sa-hover);
  color: var(--sa-text);
}

.sa-nav-link.is-active {
  background: var(--sa-active-bg);
  color: var(--sa-brand);
  box-shadow: inset 0 0 0 1px var(--sa-active-ring);
  font-weight: 600;
}

.sa-nav-link.is-active i { color: var(--sa-brand); }

.sa-sidebar-foot {
  padding: 14px 14px 16px;
  border-top: 1px solid var(--sa-line);
}

.sa-sidebar-foot-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.sa-sidebar-foot-left {
  flex: 1;
  min-width: 0;
}

.sa-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sa-accent-dim);
  color: var(--sa-ink);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.sa-user-chip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sa-text);
}

.sa-user-chip small {
  display: block;
  font-size: 11px;
  color: var(--sa-muted);
  margin-top: 2px;
}

.sa-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: rgba(25, 83, 92, 0.06);
  color: var(--sa-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.sa-logout-btn:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--sa-danger);
}

/* ── Main ──────────────────────────────────────────── */

.sa-main {
  flex: 1;
  margin-left: var(--sa-sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--sa-main-bg);
}

/* Насловот и изборот на пазар остануваат горе — скрола само содржината под
   нив. `sticky`, не `fixed`: ширината и местото ги држи распоредот, па нема
   пресметка на отстапка кога страничната лента се крие на мобилен.
   `backdrop-filter` е безбеден ТУКА бидејќи ниту еден потомок не е
   `position: fixed` (паѓачкото мени е `absolute`) — инаку би му го скршил
   позиционирањето, исто како `transform`. */
.sa-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--sa-glava-h);
  box-sizing: border-box;
  padding: 12px 28px;
  background: var(--sa-topbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sa-line);
}


.sa-topbar-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sa-topbar-title p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--sa-muted);
}

.sa-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--sa-accent-dim);
  color: #0d7a6f;
}

.sa-badge--ink {
  background: rgba(21, 34, 56, 0.08);
  color: var(--sa-ink-mid);
}

.sa-badge--warn {
  background: rgba(232, 163, 23, 0.15);
  color: #9a6a00;
}

.sa-badge--ok {
  background: rgba(34, 160, 107, 0.14);
  color: #157a4f;
}

.sa-badge--danger {
  background: rgba(224, 69, 69, 0.12);
  color: #b52e2e;
}

.sa-badge--addon {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}

/* Bundle accent tones (clients + filter chips) */
.sa-bundle-tone--basic,
.sa-bundle-tone--t1 { --sa-bundle: #64748b; --sa-bundle-soft: rgba(100, 116, 139, 0.14); --sa-bundle-text: #334155; }
.sa-bundle-tone--standard,
.sa-bundle-tone--t2 { --sa-bundle: #0d9488; --sa-bundle-soft: rgba(13, 148, 136, 0.14); --sa-bundle-text: #0f766e; }
.sa-bundle-tone--premium,
.sa-bundle-tone--t3 { --sa-bundle: #d97706; --sa-bundle-soft: rgba(217, 119, 6, 0.16); --sa-bundle-text: #b45309; }
.sa-bundle-tone--pro,
.sa-bundle-tone--t4 { --sa-bundle: #2563eb; --sa-bundle-soft: rgba(37, 99, 235, 0.14); --sa-bundle-text: #1d4ed8; }
.sa-bundle-tone--starter,
.sa-bundle-tone--free,
.sa-bundle-tone--t5 { --sa-bundle: #16a34a; --sa-bundle-soft: rgba(22, 163, 74, 0.14); --sa-bundle-text: #15803d; }
.sa-bundle-tone--trial,
.sa-bundle-tone--enterprise,
.sa-bundle-tone--t6,
.sa-bundle-tone--unknown { --sa-bundle: #7c3aed; --sa-bundle-soft: rgba(124, 58, 237, 0.14); --sa-bundle-text: #6d28d9; }

.sa-badge--bundle {
  background: var(--sa-bundle-soft, var(--sa-accent-dim));
  color: var(--sa-bundle-text, #0d7a6f);
  border: 1px solid color-mix(in srgb, var(--sa-bundle, #19535C) 28%, transparent);
}

.sa-addon-block {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: var(--sa-elevated);
}

.sa-addon-block-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-muted);
}

.sa-addon-block-hint {
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--sa-muted);
}

html[data-theme="dark"] .sa-badge--addon {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
}

.sa-badge--link {
  /* Brend tinta — sinata #1d4ed8 bese nadvor od paletata. */
  background: rgba(28, 166, 152, 0.12);
  color: var(--sa-brand, #19535c);
  text-decoration: none;
}

.sa-badge--link:hover {
  background: rgba(28, 166, 152, 0.22);
}

html[data-theme="dark"] .sa-badge--link {
  background: rgba(61, 176, 188, 0.18);
  color: #7ec8d0;
}

.sa-mini-fields {
  margin-top: 4px;
}

.sa-mini-link-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--sa-line);
}

.sa-mini-link-box > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--sa-muted);
}

.sa-mini-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sa-mini-link-row input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.sa-content {
  padding: 24px 28px 48px;
  animation: sa-fade-in 0.35s var(--sa-ease) both;
}

/* Opacity-only — transform on ancestors breaks position:fixed modals */
@keyframes sa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sa-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Stats ─────────────────────────────────────────── */

.sa-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

.sa-stat {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: var(--sa-radius);
  background: var(--sa-card);
  box-shadow: var(--sa-shadow);
  border: 1px solid var(--sa-line);
}


.sa-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.sa-stat-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.sa-stat-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sa-accent-dim);
  color: var(--sa-accent);
  font-size: 14px;
}

/* ── Cards / panels ────────────────────────────────── */

.sa-panel {
  background: var(--sa-card);
  border-radius: var(--sa-radius);
  box-shadow: var(--sa-shadow);
  border: 1px solid var(--sa-line);
  margin-bottom: 18px;
  /* visible so sticky toolbars work; radius still clips via child corners */
  overflow: visible;
}

.sa-panel > .sa-panel-head:first-child,
.sa-panel > .sa-panel-toolbar:first-child {
  border-radius: var(--sa-radius) var(--sa-radius) 0 0;
}

.sa-panel > .sa-panel-body:last-child,
.sa-panel > .sa-table-wrap:last-child {
  border-radius: 0 0 var(--sa-radius) var(--sa-radius);
}

.sa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--sa-line);
}

.sa-panel-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sa-panel-head .muted {
  font-size: 13px;
  color: var(--sa-muted);
  font-weight: 400;
  margin-left: 8px;
}

.sa-panel-body { padding: 20px 22px; }

.sa-panel-body--flush { padding: 0; }

.sa-search {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 420px;
}

.sa-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sa-brand);
  font-size: 14px;
  pointer-events: none;
  opacity: 0.7;
}

.sa-search input {
  width: 100%;
  height: var(--sa-ctl-h);
  box-sizing: border-box;
  padding: 0 14px 0 42px;
  border: 2px solid rgba(25, 83, 92, 0.18);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-input-bg);
  font-size: 14px;
  font-weight: 500;
  color: var(--sa-text);
  box-shadow: 0 2px 8px rgba(25, 83, 92, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sa-search input::placeholder {
  color: #8a9aa0;
  font-weight: 500;
}

.sa-search input:focus {
  outline: none;
  border-color: var(--sa-brand);
  box-shadow: 0 0 0 4px rgba(25, 83, 92, 0.12);
  background: var(--sa-input-bg);
}

/* Kanonska kontrola vo formi — input/select/textarea. Klasata `sa-input` se
   koristeshe vo markapot od pochetok, a pravilo nemashe: poliyata izleguvaa
   nestilizirani, a onie sto izgledaa dobro nosea ist stil vklopen inline.
   Ednо mesto, ista geometrija kako `Prebaraj` (10px, --sa-ctl-h). */
.sa-input {
  height: var(--sa-ctl-h);
  max-width: 100%;   /* na tesen ekran kontrolata ne smee da izleze od kartichkata */
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-input-bg);
  color: var(--sa-text);
  font-family: var(--sa-font);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea.sa-input {
  height: auto;
  padding: 10px 12px;
  line-height: 1.45;
}

.sa-input:focus {
  outline: none;
  border-color: var(--sa-brand);
  box-shadow: 0 0 0 4px rgba(25, 83, 92, 0.12);
}

.sa-input:disabled,
.sa-field input:disabled,
.sa-field select:disabled,
.sa-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sa-panel-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 14px 18px;
  background: var(--sa-card);
  border-bottom: 1px solid var(--sa-line);
  box-shadow: 0 1px 0 rgba(25, 83, 92, 0.04);
}

/* Групата чипови се лепи десно на десктоп. Порано тоа беше инлајн
   `margin-left:auto` во sadmin.php — а инлајн стил не може да се исклучи
   од медиа прашање, што на телефон го буткаше насловот кон средината. */
.sa-panel-toolbar > .sa-filter-group--desno { margin-left: auto; }

.sa-panel-toolbar-title {
  flex: 0 1 auto;
  min-width: 0;
}

.sa-panel-toolbar-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sa-panel-toolbar-title .muted {
  color: var(--sa-muted);
  font-weight: 600;
  font-size: 13px;
}

.sa-panel-toolbar-title .sa-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--sa-muted);
}

.sa-panel-toolbar .sa-btn {
  flex: 0 0 auto;
}

.sa-panel-toolbar .sa-search {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: none;
}

.sa-panel-toolbar .sa-view-toggle {
  flex: 0 0 auto;
}

.sa-panel-toolbar .sa-market-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 860px) {
.sa-panel-toolbar {
    /* Na telefon skrola PROZORECOT, a top-lentata e sticky na 0 — lentata so
       prebaruvanje mora da zastane POD nea, ne zad nea. Visinata ja meri JS
       (--sa-topbar-h), rezerva e --sa-glava-h (08.09.2026). */
    top: var(--sa-topbar-h, var(--sa-glava-h));
    flex-wrap: wrap;
    padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(25, 83, 92, 0.08);
  }

  .sa-panel-toolbar-title {
    flex: 1 1 auto;
    order: 1;
  }

  .sa-panel-toolbar > .sa-btn {
    order: 2;
  }

.sa-panel-toolbar .sa-search {
    flex: 1 1 100%;
    max-width: none;
    order: 3;
  }

  .sa-panel-toolbar .sa-view-toggle {
    order: 4;
  }

  /* БЕЗ `order` оваа група паѓа на 0 и скока ПРЕД насловот — а со
     `margin-left:auto` го буткаше и настрана. Тоа беше „искршената"
     лента кај Дистрибутери: чипови горе, наслов на средина, копче долу. */
  .sa-panel-toolbar > .sa-filter-group--desno {
    order: 5;
    flex: 1 1 100%;
    margin-left: 0;
  }

.sa-panel-toolbar .sa-market-bar {
    flex: 1 1 100%;
    order: 4;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 2px 14px 6px;
    width: calc(100% + 28px);
    max-width: none;
  }

.sa-panel-toolbar .sa-market-bar::-webkit-scrollbar,
.sa-market-bar::-webkit-scrollbar {
    display: none;
  }

.sa-panel-toolbar .sa-market-chip,
.sa-market-bar .sa-market-chip {
    flex: 0 0 auto;
  }

  .sa-search input {
    padding: 14px 14px 14px 44px;
    font-size: 16px;
    border-width: 2px;
    border-color: rgba(25, 83, 92, 0.28);
    box-shadow: 0 4px 14px rgba(25, 83, 92, 0.1);
  }
}

/* ── Forms ─────────────────────────────────────────── */

.sa-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-label);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.sa-field label.sa-check {
  display: inline-flex;
  margin-bottom: 0;
  width: auto;
  max-width: 100%;
}

.sa-field-hint {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--sa-muted);
  line-height: 1.35;
  margin: 0 0 8px;
}

/* Vo red od polinja potsetnicite se so razlicna dolzhina. Dvoreden potsetnik go
   turkashe SVOETO pole podolu od sosedite i redot izgleda skrshen (kod/usernejm
   nasproti lozinka i ime). Poleto e kolona, a kontrolata se lepi za dolniot kraj:
   slobodniot prostor odi NAD nea, pa site kontroli vo redot sedat na ista visina
   bez ogled kolku redovi zafata potsetnikot. */
.sa-grid > .sa-field {
  display: flex;
  flex-direction: column;
}
.sa-grid > .sa-field > input,
.sa-grid > .sa-field > select,
.sa-grid > .sa-field > textarea,
.sa-grid > .sa-field > .sa-kluc-red,
/* `.sa-loz-red` i `.sa-fajl` bea ispushteni od ovoj spisok, pa kontrolata na
   lozinkata i na logoto ne se poramnuvaa so sosednite polinja vo istiot red. */
.sa-grid > .sa-field > .sa-loz-red,
.sa-grid > .sa-field > .sa-fajl {
  margin-top: auto;
}

.sa-drawer .sa-field label,
.sa-drawer-head h3 {
  color: var(--sa-label);
}

.sa-drawer-head p {
  color: var(--sa-muted);
}

.sa-field input,
.sa-field select,
.sa-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-input-bg);
  font-size: 14px;
  line-height: 1.25;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sa-field input,
.sa-field select {
  height: 42px;
}

.sa-field select {
  padding-top: 0;
  padding-bottom: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sa-muted) 50%),
    linear-gradient(135deg, var(--sa-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.sa-field textarea {
  min-height: 88px;
  height: auto;
  resize: vertical;
}

.sa-field input:focus,
.sa-field select:focus,
.sa-field textarea:focus {
  outline: none;
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px var(--sa-accent-dim);
}

.sa-grid {
  display: grid;
  gap: 14px;
}

.sa-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sa-check-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sa-check {
  position: relative;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--sa-line);
  background: var(--sa-input-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}

.sa-check:hover {
  border-color: rgba(25, 83, 92, 0.35);
  background: var(--sa-hover);
}

.sa-check:has(input:checked) {
  border-color: rgba(25, 83, 92, 0.45);
  background: rgba(25, 83, 92, 0.1);
  color: var(--sa-brand);
  box-shadow: 0 0 0 3px rgba(25, 83, 92, 0.08);
}

.sa-check input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid rgba(25, 83, 92, 0.28);
  border-radius: 6px;
  background: var(--sa-card);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.sa-check input::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translate(-50%, -55%) rotate(45deg) scale(0.4);
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.sa-check input:checked {
  background: var(--sa-brand);
  border-color: var(--sa-brand);
  box-shadow: 0 2px 8px rgba(25, 83, 92, 0.25);
}

.sa-check input:checked::after {
  opacity: 1;
  transform: translate(-50%, -55%) rotate(45deg) scale(1);
}

.sa-check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 83, 92, 0.2);
}

html[data-theme="dark"] .sa-check:has(input:checked) {
  border-color: rgba(61, 176, 188, 0.45);
  background: rgba(61, 176, 188, 0.14);
  color: var(--sa-ink);
  box-shadow: 0 0 0 3px rgba(61, 176, 188, 0.1);
}

html[data-theme="dark"] .sa-check input {
  border-color: rgba(126, 200, 208, 0.28);
}

html[data-theme="dark"] .sa-check input:checked {
  background: var(--sa-brand);
  border-color: var(--sa-brand);
}

/* ── Buttons ───────────────────────────────────────── */

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--sa-ctl-h);
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: var(--sa-radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: #19535C;
  color: #fff;
  border: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
  box-shadow: none;
  white-space: nowrap;
}

.sa-btn:hover {
  background: #247a85;
  filter: none;
  transform: translateY(-1px);
  box-shadow: none;
}

.sa-btn:active { transform: translateY(0); }

.sa-btn--ghost {
  background: transparent;
  color: var(--sa-text);
  box-shadow: none;
  border: 1px solid var(--sa-line);
}

.sa-btn--ghost:hover {
  background: var(--sa-surface);
  filter: none;
  box-shadow: none;
}

.sa-btn--danger {
  background: #dc2626;
  box-shadow: none;
}

.sa-btn--danger:hover {
  background: #b91c1c;
}

.sa-btn--sm {
  padding: 7px 12px;
  font-size: 12px;
  box-shadow: none;
}

/* ── Tables ────────────────────────────────────────── */

.sa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.sa-table th {
  text-align: left;
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-muted);
  background: rgba(12, 22, 36, 0.02);
  border-bottom: 1px solid var(--sa-line);
  white-space: nowrap;
}

.sa-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--sa-line);
  vertical-align: middle;
}

.sa-table tbody tr {
  transition: background 0.15s;
}

.sa-table tbody tr:hover {
  background: rgba(25, 83, 92, 0.03);
}

.sa-table tbody tr:last-child td { border-bottom: none; }

.sa-table .name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sa-table .sub {
  display: block;
  font-size: 12px;
  color: var(--sa-muted);
  font-weight: 400;
  margin-top: 2px;
}

.sa-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.sa-inline-form select,
.sa-inline-form input[type="date"] {
  padding: 7px 10px;
  border: 1px solid var(--sa-line);
  border-radius: 8px;
  background: var(--sa-surface);
  font-size: 13px;
  min-width: 0;
}

.sa-inline-form select { max-width: 140px; }
.sa-inline-form input[type="date"] { max-width: 150px; }

.sa-inline-form select:focus,
.sa-inline-form input[type="date"]:focus {
  outline: none;
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px var(--sa-accent-dim);
}

.sa-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--sa-muted);
}

.sa-empty i {
  display: block;
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ── Alerts ────────────────────────────────────────── */

.sa-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--sa-radius-sm);
  margin-bottom: 18px;
  font-size: 14px;
  animation: sa-rise 0.35s var(--sa-ease) both;
}

.sa-alert[hidden] {
  display: none !important;
}

.sa-alert--error {
  background: #fef2f2;
  color: #9b1c1c;
  border: 1px solid rgba(224, 69, 69, 0.2);
}

.sa-alert--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.sa-alert i { margin-top: 2px; flex-shrink: 0; }

.sa-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 13000;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(520px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  animation: sa-toast-in 0.28s var(--sa-ease) both;
}

.sa-toast--success {
  background: #065f46;
  color: #ecfdf5;
}

.sa-toast--error {
  background: #9b1c1c;
  color: #fef2f2;
}

.sa-toast-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 0 2px;
}

.sa-toast-close:hover { opacity: 1; }

@keyframes sa-toast-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.sa-hint {
  font-size: 13px;
  color: var(--sa-muted);
  margin: 0 0 16px;
}

/* ── Responsive ────────────────────────────────────── */

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

@media (max-width: 860px) {
  .sa-sidebar { display: none !important; }

  .sa-main {
    margin-left: 0;
    /* Prostor za zakotvenata lenta: poslednite redovi mora da izlezat NAD nea. */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .sa-topbar,
  .sa-content { padding-left: 16px; padding-right: 16px; }

  .sa-content { padding-bottom: 32px; }

.sa-grid-2 { grid-template-columns: minmax(0, 1fr); }

  .sa-inline-form {
    flex-direction: column;
    align-items: stretch;
  }

  .sa-inline-form select,
  .sa-inline-form input[type="date"] {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sa-stats { grid-template-columns: 1fr; }
  .sa-login-card { padding: 28px 22px; }
  .sa-topbar-title h2 { font-size: 17px; }
  .sa-pkg-grid { grid-template-columns: 1fr; }
}

/* Row hide for client search */
.sa-table tbody tr.is-hidden { display: none; }
.sa-client-card.is-hidden { display: none !important; }

/* ── Action buttons ────────────────────────────────── */

.sa-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.sa-card-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.sa-card-btn-edit {
  flex: 4 1 0;
  min-width: 0;
  height: 42px;
  border: none;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(25, 83, 92, 0.12);
  color: #19535C;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.15s, transform 0.15s, color 0.15s;
}

.sa-card-btn-edit:hover {
  background: rgba(25, 83, 92, 0.18);
  transform: translateY(-1px);
  color: #19535C;
}

.sa-card-btn-del {
  flex: 1 1 0;
  min-width: 42px;
  max-width: 56px;
  height: 42px;
  border: none;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  font-size: 14px;
  box-shadow: none;
  transition: background 0.15s, transform 0.15s, color 0.15s;
}

.sa-card-btn-del:hover {
  background: rgba(220, 38, 38, 0.2);
  transform: translateY(-1px);
  color: #dc2626;
}

.sa-card-btn-login {
  flex: 1 1 0;
  min-width: 42px;
  max-width: 56px;
  height: 42px;
  border: none;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  box-shadow: none;
  transition: background 0.15s, transform 0.15s, color 0.15s;
  text-decoration: none;
  cursor: pointer;
  background: rgba(25, 83, 92, 0.14);
  color: var(--sa-brand);
}

.sa-card-btn-login:hover {
  background: rgba(25, 83, 92, 0.22);
  transform: translateY(-1px);
  color: var(--sa-brand);
}

.sa-card-actions .sa-card-btn-edit:only-child {
  flex: 1 1 100%;
  max-width: none;
}

.sa-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  border: none;
  background: rgba(25, 83, 92, 0.12);
  color: #19535C;
  font-size: 13px;
  box-shadow: none;
  transition: background 0.15s, transform 0.15s, color 0.15s;
}

.sa-icon-btn:hover {
  background: rgba(25, 83, 92, 0.18);
  transform: translateY(-1px);
  color: #19535C;
}

.sa-icon-btn--danger {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  box-shadow: none;
}

.sa-icon-btn--danger:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

.sa-icon-btn--login {
  background: rgba(25, 83, 92, 0.12);
  color: #19535C;
}

.sa-icon-btn--login:hover {
  background: rgba(25, 83, 92, 0.2);
  color: #19535C;
}

.sa-admin-login-box {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(25, 83, 92, 0.12);
}

.sa-admin-login-box > label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

html[data-theme="dark"] .sa-card-btn-edit,
html[data-theme="dark"] .sa-card-btn-login,
html[data-theme="dark"] .sa-icon-btn {
  background: rgba(61, 176, 188, 0.16);
  color: #7ec8d0;
}

html[data-theme="dark"] .sa-card-btn-edit:hover,
html[data-theme="dark"] .sa-card-btn-login:hover,
html[data-theme="dark"] .sa-icon-btn:hover {
  background: rgba(61, 176, 188, 0.24);
  color: #9ad6dc;
}

html[data-theme="dark"] .sa-card-btn-del,
html[data-theme="dark"] .sa-icon-btn--danger {
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
}

html[data-theme="dark"] .sa-card-btn-del:hover,
html[data-theme="dark"] .sa-icon-btn--danger:hover {
  background: rgba(248, 113, 113, 0.24);
  color: #fca5a5;
}

/* ── Modals ────────────────────────────────────────── */

.sa-modal-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 0;
}

.sa-modal-root.is-open {
  display: flex;
}

.sa-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* Isto staklo kako musteriskiot admin (ekranForma) — svetlo mlечno. */
  background: rgba(240, 246, 247, .45);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  animation: sa-fade 0.2s ease both;
}

.sa-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: min(90vh, 90dvh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sa-card);
  border-radius: var(--sa-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--sa-line);
  animation: sa-rise 0.3s var(--sa-ease) both;
}

.sa-modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}

.sa-modal--sm { max-width: 420px; }

.sa-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--sa-line);
  flex-shrink: 0;
  background: var(--sa-card);
  z-index: 2;
}

.sa-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sa-modal-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--sa-muted);
}

.sa-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--sa-muted);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.sa-modal-close:hover {
  background: var(--sa-surface);
  color: var(--sa-text);
}

.sa-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 22px 8px;
}

.sa-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--sa-line);
  flex-shrink: 0;
  background: var(--sa-card);
}

.sa-modal--danger .sa-modal-head h3 { color: var(--sa-danger); }

.sa-modal-root--center {
  align-items: center;
  justify-content: center;
}

.sa-modal--danger .sa-modal-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sa-text);
}

body.sa-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .sa-modal-root { padding: 10px; align-items: flex-end; }
  .sa-modal-root--center { align-items: center; }
  .sa-modal {
    max-height: min(92vh, 92dvh);
    border-radius: 16px 16px 12px 12px;
  }
  /* DigitalPOS modal: sodrzhinata e dolga (zaglavje + stavki + zbir + povrzi),
     pa na telefon zema skoro cel ekran so potesni rabovi — inaku ostanuva
     „mal skrol" od 20-30px sto samo nervira (08.09.2026). */
  #modalDpos .sa-modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  #modalDpos .sa-modal-head { padding: 14px 16px 10px; }
  #modalDpos .sa-modal-body { padding: 12px 14px 4px; }
  #modalDpos .sa-modal-foot { padding: 10px 14px 12px; }
  #modalDpos .sa-dpos-detal { padding-bottom: 0; }
}

/* ── View toggle ───────────────────────────────────── */

.sa-view-toggle {
  display: inline-flex;
  align-items: center;
  height: var(--sa-ctl-h);   /* porano 2+3+32+3+2 = 42px, 1px povisok od search/kopce */
  box-sizing: border-box;
  background: var(--sa-card);
  border: 2px solid rgba(25, 83, 92, 0.14);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}

.sa-view-toggle button {
  width: 36px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--sa-muted);
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}

.sa-view-toggle button.is-active {
  background: #19535C;
  color: #fff;
  box-shadow: none;
}

@media (max-width: 860px) {
  .sa-view-toggle { display: none; }
}

/* ── Module cards / table ──────────────────────────── */

.sa-module-cards {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 18px;
}

/* Tabovi bez cards/table prekinuvac (distributeri) — sekogas grid.
   Bez ova .sa-module-cards e display:none i karticka „snemuva". */
.sa-module-cards--sekogas { display: grid; }

.sa-module-cards .sa-client-card.is-hidden,
.sa-module-cards .sa-mod-card.is-hidden { display: none !important; }

.sa-shell[data-view-klienti="cards"] .sa-module-cards[data-module="klienti"],
.sa-shell[data-view-admini="cards"] .sa-module-cards[data-module="admini"],
.sa-shell[data-view-domeni="cards"] .sa-module-cards[data-module="domeni"] {
  display: grid;
}

.sa-shell[data-view-klienti="cards"] .sa-module-table[data-module="klienti"],
.sa-shell[data-view-admini="cards"] .sa-module-table[data-module="admini"],
.sa-shell[data-view-domeni="cards"] .sa-module-table[data-module="domeni"] {
  display: none;
}

@media (max-width: 860px) {
  .sa-module-cards { display: grid !important; }
  .sa-module-table { display: none !important; }
}

.sa-mod-card {
  position: relative;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--sa-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s var(--sa-ease), box-shadow 0.2s;
}

.sa-mod-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(25, 83, 92, 0.12);
}

.sa-mod-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sa-mod-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sa-mod-card-foot {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--sa-line);
}

.sa-pkg.is-hidden { display: none !important; }

/* ── Client cards ──────────────────────────────────── */

.sa-clients-cards {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 18px;
}

/* legacy aliases kept for safety */
.sa-shell[data-client-view="cards"] .sa-clients-cards,
.sa-shell[data-view-klienti="cards"] .sa-clients-cards { display: grid; }
.sa-shell[data-client-view="cards"] .sa-clients-table-wrap,
.sa-shell[data-view-klienti="cards"] .sa-clients-table-wrap { display: none; }

@media (max-width: 860px) {
  .sa-clients-cards { display: grid !important; }
  .sa-clients-table-wrap { display: none !important; }
}

.sa-client-card {
  position: relative;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: var(--sa-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s var(--sa-ease), box-shadow 0.2s;
  overflow: hidden;
}

.sa-client-card[data-bundle]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--sa-bundle, var(--sa-accent, #19535C));
  border-radius: 14px 0 0 14px;
}

.sa-client-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12, 22, 36, 0.1);
}

.sa-client-card.is-expired {
  background: #fff5f5;
  border-color: #f5b4b4;
  box-shadow: 0 0 0 1px rgba(224, 69, 69, 0.12), var(--sa-shadow);
}

.sa-client-card.is-expiring {
  background: #fffbf0;
  border-color: #f0d48a;
}

.sa-client-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sa-client-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e6f1f2;
  color: #19535C;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.sa-client-avatar--sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
}

.sa-client-avatar.has-logo {
  background: #fff;
  border: 1px solid var(--sa-line);
  padding: 0;
}

.sa-client-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sa-table-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sa-client-card.is-expired .sa-client-avatar {
  background: rgba(224, 69, 69, 0.12);
  color: var(--sa-danger);
}

.sa-client-card.is-expired .sa-client-avatar.has-logo {
  background: #fff;
}

html[data-theme="dark"] .sa-client-avatar {
  background: #1e3a40;
  color: var(--sa-brand);
}

html[data-theme="dark"] .sa-client-avatar.has-logo {
  background: var(--sa-elevated);
}

.sa-client-card-title {
  flex: 1;
  min-width: 0;
}

.sa-client-card-title strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-client-card-title span {
  display: block;
  font-size: 12px;
  color: var(--sa-muted);
  margin-top: 2px;
}

.sa-client-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sa-client-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--sa-line);
}

.sa-client-stat {
  font-size: 12px;
}

.sa-client-stat label {
  display: block;
  color: var(--sa-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.sa-client-stat b {
  font-weight: 600;
  font-size: 13px;
}

.sa-client-card-foot {
  display: flex;
  width: 100%;
  margin-top: 4px;
}

.sa-days-left {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-muted);
}

.sa-days-left.is-danger { color: var(--sa-danger); }
.sa-days-left.is-warn { color: #9a6a00; }

.sa-days-left--compact {
  display: none;
  font-size: 11px;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.sa-prod-bar {
  --sa-prod-fill: #059669;
  --sa-prod-soft: rgba(5, 150, 105, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.sa-prod-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sa-prod-bar-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-muted);
}

.sa-prod-bar-track {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: var(--sa-prod-soft);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.sa-prod-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sa-prod-fill);
  transition: width 0.25s var(--sa-ease);
  min-width: 0;
}

.sa-prod-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-text);
  white-space: nowrap;
  line-height: 1.1;
}

.sa-client-card-prod {
  width: 100%;
  margin-top: -4px;
}

.sa-table td.sa-td-prod {
  min-width: 140px;
}

/* Usage levels */
.sa-prod-bar.is-low {
  --sa-prod-fill: #059669;
  --sa-prod-soft: rgba(5, 150, 105, 0.16);
}

.sa-prod-bar.is-mid {
  --sa-prod-fill: #d97706;
  --sa-prod-soft: rgba(217, 119, 6, 0.16);
}

.sa-prod-bar.is-high {
  --sa-prod-fill: #ea580c;
  --sa-prod-soft: rgba(234, 88, 12, 0.16);
}

.sa-prod-bar.is-full {
  --sa-prod-fill: #dc2626;
  --sa-prod-soft: rgba(220, 38, 38, 0.16);
}

.sa-prod-bar.is-full .sa-prod-bar-fill {
  background: linear-gradient(to right, red 98.5%, purple 1.5%);
}

.sa-prod-bar.is-full .sa-prod-bar-label {
  color: #b91c1c;
}

.sa-prod-bar.is-unlimited {
  --sa-prod-fill: #64748b;
  --sa-prod-soft: rgba(100, 116, 139, 0.14);
}

.sa-prod-bar.is-unlimited .sa-prod-bar-fill {
  width: 100% !important;
  opacity: 0.22;
}

html[data-theme="dark"] .sa-prod-bar.is-low {
  --sa-prod-fill: #34d399;
  --sa-prod-soft: rgba(52, 211, 153, 0.18);
}

html[data-theme="dark"] .sa-prod-bar.is-mid {
  --sa-prod-fill: #f0b429;
  --sa-prod-soft: rgba(240, 180, 41, 0.18);
}

html[data-theme="dark"] .sa-prod-bar.is-high {
  --sa-prod-fill: #fb923c;
  --sa-prod-soft: rgba(251, 146, 60, 0.18);
}

html[data-theme="dark"] .sa-prod-bar.is-full {
  --sa-prod-fill: #f87171;
  --sa-prod-soft: rgba(248, 113, 113, 0.18);
}

html[data-theme="dark"] .sa-prod-bar.is-full .sa-prod-bar-fill {
  background: linear-gradient(to right, red 98.5%, purple 1.5%);
}

html[data-theme="dark"] .sa-prod-bar.is-full .sa-prod-bar-label {
  color: #f87171;
}

html[data-theme="dark"] .sa-prod-bar.is-unlimited {
  --sa-prod-fill: #94a3b8;
  --sa-prod-soft: rgba(148, 163, 184, 0.16);
}

.sa-card-chevron {
  display: none;
  color: var(--sa-muted);
  font-size: 12px;
  transition: transform 0.2s var(--sa-ease);
  flex-shrink: 0;
}

button.sa-client-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  cursor: default;
}

.sa-client-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 860px) {
  .sa-days-left--compact { display: inline-block; }
  .sa-card-chevron { display: inline-block; }

  button.sa-client-card-top {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .sa-client-card-body {
    display: none;
    padding-top: 4px;
  }

  .sa-client-card.is-open .sa-client-card-body {
    display: flex;
  }

  .sa-client-card.is-open .sa-card-chevron {
    transform: rotate(180deg);
  }

  .sa-client-card.is-open .sa-days-left--compact {
    display: none;
  }
}

/* Table expired row */
.sa-table tbody tr.is-expired {
  background: #fff5f5;
}

.sa-table tbody tr.is-expired:hover {
  background: #ffecec;
}

.sa-table tbody tr.is-expiring {
  background: #fffbf0;
}

/* Клиенти (табела): на тесен desktop акциите и името остануваат видливи.
   `border-collapse: separate` е задолжително — sticky не работи со collapse. */
#saClientsTable {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}
#saClientsTable th:first-child,
#saClientsTable td:first-child,
#saClientsTable th.sa-th-actions,
#saClientsTable td.sa-td-actions {
  position: sticky;
  z-index: 2;
  background: var(--sa-card);
  background-clip: padding-box;
}
#saClientsTable th:first-child,
#saClientsTable td:first-child {
  left: 0;
  min-width: 148px;
  max-width: 220px;
  box-shadow: 1px 0 0 var(--sa-line);
}
#saClientsTable th.sa-th-actions,
#saClientsTable td.sa-td-actions {
  right: 0;
  z-index: 4;
  white-space: nowrap;
  width: 1%;
  padding-left: 14px;
  padding-right: 12px;
  border-left: 1px solid var(--sa-line);
  /* Непрозрачна подлога + сенка — да не се гледаат Статус/Активен до „низ" акциите. */
  box-shadow: -12px 0 16px -4px rgba(12, 22, 36, 0.18);
}
#saClientsTable thead th:first-child,
#saClientsTable thead th.sa-th-actions {
  z-index: 5;
  background: #f4f6f8;
  color: var(--sa-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#saClientsTable thead th.sa-th-actions {
  text-align: right;
}
#saClientsTable tbody tr:hover td:first-child,
#saClientsTable tbody tr:hover td.sa-td-actions {
  background: #f3f7f8;
}
#saClientsTable tbody tr.is-expired td:first-child,
#saClientsTable tbody tr.is-expired td.sa-td-actions {
  background: #fff5f5;
}
#saClientsTable tbody tr.is-expired:hover td:first-child,
#saClientsTable tbody tr.is-expired:hover td.sa-td-actions {
  background: #ffecec;
}
#saClientsTable tbody tr.is-expiring td:first-child,
#saClientsTable tbody tr.is-expiring td.sa-td-actions {
  background: #fffbf0;
}
html[data-theme="dark"] #saClientsTable thead th:first-child,
html[data-theme="dark"] #saClientsTable thead th.sa-th-actions {
  background: #1a2428;
}
html[data-theme="dark"] #saClientsTable th.sa-th-actions,
html[data-theme="dark"] #saClientsTable td.sa-td-actions {
  box-shadow: -12px 0 16px -4px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] #saClientsTable tbody tr:hover td:first-child,
html[data-theme="dark"] #saClientsTable tbody tr:hover td.sa-td-actions {
  background: #1a2a2f;
}
html[data-theme="dark"] #saClientsTable tbody tr.is-expired td:first-child,
html[data-theme="dark"] #saClientsTable tbody tr.is-expired td.sa-td-actions {
  background: #1f2228;
}
html[data-theme="dark"] #saClientsTable tbody tr.is-expiring td:first-child,
html[data-theme="dark"] #saClientsTable tbody tr.is-expiring td.sa-td-actions {
  background: #242318;
}
@media (max-width: 1280px) {
  #saClientsTable .sa-col-email,
  #saClientsTable .sa-col-grad {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  #saClientsTable .sa-col-prod,
  #saClientsTable .sa-td-prod,
  #saClientsTable .sa-col-pos {
    display: none !important;
  }
  #saClientsTable {
    min-width: 560px;
    font-size: 13px;
  }
  #saClientsTable th,
  #saClientsTable td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.sa-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sa-th-sort::after {
  content: '⇅';
  opacity: 0.35;
  font-size: 10px;
  margin-left: 4px;
}

.sa-th-sort.is-asc::after { content: '↑'; opacity: 0.9; color: var(--sa-accent); }
.sa-th-sort.is-desc::after { content: '↓'; opacity: 0.9; color: var(--sa-accent); }

/* ── Right drawer (desktop) / bottom sheet (mobile) ── */

.sa-drawer-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 10000;
  display: none;
  margin: 0;
}

.sa-drawer-root.is-open {
  /* Kanon: NEMA fioki — istata razmetka, no kartata e CENTRIRANA vrz
     staklo, kako ekranForma vo klientskiot admin. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sa-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(240, 246, 247, .45);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  animation: sa-fade 0.2s ease both;
}

.sa-drawer {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: min(92vh, 92dvh);
  background: var(--sa-card);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sa-rise 0.3s var(--sa-ease) both;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
}

/* Form wraps head/body/foot — must itself be the flex column so body can scroll.
   На desktop НЕ height:100% (родителот е height:auto + max-height) — тоа го
   растеше формуларот и .sa-drawer-body никогаш не добиваше ограничен скрол. */
.sa-drawer > form,
.sa-drawer > .sa-drawer-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: min(92vh, 92dvh);
  overflow: hidden;
  width: 100%;
  margin: 0;
}

.sa-drawer-panel > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

.sa-drawer--lg { width: min(600px, 100%); }
.sa-drawer--wide { width: min(680px, 100%); }

@keyframes sa-slide-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

.sa-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--sa-line);
  flex-shrink: 0;
  background: var(--sa-card);
}

.sa-drawer-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sa-drawer-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--sa-muted);
}

.sa-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(min(92vh, 92dvh) - 9.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 22px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sa-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--sa-line);
  flex-shrink: 0;
  background: var(--sa-card);
  width: 100%;
  box-sizing: border-box;
}

.sa-drawer-foot .sa-btn {
  margin: 0;
  justify-content: center;
  white-space: nowrap;
  height: var(--sa-ctl-h);
  padding-left: 12px;
  padding-right: 12px;
}

.sa-drawer-foot .sa-btn:not(.sa-btn--ghost) {
  flex: 0 0 auto;
  min-width: 140px;
}

.sa-drawer-foot .sa-btn--ghost {
  flex: 0 0 auto;
  min-width: 96px;
}

@media (max-width: 860px) {
  /* `.sa-drawer-root.is-open` (0,2,0) e VON media i go nadjacuva goliot
     `.sa-drawer-root` (0,1,0) tuka — zatoa `align-items` i `padding` MORAAT da
     odat na `.is-open`, inace kartata na telefon ostanuva centrirana so 24px
     guteri namesto zalepena dolu kako list. */
  .sa-drawer-root {
    display: none;
    justify-content: center;
  }
  .sa-drawer-root.is-open { display: flex; align-items: flex-end; padding: 0; }

  .sa-drawer {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    max-height: min(92vh, 92dvh);
    border-radius: var(--sa-radius) var(--sa-radius) 0 0;
    border: none;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    animation: sa-rise 0.3s var(--sa-ease) both;
  }

  .sa-drawer > form,
  .sa-drawer > .sa-drawer-panel {
    height: auto;
    max-height: min(92vh, 92dvh);
  }

  .sa-drawer-body {
    /* Reserve space for sticky head + foot inside the sheet */
    max-height: calc(min(92vh, 92dvh) - 9.5rem);
  }

.sa-drawer--lg,
.sa-drawer--wide { width: 100%; }
}

/* Toolbar-red: sekoj element ista kontrolna visina — search, chipovi,
   kopcinja. Razlicnite visini (46/31/40) go krshea redot. */
.sa-panel-toolbar .sa-filter-chip,
.sa-panel-toolbar .sa-market-chip {
  height: var(--sa-ctl-h);
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Market filter chips ───────────────────────────── */

.sa-market-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  align-items: center;
}

/* Gornata dolna margina e tochna koga redot stoi SAM nad sodrzhinata. Vo
   `.sa-panel-toolbar` barot e flex-stavka: 18-te piksela go pravat nego (i
   ramot okolu nego) 58px visok nasproti 40px kaj Prebaraj i kopchinjata, pa
   `align-items: center` gi krevа chipovite 9px nagore — redot izgleda skrshen.
   Vazhi za trite lenti: Paketi, Dodatoci, Fakturi. */
.sa-panel-toolbar .sa-market-bar {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .sa-market-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 14px;
    padding-bottom: 4px;
  }

  .sa-market-bar .sa-market-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.sa-market-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--sa-radius-sm);
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.sa-market-chip:hover {
  border-color: rgba(25, 83, 92, 0.4);
  color: var(--sa-text);
}

.sa-market-chip.is-active {
  background: #19535C;
  color: #fff;
  border-color: #19535C;
  /* Isto „ispaknato" kako aktivniot filter-chip (08.09.2026). */
  box-shadow: 0 3px 10px rgba(12, 26, 33, .24);
  transform: translateY(-1px);
}

.sa-market-chip .count {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

/* ── Package cards (impressive) ────────────────────── */

.sa-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.sa-pkg {
  position: relative;
  background: var(--sa-card);
  border-radius: 18px;
  border: 1px solid var(--sa-line);
  box-shadow: var(--sa-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--sa-ease), box-shadow 0.2s;
}

.sa-pkg:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(12, 22, 36, 0.12);
}

.sa-pkg-head {
  padding: 20px 20px 16px;
  background: #19535C;
  color: #fff;
}

.sa-pkg-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.sa-pkg-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sa-pkg-head code {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}

.sa-pkg-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sa-pkg-price .amount {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sa-pkg-price .currency {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.7;
}

.sa-pkg-price .period {
  font-size: 12px;
  opacity: 0.55;
  margin-left: 2px;
}

.sa-pkg-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sa-pkg-limits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sa-pkg-limit {
  background: var(--sa-surface);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sa-line);
}

.sa-pkg-limit label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sa-muted);
  margin-bottom: 2px;
}

.sa-pkg-limit b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Sezonski popusti: hierarhija na kartichkite ──────────────────────
   Porano `--active` ja menuvashe SAMO pozadinata na glavata vo bled zelen
   ton, a `.sa-pkg-head` nosi `color:#fff` — bel tekst na svetlo zeleno, pa
   AKTIVNATA sezona beshe edinstvenata NECHITLIVA od chetirite, a istechenite
   stoeja najsilno. Sega: aktivnata e zelena (5.5:1 so belo), neaktivnite se
   smiren slate-tirkiz (6.8:1) — poslabi, no site chitlivi. Bez opacity vrz
   tekst: toa go ubiva kontrastot, a tuka sekoja kartichka mora da se chita. */

/* Neaktivni — prisutni, no vtor plan. */
.sa-season-card--off .sa-pkg-head,
.sa-season-card--past .sa-pkg-head,
.sa-season-card--upcoming .sa-pkg-head {
  background: #3f6068;
}
html[data-theme="dark"] .sa-season-card--off .sa-pkg-head,
html[data-theme="dark"] .sa-season-card--past .sa-pkg-head,
html[data-theme="dark"] .sa-season-card--upcoming .sa-pkg-head {
  background: #24383d;
}
.sa-season-card--off,
.sa-season-card--past,
.sa-season-card--upcoming {
  box-shadow: 0 1px 2px rgba(25, 83, 92, .04);
}
html[data-theme="dark"] .sa-season-card--off,
html[data-theme="dark"] .sa-season-card--past,
html[data-theme="dark"] .sa-season-card--upcoming {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Aktivna — nosi ja stranata. */
.sa-season-card--active {
  --sa-season-a: #047857;
  --sa-season-b: #0d9488;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--sa-season-a),
              0 14px 34px color-mix(in srgb, var(--sa-season-a) 26%, transparent);
}
html[data-theme="dark"] .sa-season-card--active {
  --sa-season-a: #10b981;
  --sa-season-b: #0d9488;
  box-shadow: 0 0 0 2px var(--sa-season-a), 0 14px 34px rgba(0, 0, 0, .5);
}
.sa-season-card--active .sa-pkg-head {
  background: linear-gradient(135deg, var(--sa-season-a), var(--sa-season-b));
  color: #fff;
}
html[data-theme="dark"] .sa-season-card--active .sa-pkg-head {
  background: linear-gradient(135deg, #065f46, #0f766e);
}
.sa-season-card--active .sa-pkg-head code {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* Nadnaslov vo glavata — kazuva koja e vo tek bez da se chita badzot. */
.sa-season-card--active .sa-pkg-head-row::before {
  content: attr(data-sezona-etiketa);
  position: absolute;
  top: 8px;
  left: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
/* Istoto gornо rastojanie na SITE chetiri, inaku aktivnata e 8px povisoka
   i redot kartichki ne se poramnuva. */
.sa-season-card .sa-pkg-head {
  position: relative;
  padding-top: 28px;
}

/* Ziva tochka na badzot „Aktivna sega". */
.sa-season-card--active .sa-badge--ok {
  background: color-mix(in srgb, var(--sa-season-a) 16%, transparent);
  color: var(--sa-season-a);
}
.sa-season-card--active .sa-badge--ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: saSeasonPuls 2s var(--sa-ease) infinite;
}
@keyframes saSeasonPuls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-season-card--active .sa-badge--ok::before { animation: none; }
}

/* Pojas gore: „Sega: Autumn Sale (−20%)" — beshe siten badz vo tekstot. */
.sa-season-now {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #047857, #0d9488);
  box-shadow: 0 6px 18px rgba(4, 120, 87, .28);
}
html[data-theme="dark"] .sa-season-now {
  background: linear-gradient(135deg, #065f46, #0f766e);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.sa-season-now i { opacity: .9; }

.sa-pkg-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sa-pkg-feat {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sa-accent-dim);
  color: var(--sa-brand);
}

.sa-pkg-feat.is-off {
  background: rgba(12, 22, 36, 0.04);
  color: #a0aab8;
  text-decoration: line-through;
}

.sa-pkg-clients {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-muted);
}

.sa-pkg-foot {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}

.sa-section-note {
  font-size: 13px;
  color: var(--sa-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.sa-empty-filter {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--sa-muted);
}

/* ── Client status / sort filters ──────────────────── */

.sa-client-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--sa-line);
  background: var(--sa-elevated);
}

.sa-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.sa-filter-group--bundle {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.sa-filter-group--sort {
  margin-left: 0;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .sa-client-filters {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 14px;
    padding-bottom: 12px;
  }

  .sa-filter-group--bundle {
    flex: 0 0 auto;
    justify-content: flex-start;
  }
}

.sa-filter-chip .count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
  background: rgba(15, 23, 42, 0.08);
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.4;
}
.sa-filter-chip.is-active .count {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}
.sa-filter-chip--bundle {
  color: var(--sa-bundle-text, var(--sa-muted));
  border-color: color-mix(in srgb, var(--sa-bundle, #64748b) 35%, transparent);
  background: var(--sa-bundle-soft, rgba(100, 116, 139, 0.1));
  gap: 6px;
}
.sa-filter-chip--bundle .count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.75;
  background: color-mix(in srgb, var(--sa-bundle, #64748b) 18%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}
.sa-filter-chip--bundle:hover {
  background: color-mix(in srgb, var(--sa-bundle, #64748b) 22%, transparent);
}
.sa-filter-chip--bundle.is-active {
  background: var(--sa-bundle, #64748b);
  color: #fff;
  border-color: var(--sa-bundle, #64748b);
}
.sa-filter-chip--bundle.is-active .count {
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.sa-table tbody tr[data-bundle] > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--sa-bundle, transparent);
}

.sa-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sa-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

.sa-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--sa-radius-sm);
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  color: var(--sa-muted);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.55;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.sa-filter-chip:hover,
.sa-filter-chip.is-active {
  opacity: 1;
}
/* Aktivniot chip da e ISPAKNAT (08.09.2026): senka + 1px nagore, ne samo
   polna boja. „Site" vo grupata Paket dosega beshe bel so ramka — ist kako
   neaktivnite; sega e poln vo boja na brendot kako i ostanatite aktivni. */
.sa-filter-chip.is-active {
  box-shadow: 0 3px 10px rgba(12, 26, 33, .24);
  transform: translateY(-1px);
}
.sa-filter-chip[data-bundle="all"].is-active {
  background: var(--sa-brand);
  color: #fff;
  border-color: var(--sa-brand);
}

/* Status filters — each chip has its own color */
.sa-filter-chip[data-status="all"] {
  color: #475569;
  border-color: rgba(71, 85, 105, 0.35);
  background: rgba(71, 85, 105, 0.08);
}
.sa-filter-chip[data-status="all"]:hover {
  background: rgba(71, 85, 105, 0.14);
  color: #334155;
}
.sa-filter-chip[data-status="all"].is-active {
  background: #475569;
  color: #fff;
  border-color: #475569;
}

.sa-filter-chip[data-status="active"] {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.1);
}
.sa-filter-chip[data-status="active"]:hover {
  background: rgba(5, 150, 105, 0.16);
  color: #047857;
}
.sa-filter-chip[data-status="active"].is-active {
  background: #059669;
  color: #fff;
  border-color: #059669;
}

.sa-filter-chip[data-status="expired"] {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.1);
}
.sa-filter-chip[data-status="expired"]:hover {
  background: rgba(220, 38, 38, 0.16);
  color: #b91c1c;
}
.sa-filter-chip[data-status="expired"].is-active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Sort filters — distinct colors */
.sa-filter-chip[data-sort="name"] {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.1);
}
.sa-filter-chip[data-sort="name"]:hover {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
}
.sa-filter-chip[data-sort="name"].is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.sa-filter-chip[data-sort="expire"] {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.1);
}
.sa-filter-chip[data-sort="expire"]:hover {
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
}
.sa-filter-chip[data-sort="expire"].is-active {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}

html[data-theme="dark"] .sa-filter-chip[data-status="all"] {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="dark"] .sa-filter-chip[data-status="all"].is-active {
  background: #64748b;
  color: #fff;
  border-color: #64748b;
}
html[data-theme="dark"] .sa-filter-chip[data-status="active"] {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
}
html[data-theme="dark"] .sa-filter-chip[data-status="active"].is-active {
  background: #059669;
  color: #fff;
  border-color: #059669;
}
html[data-theme="dark"] .sa-filter-chip[data-status="expired"] {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
}
html[data-theme="dark"] .sa-filter-chip[data-status="expired"].is-active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
html[data-theme="dark"] .sa-filter-chip[data-sort="name"] {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
}
html[data-theme="dark"] .sa-filter-chip[data-sort="name"].is-active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
html[data-theme="dark"] .sa-filter-chip[data-sort="expire"] {
  color: #f0b429;
  background: rgba(240, 180, 41, 0.12);
  border-color: rgba(240, 180, 41, 0.3);
}
html[data-theme="dark"] .sa-filter-chip[data-sort="expire"].is-active {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}

/* ── Market toggler (sidebar + mobile topbar) ───────── */

.sa-market-toggler {
  position: relative;
  flex: 0 0 auto;
  z-index: 30;
}

.sa-market-toggler-btn {
  width: var(--sa-ctl-h);
  height: var(--sa-ctl-h);
  border-radius: var(--sa-radius-sm);
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--sa-shadow);
  color: var(--sa-muted);
  transition: border-color 0.15s, background 0.15s;
}

.sa-market-toggler-btn:hover {
  border-color: rgba(25, 83, 92, 0.35);
  color: var(--sa-text);
}

.sa-market-toggler-btn .sa-market-flag {
  font-size: 20px;
  line-height: 1;
}

.sa-market-toggler-caret {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.2s;
}

.sa-market-toggler.is-open .sa-market-toggler-caret {
  transform: rotate(180deg);
}

.sa-market-toggler-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 168px;
  /* 280px беше кусо — со 21 пазар се гледаа четири и половина. Сега колку има
     содржина, до 80% од екранот. Долната граница го држи разумен на низок
     прозорец. */
  max-height: min(80vh, 640px);
  overflow-y: auto;
  padding: 8px;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(25, 83, 92, 0.18);
  z-index: 40;
}

.sa-market-toggler.is-open .sa-market-toggler-menu {
  display: flex;
}

/* Избирачот на пазар стои во топ-лентата на СЕКОЈ таб — филтерот важи низ
   целиот суперадмин, па местото му е таму каде што се гледа секогаш. */
.sa-market-toggler--top .sa-market-toggler-menu {
  bottom: auto;
  top: calc(100% + 8px);
  right: 0;
}

/* Копчето беше кроено за САМО знаме (квадрат со височина на контрола и
   `flex-direction: column`). Со име до знамето мора да биде во ред и да расте
   по содржина, инаку името се прелева под знамето и излегува од лентата. */
.sa-market-toggler--top .sa-market-toggler-btn {
  width: auto;
  flex-direction: row;
  gap: 8px;
  padding: 0 12px;
}

.sa-market-tekovna {
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .sa-market-tekovna { display: none; }
}

/* Темата слезе кај подножјето на страничната лента, до одјавата. */
.sa-theme-btn--foot {
  flex: 0 0 auto;
  align-self: flex-end;
}

.sa-market-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sa-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sa-market-pick:hover {
  background: var(--sa-hover);
  color: var(--sa-text);
}

.sa-market-pick.is-active {
  background: rgba(25, 83, 92, 0.12);
  color: var(--sa-brand);
  border-color: rgba(25, 83, 92, 0.28);
}

.sa-market-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.sa-market-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .sa-market-pick.is-active {
  background: rgba(61, 176, 188, 0.16);
  color: var(--sa-ink);
  border-color: rgba(61, 176, 188, 0.35);
}

@media (max-width: 860px) {
  .sa-market-toggler--mobile {
    display: block;
  }
}

/* ── Bottom mobile nav ─────────────────────────────── */

/* ── Lizgacki redovi (digitalcentar terk, ist kako .admin-bottom-nav):
   maska sto bledee SAMO na stranata kade ima uste, dinamicna preku
   --f-levo/--f-desno (JS gi pali ima-levo/ima-desno). ─────────────── */
.sa-lizgacka {
  --f-levo: 0px;
  --f-desno: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      rgba(0, 0, 0, .30) calc(var(--f-levo) * .42),
      #000 var(--f-levo),
      #000 calc(100% - var(--f-desno)),
      rgba(0, 0, 0, .30) calc(100% - var(--f-desno) * .42),
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0,
      rgba(0, 0, 0, .30) calc(var(--f-levo) * .42),
      #000 var(--f-levo),
      #000 calc(100% - var(--f-desno)),
      rgba(0, 0, 0, .30) calc(100% - var(--f-desno) * .42),
      transparent 100%);
}
.sa-lizgacka::-webkit-scrollbar { display: none; }
/* Kaj chip-redovite fejdot e pokratok — 78px + senka golta tretina od
   redot i tekstot ne se cita; nav-lentata (siroka, so svoi vinjeti) si
   ostanuva na 78. */
.sa-lizgacka.ima-levo { --f-levo: 52px; }
.sa-lizgacka.ima-desno { --f-desno: 52px; }
.sa-bottom-nav-lenta.ima-levo { --f-levo: 78px; }
.sa-bottom-nav-lenta.ima-desno { --f-desno: 78px; }
.sa-lizgacka.se-lizga { flex-wrap: nowrap; }

/* Ramot okolu chip-redovite: vinjetite sedat na STATICKI roditel (kako kaj
   nav-ot) — maskata na skrolerot bi gi izbledela ako se na samiot skroler.
   Bez ova chipot samo bledee vo belo i ne se poznava deka ima uste. */
.sa-lizgacka-ram { position: relative; min-width: 0; }

/* Svetla tema — obratno od senki: svetlo-siv pojas zad chipovite sto
   bledee kon belo na kraevite. Chipot-duh vrz sivoto kazuva "ima uste".
   Temnata tema si go ima svojot pojas (--sa-elevated) i vinjetite. */
/* Pojasot SAMO koga redot navistina se lizga (se-lizga od JS) — na
   desktop chipovite se vitkaat vo redovi i pojas bez lizganje e greska. */
html:not([data-theme="dark"]) .sa-lizgacka-ram:has(> .sa-lizgacka.se-lizga) {
  background: linear-gradient(90deg,
      rgba(233, 238, 240, 0) 0,
      #e9eef0 36px,
      #e9eef0 calc(100% - 36px),
      rgba(233, 238, 240, 0) 100%);
}
html:not([data-theme="dark"]) .sa-lizgacka-ram > .sa-client-filters { background: transparent; }
html:not([data-theme="dark"]) .sa-lizgacka-ram::before,
html:not([data-theme="dark"]) .sa-lizgacka-ram::after { display: none; }

/* Vrz pojasot chipot e poln i bez senka/oreol — poluprozirna (55%) bela
   pilula vrz sivo izgleda mlecno; sostojbata ja kazuva ispolnetosta. */
html:not([data-theme="dark"]) .sa-lizgacka-ram .sa-filter-chip:not(.is-active),
html:not([data-theme="dark"]) .sa-lizgacka-ram .sa-market-chip:not(.is-active) {
  opacity: 1;
  box-shadow: none;
}
/* Strelki na rabovite se probaa (08.09.2026) i se trgnati — „ne e ubavo".
   Ostanuva fejdot (52px) + pojasot; vo temna tema i vinjetite podolu. */
.sa-lizgacka-ram::before,
.sa-lizgacka-ram::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.sa-lizgacka-ram::before {
  left: 0;
  background: linear-gradient(to right, rgba(25, 83, 92, .10), rgba(25, 83, 92, .03) 46%, rgba(25, 83, 92, 0));
  box-shadow: inset 7px 0 10px -8px rgba(12, 26, 33, .26);
}
.sa-lizgacka-ram::after {
  right: 0;
  background: linear-gradient(to left, rgba(25, 83, 92, .10), rgba(25, 83, 92, .03) 46%, rgba(25, 83, 92, 0));
  box-shadow: inset -7px 0 10px -8px rgba(12, 26, 33, .26);
}
.sa-lizgacka-ram:has(> .sa-lizgacka.ima-levo)::before { opacity: 1; }
.sa-lizgacka-ram:has(> .sa-lizgacka.ima-desno)::after { opacity: 1; }

/* Zakotvena cela sirina do rabot — ist nacin kako klientskiot
   .admin-bottom-nav: bez lebdecka pilula, sodrzhinata ne se krie zad nea. */
.sa-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  align-items: stretch;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--sa-bottom-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(25, 83, 92, 0.14);
}

.sa-bottom-nav-lenta {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 8px;
}

/* Snap i centriranje SAMO koga navistina se preleva. */
.sa-bottom-nav.se-lizga .sa-bottom-nav-lenta { scroll-snap-type: x proximity; }
.sa-bottom-nav.se-lizga .sa-bottom-nav-item { scroll-snap-align: center; }
.sa-bottom-nav:not(.se-lizga) .sa-bottom-nav-lenta { justify-content: center; }

/* Senka na previtkuvanjeto — pod kopcinjata, se pali samo kade ima uste. */
.sa-bottom-nav::before,
.sa-bottom-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 78px;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.sa-bottom-nav::before {
  left: 0;
  background: linear-gradient(to right, rgba(25, 83, 92, .14), rgba(25, 83, 92, .05) 46%, rgba(25, 83, 92, 0));
  box-shadow: inset 9px 0 12px -9px rgba(12, 26, 33, .38);
}
.sa-bottom-nav::after {
  right: 0;
  background: linear-gradient(to left, rgba(25, 83, 92, .14), rgba(25, 83, 92, .05) 46%, rgba(25, 83, 92, 0));
  box-shadow: inset -9px 0 12px -9px rgba(12, 26, 33, .38);
}
.sa-bottom-nav.ima-levo::before,
.sa-bottom-nav.ima-desno::after { opacity: 1; }

@media (max-width: 860px) {
  .sa-bottom-nav {
    display: flex !important;
  }
}

/* Ist terk kako klientskiot .admin-bottom-nav__item: plocka 74px so radius
   10, aktivnata JA BOI CELATA plocka — ne samo ikonata. */
.sa-bottom-nav-item {
  flex: 0 0 auto;
  width: 74px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px;
  border-radius: 10px;
  color: var(--sa-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.2s, color 0.2s, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.sa-bottom-nav-item i {
  font-size: 16px;
  line-height: 1;
}

.sa-bottom-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sa-bottom-nav-item:active {
  transform: scale(0.92);
}

.sa-bottom-nav-item.is-active {
  color: var(--sa-brand);
  background: var(--sa-active-bg);
}

.sa-bottom-nav-logout {
  display: contents;
}
.sa-bottom-nav-item--logout {
  /* Ист фонт/големина како другите ставки — само бојата е поинаква. */
  color: #b91c1c;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: inherit;
}
.sa-bottom-nav-item--logout:hover,
.sa-bottom-nav-item--logout:focus-visible {
  background: rgba(220, 38, 38, 0.1);
  color: #991b1b;
  outline: none;
}

/* ── Dashboard ─────────────────────────────────────── */

.sa-dash-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

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

.sa-dash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sa-line);
}

.sa-dash-list li:last-child { border-bottom: none; }

.sa-dash-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sa-dash-quick a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: var(--sa-surface);
  border: 1px solid var(--sa-line);
  color: var(--sa-text);
  font-weight: 600;
  font-size: 13px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.sa-dash-quick a i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sa-accent-dim);
  color: var(--sa-accent);
  font-size: 15px;
}

.sa-dash-quick a:hover {
  border-color: rgba(20, 184, 166, 0.35);
  transform: translateY(-1px);
  box-shadow: var(--sa-shadow);
}

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

/* ── Theme toggle ──────────────────────────────────── */

.sa-theme-btn {
  width: var(--sa-ctl-h);
  height: var(--sa-ctl-h);
  border-radius: var(--sa-radius-sm);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  color: var(--sa-brand);
  box-shadow: var(--sa-shadow);
  transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

/* Skop-bejdzot vo topbarot stoi do 40px kontroli — ista visina, pilula. */
.sa-topbar .sa-badge {
  height: var(--sa-ctl-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.sa-theme-btn:hover {
  transform: translateY(-1px);
  border-color: var(--sa-brand);
  color: var(--sa-text);
}

.sa-theme-btn .sa-theme-icon-light { display: none; }
.sa-theme-btn .sa-theme-icon-dark { display: inline; }

html[data-theme="dark"] .sa-theme-btn .sa-theme-icon-light { display: inline; }
html[data-theme="dark"] .sa-theme-btn .sa-theme-icon-dark { display: none; }

.sa-login-theme {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

/* ── Dark theme surface tweaks ─────────────────────── */

html[data-theme="dark"] .sa-login-page {
  background: #0d1618;
}

html[data-theme="dark"] .sa-login-card {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .sa-search input {
  border-color: rgba(126, 200, 208, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .sa-search input:focus {
  box-shadow: 0 0 0 4px rgba(61, 176, 188, 0.18);
}

html[data-theme="dark"] .sa-client-card.is-expired {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.35);
}

html[data-theme="dark"] .sa-client-card.is-expiring {
  background: rgba(240, 180, 41, 0.1);
  border-color: rgba(240, 180, 41, 0.35);
}

html[data-theme="dark"] .sa-table tbody tr.is-expired {
  background: rgba(248, 113, 113, 0.08);
}

html[data-theme="dark"] .sa-table tbody tr.is-expiring {
  background: rgba(240, 180, 41, 0.08);
}

html[data-theme="dark"] .sa-alert--error {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.3);
}

html[data-theme="dark"] .sa-alert--success {
  background: rgba(52, 211, 153, 0.12);
  color: #a7f3d0;
}

html[data-theme="dark"] .sa-pkg-feat.is-off {
  background: rgba(255, 255, 255, 0.04);
  color: #6b7c82;
}

html[data-theme="dark"] .sa-pkg {
  background: var(--sa-card);
}

html[data-theme="dark"] .sa-pkg-head {
  background: #19535C;
}

html[data-theme="dark"] .sa-bottom-nav {
  border-top-color: rgba(126, 200, 208, 0.16);
}

html[data-theme="dark"] .sa-view-toggle {
  border-color: rgba(126, 200, 208, 0.2);
}

html[data-theme="dark"] .sa-badge {
  background: rgba(61, 176, 188, 0.14);
  color: var(--sa-ink);
}

html[data-theme="dark"] .sa-badge--ink {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sa-muted);
}

/* Bez ovie, dark .sa-badge (0,2,1) gi gazi svetlite modifikatori (0,1,0) —
   Aktiven/Istechen stanuvaa ista tirkizna znachka. Ista shema kako .sa-inv-status--*. */
html[data-theme="dark"] .sa-badge--warn {
  background: rgba(240, 180, 41, 0.16);
  color: #fcd34d;
}

html[data-theme="dark"] .sa-badge--ok {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
}

html[data-theme="dark"] .sa-badge--danger {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

html[data-theme="dark"] .sa-table th {
  background: var(--sa-elevated);
  color: var(--sa-muted);
}

html[data-theme="dark"] .sa-table td {
  border-color: var(--sa-line);
}

html[data-theme="dark"] .sa-stat {
  background: var(--sa-card);
}

/* ── Flatpickr (sadmin theme) ──────────────────────── */

.flatpickr-calendar {
  z-index: 10050 !important;
  border-radius: 14px !important;
  border: 1px solid var(--sa-line) !important;
  box-shadow: 0 16px 40px rgba(25, 83, 92, 0.18) !important;
  font-family: var(--sa-font) !important;
  overflow: hidden;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
span.flatpickr-weekday {
  color: var(--sa-text) !important;
  fill: var(--sa-text) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #19535C !important;
  border-color: #19535C !important;
  color: #fff !important;
}

.flatpickr-day.today {
  border-color: #19535C !important;
}

.flatpickr-day:hover {
  background: rgba(25, 83, 92, 0.12) !important;
  border-color: transparent !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #19535C !important;
}

html[data-theme="dark"] .flatpickr-calendar {
  background: #152226 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-innerContainer,
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] .flatpickr-days {
  background: #152226 !important;
}

html[data-theme="dark"] .flatpickr-day {
  color: #e8f2f3 !important;
}

html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay {
  color: #5b6b73 !important;
}

html[data-theme="dark"] .flatpickr-day:hover {
  background: rgba(61, 176, 188, 0.16) !important;
}

html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.selected:hover {
  background: #247a85 !important;
  border-color: #247a85 !important;
  color: #fff !important;
}

.sa-field--span-2 {
  grid-column: 1 / -1;
}
.sa-brend-logo-preview {
  width: 120px;
  height: 72px;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--sa-line, rgba(25, 83, 92, .16));
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-brend-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sa-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-ink, #123f47);
  cursor: pointer;
}
.sa-inline-check input {
  width: auto;
  margin: 0;
}

.sa-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.sa-inline-form {
  display: inline;
  margin: 0;
}
.sa-empty-cell {
  text-align: center;
  color: var(--sa-muted, #6b7c8f);
  padding: 28px 12px !important;
}
.sa-inv-status--paid { background: rgba(34, 139, 84, .12); color: #1a7a45; }
.sa-inv-status--issued { background: rgba(25, 83, 92, .12); color: #19535C; }
.sa-inv-status--draft { background: rgba(120, 120, 120, .12); color: #666; }
.sa-inv-status--cancelled { background: rgba(200, 60, 60, .12); color: #b33; }
/* Na temna tema gornite boi se tamni tekst vrz #0d1618 — chetirite statusa
   stanuvaat neprepoznatlivi eden od drug. Ovde se prevrtuvaat: svetol tekst
   vrz ista boja, za da ostane ISTIOT jazik na boi (zeleno/tirkizno/sivo/crveno). */
html[data-theme="dark"] .sa-inv-status--paid { background: rgba(52, 211, 153, .16); color: #6ee7b7; }
html[data-theme="dark"] .sa-inv-status--issued { background: rgba(61, 176, 188, .18); color: #7dd3dd; }
html[data-theme="dark"] .sa-inv-status--draft { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
html[data-theme="dark"] .sa-inv-status--cancelled { background: rgba(248, 113, 113, .18); color: #fca5a5; }
.sa-muted { color: var(--sa-muted, #6b7c8f); font-size: 12px; }



/* ── Usage analytics ───────────────────────────────── */
.sa-usage { display: flex; flex-direction: column; gap: 18px; }
.sa-usage-banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(25, 83, 92, .06));
  border: 1px solid rgba(245, 158, 11, .28);
}
.sa-usage-banner i { color: #d97706; font-size: 22px; margin-top: 2px; }
.sa-usage-banner strong { display: block; margin-bottom: 4px; }
.sa-usage-banner p { margin: 0; color: var(--sa-muted); font-size: 13px; }
.sa-usage-banner code {
  font-size: 12px; padding: 1px 6px; border-radius: 6px;
  background: rgba(0,0,0,.06);
}
.sa-usage-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
}
.sa-usage-periods { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) {
  .sa-usage-periods { flex-wrap: nowrap; }
}
.sa-usage-chip {
  appearance: none; border: 1px solid var(--sa-line); background: var(--sa-card);
  color: var(--sa-ink); border-radius: var(--sa-radius-sm); padding: 8px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sa-usage-chip:hover { border-color: rgba(25,83,92,.35); }
.sa-usage-chip.is-active {
  background: #19535C; border-color: #19535C; color: #fff;
}
.sa-usage-custom {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sa-usage-custom[hidden] { display: none !important; }
.sa-usage-custom input[type="date"] {
  border: 1px solid var(--sa-line); border-radius: 10px;
  padding: 8px 10px; background: var(--sa-surface); color: var(--sa-ink);
}
.sa-usage-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1200px) {
  .sa-usage-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sa-usage-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sa-usage-kpi {
  display: flex; gap: 12px; align-items: center;
  padding: 16px; border-radius: 18px;
  background: var(--sa-card); border: 1px solid var(--sa-line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}
.sa-usage-kpi__icon {
  width: 42px; height: 42px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(25,83,92,.1); color: var(--sa-brand); flex-shrink: 0;
}
/* Tokenite --sa-warn/--sa-ok/--sa-danger imaat dark vrednosti; qr nema token pa dobiva svoj dark par. */
.sa-usage-kpi--qr .sa-usage-kpi__icon { background: rgba(14,165,233,.12); color: #0284c7; }
.sa-usage-kpi--waiter .sa-usage-kpi__icon { background: rgba(245,158,11,.14); color: var(--sa-warn); }
.sa-usage-kpi--edits .sa-usage-kpi__icon { background: rgba(34,197,94,.12); color: var(--sa-ok); }
.sa-usage-kpi--health .sa-usage-kpi__icon { background: rgba(244,63,94,.12); color: var(--sa-danger); }
html[data-theme="dark"] .sa-usage-kpi__icon { background: rgba(61,176,188,.16); }
html[data-theme="dark"] .sa-usage-kpi--qr .sa-usage-kpi__icon { background: rgba(56,189,248,.16); color: #38bdf8; }
.sa-usage-kpi__label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sa-muted); margin-bottom: 2px;
}
.sa-usage-kpi__value {
  font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.sa-usage-grid {
  display: grid; grid-template-columns: 1.4fr .8fr; gap: 16px;
}
@media (max-width: 980px) {
  .sa-usage-grid { grid-template-columns: 1fr; }
}
.sa-usage-chart {
  display: flex; align-items: flex-end; gap: 6px;
  min-height: 160px; padding: 8px 0 4px;
}
.sa-usage-bar {
  flex: 1 1 0; min-width: 10px; max-width: 42px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  height: 160px;
}
.sa-usage-bar__stack {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; height: 100%;
}
.sa-usage-bar__qr,
.sa-usage-bar__admin {
  width: 100%; border-radius: 6px 6px 2px 2px; min-height: 0;
}
.sa-usage-bar__qr { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.sa-usage-bar__admin { background: linear-gradient(180deg, #4ade80, #16a34a); }
.sa-usage-bar__label {
  font-size: 9px; color: var(--sa-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sa-usage-chart-legend {
  display: flex; gap: 16px; margin-top: 10px;
  font-size: 12px; color: var(--sa-muted); font-weight: 600;
}
.sa-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.sa-dot--qr { background: #0284c7; }
.sa-dot--admin { background: #16a34a; }
.sa-usage-explain p {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--sa-ink);
}
.sa-usage-explain p:last-child { margin-bottom: 0; }
.sa-usage-table tbody tr {
  cursor: pointer;
}
.sa-usage-table th[data-sort] { cursor: pointer; user-select: none; }
.sa-usage-health {
  display: flex; align-items: center; gap: 8px; min-width: 90px;
}
.sa-usage-health__bar {
  flex: 1; height: 7px; border-radius: 999px;
  background: rgba(25,83,92,.1); overflow: hidden;
}
.sa-usage-health__bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #19535C, #1DA698);
}
.sa-usage-detail-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.sa-usage-detail-kpi {
  padding: 12px; border-radius: 14px; background: var(--sa-surface);
  border: 1px solid var(--sa-line);
}
.sa-usage-detail-kpi span {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--sa-muted);
}
.sa-usage-detail-kpi b { font-size: 20px; }
.sa-usage-events { list-style: none; margin: 0; padding: 0; }
.sa-usage-events li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--sa-line);
  font-size: 13px;
}
.sa-usage-events li:last-child { border-bottom: 0; }
.sa-usage-events .kind {
  font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: .04em; color: var(--sa-brand);
}
.sa-usage-events .sa-usage-event-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--sa-muted);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.sa-usage-events .when { color: var(--sa-muted); font-size: 12px; white-space: nowrap; }
.sa-usage-visits-wrap { margin: 0 0 4px; }
.sa-usage-visits-table { width: 100%; }
.sa-usage-visits-table th:last-child,
.sa-usage-visits-table td:last-child { white-space: nowrap; }
.sa-usage-ip {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: transparent;
  padding: 0;
}

/* Dashboard visitors teaser */
.sa-visitors-panel {
  margin: 0 0 18px;
  border: 1px solid rgba(25, 83, 92, 0.22);
  box-shadow: 0 10px 28px rgba(25, 83, 92, 0.08);
}
.sa-visitors-panel .sa-panel-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sa-visitors-panel .sa-panel-head h3 i { color: #0e7490; }
.sa-visitors-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) {
  .sa-visitors-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sa-visitors-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sa-visitors-pill {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(25,83,92,.06), rgba(25,83,92,.02));
  border: 1px solid var(--sa-line);
}
.sa-visitors-pill span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sa-muted);
  margin-bottom: 4px;
}
.sa-visitors-pill b {
  font-size: 22px;
  letter-spacing: -.03em;
}
.sa-visitors-hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--sa-muted);
  line-height: 1.45;
}
.sa-visitors-hint a {
  color: var(--sa-brand);
  font-weight: 700;
  text-decoration: none;
}
.sa-visitors-hint a:hover { text-decoration: underline; }


/* ------------------------------------------------------------------ *
 *  Kalendar (flatpickr) — normaliziran vo boite na brendot, ist blok
 *  kako vo admin-theme.css (sadmin ne go vcituva toj fajl).
 * ------------------------------------------------------------------ */
.flatpickr-calendar {
  border-radius: var(--sa-radius);
  border: 1px solid var(--sa-line);
  box-shadow: 0 12px 32px rgba(15, 28, 36, .18);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--sa-brand, #19535c);
  border-color: var(--sa-brand, #19535c);
}
.flatpickr-day.today { border-color: var(--sa-accent-hot, #1ca698); }
.flatpickr-day.today:hover {
  background: var(--sa-accent-hot, #1ca698);
  border-color: var(--sa-accent-hot, #1ca698);
  color: #fff;
}
.flatpickr-day:hover {
  background: rgba(28, 166, 152, .12);
  border-color: transparent;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  color: var(--sa-brand, #19535c);
  fill: var(--sa-brand, #19535c);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--sa-brand, #19535c); }


/* Distributerskata forma: POSIROKA i so 3 koloni — poniska, pomalku skrol. */
/* Shirochina krojena spored DVE rabotи: pet polinja po red, i SITE 20 pazari
   vo EDEN red chipovi (20 x 46 + 19 x 8 procepi + 44 padding ~ 1116px). */
.sa-drawer.sa-drawer--dist { width: min(1400px, 100%); }
/* Mrezha od 20 koloni — zaedniciot sodrzhatel na 4 i 5 po red:
   red so CETIRI polinja → sekoe span 5   (4 x 5 = 20)
   red so PET polinja    → sekoe span 4   (5 x 4 = 20)
   Taka dvata terka stojat vo ISTA mrezha i rabovite se poklopuvaat. */
#drawerDistributer .sa-grid-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); }
#drawerDistributer .sa-pole--od4 { grid-column: span 5; }
#drawerDistributer .sa-pole--od5 { grid-column: span 4; }
#drawerDistributer .sa-pole--cel { grid-column: 1 / -1; }
/* Polovina od kolonata — za polinja so kratka sodrzina (jazik, status). */
#drawerDistributer .sa-pole--pol select,
#drawerDistributer .sa-pole--pol input { max-width: 55%; }
@media (max-width: 1240px) {
  /* Tri po red: 20 ne se deli na 3, pa mrezhata odi na 12 (4 x 3). */
  #drawerDistributer .sa-grid-20 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #drawerDistributer .sa-pole--od4,
  #drawerDistributer .sa-pole--od5 { grid-column: span 4; }
}
@media (max-width: 860px) {
  #drawerDistributer .sa-grid-20 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #drawerDistributer .sa-pole--od4,
  #drawerDistributer .sa-pole--od5 { grid-column: span 1; }
  #drawerDistributer .sa-pole--pol select,
  #drawerDistributer .sa-pole--pol input { max-width: none; }
}
@media (max-width: 560px) {
  #drawerDistributer .sa-grid-20 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Лозинка: два клуча во еден ред ──────────────────────────────────
   Тек: внеси → Потврди (првиот се ЗАКЛУЧУВА) → до него излегува вториот
   → Потврди → ако се исти, ОБАТА зелени; ако не, обата црвени и „Зачувај"
   не поминува. Маската е CSS, не `type="password"` — така прелистувачот
   нема каде да го закачи „Manage Passwords" балонот. */
/* Poleto meri sebe si: koga kolonata e tesna, kopcinjata ostanuvaat SAMO
   ikoni — taka dvata kluca i natamu stojat VO EDEN RED namesto da se redat
   eden pod drug i da ja rastegnat visinata na celiot prv red. */
.sa-loz { container-type: inline-size; }
.sa-loz-red {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
@container (max-width: 400px) {
  .sa-loz-vnes { letter-spacing: .06em; }
}
/* `display:flex` go nadjacuva podrazbiranoto `[hidden]{display:none}` —
   bez ova vtoriot kluc se gleda i pred da bide potreben. */
.sa-loz-kluc[hidden] { display: none !important; }
.sa-loz-kluc {
  flex: 1 1 96px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--sa-ctl-h);
  padding: 0 10px 0 5px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-input-bg);
  transition: border-color .15s, background .15s;
}
/* Ikonata E kopceto — edna po pole. */
.sa-loz-ikbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sa-muted);
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.sa-loz-ikbtn:hover:not(:disabled) { background: var(--sa-hover); color: var(--sa-ink); }
.sa-loz-ikbtn:disabled { opacity: .4; cursor: not-allowed; }
.sa-loz-ikbtn:focus-visible { outline: 2px solid var(--sa-accent-hot); outline-offset: 1px; }
.sa-loz-vnes {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none;
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: .12em;
}
.sa-loz-vnes::placeholder { -webkit-text-security: none; text-security: none; letter-spacing: normal; }
.sa-loz-vnes:read-only { color: var(--sa-muted); }

/* Заклучен, но уште непотврден пар — неутрален. */
.sa-loz-kluc.is-zaklucen { background: var(--sa-elevated); }
/* Потврдено и совпаднато. */
.sa-loz-kluc.is-ok {
  border-color: var(--sa-ok);
  background: color-mix(in srgb, var(--sa-ok) 8%, transparent);
}
.sa-loz-kluc.is-ok .sa-loz-ikbtn { color: var(--sa-ok); }
/* Не се совпаѓаат. */
.sa-loz-kluc.is-loso {
  border-color: var(--sa-danger);
  background: color-mix(in srgb, var(--sa-danger) 7%, transparent);
}
.sa-loz-kluc.is-loso .sa-loz-ikbtn { color: var(--sa-danger); }
/* Porakata IZLEGUVA od tekot: dodeka bese vo nego, pojavata na „Dvete ne se
   sovpagjaat" go raztegnuvashe poleto, redot rastese i sosednite vnesovi se
   krevaa. Sega sedi vo procepot pod poleto i ne pomestuva nishto. */
#drawerDistributer .sa-field { position: relative; }
#drawerDistributer .sa-kluc-poraka {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 3px;
  display: block;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
/* Procepot pomegju redovite go pravi mestoto za taa poraka. */
#drawerDistributer .sa-grid-20 { row-gap: 26px; }
/* „Nedostasuva: …" levo od kopcinjata vo podnozjeto — zoshto Zacuvaj e gasno. */
.sa-fali {
  margin-right: auto;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-danger);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#distLozPole .sa-kluc-poraka.is-loso { color: var(--sa-danger); }
#distLozPole .sa-kluc-poraka.is-ok   { color: var(--sa-ok); }

/* ── Лозинката на телефон ──────────────────────────────────────────────
   Kontrolata nemashe NITU EDNO pravilo za tesen ekran. Na 390px dvata kluca
   ostanuvaat vo EDEN red od ~292px, pa vo sekoj vnes vleguvaat po ~94px —
   nova lozinka od 14 znaci ne se gleda cela. Pod 560px poleto i onaka e samo
   vo kolonata, visinata e evtina: dvata kluca odat eden POD drug. */
@media (max-width: 560px) {
  .sa-loz-kluc { flex: 1 1 100%; height: 46px; }
  .sa-loz-ikbtn { width: 38px; height: 38px; font-size: 15px; }
  /* Porakata pod dva kluca ne smee da e nowrap vo ~292px — se seche na pola. */
  #drawerDistributer .sa-kluc-poraka {
    position: static;
    white-space: normal;
    overflow: visible;
    margin-top: 6px;
  }
}
/* Na dopir prstot bara ~44px, no geometrijata na desktop ne smee da skokne —
   celta se shiri so nevidliv psevdo-element, ne so ramkata na kopceto. */
@media (hover: none) {
  .sa-loz-ikbtn { position: relative; }
  .sa-loz-ikbtn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
/* ── Форма за маркет партнер ─────────────────────────────────────────
   До 07.09 ова беа 13 полиња во рамна мрежа од три колони: „Код",
   „Лозинка" и „Име" во ист ред, потоа 20 квадратчиња за пазари, па
   Провизија до Лого до Статус. Ништо не кажуваше што со што оди.
   Сега формата е поделена на СЕКЦИИ по редоследот по кој човек мисли:
   пристап → кој е → каде продава → како му се плаќа → изглед. */

.sa-forma-sek {
  padding: 18px 0;
  margin-bottom: 18px;
  border-top: 1px solid var(--sa-line);
  border-bottom: 1px solid var(--sa-line);
}
.sa-forma-sek--posledna { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.sa-forma-sek__naslov {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sa-ink);
}
.sa-forma-sek__naslov i { opacity: .55; font-size: 12px; }

.sa-forma-sek__glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.sa-forma-sek__akcii { display: flex; align-items: center; gap: 6px; }

/* Секцијата има свој воведен ред пред мрежата. */
.sa-forma-sek > .sa-field-hint { display: block; margin: 0 0 10px; }
.sa-forma-sek .sa-grid { margin-top: 10px; }

.sa-zadolzitelno {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  background: var(--sa-accent-dim);
  color: var(--sa-ink);
}

/* Кодот е идентификатор — се чита знак по знак, па оди разредено. */
.sa-kod-vnes {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
}

.sa-kluc-btn--ikona { padding: 0 11px; }
.sa-kluc-btn--ikona i { margin: 0; }

/* ── Пазари како чипови ──────────────────────────────────────────────
   20 квадратчиња во редови се читаа како список за проверка, а тоа е
   избор. Чип со состојба се гледа од метар. */
.sa-cip-red {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sa-cip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  background: var(--sa-card);
  color: var(--sa-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  user-select: none;
  transition: background .14s, border-color .14s, color .14s;
}
.sa-cip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.sa-cip:hover { border-color: var(--sa-brand); color: var(--sa-ink); }
.sa-cip:has(input:checked) {
  background: var(--sa-ink);
  border-color: var(--sa-ink);
  color: #fff;
}
.sa-cip:has(input:focus-visible) { outline: 2px solid var(--sa-accent-hot); outline-offset: 2px; }
html[data-theme="dark"] .sa-cip:has(input:checked) {
  background: var(--sa-accent);
  border-color: var(--sa-accent);
  color: #08191c;
}

.sa-pazar-brojac {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-muted);
  margin-right: 4px;
}

/* ── Мало копче за помошни дејства (Сите / Ниту еден / Избери слика) ── */
.sa-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  background: var(--sa-elevated);
  color: var(--sa-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.sa-mini-btn:hover { border-color: var(--sa-brand); background: var(--sa-hover); }

/* ── Избор на фајл ───────────────────────────────────────────────────
   Стандардното `Browse… No file selected` беше единственото место во
   панелот со изглед од прелистувачот. */
.sa-fajl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-fajl input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sa-mini-btn--fajl { height: 36px; padding: 0 14px; }
.sa-fajl__ime { font-size: 12px; color: var(--sa-muted); }
.sa-fajl__pregled {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--sa-elevated);
  border: 1px solid var(--sa-line);
}
/* Pole so problem — se oznacuva, ne se pogoduva. */
#drawerDistributer .sa-field.is-falicno input,
#drawerDistributer .sa-field.is-falicno select { border-color: var(--sa-danger); }

/* Distributeri: isti karticki kako Domeni (mod-card terk), samo malku
   posiroki (340px min) — i BEZ display:none igra: direkten grid, bez
   cards/table prekinuvac. */
.sa-dist-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  padding: 18px;
}

/* Redovi-lista (provizii i sl.): ime+bedzi levo, broevi desno, se krsi uredno. */
.sa-dist-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa-dist-red {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
}
.sa-dist-red__glava {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.sa-dist-red__broevi {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--sa-muted);
}
.sa-dist-red__broevi b { color: var(--sa-text); }
.sa-dist-cards .sa-mod-card.is-iskluchen { opacity: .6; }
/* saFilterDistributeri() stava is-hidden; bez ova pravilo filtrite Aktivni/pazar ne krijat nisto. */
.sa-dist-cards .sa-mod-card.is-hidden { display: none !important; }
.sa-card-btn-ikona {
  flex: 0 0 auto;
  width: 42px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-elevated);
  color: var(--sa-ink);
  cursor: pointer;
}
.sa-card-btn-ikona:hover { border-color: var(--sa-brand); }
/* „Активирај" e povraten, pozitiven potez — mora da se razlikuva od sivite
   sosedi, inache power-kopcheto izgleda isto kako brishenjeto. */
.sa-card-btn-ikona--ok {
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.08);
  color: var(--sa-ok);
}
.sa-card-btn-ikona--ok:hover {
  border-color: var(--sa-ok);
  background: rgba(5, 150, 105, 0.14);
}

/* Vo red kopchinja site delat ednakvo namesto fiksni 42px. Otkako „Izmeni"
   stana ikona kako sosedite, kaj market partnerite ostanaa 5 ikoni + brishi:
   5×42 + 42 + 5×8 = 292px vo kartichka od ~275px vnatreshna shirina — redot
   se prelevashe. So `flex: 1 1 0` se sobira bez ogled na brojot na kopchinja.
   (Na tesen ekran roditelot stanuva grid pa ova ne vazhi — vidi 3×2 podolu.) */
.sa-card-actions .sa-card-btn-ikona {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Temna tema: stakloto e temno, ist blur — svetlo mleko vrz temen UI bode. */
html[data-theme="dark"] .sa-modal-backdrop,
html[data-theme="dark"] .sa-drawer-backdrop {
  background: rgba(8, 14, 24, 0.55);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}

.sa-bottom-nav::-webkit-scrollbar { display: none; }

/* ── U3 · Domeni po pazar ──────────────────────────────────────────
   .sa-cek = red od chek-listata (i DNS-redot vo formata): eden chip, edna
   boja po sostojba. Ist chip vo kartickata, vo tabelata i vo formata. */
.sa-cek {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 10px;
  border: 1px solid var(--sa-line);
  background: var(--sa-elevated);
  color: var(--sa-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  flex-wrap: wrap;
}
.sa-cek i { flex-shrink: 0; font-size: 11px; }
/* Hintot (→ shto da napravam) pod tekstot, poramnet po ikonata — ne vtora kolona desno. */
.sa-cek small {
  flex: 1 1 100%;
  font-weight: 500;
  color: var(--sa-muted);
  margin-left: 18px;
  overflow-wrap: anywhere;
}
.sa-cek--ok   { border-color: rgba(34, 160, 107, 0.35); background: rgba(34, 160, 107, 0.10); color: #157a4f; }
.sa-cek--los  { border-color: rgba(224, 69, 69, 0.35);  background: rgba(224, 69, 69, 0.08);  color: #b52e2e; }
.sa-cek--warn { border-color: rgba(232, 140, 23, 0.40); background: rgba(232, 140, 23, 0.12); color: #9a5a00; }
.sa-cek--info { border-color: rgba(21, 34, 56, 0.14);   background: rgba(21, 34, 56, 0.05);   color: var(--sa-ink-mid); }
.sa-cek--ceka { border-style: dashed; color: var(--sa-muted); font-weight: 500; }
.sa-cek--link { cursor: pointer; color: var(--sa-brand); text-decoration: none; }
.sa-cek--link:hover { border-color: var(--sa-brand); background: var(--sa-hover); }
html[data-theme="dark"] .sa-cek--ok   { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); }
html[data-theme="dark"] .sa-cek--los  { color: #fca5a5; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); }
html[data-theme="dark"] .sa-cek--warn { color: #fcd34d; background: rgba(240, 180, 41, 0.12);  border-color: rgba(240, 180, 41, 0.35); }
html[data-theme="dark"] .sa-cek--info { color: var(--sa-ink); background: rgba(126, 200, 208, 0.08); border-color: rgba(126, 200, 208, 0.22); }
html[data-theme="dark"] .sa-cek--link { color: var(--sa-ink); }

/* Panel „Pazari bez domen": chipovi vo lizgacka (375px bez horizontalen skrol). */
.sa-domen-bez { margin-bottom: 18px; }
.sa-domen-bez .sa-panel-body { padding: 12px 18px 16px; }
.sa-domen-bez-lenta {
  display: flex;
  /* Lizgacot e MOBILEN terk. Na desktop ima mesto — chipovite se vitkaat vo
     redovi; horizontalen skrol tamu samo krie polovina od pazarite zad rabot. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 0 6px;
}

@media (max-width: 860px) {
  /* Na tesen ekran redovite bi bile premnogu — tamu lizgacot si e na mesto
     (JS-ot go pali `se-lizga` i zatemnuvanjeto kon stranata kade ima ushte). */
  .sa-domen-bez-lenta { flex-wrap: nowrap; }
}
.sa-domen-bez-cip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--sa-ctl-h);
  padding: 0 6px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  white-space: nowrap;
}
.sa-domen-bez-flag { font-size: 18px; line-height: 1; }
.sa-domen-bez-tekst { font-size: 13px; color: var(--sa-muted); }
.sa-domen-bez-tekst b { color: var(--sa-text); }
.sa-domen-bez-dodaj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  background: #19535C;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
.sa-domen-bez-dodaj:hover { background: #1e6570; transform: translateY(-1px); }
html[data-theme="dark"] .sa-domen-bez-dodaj { background: var(--sa-accent); color: #0d1618; }
html[data-theme="dark"] .sa-domen-bez-dodaj:hover { background: var(--sa-accent-hot); }

/* Karticka: zabeleska + chek-lista VO MESTO (pod nozeto), bez staklo. */
.sa-domen-zabeleska {
  margin: 0;
  font-size: 12.5px;
  color: var(--sa-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.sa-domen-zabeleska i { margin-right: 4px; }
.sa-domen-karta .sa-card-actions .sa-card-btn-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
}
.sa-domen-cek {
  padding-top: 10px;
  border-top: 1px dashed var(--sa-line);
}
.sa-domen-cek[hidden] { display: none !important; }
.sa-domen-cek-telo { display: flex; flex-direction: column; gap: 10px; }
.sa-domen-cek-glava {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sa-domen-cek-glava b { flex: 1 1 0; min-width: 0; font-size: 13px; }
.sa-domen-cek-glava .sa-icon-btn { flex: 0 0 auto; margin-left: auto; }
.sa-domen-cek-glava b.is-ok { color: var(--sa-ok); }
.sa-domen-cek-glava b.is-los { color: var(--sa-danger); }
.sa-domen-cek-lista,
.sa-domen-cek-linkovi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sa-domen-cek-red > td { padding-top: 0 !important; }
.sa-domen-cek-red[hidden] { display: none !important; }
.sa-domen-cek-red .sa-domen-cek { border-top: 0; padding-top: 4px; padding-bottom: 8px; }

/* Forma: DNS red, readonly valuta, jazik-chipovi, blok „Proverka". */
.sa-drawer--domen { width: min(760px, 100%); }
.sa-domen-dns {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sa-elevated);
  border: 1px solid var(--sa-line);
}
.sa-domen-dns .sa-cek { flex: 1 1 200px; }
.sa-domen-dns .sa-btn { flex: 0 0 auto; }
#drawerDomen .sa-field input[readonly] {
  background: var(--sa-elevated);
  color: var(--sa-muted);
  cursor: default;
  font-weight: 600;
}
.sa-domen-lock { font-size: 11px; color: var(--sa-muted); margin-left: 4px; }
/* Pole so problem — se oznacuva, ne se pogoduva; hintot go kazuva problemot (crveno). */
#drawerDomen .sa-field.is-falicno input,
#drawerDomen .sa-field.is-falicno select { border-color: var(--sa-danger); }
#drawerDomen .sa-field.is-falicno .sa-field-hint { color: var(--sa-danger); }
.sa-domen-jazici {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 2px 0 4px;
  min-height: 40px;
  align-items: center;
}
.sa-domen-jazici.is-ugasnato { opacity: 0.5; pointer-events: none; }
.sa-domen-jazici .sa-check { flex: 0 0 auto; }
.sa-domen-proverka {
  padding: 12px 14px 14px;
  border-radius: 10px;
  border: 1px solid var(--sa-line);
  background: var(--sa-elevated);
}
.sa-domen-proverka-glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sa-domen-proverka-glava label { margin: 0; }
.sa-domen-proverka .sa-domen-cek { border-top: 0; padding-top: 0; }
#domenDnsBtn:disabled,
#domenProveriBtn:disabled,
.sa-domen-bez-dodaj:disabled,
.sa-icon-btn:disabled,
.sa-card-btn-ikona:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 560px) {
  .sa-domen-cek-glava .sa-btn { flex: 1 1 auto; }
  .sa-domen-dns .sa-btn { width: 100%; }
  .sa-domen-proverka-glava { flex-wrap: wrap; }
}

/* ── U1 · Tiketi (sadmin) ─────────────────────────────────────────────
   Redovi po terk .sa-dist-red; nishka vo mesto (bez staklo); dve
   centrirani karti gi koristat .sa-drawer--lg. Samo tokeni + 10px radius. */
.sa-nav-count {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 16px;
  min-width: 22px;
  justify-content: center;
}
.sa-tiket-toolbar { flex-wrap: wrap; gap: 10px; }
/* Osnova 0 za chipovite i fiksna za prebaruvanjeto — inaku zbirot na
   osnovite go krshi tulbarot vo dva reda i na 1280; chipovite si lizgaat. */
.sa-tiket-toolbar .sa-lizgacka-ram { flex: 1 1 0; min-width: 0; }
.sa-tiket-toolbar .sa-filter-group { display: flex; min-width: 0; }
.sa-tiket-toolbar .sa-search { flex: 0 1 220px; min-width: 180px; }
.sa-tiket-toolbar .sa-btn { flex: 0 0 auto; }
/* Chipovite imaat svoja boja po status (kako kaj klientite), bez data-status
   za da ne gi fati saSetClientStatus pri vchituvanje. */
.sa-filter-chip[data-tiket-status="otvoren"].is-active { background: rgba(217, 119, 6, 0.14); color: #9a6a00; border-color: rgba(217, 119, 6, 0.35); }
.sa-filter-chip[data-tiket-status="odgovoren"].is-active { background: rgba(5, 150, 105, 0.14); color: #157a4f; border-color: rgba(5, 150, 105, 0.35); }
.sa-filter-chip[data-tiket-status="zatvoren"].is-active,
.sa-filter-chip[data-tiket-status="all"].is-active { background: var(--sa-active-bg); color: var(--sa-brand); border-color: var(--sa-active-ring); }
html[data-theme="dark"] .sa-filter-chip[data-tiket-status="otvoren"].is-active { color: #fcd34d; }
html[data-theme="dark"] .sa-filter-chip[data-tiket-status="odgovoren"].is-active { color: #6ee7b7; }

/* Zolt potsetnik: paketite se meneti po poslednata emisija. */
.sa-tiket-potsetnik {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 22px;
  border-bottom: 1px solid var(--sa-line);
  background: rgba(217, 119, 6, 0.10);
  color: #7c4a03;
  font-size: 13px;
  font-weight: 500;
}
.sa-tiket-potsetnik i { color: var(--sa-warn); }
.sa-tiket-potsetnik span { flex: 1 1 auto; min-width: 0; }
html[data-theme="dark"] .sa-tiket-potsetnik { background: rgba(240, 180, 41, 0.12); color: #fcd34d; }

.sa-tiket-lista { display: flex; flex-direction: column; }
.sa-tiket-lista > .is-hidden, .sa-tiket-grupa__deca > .is-hidden { display: none !important; }
.sa-tiket-prazno { margin: 0; padding: 18px 22px; }
.sa-tiket-prazno[hidden] { display: none; }
.sa-tiket-red {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 22px 12px 34px;
  border: 0;
  border-bottom: 1px solid var(--sa-line);
  border-radius: 0;
  background: var(--sa-card);
  color: var(--sa-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sa-tiket-lista > .sa-tiket-red:last-child { border-bottom: 0; }
.sa-tiket-red:hover { background: var(--sa-hover); }
.sa-tiket-red:focus-visible { outline: 2px solid var(--sa-accent-hot); outline-offset: -2px; }
.sa-tiket-neprocitano {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--sa-accent-hot);
  box-shadow: 0 0 0 3px var(--sa-accent-dim);
}
.sa-tiket-red__telo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-tiket-red__koj { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.sa-tiket-red__koj strong { font-weight: 600; }
.sa-tiket-red__kod { color: var(--sa-muted); font-size: 12px; }
.sa-tiket-red__izbrisan { color: var(--sa-danger); font-size: 12px; font-weight: 500; }
.sa-tiket-red__naslov { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-tiket-red__meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--sa-muted); font-size: 12px; }
.sa-tiket-red__meta i { opacity: 0.6; }
.sa-tiket-grupa { border-bottom: 1px solid var(--sa-line); }
.sa-tiket-grupa:last-child { border-bottom: 0; }
.sa-tiket-grupa > .sa-tiket-red--grupa { border-bottom: 0; }
.sa-tiket-grupa.is-open > .sa-tiket-red--grupa { background: var(--sa-elevated); }
.sa-tiket-grupa.is-open > .sa-tiket-red--grupa .fa-chevron-down { transform: rotate(180deg); }
.sa-tiket-grupa__deca { background: var(--sa-elevated); border-top: 1px solid var(--sa-line); }
.sa-tiket-grupa__deca[hidden] { display: none; }
.sa-tiket-red--dete { padding-left: 52px; background: transparent; }
.sa-tiket-red--dete .sa-tiket-neprocitano { left: 32px; }
.sa-tiket-red--dete:last-child { border-bottom: 0; }

/* Nishka: distributer levo (elevated), nie desno (accent-dim). */
.sa-nit__glava { flex-wrap: wrap; gap: 10px; }
.sa-nit__naslov { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
/* Separatorot e del od segmentot sto sledi (so nbsp) — ne ostanuva osamen na pochetok na red. */
.sa-nit__del::before { content: '·\00a0'; color: var(--sa-muted); }
.sa-nit__poraki { display: flex; flex-direction: column; gap: 12px; }
.sa-nit__poraka {
  align-self: flex-start;
  max-width: min(78%, 720px);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--sa-line);
  background: var(--sa-elevated);
  color: var(--sa-text);
  font-size: 14px;
  line-height: 1.5;
}
.sa-nit__poraka--admin { align-self: flex-end; background: var(--sa-accent-dim); border-color: transparent; }
.sa-nit__meta { font-size: 12px; opacity: 0.7; margin-bottom: 4px; }
.sa-nit__meta b { font-weight: 600; }
.sa-nit__mail.is-greska { color: var(--sa-danger); opacity: 1; font-weight: 600; }
.sa-nit__tekst { overflow-wrap: anywhere; }
.sa-nit__forma { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sa-line); }
.sa-nit__forma textarea.sa-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; }
.sa-nit__noze { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sa-tiket-brojac { margin-left: auto; font-size: 12px; color: var(--sa-muted); }
.sa-tiket-brojac.is-polno { color: var(--sa-danger); }
.sa-field .sa-tiket-brojac { display: block; margin-top: 4px; text-align: right; }

/* Emisija: chipovi so primachi, rechenica so brojot. */
#drawerNovTiket .sa-field + .sa-field, #drawerEmisija .sa-field + .sa-field { margin-top: 14px; }
.sa-emisija-chips { display: flex; flex-wrap: nowrap; gap: 8px; padding: 2px 0 4px; min-height: 40px; align-items: center; }
.sa-emisija-chips .sa-check { flex: 0 0 auto; }
.sa-emisija-chips .sa-check[hidden] { display: none !important; } /* nadjachuva .sa-check inline-flex !important */
.sa-emisija-recenica {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sa-elevated);
  border: 1px solid var(--sa-line);
  font-size: 13px;
  font-weight: 500;
}
.sa-toast-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* Mobilno: naslov (cel red) → chipovi (lizgaat, do rabot) → prebaruvanje → polno → ghost. */
  .sa-tiket-toolbar > .sa-panel-toolbar-title { order: 1; flex: 1 1 100%; }
  .sa-tiket-toolbar > .sa-lizgacka-ram { order: 2; flex: 1 1 100%; margin: 0 -14px; width: calc(100% + 28px); max-width: none; }
  .sa-tiket-toolbar > .sa-lizgacka-ram > .sa-lizgacka { padding: 2px 14px; }
  .sa-tiket-toolbar > .sa-search { order: 3; flex: 1 1 100%; }
  .sa-tiket-toolbar > .sa-btn { order: 4; flex: 1 1 auto; }
  .sa-tiket-toolbar > .sa-btn--ghost { order: 5; }
}
@media (max-width: 560px) {
  /* 375px: red vo dve linii (ime+kod / naslov+bedz), nishkata cel ekran,
     kopchinjata 100 % edno pod drugo (polnoto gore). */
  .sa-tiket-red { flex-wrap: wrap; padding: 12px 16px 12px 30px; gap: 8px; }
  .sa-tiket-red__telo { flex: 1 1 100%; }
  .sa-tiket-red__naslov { white-space: normal; }
  .sa-tiket-red__meta { width: 100%; justify-content: flex-end; }
  .sa-tiket-red--dete { padding-left: 40px; }
  .sa-tiket-red--dete .sa-tiket-neprocitano { left: 22px; }
  .sa-nit__poraka { max-width: 100%; }
  .sa-nit__noze .sa-btn { width: 100%; }
  .sa-nit__noze .sa-tiket-brojac { margin-left: 0; width: 100%; text-align: right; }
  .sa-tiket-potsetnik { padding: 10px 16px; }
  .sa-tiket-potsetnik .sa-btn { width: 100%; }
  #drawerNovTiket .sa-drawer-foot, #drawerEmisija .sa-drawer-foot { flex-wrap: wrap; }
  #drawerNovTiket .sa-drawer-foot .sa-btn, #drawerEmisija .sa-drawer-foot .sa-btn { width: 100%; }
}

/* ── Prijavi za distributer ─────────────────────────────────────────── */
.sa-prijavi { display: flex; flex-direction: column; gap: 10px; }
.sa-prijava-red { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius); background: var(--sa-card); }
.sa-prijava-red.is-hidden { display: none; }
.sa-prijava-red__glava { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-prijava-red__koj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sa-prijava-red__firma { color: var(--sa-muted); }
.sa-prijava-red__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--sa-muted); }
.sa-prijava-red__meta a { color: var(--sa-text); text-decoration: none; }
.sa-prijava-red__meta a:hover { color: var(--sa-accent); }
.sa-prijava-red__meta i { margin-right: 3px; opacity: .8; }
.sa-prijava-red__poraka summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--sa-accent); list-style: none; }
.sa-prijava-red__poraka summary::-webkit-details-marker { display: none; }
.sa-prijava-red__poraka div { margin-top: 6px; padding: 10px 12px; border-radius: var(--sa-radius); background: var(--sa-surface); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.sa-prijava-red__akcii { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 0 0 auto; }
.sa-inline-form { display: inline; margin: 0; }
@media (max-width: 700px) {
  .sa-prijava-red { flex-direction: column; }
  .sa-prijava-red__akcii { width: 100%; }
  .sa-prijava-red__akcii .sa-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Zakazani za brishenje (tab distributeri) ────────────────────────
   Ist red kako .sa-prijava-red, no SVOJA klasa: saPrijaviFilter gi krie
   site .sa-prijava-red bez data-prijava-status, pa spodelena klasa bi gi
   sokrila i ovie redovi. Crvena leva linija = cheka konechna odluka. */
.sa-zakazani { display: flex; flex-direction: column; gap: 10px; }
.sa-zakazan-red { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--sa-line); border-left: 3px solid var(--sa-danger); border-radius: var(--sa-radius); background: var(--sa-card); }
.sa-zakazan-red__glava { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sa-zakazan-red__koj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sa-zakazan-red__korisnik { color: var(--sa-muted); }
.sa-zakazan-red__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--sa-muted); }
.sa-zakazan-red__meta i { margin-right: 3px; opacity: .8; }
.sa-zakazan-red__akcii { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 0 0 auto; }
@media (max-width: 700px) {
  .sa-zakazan-red { flex-direction: column; }
  .sa-zakazan-red__akcii { width: 100%; }
  .sa-zakazan-red__akcii .sa-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Zakluceno pole (kod/usernejm, lozinka) ─────────────
   Menuvanjeto na identitetot ne smee da se sluchi „patem": poleto stoi
   zakluceno, otkluchuvanjeto e svesen klik, a promenata se potvrduva pred da
   se zakluci nazad. Dvete polinja se ODVOENI — sekoe so svoe katanche. */
.sa-kluc-red {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sa-kluc-red > input {
  flex: 1 1 auto;
  min-width: 0;
}
.sa-kluc-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--sa-ctl-h);
  padding: 0 12px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-elevated);
  color: var(--sa-ink);
  font-family: var(--sa-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, opacity .2s;
}
.sa-kluc-btn:hover:not(:disabled) { border-color: var(--sa-brand); }
.sa-kluc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Zakluceno — prigusheno, za da se vidi deka tuka ne se pishuva. */
.sa-kluc[data-sostojba="zakluceno"] .sa-kluc-red > input {
  background: var(--sa-surface);
  color: var(--sa-muted);
  cursor: default;
}
.sa-kluc[data-sostojba="otkluceno"] .sa-kluc-red > input,
.sa-kluc[data-sostojba="proveruva"] .sa-kluc-red > input { border-color: var(--sa-brand); }
.sa-kluc[data-sostojba="ok"] .sa-kluc-red > input { border-color: var(--sa-ok); }
.sa-kluc[data-sostojba="greska"] .sa-kluc-red > input { border-color: var(--sa-danger); }

.sa-kluc[data-sostojba="ok"] .sa-kluc-btn {
  border-color: var(--sa-ok);
  background: rgba(5, 150, 105, .10);
  color: var(--sa-ok);
}
html[data-theme="dark"] .sa-kluc[data-sostojba="ok"] .sa-kluc-btn { background: rgba(52, 211, 153, .16); }
.sa-kluc[data-sostojba="greska"] .sa-kluc-btn {
  border-color: var(--sa-danger);
  color: var(--sa-danger);
}

.sa-kluc-vtor { margin-top: 8px; width: 100%; }
.sa-kluc-poraka {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-muted);
}
.sa-kluc[data-sostojba="ok"] .sa-kluc-poraka { color: var(--sa-ok); }
.sa-kluc[data-sostojba="greska"] .sa-kluc-poraka { color: var(--sa-danger); }


/* ── AI картички во табот Систем ────────────────────────
   Dve serverski podesuvanja (OCR rezhim i AI rezerva) — na shirok ekran sedat
   edna do druga, pod 1100px se redat edna pod druga. */
.sa-ai-red {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

@media (max-width: 1100px) {
  .sa-ai-red { grid-template-columns: minmax(0, 1fr); }
}


/* ── AJAX навигација ────────────────────────────────────
   Додека десната целина се вчитува: содржината бледнее (не скока распоредот) и
   тенка лента оди на врвот. Кратко е — но без знак кликот изгледа изгубен. */
#saTabContent { transition: opacity .15s ease; }
body.sa-vcituva #saTabContent { opacity: .5; pointer-events: none; }
body.sa-vcituva .sa-main::before {
  content: '';
  position: fixed;
  top: 0;
  left: var(--sa-sidebar-w);
  right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, transparent, var(--sa-brand), transparent);
  animation: saTraka .9s linear infinite;
}

@keyframes saTraka {
  from { transform: translateX(-35%); }
  to   { transform: translateX(35%); }
}

@media (max-width: 860px) {
  body.sa-vcituva .sa-main::before { left: 0; }
}


/* ── Преглед: капа на табелата и помош под копче ──────────────────────
   Табелата ги носи СИТЕ редови (барањето и подредувањето работат врз нив),
   а CSS ги крие над петтиот додека човекот не побара повеќе. */
.sa-usage-table.is-skrateno tbody tr:nth-child(n + 6) { display: none; }

.sa-usage-povekje {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
}

.sa-panel-head-desno {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-help-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  color: var(--sa-muted);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sa-help-btn:hover,
.sa-help-btn.is-active {
  background: var(--sa-active-bg);
  color: var(--sa-brand);
  border-color: var(--sa-active-ring);
}

.sa-usage-explain {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--sa-radius-sm);
  background: var(--sa-hover);
}

/* ── Додатоци како едно копче со број ──────────────────────────────────
   Порано секој додаток беше свој бејџ: пет реда во една ќелија и редот
   растеше трипати. Сега бројот е доволен, а имињата се на барање. */
.sa-ekstri {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sa-ekstri i { font-size: 10px; }

.sa-ekstri:hover,
.sa-ekstri.is-otvoren {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.5);
}

html[data-theme="dark"] .sa-ekstri {
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
}

html[data-theme="dark"] .sa-ekstri:hover,
html[data-theme="dark"] .sa-ekstri.is-otvoren {
  background: rgba(167, 139, 250, 0.26);
}

/* Списокот е на `body` и `fixed` — инаку `.sa-table-wrap` со
   `overflow-x: auto` би го отсекол. */
.sa-ekstri-pop {
  position: fixed;
  z-index: 12000;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 10px 12px;
  border-radius: var(--sa-radius-sm);
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  color: var(--sa-text);
}

.sa-ekstri-pop__naslov {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-label);
  margin-bottom: 6px;
}

.sa-ekstri-pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sa-ekstri-pop li {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.45;
}

.sa-ekstri-pop li::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7c3aed;
}

html[data-theme="dark"] .sa-ekstri-pop li::before { background: #a78bfa; }

/* ── Фактури: период, пребарување по едно поле, пагинација ───────────── */
.sa-inv-baraj {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}

.sa-inv-baraj-polje {
  flex: 0 0 auto;
  width: auto;
  min-width: 96px;
}

.sa-inv-baraj .sa-search { flex: 1 1 auto; min-width: 0; }

.sa-inv-period {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.sa-inv-period .sa-input { width: auto; min-width: 132px; }
.sa-inv-period span { color: var(--sa-muted); }

/* Toolbar: на широк екран еден ред; на помал desktop се пакува уредно
   (чипови / датуми / копчиња не се качуваат едни врз други). */
.sa-panel-toolbar.sa-inv-toolbar {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  column-gap: 12px;
}
.sa-panel-toolbar.sa-inv-toolbar > .sa-inv-baraj {
  flex: 1 1 240px;
  min-width: min(100%, 220px);
}
.sa-panel-toolbar.sa-inv-toolbar > .sa-inv-period {
  flex: 0 1 auto;
  min-width: 0;
}
.sa-panel-toolbar.sa-inv-toolbar > .sa-lizgacka-ram {
  flex: 1 1 260px;
  min-width: 0;
}
.sa-panel-toolbar.sa-inv-toolbar > .sa-lizgacka-ram .sa-market-bar {
  margin-bottom: 0;
  flex-wrap: nowrap;
}
.sa-panel-toolbar.sa-inv-toolbar > .sa-btn {
  flex: 0 0 auto;
}

@media (max-width: 1200px) {
  .sa-panel-toolbar.sa-inv-toolbar > .sa-lizgacka-ram {
    flex: 1 1 100%;
    order: 8;
  }
  .sa-inv-period .sa-input {
    min-width: 118px;
    width: 9.25rem;
  }
}

@media (max-width: 980px) {
  .sa-panel-toolbar.sa-inv-toolbar > .sa-inv-period {
    flex: 1 1 calc(100% - 8px);
    flex-wrap: wrap;
  }
  .sa-panel-toolbar.sa-inv-toolbar > .sa-inv-baraj {
    flex: 1 1 100%;
  }
  .sa-inv-period .sa-input {
    flex: 1 1 118px;
    min-width: 118px;
    width: auto;
  }
}

.sa-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 4px 0;
}

.sa-pager-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sa-muted);
}

.sa-pager-kopcinja {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-pager-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sa-radius-sm);
  border: 1px solid var(--sa-line);
  background: var(--sa-card);
  color: var(--sa-muted);
  font-size: 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sa-pager-btn:hover { background: var(--sa-hover); color: var(--sa-text); }

.sa-pager-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.sa-pager-sega {
  font-size: 12px;
  font-weight: 700;
  color: var(--sa-text);
  min-width: 56px;
  text-align: center;
}

@media (max-width: 760px) {
  /* `flex: 1 1 0` ги стискаше двата датума под ширината на самиот формат и
     „09/02/2026" се сечеше. Основа од 130px + прелевање: полињата остануваат
     читливи, а копчето слегува во нов ред кога нема место. */
  .sa-inv-period {
    width: 100%;
    flex-wrap: wrap;
  }
  .sa-inv-period .sa-input { flex: 1 1 130px; min-width: 130px; }
  .sa-inv-period .sa-btn { flex: 0 0 auto; }
}

/* Серверско подредување: колоната е линк со своја стрелка што ја кажува и
   НАСОКАТА, па статичниот `⇅` од `.sa-th-sort::after` би бил втор знак. */
.sa-th-sort--vrska::after { content: none; }

.sa-th-sort--vrska a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.sa-th-sort--vrska i { font-size: 10px; opacity: 0.45; }
.sa-th-sort--vrska.is-active i { opacity: 1; color: var(--sa-brand); }
.sa-th-sort--vrska.is-active a { color: var(--sa-text); }

/* ── Тултип на копчињата со икона ──────────────────────────────────────
   Сопствен балон наместо `title`: излегува веднаш и се чита. На тесен екран
   не се покажува воопшто — таму текстот е видлив под иконата, зашто долг
   притисок за тултип е непредвидлив. */
.sa-tip { position: relative; }

.sa-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--sa-ink, #0f172a);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 60;
}

.sa-tip:hover::after,
.sa-tip:focus-visible::after { opacity: 1; }

.sa-btn-etiketa { display: none; }

@media (hover: none), (max-width: 760px) {
  /* Без глувче нема ховер — етикетата станува дел од копчето. */
  .sa-tip::after { content: none; }
  /*
   * Мрежа 3 × 2: шест копчиња, два рамни реда, сите со иста ширина.
   * Ова стана можно дури откако паднаа вгнездените падинзи (панел 22 + мрежа
   * 18 + картичка 18). Дотогаш колоната беше ~88px и „Провизија" се сечеше;
   * сега е ~102px, што е доволно за најдолгата етикета со иконата.
   */
  .sa-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .sa-card-actions .sa-card-btn-ikona,
  .sa-card-actions .sa-card-btn-del,
  .sa-card-actions .sa-card-btn-edit {
    /* `width: 100%` и `max-width: none`: основното правило за „Бриши" носи
       `max-width: 56px` (кроено за икона без текст), што во мрежата го
       правеше потесно од другите пет. */
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 8px 6px;
    gap: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  .sa-btn-etiketa {
    display: inline;
    font-size: 10px;
    font-weight: 700;
  }
}

/* ── Провизија во попап ── */
.sa-prov-broj {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sa-radius-sm);
  background: var(--sa-hover);
  margin-bottom: 12px;
}

.sa-prov-broj span { font-size: 12px; color: var(--sa-muted); }
.sa-prov-broj b { font-size: 20px; color: var(--sa-text); }

.sa-prov-tabela th:last-child,
.sa-prov-tabela td:last-child { text-align: right; }
.sa-prov-tabela td b { color: var(--sa-brand); }

/* Објаснување што се тикетите — се гледа само додека нема ниту еден. */
.sa-tiket-objasnenie {
  padding: 4px 2px 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sa-muted);
  max-width: 720px;
}

.sa-tiket-objasnenie p { margin: 0 0 10px; }
.sa-tiket-objasnenie strong { color: var(--sa-text); }

.sa-tiket-objasnenie ul {
  margin: 0 0 10px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Наплата: клучевите се внесуваат од интерфејсот ─────────────────── */
.sa-stripe-tabela { margin: 6px 0 0; }
.sa-stripe-tabela td { vertical-align: top; padding: 10px 8px; }
.sa-stripe-tabela td:first-child { width: 55%; }
.sa-stripe-tabela code {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sa-code-bg);
}

.sa-stripe-forma {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sa-line);
}

@media (max-width: 640px) {
  .sa-stripe-tabela td:first-child { width: auto; }
  .sa-stripe-tabela .sa-field-hint { display: none; }
}

/* ── Телефон: табелата со ангажман станува картички ────────────────────
   Седум колони на 390px значеа хоризонтално лизгање и имиња скршени на три
   реда. Истиот маркап, друг распоред: заглавјето се крие, редот е картичка,
   а бројот си ја носи етикетата од `data-eti`. */
@media (max-width: 640px) {
  .sa-usage-table { border: 0; }
  .sa-usage-table thead { display: none; }

  .sa-usage-table tbody tr {
    display: block;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-card);
  }

  .sa-usage-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    font-size: 13px;
  }

  .sa-usage-table tbody td::before {
    content: attr(data-eti);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sa-label);
  }

  /* Името е наслов на картичката, не ред со етикета. */
  .sa-usage-table tbody td.sa-usage-td-ime {
    display: block;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--sa-line);
  }
  .sa-usage-table tbody td.sa-usage-td-ime::before { content: none; }
  .sa-usage-table tbody td.sa-usage-td-ime strong { display: block; font-size: 14px; }
  .sa-usage-table tbody td.sa-usage-td-ime .sub { font-size: 12px; color: var(--sa-muted); }

  .sa-usage-table .sa-usage-health { flex: 0 0 auto; }

  /* Капата брои РЕДОВИ, па важи и во картичкиот распоред. */
  .sa-usage-table.is-skrateno tbody tr:nth-child(n + 6) { display: none; }
}

/* Четири кратки броја не треба четири реда на телефон. */
@media (max-width: 520px) {
  .sa-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Телефон: фактурите како картички ─────────────────────────────────
   Ист терк како кај табелата со ангажман: истиот маркап, друг распоред. */
@media (max-width: 640px) {
  #saInvoicesTable { border: 0; }
  #saInvoicesTable thead { display: none; }

  #saInvoicesTable tbody tr {
    display: block;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-card);
  }

  #saInvoicesTable tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    font-size: 13px;
  }

  #saInvoicesTable tbody td::before {
    content: attr(data-eti);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sa-label);
  }

  /* Бројот е наслов на картичката; дејствата се лента на дното. */
  #saInvoicesTable tbody td.sa-inv-td-broj {
    display: block;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--sa-line);
    font-size: 14px;
  }
  #saInvoicesTable tbody td.sa-inv-td-broj::before { content: none; }

  #saInvoicesTable tbody td.sa-inv-td-akcii {
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--sa-line);
  }
  #saInvoicesTable tbody td.sa-inv-td-akcii::before { content: none; }

  #saInvoicesTable .sa-empty-cell { display: block; text-align: center; }
  #saInvoicesTable .sa-empty-cell::before { content: none; }
}

/* ── Телефон: картичките не смеат да бидат пошироки од панелот ─────────
   `minmax(280px, 1fr)` е ДОЛНА граница: на екран од 320px достапни се
   252px, па траката сепак бара 280 и картичката излегува од панелот.
   На телефон има само една колона — таа смее да се собере колку има. */
@media (max-width: 640px) {
  /* `minmax(340px, 1fr)` е ДОЛНА граница на траката: во контејнер од 297px
     таа сепак бара 340 и картичката излегува за 43px. На телефон има само
     една колона — таа смее да се собере колку има место. */
  .sa-module-cards,
  .sa-dist-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .sa-mod-card {
    padding: 14px;
    gap: 10px;
    border-radius: 12px;
  }

  /*
   * ТРИ вгнездени падинга: панел 22 + мрежа 18 + картичка 18 = 58px од секоја
   * страна пред да почне текстот. На екран од 375 тоа е една третина потрошена
   * на празнина. Кога панелот носи мрежа со картички, неговиот хоризонтален
   * падинг е ИЗЛИШЕН — мрежата веќе го дава растојанието до рабовите.
   */
  .sa-panel-body:has(> .sa-dist-cards),
  .sa-panel-body:has(> .sa-module-cards) {
    padding-left: 0;
    padding-right: 0;
  }

  .sa-panel-body { padding-left: 14px; padding-right: 14px; }
}

/* ── Полиња со зададена ширина ─────────────────────────────────────────
   Порано беа инлајн (`style="max-width:340px"`, `width:110px`). Инлајн стил
   не може да се исклучи од медиа прашање — на телефон полето излегуваше
   надвор од картичката и целата страница добиваше хоризонтален скрол. */
.sa-input--rezim { max-width: 340px; }
.sa-input--broj { width: 110px; }

@media (max-width: 640px) {
  .sa-input--rezim,
  .sa-input--broj {
    width: 100%;
    max-width: 100%;
  }
}

/* ── Dnevnik na partnerite (sadmin → Market partneri) ─────────────────
   Eden red = edno dejstvo. Udren limit e CRVEN red — toa e prviot znak za
   bot, mora da se vidi od metar, ne da se bara po badzhovi. */
.sa-dnevnik { display: flex; flex-direction: column; gap: 6px; }
/* ── Sklopliv panel ────────────────────────────────────────────────────
   Zosto ne <details>: vo zaglavjeto na ovie paneli stojat cipovi i eden <select>,
   a klik vrz kontrola vnatre vo <summary> go tvitka otvoranjeto. Zatoa panelot
   ostanuva <div>, a se sklopuva SÈ osven lentata so naslovot. */
.sa-sklop[data-otvoren="0"] > *:not(.sa-panel-toolbar) { display: none; }
.sa-sklop[data-otvoren="0"] > .sa-panel-toolbar { border-bottom: 0 !important; }
.sa-sklop-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sa-muted);
  cursor: pointer;
  transition: transform .18s var(--sa-ease), background .15s ease;
}
.sa-sklop-btn:hover { background: var(--sa-hover); color: var(--sa-text); }
.sa-sklop[data-otvoren="0"] .sa-sklop-btn { transform: rotate(-90deg); }
.sa-dnevnik-poveke { margin: 10px 0 2px; }

.sa-dnevnik-red {
  display: grid;
  /* Vtorata kolona („#KOD Ime") ima kratka sodrzina; koga i nea ja tegnesme so
     `1fr`, na shirok ekran megju imeto i bedzot zjaeshe dupka od 300px i redot
     izgledashe skrsen na dve koloni. Sega taa e so FIKSNA sirochina (elipsa ako
     imeto e dolgo), a celiot vishok go zema opisot — okoto gi cita bedzot i
     tekstot eden do drug, a kolonite ostanuvaat poramneti niz site redovi. */
  grid-template-columns: 112px 190px auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-card);
  font-size: 13px;
}
.sa-dnevnik-red.e-limit {
  border-color: var(--sa-danger);
  background: color-mix(in srgb, var(--sa-danger) 7%, transparent);
}
.sa-dnevnik-red__koga { font-variant-numeric: tabular-nums; color: var(--sa-muted); font-size: 12px; }
.sa-dnevnik-red__koj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dnevnik-red__koj code { font-size: 11px; }
.sa-dnevnik-red__sto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dnevnik-red__ip { font-size: 11px; font-variant-numeric: tabular-nums; }
.sa-dnevnik-filter select { height: 34px; padding: 0 10px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm); background: var(--sa-input-bg); color: var(--sa-text); font-size: 13px; }
@media (max-width: 900px) {
  .sa-dnevnik-red { grid-template-columns: 1fr 1fr; }
  .sa-dnevnik-red__sto { grid-column: 1 / -1; white-space: normal; }
  .sa-dnevnik-red__ip { display: none; }
}

/* ── DigitalPOS fakturi (sadmin → Klienti → „Vidi fakturi") ─────────────
   Eden modal (#modalDpos), dva prikaza: lista na fakturi i detal na edna.
   Site boi se preku --sa-* tokeni, pa temnata tema doagja sama. Tabelata na
   stavki e obichna .sa-table — samo broevite se poramnuvaat desno (e-broj). */
#modalDpos .sa-modal { max-width: 780px; }
/* .sa-btn e inline-flex i go nadjacuva podrazbiranoto [hidden] — ist lek kako .sa-loz-kluc. */
#dposNazad[hidden] { display: none !important; }

.sa-dpos-meta {
  font-size: 12px;
  color: var(--sa-muted);
  margin: 0 0 10px;
}
.sa-dpos-meta code {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--sa-code-bg);
  color: var(--sa-text);
}

.sa-dpos-vcituva { padding: 40px 16px; }
.sa-dpos-vcituva i { display: inline-block; font-size: 18px; margin: 0 8px 0 0; opacity: .7; vertical-align: middle; }
.sa-dpos-vcituva span { vertical-align: middle; }

.sa-dpos-greska {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--sa-danger);
  border-radius: var(--sa-radius-sm);
  background: color-mix(in srgb, var(--sa-danger) 8%, transparent);
  color: var(--sa-danger);
  font-size: 13.5px;
  line-height: 1.45;
}
.sa-dpos-greska i { margin-top: 2px; flex-shrink: 0; }

/* Lista: broj · datum · kupuvach · iznos · link. Kupuvachot e edinstvenata
   kolona shto se shiri; ostanatite se dovolno shiroki za svojot sodrzhaj. */
.sa-dpos-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sa-dpos-red {
  display: grid;
  grid-template-columns: 72px 92px minmax(120px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-card);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sa-dpos-red:hover { background: var(--sa-hover); border-color: var(--sa-active-ring); }
.sa-dpos-red:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sa-accent-dim); border-color: var(--sa-accent); }
.sa-dpos-red__broj { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sa-ink); }
.sa-dpos-red__datum { font-variant-numeric: tabular-nums; color: var(--sa-muted); font-size: 12.5px; }
.sa-dpos-red__kupuvac { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-dpos-red__iznos { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-dpos-red__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-accent);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.sa-dpos-red__link:hover { background: var(--sa-accent-dim); text-decoration: none; }
.sa-dpos-red__link.is-prazno { visibility: hidden; }

/* Detal: zaglavje kako mrezha oznaka/vrednost, potoa stavkite. */
.sa-dpos-detal { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.sa-dpos-detal__glava {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm);
  background: var(--sa-elevated);
}
.sa-dpos-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-dpos-kv__oznaka {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sa-muted);
}
.sa-dpos-kv__vrednost { font-size: 13.5px; color: var(--sa-text); overflow-wrap: anywhere; }

.sa-dpos-stavki th, .sa-dpos-stavki td { padding: 9px 10px; }
.sa-dpos-stavki .e-broj { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-dpos-stavki__kod { font-size: 12px; color: var(--sa-muted); font-variant-numeric: tabular-nums; }
.sa-dpos-stavki__ime { min-width: 140px; }

.sa-dpos-vkupno {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 13.5px;
}
.sa-dpos-vkupno__red { display: flex; gap: 18px; min-width: 220px; justify-content: space-between; color: var(--sa-muted); }
.sa-dpos-vkupno__red.is-vkupno { color: var(--sa-text); font-weight: 700; font-size: 15px; border-top: 1px solid var(--sa-line); padding-top: 6px; }
.sa-dpos-vkupno .e-broj { font-variant-numeric: tabular-nums; }

.sa-dpos-beleska p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.sa-dpos-akcii { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-dpos-akcii .sa-btn { text-decoration: none; }
.sa-dpos-akcii .sa-dpos-meta { margin: 0; }

@media (max-width: 640px) {
  .sa-dpos-red { grid-template-columns: auto 1fr auto; gap: 6px 10px; }
  .sa-dpos-red__kupuvac { grid-column: 1 / -1; white-space: normal; }
  .sa-dpos-red__iznos { grid-column: 2; }
  .sa-dpos-vkupno__red { min-width: 0; width: 100%; }
}

/* ── Klient fioka (sadmin → Klienti → Dodaj/Izmeni): HORIZONTALNA ─────────
   Ist terk kako #drawerDistributer — 20 koloni, 4 polinja = span 5, 5 polinja
   = span 4. Shirochinata (1400px) ja nosi .sa-drawer--dist; tuka se samo
   pravilata vrzani za #drawerKlient, za da ne se dopira postoechkoto. */
#drawerKlient .sa-grid-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); row-gap: 18px; }
#drawerKlient .sa-pole--od4 { grid-column: span 5; }
#drawerKlient .sa-pole--od5 { grid-column: span 4; }
#drawerKlient .sa-pole--od2 { grid-column: span 10; }
#drawerKlient .sa-pole--cel { grid-column: 1 / -1; }
/* Red 3 pocnuva od prvata kolona i koga „Korisnicko ime" e skrieno (Izmeni):
   inaku red 2 se lizga za edno pole i redovite ne se poklopuvaat. */
#drawerKlient .sa-pole--prv { grid-column: 1 / span 4; }
/* Mini Website: obvivkata #klientMiniFields e PROYIRNA za mrezhata (display:
   contents) — decata se kjelii: Slug i Domen vo red 3, a „Za nas", „Rabotno
   vreme" i javniot link (order 2) POD „Dodatoci od paket" (order 1). Taka JS
   (`#klientMiniFields input` + hidden) gi gasi/krie site kako dosega.
   [hidden] ostanuva display:none — pravilo samo za :not([hidden]). */
#drawerKlient #klientMiniFields:not([hidden]) { display: contents; }
/* Decata na obvivkata NE se direktni deca na .sa-grid, pa opshtoto pravilo
   `.sa-grid > .sa-field > input { margin-top: auto }` ne gi fakja — bez ova
   Slug/Domen sedat povisoko od „Aktiven do" vo istiot red. */
#drawerKlient #klientMiniFields > .sa-field { display: flex; flex-direction: column; }
#drawerKlient #klientMiniFields > .sa-field > input,
#drawerKlient #klientMiniFields > .sa-field > textarea { margin-top: auto; }
#drawerKlient .sa-pole--dolu-paket { order: 1; }
#drawerKlient .sa-pole--dolu { order: 2; }
#drawerKlient .sa-addon-block { margin-top: 0; padding: 12px 14px; }
#drawerKlient .sa-mini-link-box.sa-pole--dolu { margin-top: 0; padding-top: 0; border-top: 0; }
#drawerKlient textarea { min-height: 0; }
@media (max-width: 1240px) {
  /* Tri po red: 20 ne se deli na 3, pa mrezhata odi na 12 (4 x 3). */
  #drawerKlient .sa-grid-20 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #drawerKlient .sa-pole--od4,
  #drawerKlient .sa-pole--od5 { grid-column: span 4; }
  #drawerKlient .sa-pole--prv { grid-column: 1 / span 4; }
  #drawerKlient .sa-pole--od2 { grid-column: span 6; }
}
@media (max-width: 860px) {
  #drawerKlient .sa-grid-20 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #drawerKlient .sa-pole--od4,
  #drawerKlient .sa-pole--od5,
  #drawerKlient .sa-pole--od2 { grid-column: span 1; }
  #drawerKlient .sa-pole--prv { grid-column: 1 / span 1; }
}
@media (max-width: 560px) {
  #drawerKlient .sa-grid-20 { grid-template-columns: minmax(0, 1fr); }
  #drawerKlient .sa-pole--prv { grid-column: auto; }
}

/* ── „Vidi fakturi" (DigitalPOS) vo kartichkata / tabelata na klient ───────
   Vo kartichkata sosedite se .sa-card-btn-login (42px, radius 11): istata
   visina/zaoblenost za redot da ostane ramen. Bez kod — gasno (opacity
   od .sa-card-btn-ikona:disabled), a `title` go objasnuva zoshto. */
.sa-card-btn-login:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sa-card-btn-login:disabled:hover { background: rgba(25, 83, 92, 0.14); transform: none; }

/* Kartichka na klient na tesen ekran / dopir: „Izmeni" + do 4 ikoni (nasha
   faktura, DigitalPOS, najava, brishi) SEKOGASH vo eden red. Opshtoto pravilo
   pogore (mrezha 3 × 2, kroeno za partnerskite kartichki so etiketi) tuka
   davashe 3 + 2 so dupka: .sa-card-btn-login ne beshe vo mrezhata pa si ja
   chuvashe max-width 56px. „Izmeni" e dvojno poshiroko od ikonite — vo
   kartichka od ~265px vnatreshna shirina toa e 80 + 4 × 40 + 4 × 6. */
@media (hover: none), (max-width: 760px) {
  .sa-client-card .sa-card-actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
  }
  .sa-client-card .sa-card-actions .sa-card-btn-edit {
    flex: 2 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0 6px;
  }
  .sa-client-card .sa-card-actions .sa-card-btn-login,
  .sa-client-card .sa-card-actions .sa-card-btn-del {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
  }
}
.sa-badge--dpos { font-variant-numeric: tabular-nums; }
/* Povrzana POS faktura („ф. 309") — bedz sto e kopche: otvora detal od POS-ot. */
button.sa-badge--dpos-f { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; line-height: inherit; }
button.sa-badge--dpos-f:hover { filter: brightness(0.95); }
.sa-dpos-red__meni { margin-left: 8px; font-size: 10px; padding: 1px 6px; vertical-align: 1px; }
/* Stavki na telefon: bez „Kod" i „Ed." (ne odluchuvaat nishto) — ostanuvaat ime,
   kolichina, cena bez DDV, stapka i vkupno, pa tabelata vleguva bez lizganje. */
@media (max-width: 640px) {
  .sa-dpos-stavki th:nth-child(1), .sa-dpos-stavki td:nth-child(1),
  .sa-dpos-stavki th:nth-child(3), .sa-dpos-stavki td:nth-child(3),
  .sa-dpos-stavki th:nth-child(6), .sa-dpos-stavki td:nth-child(6) { display: none; }
  .sa-dpos-stavki th, .sa-dpos-stavki td { padding: 8px 5px; font-size: 12.5px; }
  .sa-dpos-stavki th { font-size: 10px; letter-spacing: 0; }
  .sa-dpos-stavki__ime { min-width: 0; }
}
.sa-dpos-kod { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--sa-code-bg); color: var(--sa-text); font-variant-numeric: tabular-nums; }

/* „Povrzi so pretplatata" vo detalot na DigitalPOS faktura. */
.sa-dpos-povrzi { padding: 12px 14px; border: 1px dashed var(--sa-line); border-radius: var(--sa-radius-sm); background: var(--sa-elevated); }
.sa-dpos-povrzi__naslov { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.sa-dpos-povrzi__red { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sa-dpos-povrzi__hint { font-size: 12.5px; color: var(--sa-muted); margin: -2px 0 10px; line-height: 1.45; }
.sa-dpos-stavka-izbor { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.sa-dpos-stavka-izbor__red {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--sa-line); border-radius: 8px;
  background: var(--sa-card); cursor: pointer; font-size: 13px; line-height: 1.35;
}
.sa-dpos-stavka-izbor__red:hover { border-color: var(--sa-brand); }
.sa-dpos-stavka-izbor__red.is-disabled { opacity: .62; cursor: not-allowed; background: var(--sa-elevated); }
.sa-dpos-stavka-izbor__red input { margin-top: 3px; flex: 0 0 auto; }
.sa-dpos-stavka-izbor__tekst { flex: 1 1 auto; min-width: 0; }
.sa-dpos-stavka-izbor__tekst .sa-badge { margin-left: 6px; vertical-align: middle; }
/* Meta red na listata: tekst levo, „Nova faktura" desno. */
.sa-dpos-meta--red { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sa-dpos-meta--red .sa-btn { text-decoration: none; }
/* Forma „Nova faktura vo DigitalPOS" — vo istiot modal, isti polinja kako drawer-ite. */
.sa-dpos-nova { display: flex; flex-direction: column; gap: 10px; }
/* Dve koloni i na telefon (Zoran, 08.09.2026): period od/do, shifra/edinica,
   kolichina/cena, DDV/valuta vo po eden red — „skoro cela faktura se gleda". */
.sa-dpos-nova__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sa-dpos-nova__cel { grid-column: 1 / -1; }
/* Lizgachka so paketi vo formata: chip = ime / period / cena, izbraniot poln. */
.sa-dpos-paketi-ram { margin: -2px 0 2px; }
.sa-dpos-paketi { display: flex; flex-wrap: nowrap; gap: 8px; padding: 6px 4px; }
.sa-dpos-paket { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 11px; line-height: 1.2; text-align: left; }
.sa-dpos-paket__ime { font-weight: 700; font-size: 12px; }
.sa-dpos-paket__per { font-size: 10.5px; opacity: .8; }
.sa-dpos-paket__cena { font-size: 12px; font-variant-numeric: tabular-nums; }
.sa-dpos-paket.is-active { background: var(--sa-brand); color: #fff; border-color: var(--sa-brand); }
.sa-dpos-nova__pregled { margin-top: 4px; }
.sa-dpos-nova__akcii { margin-top: 4px; }
.sa-dpos-nova .sa-field { margin: 0; }
.sa-dpos-nova .sa-field-hint { margin-top: 2px; }
.sa-dpos-povrzi__red input[type="date"] { height: 34px; padding: 0 10px; border: 1px solid var(--sa-line); border-radius: 8px; background: var(--sa-input-bg); color: var(--sa-text); }

/* ── Ш5 · Линк на кампањата ─────────────────────────────
   Кратко зелено трепкање по копирање: без него човекот не знае дали
   кликот фатил, па копира двапати и не верува ни вториот пат. */
.sa-field input.is-kopirano {
  border-color: var(--sa-ok, #17a673);
  box-shadow: 0 0 0 3px rgba(23, 166, 115, .18);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* Картичка на кампања: линкот и статистиките се тесни на телефон —
   без ова полето со линкот го расфрлува редот со копчињата. */
.sa-mod-card .sa-field input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* ── Ш8 · Инка по ден ───────────────────────────────────
   Столбовите се клика; точките над столбот велат дека тој ден има отворен
   профил или потврдено плаќање. Свесно НЕ е библиотека: тоа е еден ред броеви,
   а секој график-пакет е 60 kB и уште еден CDN во CSP. */
.sa-kmp-graf {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 132px;
  padding: 16px 20px 0;
  overflow-x: auto;
}
.sa-kmp-den {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 22px;
  height: 100%;
}
.sa-kmp-stolb {
  position: relative;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--sa-brand, #19535C);
  opacity: .75;
}
.sa-kmp-den:hover .sa-kmp-stolb { opacity: 1; }
.sa-kmp-tocka,
.sa-kmp-legenda {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--sa-card);
}
.sa-kmp-tocka { position: absolute; left: 50%; transform: translateX(-50%); }
.sa-kmp-tocka--roden  { top: -10px; background: #d97706; }
.sa-kmp-tocka--platen { top: -20px; background: var(--sa-ok, #059669); }
.sa-kmp-legenda {
  display: inline-block;
  vertical-align: -1px;
  position: static;
  transform: none;
  margin: 0 2px;
}
.sa-kmp-den-oznaka {
  font-size: 9px;
  line-height: 1;
  opacity: .6;
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: center;
  height: 14px;
}

/* ── Ш4/Ш5 · Редот дејства на картичка ──────────────────
   Сите копчиња еднакви квадрати, како во Систем → Домени. Два проблема се
   решаваат тука: (1) `sa-card-btn-del` е `flex:1 1 0` до 56 px, па со пет
   соседи излегува поширок од нив; (2) глиф со друга ширина (знаменце,
   графикон) изгледа поголем — затоа фиксна кутија на самата икона. */
#saTabContent[data-tab="sabloni"] .sa-card-actions,
#saTabContent[data-tab="kampanji"] .sa-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* 40 px, не 42: со шест копчиња и потесна картичка вториот ред се појавува на
   два пиксела разлика, а еден прекршен ред е погрозен од два пиксела. */
#saTabContent[data-tab="sabloni"] .sa-card-actions > *,
#saTabContent[data-tab="kampanji"] .sa-card-actions > * {
  flex: 0 0 40px;
  width: 40px;
  max-width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
#saTabContent[data-tab="sabloni"] .sa-card-actions i,
#saTabContent[data-tab="kampanji"] .sa-card-actions i {
  font-size: 14px;
  line-height: 1;
  width: 16px;
  text-align: center;
}

/* Редот со линкот на кампањата: полето зема сè што останува, копчињата се
   истите квадрати како долу. Без ова копчињата растат и во полето останува
   „http" — линк што не се чита не е линк. */
.sa-kmp-link {
  display: flex;
  gap: 6px;
  align-items: center;
  /* Точно колку што е редот копчиња долу (6 × 40 + 5 × 6). Полето беше преку
     цела картичка, па линкот и дејствата се разминуваа во две различни ширини. */
  max-width: 270px;
}
.sa-kmp-link input {
  flex: 1 1 auto;
  min-width: 0;
}
.sa-kmp-link .sa-card-btn-ikona {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
}
.sa-kmp-link .sa-card-btn-ikona i { font-size: 14px; width: 16px; text-align: center; }

/* Забрането бришење: копчето ОСТАНУВА, само угаснато. Скриено копче значи ред
   со едно место помалку — соседните картички се разминуваат, а окото го бара
   она што го нема. Угаснатото вели „постои, но не сега", а `title` кажува зошто. */
.sa-card-btn-del:disabled,
.sa-card-btn-ikona:disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: grayscale(1);
}
.sa-card-btn-del:disabled:hover,
.sa-card-btn-ikona:disabled:hover {
  transform: none;
  background: rgba(220, 38, 38, 0.12);
  border-color: var(--sa-line);
}

/* РЕГИОНИ / ПАЗАРИ ВО ШАБЛОНИ: Убави картички со раскошен падинг */
.sa-sabloni-pazari-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .sa-sabloni-pazari-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Кога еден пазар е отворен — другите се кријат за чист фокус без скролање */
.sa-sabloni-pazari-grid.has-expanded .sa-sablon-pazar-panel:not(.is-expanded) {
  display: none !important;
}

.sa-sablon-pazar-panel {
  margin-bottom: 0 !important;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: var(--sa-card);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  grid-column: auto;
}

.sa-sablon-pazar-panel:hover {
  border-color: var(--sa-brand, #19535c);
  box-shadow: 0 4px 14px rgba(25, 83, 92, 0.08);
}

/* Лентата на пазарот НИКОГАШ не е sticky — таа е внатрешно заглавје на картичката */
.sa-sablon-pazar-panel .sa-panel-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
  padding: 12px 16px !important;
  min-height: 48px !important;
  height: auto !important;
  background: var(--sa-card) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
  border-bottom: 0 !important;
}

.sa-sablon-pazar-panel .sa-panel-toolbar:hover {
  background: var(--sa-surface, #f8fafc) !important;
}

.sa-sablon-pazar-panel .sa-panel-toolbar-title {
  order: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  color: var(--sa-text);
}

.sa-sablon-pazar-panel .sa-panel-toolbar-title img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  flex-shrink: 0;
}

.sa-sablon-pazar-panel .sa-badge {
  order: 2 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

.sa-sablon-pazar-panel .sa-sklop-btn {
  order: 3 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: var(--sa-muted) !important;
  background: var(--sa-surface, #f8fafc) !important;
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease !important;
}

.sa-sablon-pazar-panel:hover .sa-sklop-btn {
  color: var(--sa-text) !important;
  background: var(--sa-hover, #f1f5f9) !important;
}

.sa-sablon-pazar-panel[data-otvoren="0"] .sa-sklop-btn {
  transform: rotate(-90deg) !important;
}

.sa-sablon-pazar-panel[data-otvoren="1"] .sa-sklop-btn,
.sa-sablon-pazar-panel.is-expanded .sa-sklop-btn {
  transform: rotate(0deg) !important;
  background: rgba(25, 83, 92, 0.12) !important;
  color: var(--sa-brand, #19535c) !important;
}

/* Кога пазарот е ОТВОРЕН / ФОКУСИРАН: 100% full-width, убава рамка */
.sa-sablon-pazar-panel[data-otvoren="1"],
.sa-sablon-pazar-panel.is-expanded {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  border-color: var(--sa-brand, #19535c) !important;
  box-shadow: 0 6px 24px rgba(25, 83, 92, 0.12) !important;
  border-radius: 14px !important;
}

.sa-sablon-pazar-panel[data-otvoren="1"] .sa-panel-toolbar,
.sa-sablon-pazar-panel.is-expanded .sa-panel-toolbar {
  background: var(--sa-surface, #f8fafc) !important;
  border-bottom: 1px solid var(--sa-line) !important;
  padding: 14px 20px !important;
  min-height: 52px !important;
  height: auto !important;
  border-radius: 13px 13px 0 0 !important;
}

.sa-sablon-pazar-panel[data-otvoren="1"] .sa-panel-toolbar-title,
.sa-sablon-pazar-panel.is-expanded .sa-panel-toolbar-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--sa-brand, #19535c) !important;
}

.sa-sablon-pazar-panel[data-otvoren="0"] .sa-dist-cards {
  display: none !important;
}

#saTabContent[data-tab="sabloni"] .sa-dist-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px;
}

@media (max-width: 600px) {
  #saTabContent[data-tab="sabloni"] .sa-dist-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .sa-sablon-pazar-panel[data-otvoren="1"] .sa-panel-toolbar,
  .sa-sablon-pazar-panel.is-expanded .sa-panel-toolbar {
    padding: 10px 12px !important;
  }
}

#saTabContent[data-tab="sabloni"] .sa-mod-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sa-card);
  border: 1px solid var(--sa-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#saTabContent[data-tab="sabloni"] .sa-mod-card-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sa-line);
}

/* Овозможи сигурна видливост за drawer popups */
.sa-drawer-root.is-open {
  display: flex !important;
  z-index: 10000 !important;
}

/* Дејството во лентата оди на ДЕСНИОТ раб. Залепено до насловот се чита како
   дел од него; десно е местото каде окото го бара копчето, и таму го гледа и
   во Клиенти покрај пребарувањето. */
.sa-panel-toolbar .sa-btn--desno { margin-left: auto; }

/* Стрелката за отвори/затвори оди на десниот раб — но САМО кога е последна во
   лентата. Кај „Маркет партнери" таа стои ПРВА, пред насловот; тамошниот
   `margin-left:auto` го фрлаше самиот наслов надесно. */
.sa-panel-toolbar .sa-sklop-btn:last-child { margin-left: auto; }

/* Помошник: контрола што сама се турка на десниот раб на лентата. */
.sa-panel-toolbar .sa-desno { margin-left: auto; }

/* ── Броење во навигацијата: „внимание / вкупно" ─────────
   Едно правило за цела лева лента. Бројот ПРЕД косата црта е она поради што
   влегуваш во тој таб; вкупниот стои до него за размер. Порано секој таб
   броеше по свое — кај Кампањи значката велеше 2 а насловот внатре 3, и
   човек не знаеше кој број е точниот. */
.sa-nav-count--para b {
  font-weight: 700;
  font-size: 11px;
}
/* Косата црта лепи — „2 / 3" со празнини се читаше како два одделни броја.
   Значката е ЕДЕН податок, па изгледа како еден. */
.sa-nav-count--para i {
  font-style: normal;
  opacity: .38;
  margin: 0;
  padding: 0 1px;
}
/* Без внимание — само вкупниот број, тивко. Значка што вика на празно е шум. */
.sa-nav-count--tivko {
  background: var(--sa-hover);
  color: var(--sa-text-soft, inherit);
  opacity: .75;
  font-weight: 600;
}
.sa-nav-link.is-active .sa-nav-count--tivko { opacity: 1; }
/* Значката не смее да го прекршува насловот во два реда — етикетата зема што
   и треба, бројот се стиска до неа. */
.sa-nav-link { white-space: nowrap; }
.sa-nav-count { flex: 0 0 auto; }
.sa-nav-count--para {
  padding-left: 7px;
  padding-right: 7px;
  letter-spacing: -.2px;
  /* `.sa-badge` е flex со gap — токму тој gap правеше „3   /   3". Значката е
     еден податок, не три парчиња. */
  gap: 0;
}

/* Подлогата е МИРНА (иста сива како кај тивките значки), пораката ја носат
   бројките: зелено = во ред, црвено = бара внимание. Порано целата значка
   беше окерна, па таб со една неплатена фактура викаше исто гласно како таб
   со педесет — а бојата на подлогата не кажува КОЛКУ. */
.sa-nav-count--para {
  background: var(--sa-hover);
  color: var(--sa-muted);
}
.sa-brojka--ok { color: var(--sa-ok); font-weight: 700; }
.sa-brojka--lose { color: var(--sa-danger); font-weight: 700; }

/* ── Цени на акцијата: двојка (пречкртана/продажна) по пакет ───────────────
   Редовите се широки како панелот затоа што четирите цени мора да се читаат
   во иста линија — картички едно до друго ги кршат на две колони и окото
   повеќе не гледа „оваа е пониска од онаа". */
.sa-sez-ceni { border: 1px solid var(--sa-line); border-top: 0;
  border-radius: 0 0 var(--sa-radius) var(--sa-radius); padding: 4px 16px 16px; }
.sa-sez-red { border: 1px solid var(--sa-line); border-radius: var(--sa-radius);
  padding: 12px 14px; margin-bottom: 10px; background: var(--sa-card); }
.sa-sez-red.is-los { border-color: var(--sa-danger); }
.sa-sez-red-glava { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sa-sez-red-glava code { font-size: 11px; opacity: .6; margin-left: 6px; }
.sa-sez-redovna { font-size: 12px; opacity: .7; }
.sa-sez-redovna s { opacity: .55; margin-right: 2px; }
.sa-sez-polinja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.sa-sez-polinja .sa-field { margin: 0; }
.sa-sez-polinja label { font-size: 11px; }
.sa-sez-kontrola { min-width: 104px; }
.sa-check-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.sa-check-inline input { width: auto; margin: 0; }
.sa-sez-vika { margin: 10px 0 0; font-size: 12px; color: var(--sa-danger);
  display: flex; gap: 6px; align-items: flex-start; }
.sa-sez-dno { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .sa-sez-polinja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-sez-kontrola { grid-column: 1 / -1; }
}
.sa-sez-red.is-vnimanie { border-color: var(--sa-warn); }
.sa-sez-vika--vnimanie { color: var(--sa-warn); }

/* ── Втор фактор ──────────────────────────────────────────────────────────
   Вклучувањето е еден чин со два дела — скенирај, потврди — па стојат едно до
   друго; на тесен екран се редат, бидејќи телефонот и онака е во раката. */
.sa-2fa-vkluci { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.sa-2fa-qr { text-align: center; }
.sa-2fa-qr > div { display: inline-block; padding: 12px; background: #fff; border-radius: var(--sa-radius);
  border: 1px solid var(--sa-line); line-height: 0; }
.sa-2fa-qr img, .sa-2fa-qr canvas { display: block; }
.sa-2fa-tajna { display: inline-block; margin-top: 4px; font-size: 13px; letter-spacing: .06em;
  background: var(--sa-code-bg); padding: 4px 8px; border-radius: 6px; }
.sa-2fa-forma { max-width: 320px; }
.sa-kod-vnes { letter-spacing: .32em; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.sa-2fa-dejstva { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.sa-2fa-iskluci { display: flex; gap: 8px; align-items: center; }
.sa-2fa-iskluci .sa-kod-vnes { width: 130px; height: var(--sa-ctl-h); margin: 0; letter-spacing: .2em; font-size: 15px; }
.sa-2fa-podnaslov { margin: 22px 0 4px; font-size: 14px; }
.sa-2fa-uredi { display: flex; flex-direction: column; gap: 8px; }
.sa-2fa-ured { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--sa-line); border-radius: var(--sa-radius); padding: 10px 12px; }
.sa-2fa-ured.is-ovoj { border-color: var(--sa-ok); }
.sa-2fa-ured .sa-field-hint { display: block; margin-top: 2px; }
/* Кодовите се препишуваат од екран на хартија — моноспејс и крупно, за да не
   се помеша препишаното. */
.sa-2fa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sa-2fa-grid code { font-size: 15px; letter-spacing: .08em; text-align: center; padding: 8px;
  background: var(--sa-code-bg); border-radius: 6px; }
.sa-login-nazad { margin-top: 12px; text-align: center; }
.sa-link-btn { background: none; border: 0; color: var(--sa-muted); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; padding: 4px; }
.sa-link-btn:hover { color: var(--sa-text); }
@media (max-width: 720px) {
  .sa-2fa-vkluci { grid-template-columns: 1fr; }
  .sa-2fa-forma { max-width: none; }
  .sa-2fa-ured { flex-wrap: wrap; }
}

/* Втор фактор во картичката на членот — одвоен дел под главната форма, за да
   се гледа дека е друго дејство од „зачувај член". */
.sa-drawer-2fa { border-top: 1px solid var(--sa-line); padding: 16px 20px 20px; }
.sa-drawer-2fa h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.sa-drawer-2fa h4 i { opacity: .6; }
.sa-drawer-2fa .sa-2fa-vkluci { gap: 18px; }
.sa-drawer-2fa .sa-2fa-qr > div { padding: 10px; }
/* Знакот во списокот: состојбата се чита без да се отвора картичка. */
.sa-2fa-znak { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.sa-2fa-znak.is-on { color: var(--sa-ok); }
.sa-2fa-znak.is-off { color: var(--sa-muted); }
.sa-2fa-znak.is-off i { opacity: .45; }

/* Екранот за присилно вклучување на втор фактор.
   Тајната е 32 знаци во групи по 4 — на тесен екран се прекршува со
   white-space: pre-line (не nowrap), за да нема хоризонтален скрол. */
.sa-login-card--2fa {
  max-width: min(460px, 100%);
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.sa-login-card--2fa .sa-2fa-qr {
  margin: 18px 0 6px;
  max-width: 100%;
  overflow: hidden;
}
.sa-login-card--2fa .sa-2fa-qr > div {
  max-width: 100%;
  box-sizing: border-box;
}
.sa-login-card--2fa .sa-2fa-tajna {
  display: block;
  margin: 8px auto 0;
  max-width: 100%;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.45;
  text-align: center;
  box-sizing: border-box;
}
.sa-login-card--2fa .sa-kod-vnes {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  letter-spacing: .2em;
}
.sa-login-card--2fa form { margin-top: 16px; }

@media (max-width: 480px) {
  .sa-login-card--2fa {
    padding: 28px 18px;
  }
  .sa-login-card--2fa .sa-kod-vnes {
    letter-spacing: .12em;
    font-size: 16px;
  }
  .sa-login-card--2fa .sa-2fa-tajna {
    font-size: 12px;
  }
}