/* 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: hidden;
  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 {
    top: 0;
    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 {
  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;
  }
}

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

.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;
  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;
  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 */
.sa-drawer > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  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;
  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 {
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .sa-drawer-root.is-open { display: flex; }

  .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 {
    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;
  box-shadow: none;
}

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

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

/* 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: 40px; }
.sa-lizgacka.ima-desno { --f-desno: 40px; }
.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,
html:not([data-theme="dark"]) .sa-lizgacka-ram .sa-market-chip {
  opacity: 1;
  box-shadow: none;
}
.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);
}

/* ── 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 .when { color: var(--sa-muted); font-size: 12px; white-space: nowrap; }

/* 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. */
.sa-drawer.sa-drawer--dist { width: min(860px, 100%); }
#drawerDistributer .sa-grid--dist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#drawerDistributer .sa-field[style*="grid-column"] { grid-column: 1 / -1 !important; }
@media (max-width: 900px) {
  #drawerDistributer .sa-grid--dist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #drawerDistributer .sa-grid--dist { grid-template-columns: minmax(0, 1fr); }
}
/* 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);
}

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

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

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