/* =============================================================================
   dv.css — DV ДИЗАЈН-СИСТЕМ (порано sadmin.css; преименуван 06.09.2026)
   -----------------------------------------------------------------------------
   ЕДНО место за изгледот на ЦЕЛИОТ систем: biz-панел (index2), sadmin, најава
   (index.php), кундпортал, demo/ceni, правни страници, Stripe-страници и
   mini-webbsida (само писмо + токени). Токени во :root; компонентите се dv-*;
   легаси-класите (btn-1-s, contact-box, .bb …) се мапирани на крајот.
   -----------------------------------------------------------------------------
   Историја: dizajn sistem za platformskite tabovi (M54)
   -----------------------------------------------------------------------------
   Zoshto postoi: tabovite dodadeni vo M44–M51 (Distributeri, Domeni, Pazari,
   Pregled) bea pishani so inline stilovi, pa vo ista stranica imashe DVA
   vizuelni jazika — postoeckite kartichki na biznisite i moite redovi.
   Ovde e edniot jazik. Model: DigitalMeni admin/css/sadmin.css, boi na
   Digital Vario.

   PRAVILO: nov element vo ovie tabovi = klasa OVDE, nikogash inline `style=`.
   ============================================================================= */

:root {
  --dv-akcent:      #b5416b;
  --dv-akcent-tem:  #93355a;
  --dv-akcent-bled: rgba(181, 65, 107, .10);
  /* M92 (Zoran): primarnite/Spara kopchinja vo bojata na DV-logoto — pomeko/
     posvetlo sino od akcentot (#b5416b be pretemno). Semplirano od logo.png:
     dominantna #118ec6. Text-akcentite (linkovi/chipovi) OSTANUVAAT --dv-akcent
     (podobar kontrast za sitni bukvi); samo SOLID kopchinjata odat na ova. */
  --dv-kopche:      #b5416b; /* 06.09.2026 (Зоран): една МАЛИНА насекаде (= акцентот на лендингот), потемна на hover */
  --dv-kopche-tem:  #93355a;
  --dv-povrshina:   #f4f6f9;
  --dv-karta:       #ffffff;
  --dv-linija:      #e5e9ee;
  --dv-tekst:       #24313d;
  --dv-muted:       #7a8794;
  --dv-ok:          #2b8a3e;
  --dv-ok-bg:       #e8f7ec;
  --dv-warn:        #8a5a00;   /* M204: #a87f00 davashe 3.47:1 na --dv-warn-bg (pod 4.5) → 5.58:1 */
  --dv-warn-bg:     #fff8e1;
  --dv-danger:      #c0392b;
  --dv-danger-bg:   #fdeaea;

  --dv-radius:      12px;
  --dv-radius-sm:   8px;
  /* EDNA visina za site kontroli — kopcinja, polinja, chipovi, selekti.
     Ova e ona shto okoto go chita kako „uredno". */
  --dv-ctl-h:       40px;
  --dv-ctl-h-sm:    34px;   /* ikoni-kopchinja vo redovi, pejdzher */
  --dv-tiho:        #f1f3f6; /* neutralna podloga (ikoni, chipovi) */
  --dv-tiho-tem:    #e5e9ee;
  --dv-akcent-mek:  #f9e9f0; /* meka sina podloga (aktiven chip, glavna ikona) */
  --dv-akcent-mek-tem: #f2d8e3;
  --dv-akcent-ram:  #e3bccd;
  --dv-info:        #1864ab;
  --dv-info-bg:     #dbeefd;
  --dv-senka:       0 1px 2px rgba(181, 65, 107, .05), 0 8px 24px rgba(181, 65, 107, .07);
  --dv-senka-hover: 0 2px 6px rgba(181, 65, 107, .08), 0 14px 32px rgba(181, 65, 107, .12);
  --dv-ease:        cubic-bezier(.22, 1, .36, 1);
}

/* ── Zaglavje na tab ──────────────────────────────────────────────────── */
.dv-glava {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 20px 20px 14px;
}
.dv-glava__tekst { min-width: 0; }
.dv-glava h4 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--dv-tekst); }
.dv-glava h4 span { font-size: 16px; font-weight: 400; opacity: .55; }
.dv-glava__opis { margin: 5px 0 0; font-size: 13px; color: var(--dv-muted); line-height: 1.5; max-width: 62ch; }
.dv-glava__akcii { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Kopcinja ─────────────────────────────────────────────────────────── */
.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--dv-ctl-h); box-sizing: border-box; padding: 0 16px;
  border: 0; border-radius: var(--dv-radius-sm);
  background: var(--dv-kopche); color: #fff;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .2s var(--dv-ease), transform .15s var(--dv-ease);
}
.dv-btn:hover { background: var(--dv-kopche-tem); box-shadow: var(--dv-senka); }
.dv-btn:active { transform: translateY(1px); }
.dv-btn--ghost { background: var(--dv-karta); color: #33475b; border: 1px solid var(--dv-linija); }
.dv-btn--ghost:hover { background: #f7f9fc; color: var(--dv-akcent); }
.dv-btn--sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
/* Ikona-kopche: kvadrat, ista visina kako ostanatite kontroli. */
.dv-btn--ikona { width: var(--dv-ctl-h); padding: 0; }
.dv-btn--sm.dv-btn--ikona { width: 32px; }
.dv-btn--danger:hover { background: var(--dv-danger-bg); border-color: var(--dv-danger); color: var(--dv-danger); }

/* ── Bejdzovi ─────────────────────────────────────────────────────────── */
.dv-bejdz {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--dv-akcent-bled); color: #33475b;
  font-size: 11.5px; font-weight: 700; line-height: 1.7; white-space: nowrap;
}
.dv-bejdz--ok     { background: var(--dv-ok-bg);     color: var(--dv-ok); }
.dv-bejdz--warn   { background: var(--dv-warn-bg);   color: var(--dv-warn); }
.dv-bejdz--danger { background: var(--dv-danger-bg); color: var(--dv-danger); }
.dv-bejdz--tivok  { background: #eef1f4; color: #5b6b7b; font-weight: 600; }

/* ── Red (listen element) ─────────────────────────────────────────────── */
.dv-red {
  display: flex; align-items: center; gap: 14px;
  background: var(--dv-karta); border: 1px solid var(--dv-linija);
  border-radius: var(--dv-radius); padding: 12px 14px; margin-bottom: 9px;
  transition: box-shadow .2s var(--dv-ease), border-color .2s;
}
.dv-red:hover { box-shadow: var(--dv-senka); border-color: rgba(181, 65, 107, .22); }
.dv-red--tivok { opacity: .55; }
/* Znak/avatar — FIKSEN kvadrat, ne se stiska i ne se preklopuva so tekstot. */
.dv-red__znak {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dv-akcent-bled); font-size: 22px; line-height: 1;
  overflow: hidden;
}
.dv-red__znak img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; background: #fff; }
.dv-red__telo { flex: 1 1 auto; min-width: 0; }
.dv-red__ime { font-weight: 600; font-size: 14.5px; color: var(--dv-tekst); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dv-red__meta { margin-top: 3px; font-size: 12.5px; color: var(--dv-muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dv-red__meta a { color: var(--dv-akcent); text-decoration: none; }
.dv-red__meta a:hover { text-decoration: underline; }
.dv-red__akcii { flex: 0 0 auto; display: flex; gap: 6px; }
/* Tochka za boja — vidliva, so bel prsten za da se odvoi od podlogata. */
.dv-tocka { display: inline-block; width: 11px; height: 11px; border-radius: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dv-linija); }

/* ── KPI / mrezha ─────────────────────────────────────────────────────── */
.dv-mrezha { display: grid; gap: 11px; }
.dv-mrezha--kpi { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.dv-karta {
  background: var(--dv-karta); border: 1px solid var(--dv-linija);
  border-radius: var(--dv-radius); padding: 14px 16px; box-shadow: var(--dv-senka);
}
.dv-karta__naslov { font-size: 12.5px; color: var(--dv-muted); margin: 0 0 4px; }
.dv-karta__broj { font-size: 22px; font-weight: 700; color: var(--dv-tekst); line-height: 1.2; }
.dv-karta__broj small { font-size: 12px; font-weight: 400; color: var(--dv-muted); }

/* ── Matrica (addoni: red = dodatok, kolona = pazar) ──────────────────── */
.dv-matrica { width: 100%; border-collapse: collapse; font-size: 14px; }
.dv-matrica th {
  text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 700;
  color: var(--dv-muted); text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid var(--dv-linija); white-space: nowrap;
}
.dv-matrica__pz { text-align: center; }
.dv-matrica td { padding: 10px 14px; border-bottom: 1px solid #f2f5f8; vertical-align: middle; }
.dv-matrica tr:last-child td { border-bottom: 0; }
.dv-matrica tr:hover td { background: #fbfcfe; }
.dv-matrica__ime { min-width: 190px; }
.dv-matrica__label { display: block; font-weight: 600; color: var(--dv-tekst); }
.dv-matrica__kluc { display: block; margin-top: 2px; font-size: 11px; color: var(--dv-muted); text-transform: uppercase; letter-spacing: .5px; }
.dv-matrica__kl { text-align: center; white-space: nowrap; }
.dv-matrica__kl input {
  width: 92px; height: 34px; box-sizing: border-box; text-align: right;
  padding: 0 9px; border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  font-size: 14px; font-family: inherit; color: var(--dv-tekst); background: #fff;
}
.dv-matrica__kl input:focus { outline: 0; border-color: var(--dv-akcent); box-shadow: 0 0 0 3px var(--dv-akcent-bled); }
.dv-matrica__kl .dv-btn { margin-left: 5px; vertical-align: middle; }
.dv-matrica__nema { color: var(--dv-muted); opacity: .5; }

@media (max-width: 768px) {
  /* Matricata se pretvora vo kartichki: sekoja kelija so imeto na pazarot. */
  .dv-matrica, .dv-matrica tbody, .dv-matrica tr, .dv-matrica td { display: block; width: 100%; }
  .dv-matrica thead { display: none; }
  .dv-matrica tr { border: 1px solid var(--dv-linija); border-radius: var(--dv-radius); margin-bottom: 10px; padding: 4px 0; }
  .dv-matrica td { border-bottom: 1px solid #f2f5f8; text-align: left; }
  .dv-matrica tr td:last-child { border-bottom: 0; }
  .dv-matrica__kl::before {
    content: attr(data-pz); display: inline-block; min-width: 42px;
    font-size: 11px; font-weight: 700; color: var(--dv-muted); letter-spacing: .4px;
  }
  .dv-matrica__kl input { width: calc(100% - 100px); max-width: 160px; height: 44px; }
  .dv-matrica__kl .dv-btn--sm { height: 44px; width: 44px; }
}

/* ── Prazna sostojba ──────────────────────────────────────────────────── */
.dv-prazno { text-align: center; padding: 34px 20px; color: var(--dv-muted); font-size: 14px; }
.dv-prazno i { display: block; font-size: 30px; opacity: .3; margin-bottom: 10px; }

/* ── Polinja vo formi ─────────────────────────────────────────────────── */
.dv-pole { display: block; margin-bottom: 12px; }
.dv-pole > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--dv-tekst); margin-bottom: 5px; }
.dv-pole input[type=text], .dv-pole input[type=number], .dv-pole input[type=email],
.dv-pole input[type=password], .dv-pole input[type=date], .dv-pole select, .dv-pole textarea {
  width: 100%; box-sizing: border-box; height: var(--dv-ctl-h);
  padding: 0 12px; border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  background: #fff; color: var(--dv-tekst); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.dv-pole textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.dv-pole input:focus, .dv-pole select:focus, .dv-pole textarea:focus {
  outline: 0; border-color: var(--dv-akcent); box-shadow: 0 0 0 3px var(--dv-akcent-bled);
}
.dv-pole__hint { margin: 5px 0 0; font-size: 12px; color: var(--dv-muted); line-height: 1.5; }
.dv-pole__hint code { background: #f1f5f9; padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.dv-pole--greska input, .dv-pole--greska select { border-color: var(--dv-danger); }
.dv-greska { color: var(--dv-danger); font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.dv-red-polinja { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11px; }

/* Chip-checkbox (jazici, pazari) — ista visina kako ostanatoto. */
.dv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--dv-ctl-h); box-sizing: border-box; padding: 0 13px;
  border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #444;
  transition: border-color .15s, background .15s;
}
.dv-chip:hover { border-color: var(--dv-akcent); }
.dv-chip input { margin: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--dv-akcent); }
.dv-chip--aktiven { border-color: var(--dv-akcent); background: var(--dv-akcent-bled); }
.dv-chipovi { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── MOBILNA ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dv-glava { padding: 16px 14px 12px; }
  .dv-glava h4 { font-size: 21px; }
  .dv-glava__akcii { width: 100%; }
  .dv-glava__akcii .dv-btn { flex: 1 1 auto; }

  /* Redot se vitka: znak+telo gore, akciite dolu preku cela shirina. */
  .dv-red { flex-wrap: wrap; padding: 12px; }
  .dv-red__telo { flex: 1 1 calc(100% - 56px); }
  .dv-red__akcii { width: 100%; justify-content: flex-end; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--dv-linija); }
  /* Prst — 44px minimum. */
  .dv-red__akcii .dv-btn--sm { height: 44px; min-width: 44px; }
  .dv-red__akcii .dv-btn--sm.dv-btn--ikona { width: 44px; }

  .dv-red-polinja { grid-template-columns: 1fr; }
  .dv-mrezha--kpi { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .dv-btn { height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LIZGACKI LENTI (M55) — prenos od DigitalMeni `.sa-lizgacka`.
   -----------------------------------------------------------------------
   Problemot shto go reshava: lenta so 10 taba na telefon se skrola, no
   NISHTO ne kazuva deka ima ushte. Korisnikot ne znae da povleche.

   Terkot e vo tri dela:
     1. `.dv-lizgacka`  — samiot skroler; rabovite BLEDEAT preku CSS maska
        chija shirina doagja od --f-levo / --f-desno
     2. `.dv-lizgacka-ram` — STATICKI roditel shto gi nosi vinjetite. Mora
        da e nadvor od skrolerot: maska vrz sopstvenite deca bi gi izbledela
        i vinjetite, pa ne bi se videlo deka ima ushte
     3. JS (`dvLizgacki`) gi pali klasite `se-lizga` / `ima-levo` / `ima-desno`
        spored VISTINSKATA pozicija — nema fejd kade nema sodrzhina
   ═══════════════════════════════════════════════════════════════════════ */

.dv-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%);
}
.dv-lizgacka::-webkit-scrollbar { display: none; }
.dv-lizgacka.se-lizga { flex-wrap: nowrap; scroll-snap-type: x proximity; }
.dv-lizgacka.ima-levo  { --f-levo: 38px; }
.dv-lizgacka.ima-desno { --f-desno: 38px; }

.dv-lizgacka-ram { position: relative; min-width: 0; max-width: 100%; }
.dv-lizgacka-ram::before, .dv-lizgacka-ram::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  z-index: 2; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.dv-lizgacka-ram::before {
  left: 0;
  background: linear-gradient(to right, rgba(181,65,107,.10), rgba(181,65,107,.03) 46%, rgba(181,65,107,0));
  box-shadow: inset 7px 0 10px -8px rgba(12,26,33,.24);
}
.dv-lizgacka-ram::after {
  right: 0;
  background: linear-gradient(to left, rgba(181,65,107,.10), rgba(181,65,107,.03) 46%, rgba(181,65,107,0));
  box-shadow: inset -7px 0 10px -8px rgba(12,26,33,.24);
}
.dv-lizgacka-ram:has(> .dv-lizgacka.ima-levo)::before  { opacity: 1; }
.dv-lizgacka-ram:has(> .dv-lizgacka.ima-desno)::after { opacity: 1; }

/* ── Dolna navigacija (mobilna) ───────────────────────────────────────── */
.dv-dolna {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 13;
  align-items: stretch;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--dv-linija);
}
.dv-dolna__lenta { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 2px; padding: 0 8px; }
.dv-dolna:not(.se-lizga) .dv-dolna__lenta { justify-content: center; }
.dv-dolna.se-lizga .dv-dolna__lenta { scroll-snap-type: x proximity; }
.dv-dolna.se-lizga .dv-dolna__stavka { scroll-snap-align: center; }
.dv-dolna__lenta.ima-levo  { --f-levo: 70px; }
.dv-dolna__lenta.ima-desno { --f-desno: 70px; }
.dv-dolna::before, .dv-dolna::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 70px;
  z-index: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.dv-dolna::before {
  left: 0;
  background: linear-gradient(to right, rgba(181,65,107,.13), rgba(181,65,107,.05) 46%, rgba(181,65,107,0));
  box-shadow: inset 9px 0 12px -9px rgba(12,26,33,.34);
}
.dv-dolna::after {
  right: 0;
  background: linear-gradient(to left, rgba(181,65,107,.13), rgba(181,65,107,.05) 46%, rgba(181,65,107,0));
  box-shadow: inset -9px 0 12px -9px rgba(12,26,33,.34);
}
.dv-dolna.ima-levo::before, .dv-dolna.ima-desno::after { opacity: 1; }

/* Aktivnata JA BOI CELATA plocka, ne samo ikonata — taka se poznava od agol. */
.dv-dolna__stavka {
  flex: 0 0 auto; width: 72px; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 2px; border-radius: 10px;
  color: var(--dv-muted); font-size: 10px; font-weight: 600;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, transform .18s var(--dv-ease);
}
.dv-dolna__stavka i { font-size: 17px; line-height: 1; }
.dv-dolna__stavka span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dv-dolna__stavka:active { transform: scale(.92); }
.dv-dolna__stavka.is-active { color: var(--dv-akcent); background: var(--dv-akcent-bled); }

@media (max-width: 860px) { .dv-dolna { display: flex; } }


/* ═══════════════════════════════════════════════════════════════════════
   PANEL (formi) — strana na desktop, BOTTOM SHEET na telefon (M56)
   -----------------------------------------------------------------------
   Porano geometrijata ja postavuvashe JS preku inline stilovi (sb.style.width
   = '440px'...). Toa e dvojno losho: inline pobeduva nad CSS pa media query
   ne moze da ja smeni na mobilna, i istite 9 linii se povtoruvaa vo sekoj
   sidebar. Sega JS samo pali klasa; geometrijata e TUKA.

   Na telefon panelot doagja ODOZDOLA — palecot e dolu, a ne gore-desno.
   ═══════════════════════════════════════════════════════════════════════ */

.dv-panel {
  display: none;
  position: fixed; z-index: 20;
  flex-direction: column;
  background: var(--dv-karta);
}
.dv-panel--otvoren { display: flex; }

/* Desktop: strana desno, cela visina. */
@media (min-width: 769px) {
  .dv-panel--otvoren {
    top: 0; right: 0; bottom: 0;
    width: 440px; max-width: 92vw;
    box-shadow: -2px 0 16px rgba(181, 65, 107, .12);
    border-left: 1px solid var(--dv-linija);
  }
}

/* Telefon: bottom sheet — se izvlekuva odozdola, so rachka za vlecenje. */
@media (max-width: 768px) {
  .dv-panel--otvoren {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%;
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 28px rgba(12, 26, 33, .22);
    animation: dvPanelGore .22s var(--dv-ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @keyframes dvPanelGore { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
  /* Rachka — vizuelen znak deka listot doagja odozdola. */
  .dv-panel--otvoren::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 3px; background: var(--dv-linija);
  }
  .dv-panel--otvoren .sidebar__header { padding-top: 18px; }
  /* Dolnata lenta so kopcheto Zacuvaj ne smee da se skrie zad sistemskata lenta. */
  .dv-panel--otvoren .sidebar-bottom { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .dv-panel--otvoren .sidebar-bottom .btn-1-s,
  .dv-panel--otvoren .sidebar-bottom .dv-btn { height: 48px; }
}

/* =============================================================================
   M104 — POPAP FORMI: 2 KOLONI NA DESKTOP, 1 NA MOBILEN
   -----------------------------------------------------------------------------
   Zoran: „horizontalno nasekade, vertikalno SAMO na mobilen — ne kako kolbas".
   Edno globalno pravilo namesto rachno pakuvanje polе-po-pole (koe pravеshe
   propusti). Invertirana logika za bezbednost:
     - Sekoja popap-forma (.sidebar-content vo section-sidebar/dv-panel/
       calendar-side) e 2-kolonski grid na desktop (>=769px).
     - SÉ e full-width po default (naslovi, hintovi, toggles, sliki, radio,
       bundle-ovi) — pa nishto ne se squeeze-uva slucajno.
     - Samo obicni .contact-box (input/select) se polovina → 2 po red.
     - Textarea polinja pak full-width (im treba shirina).
     - Postoeckite rachni .d-grid/.col-1-2 wrapperi se `display:contents` za
       nivnite polinja da deljat na roditelskiot grid (bez grid-vo-grid).
   Na <769px celiot blok ne vazi → prirodno 1 kolona (block flow) = mobilen.
   ============================================================================= */
@media (min-width: 769px) {
  .section-sidebar .sidebar-content,
  .dv-panel .sidebar-content,
  .calendar-side .sidebar-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    align-items: start;
  }
  /* Default: sé full-width. */
  .section-sidebar .sidebar-content > *,
  .dv-panel .sidebar-content > *,
  .calendar-side .sidebar-content > * { grid-column: 1 / -1; }
  /* Obicni polinja -> polovina (2 po red). */
  .section-sidebar .sidebar-content > .contact-box,
  .dv-panel .sidebar-content > .contact-box,
  .calendar-side .sidebar-content > .contact-box { grid-column: auto; }
  /* Rachni wrapperi -> deljat na roditelskiot grid (nivnite deca stanuvaat celii). */
  .section-sidebar .sidebar-content > .d-grid,
  .dv-panel .sidebar-content > .d-grid,
  .calendar-side .sidebar-content > .d-grid,
  .section-sidebar .sidebar-content > .col-1-2,
  .dv-panel .sidebar-content > .col-1-2,
  .calendar-side .sidebar-content > .col-1-2 { display: contents; }
  /* Textarea polinja -> pak full-width. */
  .section-sidebar .sidebar-content > .contact-box:has(textarea),
  .dv-panel .sidebar-content > .contact-box:has(textarea),
  .calendar-side .sidebar-content > .contact-box:has(textarea) { grid-column: 1 / -1; }
}

/* =============================================================================
   M57 — STRANICNA NAVIGACIJA NA DESKTOP
   -----------------------------------------------------------------------------
   Zoshto: 10 taba vo vodorodna lenta veke se natiskaa (zatoa i mu treshe
   lizgacka vo M55). Lizgackata e KRPA za problem so prostor — na desktop
   vertikalata go nema toj problem voopshto: 10 stavki slobodno stanuvaat
   edna pod druga, ima mesto za ikoni, brojachi i GRUPNI etiketi shto davaat
   hierarhija („Мени" = sekojdnevno, „Платформа" = samo superadmin).
   Model: digitalmeni `.sa-sidebar`.

   ISTIOT DOM za dvete formi — pod 1024px ostanuva vodorodnata lenta so
   lizgacka, nad 1024px istite kopchinja se redat vertikalno. Ne se duplira
   markup zatoa shto brojachite se po `id` (dva elementa so ist id = JS
   osvezhuva samo eden).

   SPECIFICNOST — VAZNO: `.sadmin-tab` pravilata sedat vo `<style>` blok
   VNATRE vo fragmentot, a fragmentot se vbrizguva preku innerHTML POSLE
   ovoj fajl. Pri ednakva specificnost pobeduva podocnezhniot, pa site
   pravila ovde odat so `.dv-sadmin` prefiks (0,2,0 nad 0,1,0).
   ============================================================================= */

:root { --dv-strana-w: 232px; }

/* Grupnite etiketi i ikonite postojat vo DOM-ot sekogash, no se gledaat samo
   vo stranicen rezhim — vo vodorodna lenta bi ja natovarile shirinata. */
.dv-strana__grupa { display: none; }
.dv-sadmin .sadmin-tab > i { display: none; }

@media (min-width: 1024px) {

    /* `stretch` (ne `flex-start`): teloto go NOSI delitelot, pa mora da se
       protega do visinata na kontejnerot. Kaj kratok tab (Пазари so 4 reda)
       stranata e povisoka od sodrzhinata — so `flex-start` linijata bi
       zavrshila na sredina i bi izgledala kako greshka. */
    .dv-sadmin { display: flex; align-items: stretch; }

    /* min-width:0 e ZADOLZITELEN — flex stavka po default ima min-width:auto
       i NE se stiska, pa shiroka tabela vnatre bi ja razlejala celata strana
       (istata zamka me kostashe krugovi vo M55 so dolnata navigacija). */
    .dv-sadmin__telo {
        flex: 1 1 auto;
        min-width: 0;
        border-left: 1px solid var(--dv-linija);
    }

    /* Lentata stanuva kolona. `align-self: flex-start` + sticky ja drzhi
       vidliva pri skrol; liniskiot delitel go nosi teloto (gore), za da se
       protega niz CELATA visina na sodrzhinata, ne samo do posledniot tab. */
    .dv-sadmin .sadmin-tabs-row {
        flex: 0 0 var(--dv-strana-w);
        width: var(--dv-strana-w);
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        max-height: none;
        overflow-y: auto;
        padding: 16px 12px 12px;
        border-bottom: none;
        background: var(--dv-karta);
        gap: 0;
    }

    .dv-sadmin .sadmin-tabs {
        flex-direction: column;
        overflow: visible;          /* nema shto da se skrola vertikalno */
        gap: 2px;
        flex-wrap: nowrap;
    }

    /* Lizgackata nema smisla vo kolona — gasi ja maskata i vinjetite, inache
       gornata/dolnata ivica bi bledeela bez prichina. */
    .dv-sadmin .dv-lizgacka { -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; }
    .dv-sadmin .dv-lizgacka-ram::before,
    .dv-sadmin .dv-lizgacka-ram::after { display: none; }

    .dv-sadmin .dv-strana__grupa {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--dv-muted);
        padding: 14px 12px 6px;
    }
    /* Prvata etiketa nema shto da odvojuva odozgora — no ne ja lepi ni za
       rabot; ostava malku vozduh za da ne izgleda isechena. */
    .dv-sadmin .dv-strana__grupa:first-child { padding-top: 6px; }

    .dv-sadmin .sadmin-tab {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        min-height: var(--dv-ctl-h);
        padding: 9px 12px;
        border: none;
        border-radius: 10px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--dv-muted);
        text-align: left;
        transition: background .18s var(--dv-ease), color .18s var(--dv-ease);
    }

    .dv-sadmin .sadmin-tab > i {
        display: inline-block;
        width: 18px;
        flex: 0 0 18px;
        text-align: center;
        font-size: 14px;
        opacity: .85;
    }

    /* Imeto zima prostor i se skratuva so „…" namesto da ja rashiri kolonata
       (dolgi prevodi: „Дистрибутери", „Prenumerationer"). */
    .dv-sadmin .sadmin-tab__ime {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Brojachot e bejdz desno. Ostanuva `span[id]` — JS-ot ne se menuva. */
    .dv-sadmin .sadmin-tab > span[id^="vkupnoBroj"] {
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        color: var(--dv-muted);
        opacity: .8;
    }

    .dv-sadmin .sadmin-tab:hover {
        background: var(--dv-povrshina);
        color: var(--dv-tekst);
    }

    .dv-sadmin .sadmin-tab.active {
        background: var(--dv-akcent-bled);
        color: var(--dv-akcent);
        font-weight: 600;
        border-bottom-color: transparent;   /* gasi ja podvlekata od lentata */
    }
    .dv-sadmin .sadmin-tab.active > i,
    .dv-sadmin .sadmin-tab.active > span[id^="vkupnoBroj"] {
        color: var(--dv-akcent);
        opacity: 1;
    }

}

/* Ramot na lizgackata raste da ja zeme slobodnata shirina (porano inline
   `style="flex:1 1 auto"` — pravilo: nema inline stilovi vo sadmin). */
.dv-lizgacka-ram--raste { flex: 1 1 auto; }

/* =============================================================================
   M58 — ALATNA LENTA + FILTER CHIPOVI (glava na „Бизниси")
   -----------------------------------------------------------------------------
   Model: digitalmeni → Клиенти. Tamu glavata e tri sloja shto se chitaat odgore
   nadolu: KOJ ekran e ovoj (naslov+opis) → SHTO moze da napravam (akcija+baranje)
   → KOJ POGLED go gledam (chipovi). Kaj nas trite bea izmesheni vo eden red so
   raznovisoki kontroli, pa okoto nemashe kade da zapre.
   ============================================================================= */

.dv-alatki {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px 12px;
}

/* Baranjeto zima seto slobodno mesto — kako kaj meni, kade poleto e shiroko
   i ochigledno, a ne stisnato vo agol. */
.dv-baraj { position: relative; flex: 1 1 auto; min-width: 0; }
.dv-baraj > i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--dv-muted); pointer-events: none;
}
.dv-baraj > input {
  width: 100%; box-sizing: border-box; height: var(--dv-ctl-h);
  padding: 0 12px 0 34px;                       /* mesto za ikonata */
  border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  background: #fff; color: var(--dv-tekst); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.dv-baraj > input:focus {
  outline: 0; border-color: var(--dv-akcent); box-shadow: 0 0 0 3px var(--dv-akcent-bled);
}

/* Gola kontrola (bez `.dv-pole` obvivka so etiketa) — ista visina kako sè ostanato. */
.dv-selekt {
  flex: 0 0 auto; box-sizing: border-box; height: var(--dv-ctl-h);
  padding: 0 32px 0 12px;
  border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  background: #fff; color: var(--dv-tekst); font-size: 14px; font-family: inherit;
  cursor: pointer;
  /* Sopstvena strelka — nativnata se razlikuva po platforma i kvari poramnuvanje. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8794' d='M2 4.5 6 8.5l4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.dv-selekt:focus { outline: 0; border-color: var(--dv-akcent); box-shadow: 0 0 0 3px var(--dv-akcent-bled); }

/* ── Filter chipovi ──────────────────────────────────────────────────────── */
.dv-filtri {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 0 20px 16px;
}
.dv-filtri__grupa { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dv-filtri__etiketa {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dv-muted);
}
/* Chipovite ne se prelevaat vo nov red — se lizgaat, kako kaj meni. Bez ova
   pri mnogu paketi lentata bi rasla vo visina i bi ja turkala listata nadolu. */
.dv-filtri .dv-chipovi { flex-wrap: nowrap; }
.dv-filtri .dv-chip { flex-shrink: 0; }

/* Brojot vo chipot — pilula vo chipot, kako „Сите 176" kaj meni. */
.dv-chip > em {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px;
  background: var(--dv-povrshina); color: var(--dv-muted);
}
.dv-chip--aktiven > em { background: var(--dv-akcent); color: #fff; }

@media (max-width: 767px) {
  /* Na tesen ekran akcijata i baranjeto odat edno pod drugo — 40px kontrola
     stisnata na 120px e neupotrebliva. */
  .dv-alatki { flex-wrap: wrap; padding: 0 15px 10px; }
  .dv-baraj { flex: 1 1 100%; }
  .dv-selekt { flex: 1 1 100%; }
  .dv-filtri { gap: 12px; padding: 0 15px 14px; }
  .dv-filtri__grupa { flex: 1 1 100%; }
}

/* ── M58 popravki najdeni so slika ───────────────────────────────────────── */

/* 1) Skrieniot datumski filter se pojavuvashe na mobilna. Ne e od M58 —
   main.css ima `@media(max-width:992px){.view-wrap .employees-head .emp-filter
   {display:flex}}` (specificnost 0,3,0) shto pobeduva nad `.d-none` (0,1,0),
   pa gostinski „Weekly" dropdown visel vo sadmin na sekoj telefon. `.d-none`
   znaci skrieno — ovde toa se vrakja. */
.view-wrap .employees-head .emp-filter.d-none { display: none !important; }

/* 2) Ramot na chipovite ne se stiskashe, pa lentata izleguvashe nadvor od
   ekranot i pravese vodoroden skrol na CELATA strana. Flex stavka po default
   ima min-width:auto — istata zamka kako kaj `.dv-sadmin__telo`. */
.dv-filtri__grupa > .dv-lizgacka-ram { flex: 1 1 auto; min-width: 0; }

/* 3) main.css pod 992px gi stilizira SITE kontroli vo `.view-head` naveднaш:
      `.view-wrap .view-head button{width:100%}` i `.view-wrap .view-head h4
      {width:80%;display:flex}` — specificnost 0,2,1, shto pobeduva nad
      `.dv-chip` (0,1,0). Rezultat: sekoj chip se rasteguvashe na cela shirina
      i lentata izleguvashe nadvor od ekranot, a brojot vo naslovot se lepeshe
      za imeto (flex go goltashe razmakot). Ovde specificnosta e 0,3,0.
      Kopcheto „Нов бизнис" NAMERNO ostanuva 100% na mobilna — taka e podobro. */
.dv-filtri .dv-chipovi .dv-chip { width: auto; display: inline-flex; }
.dv-sadmin .dv-glava__tekst h4 { width: auto; display: block; }

/* =============================================================================
   M59 — „Дома" tabla
   -----------------------------------------------------------------------------
   Zoshto postoi: pregledot do sega bese panel NAD listata na biznisi i gi redeshe
   SITE istekuvanja kako polna lista — okolu 90% od prviot ekran otideshe na nego,
   pa prviot biznis se gledashe duri po skrol. Sega e svoj ekran so brojki, a
   istekuvanjata se edna KLIKLIVA kartichka kon filtriranata lista.
   ============================================================================= */

.dv-tabla { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.dv-karta--sirok { width: 100%; box-sizing: border-box; }


/* Bara vnimanie samo koga brojkata e > 0 — inache „0 istekuvaat" bi svetela
   crveno bez prichina. */
.dv-karta--vnimanie { border-color: rgba(192, 57, 43, .3); background: #fffbfa; }
.dv-karta--vnimanie .dv-karta__broj { color: var(--dv-danger); }

.dv-lista-red {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 13px; border-bottom: 1px solid #f2f5f8;
}
.dv-lista-red:last-child { border-bottom: 0; }
.dv-lista-red__ime { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 4) Preostanato 3px prelevanje na mobilna: `.dv-filtri` e flex stavka vo
      `.employees-head` (main.css ja pravi flex-wrap pod 992px). Bez shirina i
      `min-width:0` stavkata se merи po max-content — a chipovite se `nowrap`,
      pa max-content e po-shiroko od ekranot. */
@media (max-width: 992px) {
  .dv-filtri, .dv-alatki { width: 100%; min-width: 0; box-sizing: border-box; }
}

/* =============================================================================
   M60 — bez dupliran naslov
   -----------------------------------------------------------------------------
   Navigacijata (strana na desktop, lenta na tablet, dolna nav na telefon) VEKE
   go kazuva imeto na ekranot i brojot. Povtoruvanjeto vo sodrzhinata trosheshe
   okolu 40px od sekoj ekran bez da dodade informacija.
   Opisot OSTANUVA — toj ne se dupliraat nikade i kazhuva SHTO pravi ekranot.
   Brojot pri filter ne se gubi: aktivniot chip ja nosi svojata brojka
   („Истекуваат 3"), a stranata sekogash go pokazuva vkupniot.
   ============================================================================= */
.dv-sadmin .dv-glava > .dv-glava__tekst > h4 { display: none; }
.dv-sadmin .dv-glava { padding-top: 16px; padding-bottom: 10px; align-items: center; }
.dv-sadmin .dv-glava__opis { margin: 0; font-size: 13.5px; }

/* =============================================================================
   M61 — kartichkite se KARTICHKI
   -----------------------------------------------------------------------------
   Dve raboti shto Zoran gi zabelezha na ist ekran:
    1) Listata na biznisi ima `border-radius: 0` (main.css `.view-grid-item`
       nikogash ne postavuva radius), a kopchinjata VNATRE se pilули — pa
       kartichkata izgleda kockesta, a sodrzhinata zaoblena.
    2) Na „Дома" celata kartichka bese <button> so hover-podiganje, pa brojkite
       izgledaa kako kopchinja.
   Odgovorot e ist za dvete: EDEN radius za sè shto e kartichka (--dv-radius),
   a dejstvoto e kopche VNATRE vo kartichkata.
   Skopirano SAMO pod `.dv-sadmin` — `.view-grid-item` ja delat i drugi ekrani
   (клиенти, услуги), tie ne se predmet na ovaa promena.
   ============================================================================= */

.dv-sadmin .view-grid-item,
.dv-sadmin .emp-grid {
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-linija);
}

/* KPI kartichka — brojka, bez dejstvo. Ne se podiga na hover za da ne pokanuva
   na klik shto go nema. */
.dv-karta--kpi { padding: 13px 15px; }

/* Panel-kartichka: naslov + lista + (po potreba) kopche na dnoto. */
.dv-karta--panel { display: flex; flex-direction: column; padding: 15px 16px; }
.dv-karta--panel .dv-karta__naslov { margin: 0 0 9px; font-weight: 600; color: var(--dv-tekst); font-size: 13.5px; }
/* Listata ima SOPSTVEN skrol — inache dolg spisok pak bi ja rastegnal tablata,
   shto bese celiot problem so stariot panel. */
.dv-karta__lista { flex: 1 1 auto; max-height: 232px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.dv-karta__akcija { align-self: flex-start; margin-top: 11px; }

.dv-lista-red__ime small { display: block; font-size: 11.5px; color: var(--dv-muted); margin-top: 1px; }

/* Dve koloni na shirok ekran, edna pod druga na tesen. */
.dv-tabla__dve { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.dv-karta--vnimanie { border-color: rgba(192, 57, 43, .3); background: #fffbfa; }
.dv-karta--vnimanie .dv-karta__broj { color: var(--dv-danger); }

/* =============================================================================
   M63 — alatna lenta i grupirani filtri
   -----------------------------------------------------------------------------
   Dve zabelezhki od Zoran, dvete tochni:
   1) Sinото kopche „Нов бизнис" vikashe pojako od sodrzhinata. Sega e „meko" —
      ista podloga kako aktivniot tab vo stranata i kako chipot „Сите".
   2) Etiketite СТАТУС / ПАКЕТ stoeja kako obichen tekst pred chipovite, pa ne se
      gledashe kade zavrshuva ednata grupa i pochnuva drugata.
      Reshenie: sekoja grupa e SEGMENTIRANA KONTROLA — vdlabnata kutija so
      etiketata VNATRE, a izbraniot chip e bel i podignat, kako prekinuvach vo
      svoeto lezishte. Pripadnosta e vidliva bez da se chita etiketata.
   ============================================================================= */

.dv-btn--meko { background: var(--dv-akcent-bled); color: var(--dv-akcent); }
.dv-btn--meko:hover { background: rgba(181, 65, 107, .17); color: var(--dv-akcent-tem); box-shadow: none; }

.dv-filtri__grupa {
  gap: 3px;
  padding: 4px;
  background: var(--dv-povrshina);
  border: 1px solid var(--dv-linija);
  border-radius: 11px;
}
.dv-filtri__etiketa { padding: 0 7px 0 6px; }

/* Chipovite vo grupa nemaat sopstvena ramka — lezishteto e ramkata. */
.dv-filtri .dv-chip {
  height: 32px;
  padding: 0 11px;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
}
.dv-filtri .dv-chip:hover { background: rgba(255, 255, 255, .7); border-color: transparent; }
.dv-filtri .dv-chip--aktiven {
  background: var(--dv-karta);
  border-color: var(--dv-linija);
  color: var(--dv-akcent);
  box-shadow: 0 1px 2px rgba(181, 65, 107, .10);
}
.dv-filtri .dv-chip > em { background: rgba(0, 0, 0, .05); }
.dv-filtri .dv-chip--aktiven > em { background: var(--dv-akcent); color: #fff; }

/* M64: kopcheto vnatre vo KPI kartichkata (samo „Истекуваат" go ima) */
.dv-karta--kpi .dv-karta__akcija { margin-top: 9px; }

/* =============================================================================
   M65 — filtri levo/desno + tab „Страници"
   ============================================================================= */

/* Zoran: grupite da se razdvojat na dvata kraja — pogolem razmak megju niv
   znachi pomalku shansa da se prochita chip od ednata grupa kako del od drugata. */
.dv-filtri { justify-content: space-between; }

/* Страници: edna kartichka po pazar, vnatre linkovi kon javnite stranici. */
.dv-mrezha--stranici { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.dv-stranici { display: flex; flex-direction: column; gap: 2px; }
.dv-stranica {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--dv-ctl-h); padding: 0 10px;
  border-radius: var(--dv-radius-sm);
  color: var(--dv-tekst); font-size: 13.5px; text-decoration: none;
  transition: background .15s, color .15s;
}
.dv-stranica > i:first-child { width: 16px; text-align: center; color: var(--dv-muted); font-size: 13px; }
.dv-stranica > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Strelkata „nadvor" se pojavuva na hover — bez nea sekoj red bi nosel ikona
   povekje bez da kazhe neshto novo. */
.dv-stranica__nadvor { font-size: 10px; opacity: 0; color: var(--dv-akcent); transition: opacity .15s; }
.dv-stranica:hover { background: var(--dv-povrshina); color: var(--dv-akcent); }
.dv-stranica:hover > i:first-child { color: var(--dv-akcent); }
.dv-stranica:hover .dv-stranica__nadvor { opacity: 1; }

/* =============================================================================
   M66/M68 — EDNA kartichka za Дистрибутери / Тим / Пазари / Домеини
   -----------------------------------------------------------------------------
   Zoshto: biznisite bea vo kartichki, a ostanatite tabovi vo redovi — ist ekran
   so dva ritma. Sekoj tab si crtashe i svoj HTML (Tim duri so inline stilovi).
   M68: merkite se ZEMENI OD kartichkata na biznisite (Sadmin.js popolniVraboteni
   + main.css .emp-grid), za da ne bidat „slichni" tuku ISTI:
     avatar 68px krug so 2px akcent rab · ime 22px/600 · podred 15px vo akcent
     boja · id 13px crveno · fakti vo 2 koloni 13px na svetla podloga ·
     dejstva kako kruzhni 32px kopchinja GORE DESNO.
   Renewals i Fakturi NAMERNO ostanuvaat tabelarni — tamu redot e zapis vo
   registar, ne subjekt so identitet.
   ============================================================================= */

.dv-kartichki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.dv-kartichka {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--dv-karta); border: 1px solid var(--dv-linija);
  border-radius: var(--dv-radius); padding: 34px 16px 26px;
  transition: box-shadow .2s var(--dv-ease), border-color .2s;
}
.dv-kartichka:hover { box-shadow: var(--dv-senka); border-color: rgba(181, 65, 107, .22); }
.dv-kartichka--tivok { opacity: .55; }

/* Znak — ZAOBLEN PRAVOAGOLNIK, ne krug. Krugot gi sechеshe znaminjata i
   logoata po agolite (znameto e pravoagolnik po priroda, logoto isto).
   Ist oblik kako brend-markata gore levo, samo pogolem. */
.dv-kartichka__znak {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 16px; margin-top: 16px;
  /* Dejstvata se apsolutni gore (14–46px) — bez margin znakot vleguvashe pod
     niv na potesna kartichka (izmereno, ne od oko). */
  /* M70/M71 (Zoran): tenok SREBREN rab + bela podloga. Crniot 2px bese
     pretezhok; akcentniot vrz oboena podloga lichеshe na kloвn. */
  border: 1px solid #c6cdd4;
  background: #fff; color: var(--dv-tekst);
  font-size: 27px; font-weight: 600; line-height: 1; overflow: hidden;
}
.dv-kartichka__znak img { width: 100%; height: 100%; object-fit: contain; padding: 7px; box-sizing: border-box; background: #fff; }

.dv-kartichka__ime { margin-top: 15px; font-size: 22px; font-weight: 600; color: var(--dv-tekst); line-height: 1.25; }
.dv-kartichka__pod { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--dv-muted); }
.dv-kartichka__id  { margin-top: 2px; font-size: 13px; font-weight: 500; color: #e74c3c; }

.dv-kartichka__bejdzovi {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin-top: 15px;
}

/* Faktite — dve koloni, ist ritam kako „19 employees / 22 clients". */
.dv-kartichka__fakti {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 100%; margin-top: 15px; padding: 0 4px; box-sizing: border-box;
  opacity: .85;
}
.dv-fakt {
  padding: 4px 10px; border-radius: var(--dv-radius-sm);
  background: var(--dv-povrshina); color: var(--dv-tekst);
  font-size: 13px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-fakt a { color: inherit; text-decoration: none; }
.dv-fakt a:hover { color: var(--dv-akcent); }
/* Neparen posleden fakt ja zima celata shirina — poddobro od polovina prazna. */
.dv-kartichka__fakti > .dv-fakt:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Dejstvata se kruzhni ikoni gore desno, kako kaj biznisite. */
.dv-kartichka__akcii { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.dv-kartichka__akcii .dv-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: var(--dv-povrshina); border: 0; color: #5b6b7b;
}
.dv-kartichka__akcii .dv-btn:hover { background: var(--dv-akcent-bled); color: var(--dv-akcent); box-shadow: none; }
.dv-kartichka__akcii .dv-btn--danger:hover { background: var(--dv-danger-bg); color: var(--dv-danger); }

/* =============================================================================
   M67 — brend-zaglavje na stranata + gustina na tablata
   ============================================================================= */

/* Vidlivo samo vo stranicen rezhim; vo vodorodna lenta gornata navigacija
   veke go nosi brendot, pa ovde bi bil vtor pat isto. */
.dv-strana__brend { display: none; }

@media (min-width: 1024px) {
  .dv-sadmin .dv-strana__brend {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 6px 14px; margin-bottom: 10px;
    border-bottom: 1px solid var(--dv-linija);
  }
  /* Brendot e na SAMIOT vrv na stranata (M71, Zoran). */
  .dv-sadmin .sadmin-tabs-row:has(> .dv-strana__brend) { padding-top: 0; }
  .dv-sadmin .dv-strana__brend img {
    width: 38px; height: 38px; flex: 0 0 38px;
    object-fit: contain; border-radius: 10px;
    background: var(--dv-akcent-bled); padding: 5px; box-sizing: border-box;
  }
  .dv-strana__brend-tekst { min-width: 0; }
  .dv-strana__brend-tekst strong {
    display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
    color: var(--dv-tekst); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dv-strana__brend-tekst span {
    display: block; margin-top: 1px; font-size: 11.5px; color: var(--dv-muted);
  }

  /* Zoran: na desktop tri kartichki vo red — pogolemi brojki, pomalku shetanje
     na okoto po redot. Pod 1024px ostanuva avtomatskoto redenje. */
  .dv-tabla .dv-mrezha--kpi { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   M68 — edno logo, cela strana, bez sechenje na dnoto
   ============================================================================= */

/* Dolen prostor pod sekoja mrezha so kartichki — bez nego posledniot red se
   lepi za rabot (i na mobilna zaviva pod fiksnata dolna navigacija). */
.dv-mrezha--kraj, .dv-kartichki { padding-bottom: 24px; }

@media (max-width: 779px) {
  /* Fiksnata dolna navigacija e ~80px; bufer za „zhivi" piloti. */
  .dv-mrezha--kraj, .dv-kartichki { padding-bottom: 130px; }
}

@media (min-width: 1024px) {
  /* Vo sadmin brendot go nosi stranata — logoto vo gornata lenta bi bilo isto
     dvapati na ist ekran. Se krie SAMO tuka i SAMO na desktop (pod 1024px
     nema strana, pa logoto gore e edinstveno). */
  .top-menu-wrap.e-sadmin .top-menu-left { visibility: hidden; }

  /* Stranata zavrshuvashe kade shto zavrshuva poslednata stavka, pa pod nea se
     gledashe pozadinata na stranicata — izgledashe kako otsechen panel.
     Podlogata ja crta KONTEJNEROT, pa belata kolona odi do dnoto bez razlika
     kolku stavki ima. `sticky` na samata lenta ostanuva netaknat. */
  .dv-sadmin {
    background: linear-gradient(to right,
                var(--dv-karta) 0 var(--dv-strana-w),
                transparent var(--dv-strana-w));
  }
  /* ...no kontejnerot e visok kolku sodrzhinata, pa gradientot zavrshuvashe so
     nea. Namesto magichen broj za visinata na gornata lenta, skolata ja pravi
     flex kolona i `.dv-sadmin` go zima ostatokot — tochno do dnoto na ekranot.
     `:has(>)` go ogranichuva samo na sadmin; ostanatite ekrani ne se pipnati. */
  /* M71: EDEN skroler za sadmin — teloto. Prichina: main.css dava
     `.view-wrap{max-height:100vh-102px;overflow-y:auto}` (vnatreshen skroler)
     dodeka `.content-in` e `overflow:hidden` — pa vtoriot red kartichki
     ispagjashe nadvor od vnatreshnoto pole i izgledashe PRESECHEN (GR-Moving,
     Johan Salong kaj Zoran). Sega: kolonata e visoka tochno 100dvh, teloto
     skrola, a vgnezdenite skroleri se gasnat (samo vo sadmin). */
  .content-employees:has(> .dv-sadmin) {
    display: flex; flex-direction: column; height: 100dvh; min-height: 0;
  }
  .content-employees > .dv-sadmin { flex: 1 1 auto; min-height: 0; }
  .dv-sadmin__telo { overflow-y: auto; }
  .dv-sadmin .view-wrap { max-height: none; height: auto; overflow: visible; }
}


/* M69: avatarot na biznisite — ist oblik kako znakot vo ostanatite kartichki.
   `radius-50` (krug) gi sechеshe logoata na salonite po agolite. */
.dv-avatar { border-radius: 16px; border-color: #c6cdd4 !important; border-width: 1px !important; }


/* M70: kaj biznisite kruzhnite kopchinja (email/telefon/...) se apsolutni gore
   desno (top:20), a avatarot pochnuva na 40px — na kartichka od ~280px se
   PREKLOPUVAA. Avatarot pagja pod pojasot na kopchinjata. Samo vo sadmin. */
.dv-sadmin .emp-grid > .emp-sm-flex { margin-top: 20px; }


/* ── Oddel vo tab (vrateno — M68 zamenata go progolta) ──────────────────── */
.dv-oddel { padding: 18px 20px 20px; margin-top: 10px; border-top: 1px solid var(--dv-linija); }
.dv-oddel__naslov { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--dv-tekst); }
.dv-alatki--tesna { padding: 0; justify-content: flex-start; }
.dv-alatki--tesna .dv-selekt { flex: 0 0 auto; padding-right: 12px; background-image: none; }

/* ── M71: dno na stranata — korisnik + odjava ───────────────────────────────
   Stranata zavrshuvashe so „Pages" pa prazno — izgledashe nedovrshena.
   Po modelot na digitalmeni (sa-sidebar-foot): chip so inicijal i ime, do nego
   odjava. `margin-top:auto` go lepi za dnoto na flex kolonata. */
.dv-strana__dno { display: none; }
@media (min-width: 1024px) {
  .dv-sadmin .dv-strana__dno {
    display: flex; align-items: center; gap: 9px;
    margin-top: auto; padding: 12px 6px 4px;
    border-top: 1px solid var(--dv-linija);
  }
  /* M74: samo odjava, polna shirina — chipot so ime go duplirashe gorniot
     desen agol. */
  .dv-strana__dno-odjava {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    gap: 8px; height: 38px; border-radius: 10px;
    background: var(--dv-povrshina); border: 1px solid var(--dv-linija);
    color: #4a5a68; font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .dv-strana__dno-odjava:hover {
    background: var(--dv-danger-bg); border-color: var(--dv-danger);
    color: var(--dv-danger);
  }
}


/* ── M71: Домеини — imeto e potenok LINK i se krshi po tochka ──────────────
   22px/600 bold za dolg hostname se prelevashe nadvor od kartichkata
   (beautystudio.digitalvario.com). */
.dv-kartichka__link {
  font-size: 16px; font-weight: 600; line-height: 1.35;
  color: var(--dv-tekst); text-decoration: none;
  overflow-wrap: anywhere; word-break: break-word;
}
.dv-kartichka__link:hover { color: var(--dv-akcent); text-decoration: underline; }

/* M72: tenka srebrena linija POD gornata lenta i NA DNOTO na rabotnoto pole —
   „da se znae od kade do kade e rabotno" (Zoran). Samo vo sadmin. */
.top-menu-wrap.e-sadmin { border-bottom: 1px solid var(--dv-linija); box-sizing: border-box; }
@media (min-width: 1024px) {
  .content-employees:has(> .dv-sadmin) { border-bottom: 1px solid var(--dv-linija); box-sizing: border-box; }
}

/* M73: (I) naslovite na STARITE tabovi (Bundles/Invoices/Addons/Renewals/Team
   imaat svoj h4.f-size-30 nadvor od dv-glava) — istoto pravilo kako M60:
   navigacijata veke go kazhuva imeto. Kopchinjata ostanuvaat desno preku
   :has() na redot. BELESHKA: h4-to na Fakturi/Tim nosi span so IST id kako
   brojachot vo stranata — prviot vo DOM (stranata) pobeduva kaj querySelector,
   pa krienjeto ne mena nishto; da se sredi pri sledna izmena na tie tabovi. */
.dv-sadmin .sadmin-tab-content h4.f-size-30 { display: none; }
.dv-sadmin .sadmin-tab-content div.d-flex.justify-between:has(> h4.f-size-30) { justify-content: flex-end; }

/* M73: (J) gornata granica na sekoj tab dishe — sodrzhinata se lepeshe za
   linijata pod gornata lenta (Pages, Bundles...). */
.dv-sadmin__telo > .sadmin-tab-content { padding-top: 16px; }


/* M74: „S" avatarot gore desno — pravoagolna forma (ist jazik kako znakot vo
   kartichkite), namesto krug. Samo vo sadmin (.e-sadmin). */
.e-sadmin .user-drop .avatar,
.e-sadmin .user-drop img.radius-50 { border-radius: 10px !important; }

/* M75: koga red so filtri nosi i kopche — grupite levo, kopcheto na krajot. */
.dv-filtri > .dv-btn { flex: 0 0 auto; }
@media (max-width: 767px) { .dv-filtri > .dv-btn { flex: 1 1 100%; } }

/* =============================================================================
   M77 — BIZNIS-POGLEDOT (salonot) go dobiva istiot jazik kako sadmin
   -----------------------------------------------------------------------------
   Zoran: „менито лево, копчиња, ова она — дотерано топ" (kalendarite NE).
   METOD: chista CSS transformacija na POSTOECHKIOT markup od nav.php —
   gornata lenta na >=1024px stanuva leva kolona (logo gore, stavki vo sredina,
   korisnik dolu). NULA promeneta logika, site linkovi/handleri isti; pod
   1024px sè ostanuva staro (mobilnata ima svoja dolna navigacija).
   ============================================================================= */

@media (min-width: 1024px) {

  .top-menu-wrap.e-biz {
    position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 90;
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    padding: 14px 12px !important; box-sizing: border-box;
    background: var(--dv-karta);
    border-right: 1px solid var(--dv-linija);
    border-bottom: 1px solid var(--dv-linija);
    overflow-y: auto;
  }
  /* Sodrzhinata se pomestuva desno od kolonata — na BODY nivo, ne na
     .content-in: kalendar-fragmentot NEMA .content-in obvivka (drugite imaat),
     pa selektor vrzan za nea tamu ne fakjashe i kolonata ja prekrivashe
     levata treтina od kalendarot (izmereno: calendar-top na x=20 nam. 252). */
  body:has(.top-menu-wrap.e-biz) { padding-left: 232px; box-sizing: border-box; }

  .e-biz .top-menu-left {
    padding: 0 6px 14px !important; margin-bottom: 10px;
    border-bottom: 1px solid var(--dv-linija);
  }
  .e-biz .top-menu-left img {
    width: 38px !important; height: 38px; object-fit: contain;
    border-radius: 10px; background: var(--dv-akcent-bled);
    padding: 5px; box-sizing: border-box;
  }

  .e-biz .top-menu-center { flex: 1 1 auto; min-width: 0; }
  .e-biz .navigation {
    display: flex; flex-direction: column; gap: 2px; height: auto !important;
  }
  .e-biz .navigation > a {
    height: auto !important; margin: 0 !important; padding: 10px 12px !important;
    justify-content: flex-start !important; border-radius: 10px;
    border-bottom: none !important;
    color: var(--dv-muted); text-decoration: none;
    transition: background .18s var(--dv-ease), color .18s var(--dv-ease);
  }
  .e-biz .navigation > a span { font-size: 14px !important; font-weight: 500; }
  .e-biz .navigation > a:hover { background: var(--dv-povrshina); color: var(--dv-tekst); }
  .e-biz .navigation > a.active { background: var(--dv-akcent-bled); color: var(--dv-akcent); }
  .e-biz .navigation > a.active span { font-weight: 600; }

  /* Korisnikot na dnoto — kako kaj sadmin stranata. */
  .e-biz .top-menu-right {
    margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--dv-linija);
  }
  .e-biz .user-drop { width: 100%; height: auto !important; }
  .e-biz .user-drop .avatar, .e-biz .user-drop img { border-radius: 10px !important; }
  /* Dropdown-ot se otvora NAGORE — dolu nema mesto. */
  body:has(.e-biz) .user-options-dropdown {
    top: auto !important; bottom: calc(100% + 8px) !important;
    left: 0 !important; right: auto !important;
  }

  /* ── Sodrzhina: kopchinja i kontroli na dv-jazikot ─────────────────────── */
  /* btn-1-s (sive/kafeavi od primary paletata) → meko, kako kaj sadmin. */
  body:has(.e-biz) .btn-1-s {
    background: var(--dv-akcent-bled); color: var(--dv-akcent);
    border-radius: var(--dv-radius-sm);
    font-weight: 600; font-size: 13.5px;
    min-height: var(--dv-ctl-h); box-sizing: border-box;
    transition: background .15s;
  }
  body:has(.e-biz) .btn-1-s:hover { background: rgba(181, 65, 107, .17); }
  /* „Зачувај" vo formite ostanuva SILNO — toa e glavnoto dejstvo tamu. */
  body:has(.e-biz) .btn-1-s.w-100 { background: var(--dv-kopche); color: #fff; }
  body:has(.e-biz) .btn-1-s.w-100:hover { background: var(--dv-kopche-tem); }

  /* Alatnite kontroli na list-stranicite (view-head) — edna visina, ist rab.
     Kalendarot NE e view-head, pa ostanuva netaknat (po zhelba na Zoran). */
  body:has(.e-biz) .view-head .input-place input,
  body:has(.e-biz) .view-head .select-box {
    height: var(--dv-ctl-h); box-sizing: border-box;
    border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
    background: #fff;
  }

  /* Kartichkite na vrabotenite: JS im dava POLNA obоena podloga inline
     (el.style.background) — te{sko za chitanje i drug jazik od sadmin.
     Podlogata stanuva bela; ulogata i natamu ja kazhuva obоeniot chip. */
  body:has(.e-biz) .view-grid-item {
    background: #fff !important;
    border: 1px solid var(--dv-linija) !important;
    border-radius: var(--dv-radius);
    box-shadow: 0 1px 2px rgba(181, 65, 107, .05);
  }
}

}
/* ^ M78-fix: M77 @media ne bese zatvorena — sè podolu se gnezdeshe vo nea. */

/* =============================================================================
   M78 — biznis-kolonata IZEDNACHENA so sadmin stranata
   -----------------------------------------------------------------------------
   Zoran (sporedba so sadmin): „аматерски" — gol tekst bez ikoni, bez zaglavje,
   bez podnozhje. Sega: GORE salonskoto logo + ime (nivniot identitet),
   pod nego korisnikot (pristap do settings dropdown), stavki SO IKONI,
   DOLU platformskiot brend + vidliva odjava — ista hierarhija kako sadmin.
   Novite elementi (.ebz-*) se skrieni sekade osven vo kolonata.
   ============================================================================= */

.ebz-ime, .ebz-dno { display: none; }

@media (min-width: 1024px) {

  /* Redosled vo kolonata: brend(0) → korisnik(1) → stavki(2) → dno(3).
     .top-menu-right stanuva display:contents za decata (user-drop, dropdown,
     ebz-dno) da se redat DIREKTNO vo flex kolonata — inache korisnikot ne
     moze da stoi NAD stavkite (drug roditel). */
  .e-biz .top-menu-right {
    display: contents;
  }
  .e-biz .top-menu-left { order: 0; }
  .e-biz .user-drop     { order: 1; }
  .e-biz .top-menu-center { order: 2; }
  .e-biz .ebz-dno       { order: 3; margin-top: auto; }

  /* ── Zaglavje: salonsko logo + ime ─────────────────────────────────────── */
  .e-biz .top-menu-left {
    display: flex; align-items: center; gap: 11px;
  }
  .e-biz .ebz-ime {
    display: block; min-width: 0; flex: 1 1 auto;
    font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
    color: var(--dv-tekst); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ── Korisnikot — kompakten red pod zaglavjeto (nosi settings dropdown) ── */
  .e-biz .user-drop {
    width: auto !important; margin: 0 0 10px; padding: 7px 10px;
    border-radius: 10px; border-bottom: none;
    background: var(--dv-povrshina);
  }
  .e-biz .user-drop:hover { background: var(--dv-akcent-bled); }
  .e-biz .user-drop .avatar,
  .e-biz .user-drop > img {
    width: 26px !important; height: 26px !important; min-width: 26px;
    border-width: 1px !important;
  }
  .e-biz .user-drop .avatar span { font-size: 13px !important; }
  .e-biz .user-drop .top-bar-user-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px !important; margin-left: 8px !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Dropdown-ot se otvora pod redot, vo ramkite na kolonata. */
  body:has(.e-biz) .user-options-dropdown {
    top: 112px !important; bottom: auto !important;
    left: 10px !important; right: 10px !important;
  }

  /* ── Stavki so ikoni (::before po id — bez promena na markup) ──────────── */
  .e-biz .navigation > a { display: flex; align-items: center; gap: 11px; }
  .e-biz .navigation > a::before {
    /* M205: porano `font-family:"Font Awesome 5 Free"` + `content:"\f073"`. Sega
       istata pateka od ISTIOT FA 5.9.0 fajl, no kako SVG maska — pa Font Awesome
       ne se vchituva voopshto. Geometrijata e IDENTICHNA: viewBox e em-kvadratot
       (0 0 W 512), kutijata e 14px visoka (= 1em na stariot font-size:14px), a
       `mask-size:contain` ja chuva proporcijata → glifot izleguva W/512*14 px
       shirok, tochno kolku i porano. Bojata doagja od `background-color`. */
    content: ""; width: 18px; flex: 0 0 18px; height: 14px;
    background-color: currentColor; opacity: .85;
    -webkit-mask: var(--ebz-ik) no-repeat center / contain;
            mask: var(--ebz-ik) no-repeat center / contain;
    /* main.css go koristi ISTOTO ::before za underline-animacijata na gorniot
       bar (position:absolute;bottom:0;height:2px;background-color;transform) —
       bez ova ikonite se gmechea vo 2px lenta na dnoto (vidlivo kako sini
       artefakti). Sè se vrakja vo tek na redot. NE `background:transparent` i NE
       `height:auto` — prvoto ja brishe maskinata boja, vtoroto ja rasteguva
       kutijata (maskata togash e 0 px visoka i ikonata ischeznuva). */
    position: static;
    transform: none !important; transition: none;
  }
  .e-biz #kalendarNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M0 -16v272h448v-272c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48zM320 180v-40c0 -6.59961 5.40039 -12 12 -12h40c6.59961 0 12 5.40039 12 12v40c0 6.59961 -5.40039 12 -12 12h-40c-6.59961 0 -12 -5.40039 -12 -12zM320 52v-40 c0 -6.59961 5.40039 -12 12 -12h40c6.59961 0 12 5.40039 12 12v40c0 6.59961 -5.40039 12 -12 12h-40c-6.59961 0 -12 -5.40039 -12 -12zM192 180v-40c0 -6.59961 5.40039 -12 12 -12h40c6.59961 0 12 5.40039 12 12v40c0 6.59961 -5.40039 12 -12 12h-40 c-6.59961 0 -12 -5.40039 -12 -12zM192 52v-40c0 -6.59961 5.40039 -12 12 -12h40c6.59961 0 12 5.40039 12 12v40c0 6.59961 -5.40039 12 -12 12h-40c-6.59961 0 -12 -5.40039 -12 -12zM64 180v-40c0 -6.59961 5.40039 -12 12 -12h40c6.59961 0 12 5.40039 12 12v40 c0 6.59961 -5.40039 12 -12 12h-40c-6.59961 0 -12 -5.40039 -12 -12zM64 52v-40c0 -6.59961 5.40039 -12 12 -12h40c6.59961 0 12 5.40039 12 12v40c0 6.59961 -5.40039 12 -12 12h-40c-6.59961 0 -12 -5.40039 -12 -12zM400 384c26.5 0 48 -21.5 48 -48v-48h-448v48 c0 26.5 21.5 48 48 48h48v48c0 8.7998 7.2002 16 16 16h32c8.7998 0 16 -7.2002 16 -16v-48h128v48c0 8.7998 7.2002 16 16 16h32c8.7998 0 16 -7.2002 16 -16v-48h48z'/%3E%3C/svg%3E"); }  /* calendar-alt */
  .e-biz #baranjaNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M416 256c0 -88.4004 -93.0996 -160 -208 -160c-41 0 -79.0996 9.2998 -111.3 25c-21.7998 -12.7002 -52.1006 -25 -88.7002 -25c-3.2002 0 -6 1.7998 -7.2998 4.7998s-0.700195 6.40039 1.5 8.7002c0.299805 0.299805 22.3994 24.2998 35.7998 54.5 c-23.9004 26.0996 -38 57.7002 -38 92c0 88.4004 93.0996 160 208 160s208 -71.5996 208 -160zM538 36c13.4004 -30.2998 35.5 -54.2002 35.7998 -54.5c2.2002 -2.40039 2.7998 -5.7998 1.5 -8.7002c-1.2002 -2.89941 -4.09961 -4.7998 -7.2998 -4.7998 c-36.5996 0 -66.9004 12.2998 -88.7002 25c-32.2002 -15.7998 -70.2998 -25 -111.3 -25c-86.2002 0 -160.2 40.4004 -191.7 97.9004c10.4004 -1.10059 20.9004 -1.90039 31.7002 -1.90039c132.3 0 240 86.0996 240 192c0 6.7998 -0.400391 13.5 -1.2998 20.0996 c75.7998 -23.8994 129.3 -81.1992 129.3 -148.1c0 -34.2998 -14.0996 -66 -38 -92z'/%3E%3C/svg%3E"); }  /* comments */
  .e-biz #klientiNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M96 224c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64zM544 224c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64zM576 192c35.2998 0 64 -28.7002 64 -64v-32 c0 -17.7002 -14.2998 -32 -32 -32h-66c-6.2002 47.4004 -34.7998 87.2998 -75.0996 109.4c11.5996 11.5 27.5 18.5996 45.0996 18.5996h64zM320 192c-61.9004 0 -112 50.0996 -112 112s50.0996 112 112 112s112 -50.0996 112 -112s-50.0996 -112 -112 -112zM396.8 160 c63.6006 0 115.2 -51.5996 115.2 -115.2v-28.7998c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v28.7998c0 63.6006 51.5996 115.2 115.2 115.2h8.2998c20.9004 -10 43.9004 -16 68.5 -16s47.7002 6 68.5 16h8.2998zM173.1 173.4 c-40.2998 -22.1006 -68.8994 -62 -75.1992 -109.4h-65.9004c-17.7002 0 -32 14.2998 -32 32v32c0 35.2998 28.7002 64 64 64h64c17.5996 0 33.5 -7.09961 45.0996 -18.5996z'/%3E%3C/svg%3E"); }  /* users */
  .e-biz #vraboteniNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M192 192c-61.9004 0 -112 50.0996 -112 112s50.0996 112 112 112s112 -50.0996 112 -112s-50.0996 -112 -112 -112zM268.8 160c63.6006 0 115.2 -51.5996 115.2 -115.2v-28.7998c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v28.7998 c0 63.6006 51.5996 115.2 115.2 115.2h8.2998c20.9004 -10 43.9004 -16 68.5 -16s47.7002 6 68.5 16h8.2998zM480 192c-53 0 -96 43 -96 96s43 96 96 96s96 -43 96 -96s-43 -96 -96 -96zM528 160c61.9004 0 112 -50.0996 112 -112c0 -26.5 -21.5 -48 -48 -48h-176.6 c0.0996094 2.09961 0.599609 4.2002 0.599609 6.40039v38.3994c0 38.6006 -15.2998 73.5 -39.7002 99.7998c16.5 9.5 35.2998 15.4004 55.7002 15.4004h3.7998c13.9004 -4.7998 28.6006 -8 44.2002 -8s30.2998 3.2002 44.2002 8h3.7998z'/%3E%3C/svg%3E"); }  /* user-friends */
  .e-biz #uslugiPaketiBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M278.06 192l166.421 -166.43c4.68945 -4.69043 4.68945 -12.29 0 -16.9707c-32.8008 -32.7998 -85.9902 -32.7998 -118.79 0l-115.511 115.521l-24.8594 -24.8604c4.30957 -10.9199 6.67969 -22.8096 6.67969 -35.2598c0 -53.0195 -42.9805 -96 -96 -96 s-96 42.9805 -96 96s42.9805 96 96 96c4.53027 0 8.99023 -0.320312 13.3604 -0.929688l32.9297 32.9297l-32.9297 32.9297c-4.37012 -0.609375 -8.82031 -0.929688 -13.3604 -0.929688c-53.0195 0 -96 42.9805 -96 96s42.9805 96 96 96s96 -42.9805 96 -96 c0 -12.4502 -2.37012 -24.3398 -6.67969 -35.2598l24.8594 -24.8604l115.511 115.521c32.7998 32.7998 85.9893 32.7998 118.79 0c4.68945 -4.68066 4.68945 -12.2803 0 -16.9707zM96 288c17.6396 0 32 14.3604 32 32s-14.3604 32 -32 32s-32 -14.3604 -32 -32 s14.3604 -32 32 -32zM96 32c17.6396 0 32 14.3604 32 32s-14.3604 32 -32 32s-32 -14.3604 -32 -32s14.3604 -32 32 -32z'/%3E%3C/svg%3E"); }  /* cut */
  .e-biz #kuponiNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M0 195.882v204.118c0 26.5098 21.4902 48 48 48h204.118c10.9746 0 26.1807 -6.29883 33.9404 -14.0586l211.883 -211.883c18.7441 -18.7441 18.7441 -49.1367 0 -67.8818l-204.118 -204.118c-18.7451 -18.7441 -49.1377 -18.7441 -67.8818 0l-211.883 211.883 c-7.75977 7.75977 -14.0586 22.9658 -14.0586 33.9404zM112 384c-26.5098 0 -48 -21.4902 -48 -48s21.4902 -48 48 -48s48 21.4902 48 48s-21.4902 48 -48 48z'/%3E%3C/svg%3E"); }  /* tag */
  .e-biz #fakturiNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M288 192v-64h-192v64h192zM377 343c4.5 -4.5 7 -10.5996 7 -16.9004v-6.09961h-128v128h6.09961c6.40039 0 12.5 -2.5 17 -7zM224 312c0 -13.2002 10.7998 -24 24 -24h136v-328c0 -13.2998 -10.7002 -24 -24 -24h-336c-13.2998 0 -24 10.7002 -24 24v464 c0 13.2998 10.7002 24 24 24h200v-136zM64 376v-16c0 -4.41992 3.58008 -8 8 -8h80c4.41992 0 8 3.58008 8 8v16c0 4.41992 -3.58008 8 -8 8h-80c-4.41992 0 -8 -3.58008 -8 -8zM64 312v-16c0 -4.41992 3.58008 -8 8 -8h80c4.41992 0 8 3.58008 8 8v16 c0 4.41992 -3.58008 8 -8 8h-80c-4.41992 0 -8 -3.58008 -8 -8zM320 8v16c0 4.41992 -3.58008 8 -8 8h-80c-4.41992 0 -8 -3.58008 -8 -8v-16c0 -4.41992 3.58008 -8 8 -8h80c4.41992 0 8 3.58008 8 8zM320 208c0 8.83984 -7.16016 16 -16 16h-224 c-8.83984 0 -16 -7.16016 -16 -16v-96c0 -8.83984 7.16016 -16 16 -16h224c8.83984 0 16 7.16016 16 16v96z'/%3E%3C/svg%3E"); }  /* file-invoice */
  .e-biz #formulariNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M218.17 23.8604c7.25 -14.4707 21.71 -23.4404 37.8301 -23.75l128 -0.110352v-40c0 -13.2998 -10.7002 -24 -24 -24h-336c-13.2998 0 -24 10.7002 -24 24v464c0 13.2998 10.7002 24 24 24h200v-136c0 -13.2002 10.7998 -24 24 -24h136.01v-46.5498l-128 -127.09 v-82.1201c-3.87012 0.30957 -7.46973 2.47949 -9.35938 6.25977c-11.9404 23.8604 -46.25 30.3496 -66 14.1602l-13.8809 41.6396c-3.28906 9.82031 -12.4297 16.4102 -22.7695 16.4102s-19.4805 -6.59961 -22.7803 -16.4102l-18.1895 -54.6396 c-1.53027 -4.58008 -5.81055 -7.66016 -10.6406 -7.66016h-12.3896c-8.83984 0 -16 -7.16016 -16 -16s7.16016 -16 16 -16h12.3896c18.6201 0 35.1104 11.8701 41 29.5303l10.6104 31.8799l16.8301 -50.4697c4.4502 -13.46 23.1104 -14.8701 29.4795 -2.09082 l7.6709 15.3408c2.7998 5.59961 7.93945 6.18945 10.0195 6.18945s7.21973 -0.599609 10.1699 -6.51953zM384 326.1v-6.09961h-128v128h6.09961c6.40039 0 12.5 -2.5 17 -7l97.9004 -98c4.5 -4.5 7 -10.5996 7 -16.9004zM288 101.04l162.79 161.62l67.8799 -67.8799 l-161.68 -162.78h-68.9902v69.04zM568.54 280.67c9.9502 -9.93945 9.9502 -26.0703 0 -36.0098l-27.25 -27.25l-67.8799 67.8799l27.25 27.25c9.93945 9.94043 26.0703 9.94043 36.0098 0z'/%3E%3C/svg%3E"); }  /* file-signature */
  .e-biz #plakanjaNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M0 42.7002c41.2998 -29.1006 116.8 -42.7002 192 -42.7002s150.7 13.5996 192 42.7002v-42.7002c0 -35.2998 -86 -64 -192 -64s-192 28.7002 -192 64v42.7002zM320 320c-106 0 -192 28.7002 -192 64s86 64 192 64s192 -28.7002 192 -64s-86 -64 -192 -64zM0 147.6 c41.2998 -34 116.9 -51.5996 192 -51.5996s150.7 17.5996 192 51.5996v-51.5996c0 -35.2998 -86 -64 -192 -64s-192 28.7002 -192 64v51.5996zM416 136.6v63.6006c38.7002 6.89941 72.7998 18.0996 96 34.5v-42.7002c0 -23.7002 -38.7002 -44.2998 -96 -55.4004zM192 288 c106 0 192 -35.7998 192 -80s-86 -80 -192 -80s-192 35.7998 -192 80s86 80 192 80zM411.3 231.7c-8.7998 23.7002 -30.5 42.8994 -60 57.2002c64.2002 3.19922 125.2 16.6992 160.7 41.7998v-42.7002c0 -24.2998 -40.7002 -45.5 -100.7 -56.2998z'/%3E%3C/svg%3E"); }  /* coins */
  .e-biz #statistikaNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M332.8 128c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v134.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h38.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-134.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-38.4004zM428.8 128 c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v230.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h38.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-230.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-38.4004zM140.8 128 c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v70.4004c0 6.39941 6.40039 12.7998 12.7998 12.7998h38.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-70.4004c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-38.4004zM236.8 128 c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v198.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h38.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-198.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-38.4004zM496 64c8.83984 0 16 -7.16016 16 -16v-32 c0 -8.83984 -7.16016 -16 -16 -16h-464c-17.6699 0 -32 14.3301 -32 32v336c0 8.83984 7.16016 16 16 16h32c8.83984 0 16 -7.16016 16 -16v-304h432z'/%3E%3C/svg%3E"); }  /* chart-bar */
  .e-biz #siteNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M336.5 288h-177c14.5 89.2998 48.7002 152 88.5 152s74 -62.7002 88.5 -152zM152 192c0 22.2002 1.2002 43.5 3.2998 64h185.3c2.10059 -20.5 3.30078 -41.7998 3.30078 -64s-1.2002 -43.5 -3.30078 -64h-185.3c-2.09961 20.5 -3.2998 41.7998 -3.2998 64zM476.7 288 h-108c-8.7998 56.9004 -25.6006 107.8 -50 141.6c71.5 -21.1992 129.399 -73.6992 158 -141.6zM177.2 429.6c-24.4004 -33.7998 -41.2002 -84.6992 -49.9004 -141.6h-108c28.5 67.9004 86.5 120.4 157.9 141.6zM487.4 256c5.39941 -20.5 8.5 -41.7998 8.5 -64 s-3.10059 -43.5 -8.60059 -64h-114.6c2.09961 21 3.2998 42.5 3.2998 64s-1.2002 43 -3.2998 64h114.7zM120 192c0 -21.5 1.2002 -43 3.2002 -64h-114.601c-5.39941 20.5 -8.59961 41.7998 -8.59961 64s3.2002 43.5 8.59961 64h114.7 c-2.09961 -21 -3.2998 -42.5 -3.2998 -64zM159.5 96h177c-14.5 -89.2998 -48.7002 -152 -88.5 -152s-74 62.7002 -88.5 152zM318.8 -45.5996c24.4004 33.7998 41.2002 84.6992 50 141.6h108c-28.5996 -67.9004 -86.5996 -120.4 -158 -141.6zM19.2998 96h108 c8.7998 -56.9004 25.6006 -107.8 50 -141.6c-71.5 21.1992 -129.399 73.6992 -158 141.6z'/%3E%3C/svg%3E"); }  /* globe */
  .e-biz #settingsNavBtn::before { --ebz-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M487.4 132.3c4.89941 -2.7998 7.09961 -8.59961 5.59961 -14.0996c-11.0996 -35.7002 -30 -67.9004 -54.7002 -94.6006c-3.7998 -4.19922 -9.89941 -5.09961 -14.7998 -2.2998l-42.5996 24.6006c-18 -15.3008 -38.6006 -27.2002 -60.8008 -35.1006v-49.2002 c0 -5.59961 -3.89941 -10.5 -9.39941 -11.6992c-34.9004 -7.80078 -72.5 -8.2002 -109.2 0c-5.5 1.19922 -9.40039 6.09961 -9.40039 11.6992v49.2002c-22.2998 7.7998 -42.8994 19.7002 -60.7998 35.1006l-42.5996 -24.6006c-4.7998 -2.7998 -11 -1.7998 -14.7998 2.2998 c-24.7002 26.8008 -43.6006 59 -54.7002 94.6006c-1.60059 5.39941 0.599609 11.2002 5.5 14l42.5996 24.5996c-4.2998 23.2002 -4.2998 47 0 70.2002l-42.5996 24.5996c-4.90039 2.80078 -7.2002 8.60059 -5.5 14c11.0996 35.7002 30 67.9004 54.7002 94.6006 c3.7998 4.2002 9.89941 5.09961 14.7998 2.2998l42.5 -24.5996c18 15.2998 38.5996 27.1992 60.7998 35.0996v49.2002c0 5.59961 3.90039 10.5 9.40039 11.7002c34.8994 7.7998 72.5 8.19922 109.199 0c5.5 -1.2002 9.40039 -6.10059 9.40039 -11.7002v-49.1006 c22.2998 -7.7998 42.9004 -19.6992 60.7998 -35.0996l42.6006 24.5996c4.7998 2.80078 11 1.80078 14.7998 -2.2998c24.7002 -26.7998 43.5996 -59 54.7002 -94.5996c1.59961 -5.40039 -0.600586 -11.2002 -5.5 -14l-42.6006 -24.6006 c4.2998 -23.1992 4.2998 -47 0 -70.1992zM256 112c44.0996 0 80 35.9004 80 80s-35.9004 80 -80 80s-80 -35.9004 -80 -80s35.9004 -80 80 -80z'/%3E%3C/svg%3E"); }  /* cog */

  /* ── Podnozhje: platformski brend + odjava ─────────────────────────────── */
  .e-biz .ebz-dno {
    /* !important + inline display:none vo markup: vo skrieni poddrva Chromium
       vrakja default computed vrednosti, pa CSS-krienjeto ne e sigurno. */
    display: flex !important; flex-direction: column; gap: 9px;
    padding-top: 12px; border-top: 1px solid var(--dv-linija);
  }
  .ebz-dno__brend {
    display: flex; align-items: center; gap: 9px; padding: 0 6px;
  }
  .ebz-dno__brend img {
    width: 26px; height: 26px; object-fit: contain;
    border-radius: 8px; background: var(--dv-akcent-bled);
    padding: 3px; box-sizing: border-box;
  }
  .ebz-dno__brend span {
    font-size: 12px; font-weight: 600; color: var(--dv-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ebz-dno__odjava {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; border-radius: 10px;
    background: var(--dv-povrshina); border: 1px solid var(--dv-linija);
    color: #4a5a68; font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .ebz-dno__odjava:hover {
    background: var(--dv-danger-bg); border-color: var(--dv-danger); color: var(--dv-danger);
  }
}

/* =============================================================================
   M80 — SIDEBAR-ot od desno UMIRA: centriran staklen popap (kako digitalmeni)
   -----------------------------------------------------------------------------
   Zoran: „dojde vreme pull od desno da si odi... vo digitalmeni go isfrlivme,
   zamenivme so popap — sega nasekade."
   METOD: ISTITE elementi, IST JS, isti otvori/zatvori pateki — samo scenata e
   druga. Otvoreno-signalite se POSTOECHKITE kanali:
     1. .content-out.sidebar-opened  → .section-sidebar   (biznis ekrani)
     2. .content-out.sidebar-opened-emp → .employees-sidebar
     3. .section-sidebar.opened      → paketi (sadmin)
     4. .content-out.faktura-sidebar-popup → .faktura-sidebar (sadmin fakturi)
   JS-ot dopolnitelno kaze KOJ tochno (display:flex/none po sidebar) — popapot
   go pochituva toa: display:none pobeduva sekogash.
   Kalendarskite (.calendar-side) NAMERNO se izzemeni — „kalendarite ne bash".
   Pod 769px ostanuvaat postoechkite mobilni odnesuvanja (list odozdola).
   ============================================================================= */

/* M204 (Zoran: „ne mozham da dodadam komitent") — SADMIN: paketi-popapot slusha
   SAMO svoj signal.
   -----------------------------------------------------------------------------
   Vo sadmin dve razlichni formi ja nosat istata klasa `.section-sidebar`:
   `.paketi-sidebar` (Izmeni paket) i komitent-formata (koja e i
   `.employees-sidebar`). Generichkiot otvoreno-kanal podolu
   (`body:has(.content-out.sidebar-opened) .section-sidebar…`) ja izzema
   `.employees-sidebar` (M90), pa klik na „Dodaj nov komitent" — koj go pali
   tokmu toj kanal — ja otvorashe POGRESHNATA forma: „Izmeni paket".
   Klasata `.section-sidebar` ne se vadi od paketi-sidebar zatoa sto main.css
   (kompajliran SASS, nedopirliv) preku nea gi dava marginite na `.contact-box`
   i upload-img odnesuvanjeto. Namesto toa: paketi-popapot postoi vo scenata
   SAMO koga Paketi.js mu ja dodal `.opened` — negoviot sopstven signal.
   Parnjakot na ovaa linija e vo js/classes/Sadmin.js (komitent-formata sega
   dobiva `.opened`, isto kako Vraboteni.js). */
.paketi-sidebar:not(.opened) { display: none !important; }

@media (min-width: 769px) {

  .section-sidebar:not(.calendar-side):not(.cart-sidebar):not(.kupi-paket-side):not(.zakazi-nezakaz),
  .calendar-side.side-right, .calendar-side.side-left,
  .tim-sidebar,
  .faktura-sidebar {
    position: fixed !important;   /* tim-sidebar nema NIKAKOV position — static */
    top: 50% !important; left: 50% !important;
    right: auto !important; bottom: auto !important;
    transform: translate(-50%, -47%) scale(.98);
    width: min(560px, 94vw) !important;
    height: auto !important; min-height: 240px; max-height: 90dvh;
    border-radius: 16px; border: 1px solid var(--dv-linija);
    box-shadow: 0 24px 80px rgba(12, 26, 33, .30) !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s var(--dv-ease), transform .18s var(--dv-ease), visibility 0s .18s !important;
    z-index: 60 !important;
    overflow: hidden;
  }

  /* body:has — kanalot moze da gori na EDEN content-out, a sidebar-ot da
     zhivee vo shell-ot NADVOR od nego (employees-sidebar, index2:505).
     Descendant-selektor tamu ne stiga (izmereno: predok_co=false). KOJ
     tochno se gleda i natamu go kazhuva JS preku display:none/flex. */
  /* M90 (Zoran „grshno otvara nasekade"): employees-sidebar go NOSI i
     `.section-sidebar` i `d-flex` (nikogash display:none), pa generichkoto
     `sidebar-opened` (shto go dodava Klienti/Fakturi/… za SVOJOT sidebar) go
     otkrivashe i profil-popapot („Ändra Anställd") vrz sekoja strana. Isklucen
     e od generichkoto pravilo — se pokazuva SAMO koga Vraboteni.otvoriSidebar
     mu dodava `.opened` (dolu, .section-sidebar.opened). */
  body:has(.content-out.sidebar-opened) .section-sidebar:not(.calendar-side):not(.cart-sidebar):not(.kupi-paket-side):not(.zakazi-nezakaz):not(.employees-sidebar),
  body:has(.content-out.sidebar-opened-emp) .employees-sidebar,
  .section-sidebar.opened,
  .calendar-side.side-right.opened, .calendar-side.side-left.opened,
  body:has(.content-out.kuponi-sidebar-popup) .kuponi-sidebar,
  body:has(.content-out.kf-sidebar-popup) .kf-sidebar,
  .tim-sidebar[style*="flex"],
  .content-out.faktura-sidebar-popup .faktura-sidebar {
    /* '-emp' kanalot vo main.css dava position:relative (staro dokirano
       odnesuvanje) — popapot MORA fixed, inache formata se gmechi vo grid-ot
       („kaj nov anställd nema nishto"). */
    position: fixed !important;
    top: 50% !important; left: 50% !important; bottom: auto !important;
    /* !important: nekoi otvoreni-kanali (body:has so 3 klasi) se POSLABI od
       bazata (5 klasi) — bez ova kuponi/kf ostanuvaa nevidlivi so tochna
       geometrija (izmereno: vis=hidden op=0 na x=426). */
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity .18s var(--dv-ease), transform .18s var(--dv-ease), visibility 0s !important;
    right: auto !important;   /* stariot kanal pishuvashe right:0 — go gazi centriranjeto */
  }

  /* Sodrzhinata skrola VNATRE vo popapot, ne stranicata. */
  /* Tim: negde go vlechat desno — centriranjeto pobeduva. */
  .tim-sidebar[style*="flex"] {
    top: 50% !important; left: 50% !important; right: auto !important;
    transform: translate(-50%, -50%) !important; margin: 0 !important;
  }

  .section-sidebar .sidebar-content,
  .calendar-side .sidebar-content, .calendar-side .calendar-side__content,
  .faktura-sidebar .sidebar-content { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

  /* ── dv-panel (sadmin tim/dist/domen/pazar): od strana-desno vo popap ── */
  .dv-panel--otvoren {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    z-index: 60;               /* baznata .dv-panel e 20 — stakloto (50) ja pokrivashe */
    transform: translate(-50%, -50%);
    width: min(560px, 94vw) !important; max-width: none;
    height: auto; max-height: 90dvh;
    border-radius: 16px; border: 1px solid var(--dv-linija);
    box-shadow: 0 24px 80px rgba(12, 26, 33, .30);
    animation: dvPopapVlez .18s var(--dv-ease);
    overflow: hidden;
  }
  @keyframes dvPopapVlez { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); }
                           to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

  /* ── Stakloto (backdrop, blur) — eden izgled za SITE kanali ─────────── */
  .content-out.sidebar-opened::before,
  .content-out.sidebar-opened-emp::before,
  body:has(.content-out.sidebar-opened) > .content-out:first-child::before,
  .content-out.faktura-sidebar-popup::before,
  .content-out:has(.section-sidebar.opened)::before,
  .content-out:has(.dv-panel--otvoren)::before,
  .content-out:has(.calendar-side.side-right.opened)::before,
  .content-out:has(.calendar-side.side-left.opened)::before,
  .content-out.kuponi-sidebar-popup::before,
  .content-out.kf-sidebar-popup::before,
  .content-out:has(.tim-sidebar[style*="flex"])::before {
    content: ""; position: fixed; inset: 0; z-index: 50;
    background: rgba(23, 32, 44, .38);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
}


/* M81: „Zachuvaj" vo popapite — POLNO kopche so BEL tekst, nasekade.
   main.css dava boja na vnatreshniot <span> (primary), pa tekstot stanuvashe
   sin-na-sino (biz) ili bled (sadmin). Edno pravilo za dvata konteksta. */
.section-sidebar .btn-1-s.w-100,
.faktura-sidebar .btn-1-s.w-100,
.dv-panel .btn-1-s.w-100,
.kp-baranje-sidebar .btn-1-s.w-100 {
  background: var(--dv-kopche) !important;
  color: #fff !important;
  border-radius: var(--dv-radius-sm);
  font-weight: 600;
}
.section-sidebar .btn-1-s.w-100 span, .section-sidebar .btn-1-s.w-100 i,
.faktura-sidebar .btn-1-s.w-100 span, .faktura-sidebar .btn-1-s.w-100 i,
.dv-panel .btn-1-s.w-100 span, .dv-panel .btn-1-s.w-100 i,
.kp-baranje-sidebar .btn-1-s.w-100 span, .kp-baranje-sidebar .btn-1-s.w-100 i {
  color: #fff !important;
}
.section-sidebar .btn-1-s.w-100:hover,
.dv-panel .btn-1-s.w-100:hover { background: var(--dv-kopche-tem) !important; }

/* ── S (04.09.2026): sadmin → Stripe — profili po pazar ───────────────────
   Edna karta po pazar: zaglavje (zname, ime, bejdzovi, prekinuvach), tri reda
   za klucevi (maska + vnes + zacuvaj/izbrisi), webhook URL, proverka. */
.dv-stripe-mrezha { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; }
.dv-stripe-karta { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.dv-stripe-karta__glava { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 10px; }
.dv-stripe-karta__glava > div { flex: 1; min-width: 0; }
.dv-stripe-karta__zname { font-size: 28px; line-height: 1.1; }
.dv-stripe-karta__bejdzovi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dv-stripe-red { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--dv-linija, #e6e9ee); }
.dv-stripe-red__ime { font-weight: 600; font-size: 13px; line-height: 1.25; }
.dv-stripe-red__ime small { display: block; font-weight: 400; color: #6b7280; font-size: 11px; margin-top: 2px; word-break: break-all; }
.dv-stripe-red__telo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-stripe-red__maska { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: #f3f5f8; padding: 3px 8px; border-radius: 6px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.dv-stripe-red__vnes { width: 100%; height: var(--dv-ctl-h, 40px); border: 1px solid var(--dv-linija, #dfe3e8); border-radius: var(--dv-radius, 8px); padding: 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: #fff; }
.dv-stripe-red__vnes:focus { outline: 2px solid var(--dv-akcent, #b5416b); outline-offset: 1px; }
.dv-stripe-red__akcii { display: flex; gap: 6px; align-items: center; }
.dv-stripe-rezultat { font-size: 12.5px; color: #6b7280; }
.dv-stripe-rezultat--ok { color: #2e7d32; font-weight: 600; }
.dv-stripe-rezultat--greska { color: #b3261e; font-weight: 600; }
.dv-prekinuvac { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; }
/* M204: main.css gasi `appearance: none !important` za SEKOJ <input> (globalno pravilo
   od kompajliraniot SASS). Bez vrakjanjeto podolu, ova kvadratche e nevidlivo — vo tabot
   Stripe pishuvashe samo „Вклучен" bez nikakov prekinuvach, pa ne se gledashe dali
   profilot e vklucen. `!important` e zadolzhitelen — go gazi istoto od main.css. */
.dv-prekinuvac input[type="checkbox"] {
  appearance: auto !important; -webkit-appearance: auto !important;
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0;
  accent-color: var(--dv-akcent, #b5416b);
}
.dv-prekinuvac input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
@media (max-width: 768px) {
  .dv-stripe-mrezha { grid-template-columns: 1fr; }
  /* M204 (tabot Stripe na telefon beshe neupotrebliv):
     redot ostanuva DVOKOLONSKI — etiketata zima cela shirina gore, a poleto i
     kopchinjata sedat edno do drugo pod nea. Pred toa `1fr` gi redeshe site tri
     kjelii edna pod druga: cetiri reda po sekoj kluc, a „Зачувај" viseshe sam na
     prazen red so 44px visina. */
  .dv-stripe-red { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 10px 0; }
  .dv-stripe-red__ime { grid-column: 1 / -1; }
  .dv-stripe-red__akcii { justify-content: flex-end; }
  /* Zaglavje na kartata: zname + ime vo prv red, prekinuvachot vo svoj —
     porano trite stavki se stiskaa vo edna linija i sekoj bejdz dobivashe
     sopstven red (cetiri reda bejdzovi vrz 292px). */
  .dv-stripe-karta { padding: 14px; }
  .dv-stripe-karta__glava { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .dv-stripe-karta__zname { font-size: 22px; }
  .dv-stripe-karta__glava > .dv-prekinuvac {
    flex: 1 0 100%; order: 3; justify-content: flex-start;
    margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--dv-linija, #e6e9ee);
  }
}

/* ── P1.4: „Ta betalt" panel + bejdzovi betald/obetald + status vo sidebar ── */
/* ===== Ta betalt panel (P1.4) — redizajn 05.09.2026 („визуелно грдо → поубаво") ===== */
.np-glass { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 55; display: none; }
.np-glass--otvoren { display: block; }
.np-panel [hidden], .np-swish[hidden] { display: none !important; }
.np-panel { z-index: 60 !important; }
.np-panel .np-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; flex-shrink: 0; }
.np-glava__naslov { font-size: 22px; font-weight: 700; color: #1b1f26; margin: 0; letter-spacing: -.01em; }
.np-zatvori { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f3f6; color: #4b5563; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }
.np-zatvori:hover { background: #e5e9ee; color: #1b1f26; }
.dv-panel .sidebar-content.np-body { display: flex; flex-direction: column; align-items: stretch; gap: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 18px; }
.np-klient { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-klient__avatar { width: 42px; height: 42px; border-radius: 50%; background: #f9e9f0; color: #b5416b; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: 0 0 42px; letter-spacing: .02em; }
.np-klient__tekst { min-width: 0; }
.np-klient__ime { font-weight: 700; font-size: 16px; color: #1b1f26; line-height: 1.2; }
.np-klient__meta { color: #6b7280; font-size: 13px; margin-top: 2px; }
.np-saldo { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f3f7fd; border: 1px solid #dbe7f6; border-radius: 12px; padding: 12px 14px; }
.np-saldo__lev { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #6b7280; }
.np-saldo__lev b { color: #374151; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.np-saldo__kvar { text-align: right; }
.np-saldo__kvar span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; margin-bottom: 2px; }
.np-saldo__kvar b { font-size: 22px; color: #b5416b; font-variant-numeric: tabular-nums; line-height: 1.1; }
.np-saldo--gotovo { background: #eef8ee; border-color: #cfe8cf; }
.np-saldo--gotovo .np-saldo__kvar b { color: #2e7d32; }
.np-etiketa { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; display: block; }
.np-iznos-rad { position: relative; }
#npIznos { height: 46px; padding-right: 48px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.np-valuta { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: #9aa3ad; pointer-events: none; }
.np-nacin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-nacin-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; min-height: 62px; transition: border-color .12s, background .12s; }
.np-nacin-btn i { font-size: 18px; color: #8a94a0; }
.np-nacin-btn:hover { border-color: #9cbfe8; }
.np-nacin-btn--aktiven { border-color: var(--dv-akcent, #b5416b); background: #f9e9f0; color: var(--dv-akcent, #b5416b); box-shadow: inset 0 0 0 1px var(--dv-akcent, #b5416b); }
.np-nacin-btn--aktiven i { color: var(--dv-akcent, #b5416b); }
.np-swish { display: flex; gap: 14px; align-items: center; background: #fff7f3; border: 1px dashed #f0b8a6; border-radius: 12px; padding: 12px; }
.np-swish canvas { width: 140px; height: 140px; flex: 0 0 140px; image-rendering: pixelated; }
.np-swish__tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: flex-start; }
.np-swish__broj { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; }
.np-swish__hint { font-size: 12.5px; color: #6b7280; }
.np-lista { display: flex; flex-direction: column; }
.np-lista__naslov { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 4px 0 4px; }
.np-uplata { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #eef1f5; font-size: 13.5px; }
.np-uplata__ikona { width: 30px; height: 30px; border-radius: 50%; background: #f1f3f6; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; font-size: 13px; }
.np-uplata__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.np-uplata__tekst b { font-weight: 600; color: #1b1f26; }
.np-uplata__tekst small { color: #6b7280; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-uplata__iznos { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: #1b1f26; }
.np-uplata--storno { opacity: .75; }
.np-uplata--storno .np-uplata__iznos { color: #b3261e; }
.np-uplata--storno .np-uplata__ikona { background: #fbe4e2; color: #b3261e; }
.np-uplata .dv-btn--ikona { width: 30px; height: 30px; flex: 0 0 30px; }
.np-panel .np-dno { gap: 10px; align-items: center; flex-shrink: 0; border-top: 1px solid #eef1f5; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; }
.np-faktura-btn { white-space: nowrap; height: 44px; }
@media (max-width: 480px) { .np-nacin { grid-template-columns: repeat(3, 1fr); } .np-nacin-btn { font-size: 12px; padding: 9px 4px; } }

/* ===== Paginacija na Tabela (05.09.2026) ===== */
/* 09.09.2026 (Зоран): pager-ot e DOLU, po tabelata. Levo: „Visar X av Y" + kopcinja;
   desno: golemina (25 po strana). Tabela.js go rezervira negovoto mesto (_namestiVisinaPag)
   za да НЕ се прелева .view-wrap (glavata da ne se seche — starata zamka od gorniot pager). */
.dc-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 40px; padding: 4px 12px; border: 1px solid #eef1f5; border-radius: 10px; font-size: 13px; color: #6b7280; background: #fff; position: static; margin: 8px 0 0; }
/* Pager-ot e PO tabelata: se krie koga PREDHODNIOT brat (tabelata) e skrien (Klienti: kartichki/lista). */
.dc-pager[hidden], .dc-grid-table.d-none ~ .dc-pager, .dc-grid-table[hidden] ~ .dc-pager, .dc-grid-table[style*="display: none"] ~ .dc-pager, .dc-grid-table[style*="display:none"] ~ .dc-pager { display: none !important; }
.dc-pager__levo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dc-pager__info b { color: #1b1f26; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-pager__desno { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dc-pager__golemina { display: inline-flex; align-items: center; gap: 6px; }
.dc-pager__kopcinja { display: inline-flex; align-items: center; gap: 4px; }
.dc-pager__kopcinja[hidden] { display: none !important; }
.dc-pager__tocki { padding: 0 4px; color: #9aa3ad; }

/* M149 09.09.2026 (Зоран „зошто е оваа празнина долу?"): na DESKTOP nema gorna lenta —
   sodrzhinata pochnuva od top:0. No .view-wrap (calc(100vh-102px)) i .calendar-wrap
   (calc(100vh-72px)) rezerviraa visina za lenta shto ja NEMA → mrtov pojas dolu (do
   dnoto na sidebar-ot / „Logga ut"). Na desktop polni do dnoto (box-sizing:border-box
   → paddingot e vnatre). Mobile (≤992: -143px lenta + -90px dolna nav) ostanuva. */
@media screen and (min-width: 993px) {
  .view-wrap { height: 100vh; max-height: 100vh; }
  .calendar-wrap { height: 100vh; }
}

/* M153 11.09.2026 (Зоран „ова пак е нагнетено, не е проширенко... другите страни ги
   направи а ова не"): Statistik. `.dashboard-left` uste rezervirashe 320px/290px DESNO
   (`max-width:calc(100% - 320px)` vo main.css) za stariot `.dashboard-right` panel koj e
   TRGNAT nasekade (05.09 — „nikade desni koloni"). Rezultat: mrtov pojas desno. Sega polni
   cela shirina. (.dashboard-left se koristi SAMO na statistika.php.) */
.dashboard-out .dashboard-left { max-width: 100% !important; }

/* Fakturor — samo ona shto NE e kontrola (iznos, klip, kolona so broj). */
.kf-iznos { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kf-klip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; word-break: normal; overflow-wrap: anywhere; }
.kf-table .dc-grid-td:nth-child(2) { white-space: nowrap; }
.kf-iznos--minus { color: #b3261e; }
.kf-iznos small { font-weight: 400; color: #6b7280; }

/* Kund-pregled: tabelite se skrolaat horizontalno — kjeliite ne se kršat zbor-po-zbor. */
.client-table-section-preview .dc-grid-th, .client-table-section-preview .dc-grid-td { white-space: nowrap; }
.reserved-range--neaktiven, .day-task--neaktiven { opacity: .55; filter: grayscale(.6); }
.rez-status-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6e9ee; display: flex; flex-direction: column; gap: 10px; }
.rez-status-box--gore { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e6e9ee; }
/* P1.6: Kund → 10 koloni vo ~630px panel se stiskaa na 60px; sega horizontalen skrol */
.client-table-section-preview { overflow-x: auto; overflow-y: hidden; }
/* M141: sekoj red e poseben display:table — bez fixed layout kolonite „skokaat" po sodrzina.
   Site koloni imaat eksplicitna sirina (Klient.js), pa fixed gi porамnuva po redovi. */
.client-table-section-preview .dc-grid-header,
.client-table-section-preview .dc-grid-tr { table-layout: fixed; width: 100%; }
.client-table-section-preview > * { min-width: 960px; }
.rez-status-box__naslov { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.rez-status-chipovi .dv-chip { cursor: pointer; }
.rez-plateno-info { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 22px; }
.rez-plateno-info__suma { color: #6b7280; font-variant-numeric: tabular-nums; }
.rez-naplata-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 560px) {
  .np-saldo { grid-template-columns: 1fr 1fr; }
  .np-swish { flex-direction: column; align-items: stretch; }
  .np-swish canvas { align-self: center; }
}

/* ── P1.5: bejdz „obetalda" vo navigacijata ──────────────────────────────── */
.dv-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #fbe4e2; color: #b3261e; font-size: 11px; font-weight: 700; line-height: 1; } /* 05.09.2026: meka crvena (Зоран: „премногу силни бои") */
.dv-nav-badge[hidden] { display: none !important; }
.dv-nav-badge--dolna { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; min-width: 16px; height: 16px; font-size: 10px; box-shadow: 0 0 0 2px #fff; }

/* ── P1.1: sadmin → Дијагностика ─────────────────────────────────────────── */
.dv-dijag-meta { font-size: 12px; color: #6b7280; margin: 0 0 10px; }
.dv-dijag-blok { background: #fff; border: 1px solid var(--dv-linija, #e6e9ee); border-radius: var(--dv-radius, 8px); margin-bottom: 10px; padding: 0 14px; }
.dv-dijag-blok summary { cursor: pointer; padding: 10px 0; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; list-style: none; }
.dv-dijag-blok summary::-webkit-details-marker { display: none; }
.dv-dijag-blok summary::before { content: '▸'; color: #9aa3af; }
.dv-dijag-blok[open] summary::before { content: '▾'; }
.dv-dijag-blok__naslov { flex: 1; min-width: 0; }
.dv-dijag-sql { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: #6b7280; margin: 0 0 8px; overflow-wrap: anywhere; }
.dv-dijag-pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; background: #f3f5f8; padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 0 0 12px; white-space: pre; }
.dv-dijag-skrol { overflow-x: auto; margin: 0 0 12px; }
.dv-dijag-tabela { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.dv-dijag-tabela th, .dv-dijag-tabela td { text-align: left; padding: 4px 10px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.dv-dijag-tabela th { color: #6b7280; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }


/* =============================================================================
   05.09.2026 — OSNOVEN IZGLED (Зоран: „ако мислиш да најдеш поубав основен изглед и тоа")
   1) Manrope kako edno pismo za celiot panel (biz + sadmin); brojkite tabularni.
   2) Naslovi na stranici: 26px/700, brojachot mal i siv.
   3) Tabeli: zaglavje 11.5px/700 sivo so razmak, tenka linija, mek zebra + hover.
   4) Kruzhnite ikoni vo redovite (telefon/e-pošta/beleshka) — neutralno sivi.
   5) Fokus-prsten za tastatura.
   ============================================================================= */
body, button, input, select, textarea { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.dc-grid-td, .dc-grid-th, .np-panel, .dv-karta, .st-karta, .pl-zbir__k { font-variant-numeric: tabular-nums; }

body:has(.e-biz) .view-head h4 { font-size: 26px !important; font-weight: 700; letter-spacing: -.01em; color: var(--dv-tekst); white-space: nowrap; }
body:has(.e-biz) .view-head .btn-1-s { white-space: nowrap; }
/* Rodniot <select> ima padding 12px od main.css — so 40px visina Manrope se secheshe. */
body:has(.e-biz) .view-head select.select-box { padding-top: 0 !important; padding-bottom: 0 !important; font-size: 14px; line-height: 38px; }
body:has(.e-biz) .view-head .input-place input { font-size: 14px; }
body:has(.e-biz) .view-head h4 span { font-size: 17px; font-weight: 600; color: var(--dv-muted); margin-left: 4px; }

body:has(.e-biz) .dc-grid-th {
  font-size: 11.5px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dv-muted);
}
body:has(.e-biz) .dc-grid-header { border-bottom: 1px solid var(--dv-linija); }
body:has(.e-biz) .dc-grid-tr.even { background: #fafbfc; }
body:has(.e-biz) .dc-grid-tr:hover { background: #f3f7fd; }
body:has(.e-biz) .dc-grid-td { color: var(--dv-tekst); }
body:has(.e-biz) .dc-grid-td .bg-primary-20 { background: #f1f3f6 !important; }
body:has(.e-biz) .dc-grid-td .bg-primary-20 i { color: #5f6b7a; }
body:has(.e-biz) .dc-grid-td .bg-primary-20:hover { background: #f9e9f0 !important; }
body:has(.e-biz) .dc-grid-td .bg-primary-20:hover i { color: var(--dv-akcent); }
.us-ime { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.us-ime__ime { font-weight: 600; color: var(--dv-tekst); margin: 0; }
.us-ime__rbr { font-size: 11.5px; color: var(--dv-muted); font-weight: 600; letter-spacing: .02em; }
@media (max-width: 768px) { .us-ime { align-items: flex-end; } }

:focus-visible { outline: 2px solid var(--dv-akcent); outline-offset: 2px; border-radius: 4px; }
body:has(.e-biz) input:focus-visible, body:has(.e-biz) select:focus-visible, body:has(.e-biz) textarea:focus-visible { outline-offset: 0; }


/* =============================================================================
   DV ДИЗАЈН-СИСТЕМ — КОНТРОЛИ (05.09.2026, Зоран: „еден стил, централизирано")
   -----------------------------------------------------------------------------
   ЕДИНСТВЕНО место каде се дефинира изгледот на копчиња, чипови/филтри, полиња,
   селекти, икони-копчиња во редови, статус-пилули и пејџер — за biz и sadmin.
   Страниците САМО ги користат класите. Боја/висина/радиус се менуваат во
   :root токените горе (--dv-akcent, --dv-ctl-h, --dv-radius-sm …).
   Легаси-класи (btn-1-s, input-place, select-box, contact-box, .bb, .edit-btn)
   се МАПИРАНИ тука на истите правила — изгледаат исто без промена во секој фајл.

     копче         .dv-btn        [--meko | --ghost | --tiho | --danger | --aktiven | --sm | --lg | --ikona]
     чип / филтер  .dv-chip       [--aktiven (или .active од стар JS) | --sm]      во .dv-chipovi
     поле          .dv-vnes       input / select / textarea            [--sm]
     икона во ред  .dv-ikona-btn  [--glavna | --danger | --ok | --tiho]  во .dv-ikoni
     пилула        .dv-pil        [--ok | --warn | --danger | --info | --neutral | --akcent | --golem]
     бејџ          .dv-bejdz      [--ok | --warn | --danger | --info | --tivok]
     пејџер        .dc-pager      (Tabela.js; копчињата се .dv-btn --ghost --sm)

     ⚠ .dv-pil и .dv-bejdz НЕ се исто (M204, измерено — двете се живи):
       .dv-pil   = СТАТУС-пилула: 10.5px, ВЕРЗАЛ, letter-spacing. Кажува состојба
                   на запис („ПЛАТЕНО", „ОТКАЖАН"). Жива во biz екраните.
       .dv-bejdz = ознака-бејџ: 11.5px, мали букви, inline-flex со gap за икона.
                   Носи факт/етикета на картичка („Конфигуриран · база", „webhook").
                   Жива во sadmin картичките. Не ги мешај и не воведувај трета.
   ============================================================================= */

/* ── Копчиња (основата .dv-btn е погоре; тука варијантите што недостасуваа) ── */
.dv-btn--tiho { background: var(--dv-povrshina); color: #4a5a68; border: 1px solid var(--dv-linija); }
.dv-btn--tiho:hover { background: #e9edf2; color: var(--dv-tekst); box-shadow: none; }
.dv-btn--ghost.dv-btn--danger { color: var(--dv-danger); }
.dv-btn--aktiven, .dv-btn--aktiven:hover { background: var(--dv-akcent-mek); border-color: var(--dv-akcent-ram); color: var(--dv-akcent); box-shadow: none; }
.dv-btn--lg { height: 44px; padding: 0 22px; font-size: 14px; }
.dv-btn i { font-size: 13px; }
.dv-btn:disabled, .dv-btn[disabled] { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.dv-btn:disabled:hover { background: inherit; }
.dv-btn--ghost:disabled:hover { background: var(--dv-karta); color: #33475b; }
/* Легаси: btn-1-s во biz = меко копче; .w-100 (Spara во форми) = полно. Дефинирано порано (M81/M92). */

/* ── Чипови / филтри ─────────────────────────────────────────────────────── */
.dv-chip--aktiven, .dv-chip.active, .dv-chip.aktiven { border-color: var(--dv-akcent-ram); background: var(--dv-akcent-mek); color: var(--dv-akcent); }
.dv-chip--sm { height: var(--dv-ctl-h-sm); padding: 0 11px; font-size: 13px; }
.dv-chip i { font-size: 12px; color: var(--dv-muted); }
.dv-chip--aktiven i, .dv-chip.active i { color: var(--dv-akcent); }
/* Ред со чипови што се лизга (телефон): без прелевање во нов ред. */
.dv-chipovi--lizgaj { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.dv-chipovi--lizgaj::-webkit-scrollbar { display: none; }
.dv-chipovi--lizgaj .dv-chip { flex: 0 0 auto; width: auto !important; }

/* ── Полиња: input / select / textarea ──────────────────────────────────── */
.dv-vnes,
body:has(.e-biz) .view-head .input-place input,
body:has(.e-biz) .view-head select.select-box,
body:has(.e-biz) .pl-filtri select,
body:has(.e-biz) .st-filtri input,
.dc-pager__golemina select {
  box-sizing: border-box; height: var(--dv-ctl-h); padding: 0 12px;
  border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  background: #fff; color: var(--dv-tekst); font-size: 14px; font-family: inherit; font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
.dv-vnes:focus,
body:has(.e-biz) .view-head .input-place input:focus,
body:has(.e-biz) .view-head select.select-box:focus,
body:has(.e-biz) .pl-filtri select:focus,
body:has(.e-biz) .st-filtri input:focus,
.dc-pager__golemina select:focus { outline: 0; border-color: var(--dv-akcent); box-shadow: 0 0 0 3px var(--dv-akcent-bled); }
.dv-vnes::placeholder, body:has(.e-biz) .view-head .input-place input::placeholder { color: var(--dv-muted); font-weight: 400; }
.dv-vnes--sm, .dc-pager__golemina select { height: var(--dv-ctl-h-sm); font-size: 13px; padding: 0 8px; }
select.dv-vnes, body:has(.e-biz) .view-head select.select-box, body:has(.e-biz) .pl-filtri select, .dc-pager__golemina select {
  padding-right: 32px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8794' d='M2.3 4.3a1 1 0 0 1 1.4 0L6 6.6l2.3-2.3a1 1 0 1 1 1.4 1.4l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
body:has(.e-biz) .view-head select.select-box { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 38px; box-shadow: none; width: auto; min-width: 150px; }
textarea.dv-vnes { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.dv-vnes[readonly] { cursor: pointer; }
.dv-vnes:disabled { background: var(--dv-povrshina); color: var(--dv-muted); }
/* Легаси форми со лебдечка етикета (.contact-box): ист раб, ист радиус, ист фокус. */
.contact-box input, .contact-box textarea, .contact-box select {
  border-color: var(--dv-linija) !important; border-radius: var(--dv-radius-sm) !important; font-family: inherit;
}
.contact-box input:focus, .contact-box textarea:focus, .contact-box select:focus {
  outline: 0; border-color: var(--dv-akcent) !important; box-shadow: 0 0 0 3px var(--dv-akcent-bled);
}

/* ── Икони-копчиња во редови/картички ───────────────────────────────────── */
.dv-ikoni, .pl-akcii, .kf-akcii { display: flex; gap: 6px; align-items: center; }
.dv-ikona-btn, .pl-akcii button, .pl-akcii .pl-akcija--ikona, .kf-akcija,
body:has(.e-biz) .dc-grid-td .edit-btn, body:has(.e-biz) .dc-grid-td .delete-btn, body:has(.e-biz) .dc-grid-td .preview-btn, body:has(.e-biz) .dc-grid-td .add-cart-btn {
  width: var(--dv-ctl-h-sm) !important; height: var(--dv-ctl-h-sm) !important; min-width: 0; padding: 0 !important; margin: 0 !important;
  border-radius: var(--dv-radius-sm) !important; border: 1px solid var(--dv-linija) !important;
  background: #fff !important; color: #5f6b7a; box-shadow: none !important;
  display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer;
  font-size: 13px; line-height: 1; text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
.dv-ikona-btn i, .pl-akcii button i, .kf-akcija i,
body:has(.e-biz) .dc-grid-td .edit-btn i, body:has(.e-biz) .dc-grid-td .delete-btn i, body:has(.e-biz) .dc-grid-td .preview-btn i { color: inherit !important; font-size: 13px; }
.dv-ikona-btn:hover, .pl-akcii button:hover, .kf-akcija:hover,
body:has(.e-biz) .dc-grid-td .edit-btn:hover, body:has(.e-biz) .dc-grid-td .preview-btn:hover { border-color: var(--dv-akcent) !important; color: var(--dv-akcent); background: #f3f7fd !important; }
.dv-ikona-btn--glavna, .pl-akcii .pl-akcija--glavna, .kf-akcija--glavna { background: var(--dv-akcent-mek) !important; border-color: transparent !important; color: var(--dv-akcent); }
.dv-ikona-btn--glavna:hover, .pl-akcii .pl-akcija--glavna:hover, .kf-akcija--glavna:hover { background: var(--dv-akcent-mek-tem) !important; border-color: transparent !important; }
.dv-ikona-btn--danger, .pl-akcii .pl-akcija--danger, .kf-akcija--danger, body:has(.e-biz) .dc-grid-td .delete-btn { color: #b3261e; }
.dv-ikona-btn--danger:hover, .pl-akcii .pl-akcija--danger:hover, .kf-akcija--danger:hover, body:has(.e-biz) .dc-grid-td .delete-btn:hover { border-color: #e6b3ad !important; background: #fbe4e2 !important; color: #b3261e; }
.dv-ikona-btn--ok { color: var(--dv-ok); }
.dv-ikona-btn--ok:hover { border-color: #b7dfc0 !important; background: var(--dv-ok-bg) !important; color: var(--dv-ok); }
/* Тивка (телефон / е-пошта / белешка): без рамка, неутрална подлога. */
.dv-ikona-btn--tiho { background: var(--dv-tiho) !important; border-color: transparent !important; }
.dv-ikona-btn--tiho:hover { background: var(--dv-akcent-mek) !important; border-color: transparent !important; color: var(--dv-akcent); }
.dv-ikona-btn.opacity-5 { opacity: .4; }
.dv-ikona-btn:disabled, .dv-ikona-btn[disabled] { opacity: .45; cursor: default; }
@media (max-width: 768px) { .mobile-card-list .dv-ikoni, .dv-ikoni--desno { justify-content: flex-end; } }

/* ── Статус-пилули ──────────────────────────────────────────────────────── */
.dv-pil, .bb, .pl-tip {   /* M205: `.kf-status-pill` trgnat — klasata ne se dodava nikade */
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; line-height: 1.4; vertical-align: middle; white-space: nowrap;
  background: var(--dv-tiho); color: #4b5563;
}
.dv-pil--ok, .bb--plateno, .kf-status-3 { background: var(--dv-ok-bg); color: var(--dv-ok); }
.dv-pil--warn, .bb--delumno, .bb--nacrt, .kf-status-1 { background: #fff1d0; color: var(--dv-warn); } /* M204: istoto mastilo kako tokenot — nema vtora lista */
.dv-pil--danger, .bb--neplateno, .kf-tip-2 { background: #fbe4e2; color: #b3261e; }
.dv-pil--info, .bb--ispratena, .kf-status-2, .pl-tip--faktura { background: var(--dv-info-bg); color: var(--dv-info); }
.dv-pil--neutral, .bb--otkazan, .bb--nepojaven, .kf-status-4 { background: #e5e7eb; color: #4b5563; }
.dv-pil--akcent { background: var(--dv-akcent-mek); color: var(--dv-akcent); }
.dv-pil--golem { font-size: 12px; padding: 4px 10px; }

/* ── Guard-ovi i dopolnuvanja (06.09.2026) ─────────────────────────────── */
/* d-none mora da pobedi nad display:inline-flex !important na ikona-kopcheto. */
.dv-ikona-btn.d-none, body:has(.e-biz) .dc-grid-td .dv-ikona-btn.d-none, body:has(.e-biz) .dc-grid-td .add-cart-btn.d-none { display: none !important; }
/* Polinjata vo paneli/formi se polna shirina. */
.np-panel .dv-vnes, .dv-pole .dv-vnes, .contact-box .dv-vnes { width: 100%; }
/* Legaci paleta od main.css (--primary-color = RGB triplet, porano kafeava 90, 71, 58) → DV akcent.
   Ova gi usoglasuva SITE stari komponenti (kartichki, kruzhni ikoni, progress, text-primary-col)
   so sinata bez da se prepishuvaat. Kalendarot koristi svoi reserved-range boi. */
body { --primary-color: 21, 101, 192; --primary-color-dark: 16, 79, 150; }


/* =============================================================================
   ЈАВНИ СТРАНИЦИ (06.09.2026, Зоран: „цел систем треба да биде еднолик")
   Најава, кундпортал, demo, ceni, правни, Stripe. Истите токени и компоненти;
   легаси btn-1-s/contact-box важат глобално (дефинирани погоре и тука).
   ============================================================================= */
.btn-1-s { background: var(--dv-akcent-bled); color: var(--dv-akcent); border-radius: var(--dv-radius-sm); font-weight: 600; font-size: 13.5px; min-height: var(--dv-ctl-h); box-sizing: border-box; transition: background .15s; }
.btn-1-s:hover { background: rgba(181, 65, 107, .17); }
.btn-1-s span, .btn-1-s i { color: var(--dv-akcent); }
.btn-1-s.w-100 { background: var(--dv-kopche); color: #fff; }
.btn-1-s.w-100:hover { background: var(--dv-kopche-tem); }
.btn-1-s.w-100 span, .btn-1-s.w-100 i { color: #fff !important; }

/* Најава (index.php) и demo — истата картичка. */
.login-body { background: var(--dv-povrshina) !important; }
.login-body .login-form-in { border: 1px solid var(--dv-linija); border-radius: var(--dv-radius) !important; box-shadow: var(--dv-senka) !important; }
.login-body .login-form-in h4 { font-size: 26px !important; font-weight: 700; letter-spacing: -.01em; color: var(--dv-tekst); }
.login-body .btn-1-s.w-100 { height: 46px; padding-top: 0 !important; padding-bottom: 0 !important; }
.login-body .error-msg p, .login-body #errorPoraka { color: var(--dv-danger); font-size: 13.5px; }

/* flatpickr (кундпортал) — ист изглед како нашиот пикер. */
.flatpickr-calendar { font-family: inherit; border-radius: 12px; border: 1px solid var(--dv-linija); box-shadow: 0 14px 36px rgba(12, 26, 33, .16); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-day { border-radius: 8px; font-weight: 500; color: var(--dv-tekst); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--dv-tiho); border-color: var(--dv-tiho); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--dv-akcent); border-color: var(--dv-akcent); color: #fff; }
.flatpickr-day.today { border-color: var(--dv-akcent); color: var(--dv-akcent); font-weight: 700; }
.flatpickr-day.today:hover { background: var(--dv-tiho); color: var(--dv-akcent); border-color: var(--dv-akcent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #b9c1c9; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year { font-weight: 700; color: var(--dv-tekst); }
span.flatpickr-weekday { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dv-muted); font-weight: 700; }

/* Dneven kalendar: minati slotovi — bez „+", bez pokazhuvach (06.09.2026). */
.calendar-data-child.minato:after { display: none !important; }
.calendar-data-child.minato { cursor: default; background: rgba(36, 49, 61, .022); }
.calendar-data-child:not(.reserved):not(.minato) { cursor: pointer; }

/* ── Ш1 (PLAN_SHABLONI): traka „ШАБЛОН" vo panelot na shablon-komitent ─────────
   Fiksna, tenka, gore-centar; ne prima klikovi (pointer-events none) za da ne
   pretsi na kontrolite vo glavata. Boja: okér (razlichna od akcent/danger). */
.dv-shablon-lenta {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    z-index: 9990; pointer-events: none;
    height: 22px; padding: 0 14px; border-radius: 0 0 10px 10px;
    background: #b7791f; color: #fff;
    font: 700 11px/22px Manrope, system-ui, sans-serif;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.dv-shablon-lenta i { margin-right: 4px; font-size: 10px; }
@media (max-width: 860px) { .dv-shablon-lenta { font-size: 10px; height: 20px; line-height: 20px; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; } }

/* ── Ш2 (PLAN_SHABLONI): tab Шаблони ─────────────────────────────────────────
   Shablon od DISTRIBUTER = okér podloga (Зоран: „јасно означени кои се од
   дистрибутер, кои се од нас"); platformskiot ostanuva bel. */
.dv-bejdz--info   { background: var(--dv-info-bg);   color: var(--dv-info); }
.dv-kartichka--dist { background: #fff8e8; border-color: #f0d9a0; }
.dv-kartichka--dist:hover { border-color: #d9b45a; }
.dv-kartichka--dist .dv-fakt { background: #fdf1d6; }
.dv-oddel--sh + .dv-oddel--sh { margin-top: 6px; }
.dv-kartichka__id { word-break: break-all; }

/* ── Д3 (PLAN_DORABOTKI): tiketi MP ↔ platforma — nishka vo sidebar ─────────── */
.tik-poraki { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow-y: auto; padding: 4px 2px; }
.tik-poraka { max-width: 88%; align-self: flex-start; background: var(--dv-povrshina); border: 1px solid var(--dv-linija); border-radius: 12px 12px 12px 4px; padding: 8px 12px; }
.tik-poraka--nasa { align-self: flex-end; background: var(--dv-akcent-bled); border-color: var(--dv-akcent-ram, #c9dcf5); border-radius: 12px 12px 4px 12px; }
.tik-poraka__glava { font-size: 11.5px; color: var(--dv-muted); margin-bottom: 3px; }
.tik-poraka__glava span { opacity: .8; }
.tik-poraka__tekst { font-size: 14px; line-height: 1.45; color: var(--dv-tekst); overflow-wrap: anywhere; }
.sadmin-tab #vkupnoBrojTiketi.text-red { color: var(--dv-danger); }

/* ── Д8 (07.09.2026): globalen PAZAR vo hederot na sadmin (zaminja, kako DigitalMeni) ─────
   Eden izbor za site listi. Na telefon: samo znameto. Account = samo avatar (bez ime/zapchanik). */
.dv-pazar { position: relative; margin-right: 10px; }
.dv-pazar__btn {
  display: inline-flex; align-items: center; gap: 8px; height: var(--dv-ctl-h);
  padding: 0 12px 0 10px; border: 1px solid var(--dv-linija); border-radius: var(--dv-radius-sm);
  background: #fff; color: var(--dv-tekst); font: 600 14px Manrope, system-ui, sans-serif; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.dv-pazar__btn:hover, .dv-pazar.is-open .dv-pazar__btn { border-color: var(--dv-akcent-ram, #c9dcf5); box-shadow: var(--dv-senka); }
.dv-pazar__zname { font-size: 19px; line-height: 1; }
.dv-pazar__karet { font-size: 10px; opacity: .6; transition: transform .2s; }
.dv-pazar.is-open .dv-pazar__karet { transform: rotate(180deg); }
.dv-pazar__meni {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 9600; min-width: 230px;
  padding: 6px; background: #fff; border: 1px solid var(--dv-linija); border-radius: var(--dv-radius);
  box-shadow: 0 12px 32px rgba(12, 26, 33, .16);
}
.dv-pazar.is-open .dv-pazar__meni { display: block; }
.dv-pazar__stavka {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: var(--dv-tekst); font: 600 13.5px Manrope, system-ui, sans-serif;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.dv-pazar__stavka small { margin-left: auto; font-weight: 600; font-size: 11px; color: var(--dv-muted); letter-spacing: .04em; }
.dv-pazar__stavka:hover { background: var(--dv-povrshina); }
.dv-pazar__stavka.is-active { background: var(--dv-akcent-bled); border-color: var(--dv-akcent-ram, #c9dcf5); color: var(--dv-akcent); }
.dv-pazar__stavka--tudj { opacity: .45; }
.e-sadmin .top-bar-user-name { display: none !important; }
.e-sadmin .user-drop > button { display: none !important; }
.e-sadmin .user-drop { padding: 0 4px; }
@media (max-width: 780px) {
  .dv-pazar__btn { padding: 0 8px; gap: 5px; }
  .dv-pazar__ime { display: none; }
}
/* Д8/M204: filtrite po pazar vo tabovite se TRGNATI — pazarot e globalen (hederot).
   Porano tuka stoeshe `#paketiPazarFilter, #addoniPazarFilter { display:none !important }`
   — CSS-krpa vrz markup shto ostana zhiv. Sega samite select-i se izvadeni od
   stranici/sadmin.php, pa i krpata e izlishna. */

/* ── МП1: chek-lista na domen (sadmin → Домеини, sidebar) ── */
.dv-cek{display:flex;flex-direction:column;gap:6px;margin:8px 0 0}
.dv-cek__red{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4}
.dv-cek__ikona{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:0 0 18px;margin-top:1px;background:#e5e8ee;color:#666}
.dv-cek__ikona--ok{background:#dcefe2;color:#1b7a3d}
.dv-cek__ikona--ne{background:#fbe3e0;color:#b42318}
.dv-cek__ime{font-weight:600;min-width:130px;flex:0 0 auto}
.dv-cek__tekst{opacity:.8;word-break:break-word}
.dv-cek-linkovi{display:flex;flex-wrap:wrap;gap:6px}
.dv-cek-linkovi .dv-chip{text-decoration:none}
.dv-oddel--warn{border-color:#f0c36d;background:#fff8e6}

/* ── M134: форми во дизајн-системот (етикета НАД полето) + поширок панел ── */
.dv-panel--shirok { }
@media (min-width: 769px) { .dv-panel--shirok.dv-panel--otvoren { width: 620px; max-width: 96vw; } }
.dv-forma .dv-polje { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dv-forma .dv-polje > label { font-size: 12.5px; font-weight: 700; color: var(--dv-tekst); letter-spacing: .01em; }
.dv-forma .dv-hint { font-size: 12px; line-height: 1.5; color: var(--dv-muted); margin: 2px 0 14px; }
.dv-forma .dv-polje .dv-hint { margin: 0; }
.dv-forma .dv-red2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .dv-forma .dv-red2 { grid-template-columns: 1fr; gap: 0; } }
.dv-vnes--boja { padding: 4px; height: var(--dv-ctl-h); cursor: pointer; }
/* Јазици како чипови со чекбокс — активниот е обоен, без гол квадрат. */
.dv-chipovi--vnes { flex-wrap: wrap; }
.dv-chip--cek { cursor: pointer; user-select: none; }
.dv-chip--cek input { position: absolute; opacity: 0; width: 0; height: 0; }
.dv-chip--cek:has(input:checked) { background: var(--dv-akcent-mek); border-color: var(--dv-akcent-ram); color: var(--dv-akcent); font-weight: 700; }
.dv-chip--cek:has(input:focus-visible) { outline: 2px solid var(--dv-akcent); outline-offset: 2px; }

/* Картичка на домен: помирна лента badge-ови, полн текст на фактите. */
.dv-kartichka__fakti .dv-fakt { overflow: hidden; text-overflow: ellipsis; }

/* M146: select со видлива стрелка (caret) — потпис-модал + мени-уредник на формулари.
   Глобалниот reset става appearance:none па нативната стрелка исчезнува; враќаме своја. */
.formular-izbor,
.fm-sidebar select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  padding-right: 34px !important; cursor: pointer;
}

/* M147: SITE panel-tabeli — sodrzhinata LEVO (osven .dc-desno). Nadvladuva i .styled-table{center}
   od main.css I klasa-centriranja vo customElement-ite (us-ime, kf-*, pl-*, itn) preku descendant `*`.
   Brojki/pari/akcii → .dc-desno (DESNO). */
body:has(.e-biz) .dc-grid-th:not(.dc-desno),
body:has(.e-biz) .dc-grid-td:not(.dc-desno),
body:has(.e-biz) .dc-grid-td:not(.dc-desno) * { text-align: left; }
body:has(.e-biz) .dc-grid-th:not(.dc-desno) > span { justify-content: flex-start; }
/* Flex-obvivki vo kelijite (us-ime, d-flex, td-content...) centriraat preku align-items/justify-content —
   text-align ne gi fajkja; forsiraj LEVO (flex-start). */
body:has(.e-biz) .dc-grid-td:not(.dc-desno) > * { align-items: flex-start !important; justify-content: flex-start !important; }
/* .dc-desno: desno-poramnet naslov + kelii (tabular figures); ikoni-grupi do desniot rab. */
.dc-grid-td.dc-desno, .dc-grid-th.dc-desno,
.dc-grid-td.dc-desno * { text-align: right; }
.dc-grid-td.dc-desno { font-variant-numeric: tabular-nums; }
.dc-grid-td.dc-desno .dv-ikoni,
.dc-grid-td.dc-desno > .d-flex { justify-content: flex-end !important; }
.dc-grid-th.dc-desno > span { justify-content: flex-end; }
/* M148: edna flex-kolona (ime/opis, BEZ sirina) go vpiva vishokot → strukturnite (cena/vreme/akcii)
   ostanuvaat zbieni, PRIS ne „lebdi". Tabelata polni po shirina (bez kapa — kapata pravеshe grda
   prazna desna margina sprema shirokite naslov/prebaruvanje). */
/* Prazno-za-nishto ikoni (telefon/email/note koga nema) — POJASNO BLEDO za da se razlikuvaat od polni. */
body:has(.e-biz) .dc-grid-td .ikona-prazno { opacity: .18 !important; }
/* Indikator-ikoni vo tabela (telefon/email/note) — BEZ grda siva kutija; chist ikona so mek akcent. */
body:has(.e-biz) .dc-grid-td .dv-ikona-btn--tiho {
  background: transparent !important; border-color: transparent !important;
  color: var(--dv-muted); width: 34px !important; height: 34px !important;
}
body:has(.e-biz) .dc-grid-td .dv-ikona-btn--tiho:hover { background: var(--dv-akcent-mek) !important; color: var(--dv-akcent); }

/* ═══════════════════════════════════════════════════════════════════════════
   M164 (Zoran, 11.09.2026) — smetkovodni kopchinja vo gornata lenta.
   Zoran: „десктопот пак има горе запчаник, долу инсталлингар, внатре
   инсталлингар, логаут и долу логаут… вака е безвезе."
   Tochno taka bese: na >=1024px levata kolona vekje gi ima OBETE („Inställningar"
   vo listata + „Logga ut" vo podnozhjeto), pa zapchanikot gore beshe 100% duplikat.
   Sega: nad 1024px ovie DVE kopchinja se skrieni; pod 1024px (kade levata kolona
   e display:none) tie se EDINSTVENIOT vlez — i toa DIREKTNO, bez popap.
   Odjavata e namerno posledna => najdesno gore, kako shto e pobarano.
   Zabeleshka: sadmin i ponatamu go dobiva ⚙ popapot — tamu sedat Manual i
   jazik-pickerot, koi nemaat drugo mesto.
   ═════════════════════════════════════════════════════════════════════════ */
.nav-smetka {
  width: 40px; height: 40px;
  margin-left: 6px;
  border-radius: 10px;
  color: var(--dv-muted, #667);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-smetka:hover,
.nav-smetka:focus-visible { background: var(--dv-akcent-mek, #eaf4fb); color: var(--dv-akcent, #108EC6); }
.nav-smetka:focus-visible { outline: 2px solid var(--dv-akcent, #108EC6); outline-offset: 2px; }

/* Odjavata e destruktivna — mek crven akcent za da ne se kliknuva po navika. */
.nav-smetka--odjava:hover,
.nav-smetka--odjava:focus-visible { background: #fdecea; color: #c62828; }

@media (min-width: 1024px) {
  /* Levata kolona gi nosi obete — gore bi bile duplikat. */
  .nav-smetka { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   M205 — poslednata FA zavisnost na panelot kje bi bila `css/main.css`:
   `.color-list .color::before { content:"\f00c"; font-family:"Font Awesome 5 Free" }`
   (kvachka na izbranata boja vo piker-popapot). main.css e kompajliran SASS
   artefakt i TRAJNO NE se pipa, pa istata kvachka se vrakja ottuka: ista
   specifichnost (0,4,1) + dv.css doagja POSLE main.css vo <head>, pa pobeduva.
   Glifot e istiot fa-check od FA 5.9.0, samo kako maska.
   ═════════════════════════════════════════════════════════════════════════ */
.popup-wrap .popup-content .color-list .color::before {
  font-family: inherit;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M173.898 8.5957l-166.4 166.4c-9.99707 9.99707 -9.99707 26.2061 0 36.2041l36.2031 36.2041c9.99707 9.99805 26.207 9.99805 36.2041 0l112.095 -112.095l240.095 240.095c9.99707 9.99707 26.207 9.99707 36.2041 0l36.2031 -36.2041 c9.99707 -9.99707 9.99707 -26.2061 0 -36.2041l-294.4 -294.401c-9.99805 -9.99707 -26.207 -9.99707 -36.2031 0.000976562z'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='translate(0,448) scale(1,-1)' d='M173.898 8.5957l-166.4 166.4c-9.99707 9.99707 -9.99707 26.2061 0 36.2041l36.2031 36.2041c9.99707 9.99805 26.207 9.99805 36.2041 0l112.095 -112.095l240.095 240.095c9.99707 9.99707 26.207 9.99707 36.2041 0l36.2031 -36.2041 c9.99707 -9.99707 9.99707 -26.2061 0 -36.2041l-294.4 -294.401c-9.99805 -9.99707 -26.207 -9.99707 -36.2031 0.000976562z'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}