/* =============================================================================
   distributer.css — PANEL NA MARKET PARTNER (MP) · Digital Vivio
   -----------------------------------------------------------------------------
   Shto e ova: EDINSTVENIOT stylesheet na distributer.php. Ja ZAMENUVA inline
   <style> blokot shto do sega zhiveeshe vo glavata na taa strana (red ~302–381).
   Vo PHP-to ostanuva SAMO edna linija stil — mapiranjeto na `--akcent`, zatoa
   shto toa se interpolira po domen od Brend (`:root { --akcent: $akcent }`).

   Opseg: SITE pravila tuka se `.dp-*` (dp = distributer-panel) i se PRIVATNI za
   distributer.php. Nikoja druga strana ne gi koristi — ako nekoja klasa ti treba
   i drugde, mestoto ì e vo dv.css, ne ovde.

   Boi/visini/radiusi: NE se pishuvaat tuka. Se trosat `--dv-*` tokenite od
   dv.css (:root, redovi 20–58) za da ostane panelot vo sinhron so dizajn-
   sistemot — promena na akcentot vo dv.css se gleda i ovde bez da se dopre ovoj
   fajl. Legasi imenata (`--linija`, `--muted`, `--danger`, `--dp-radius`,
   `--dp-ctl`) se ZADRZHANI kako mostovi kon dv-tokenite, zashto postoeckiot
   markup gi konsumira; `--akcent` sekogash se chita so fallback
   `var(--akcent, var(--dv-akcent))` za da NE go pregazi vrednosta od PHP bez
   ogled na redosledot na kaskadata.

   Struktura: shell (strana + lenta + panel + dolna nav) → komponenti (kpi, red,
   badge, forma, tiketi) → najava → vodich → responzivnost → a11y.
   Prekrshna tochka: 860px (pod nea levata kolona se krie, se pojavuva dolnata).
   ============================================================================= */

/* ── Most kon dv-tokenite (legasi imenja shto markupot veke gi koristi) ──── */
:root {
  --linija:     var(--dv-linija);
  --muted:      var(--dv-muted);
  --danger:     var(--dv-danger);
  --dp-radius:  var(--dv-radius-sm);
  --dp-ctl:     var(--dv-ctl-h);

  /* EDNA visina za brend-blokot i za gornata lenta. Ako se raziduvaat, dvete
     dolni linii (na kolonata i na lentata) se chitaat kako skrshena linija.
     M192: 64 → 72. Pod 72 sodrzhinata na lentata (naslov 24 + podnaslov 17 +
     2 margina + 24 pading = 67) ja probivashe kutijata, pa moravshe TOCHNA
     visina. Nad 72 i dvete strani (lenta 67, brend 40) se pod podot, pa
     `min-height` e bezbeden na DVETE i linijata nikogash ne se krshi. */
  --dp-lenta-h: 72px;
  --dp-strana-w: 260px;

  /* Radius na stavka vo meni: dv.css ima 8 i 12; 8 e kockesto na 232px pilula,
     12 e balonesto — 10 e vistinskoto. */
  --dp-nav-r: 10px;
  /* Lentata e vo TONOT na povrshinata, ne belo — belo vrz #f4f6f9 e vidlivo
     druga ramnina. Token, za da ima EDNO mesto pri temna tema. */
  --dp-lenta-bg: rgba(244, 246, 249, .88);

  /* M196: poslednite tvrdi boi stanuvaat tokeni — bez niv temnata tema bi ostavila
     chetiri svetli ostrovi (moj klon, kreden-kartichka, jazik-bejdz, sloj na vodichot). */
  --dp-moj-bg: #fff8e8;        --dp-moj-ram: #f0d9a0;
  --dp-kreden-bg: #fffaf0;     --dp-kreden-ram: #b7791f;
  --dp-jazik-bg: #eef1f5;      --dp-jazik-tekst: #5b6b7b;
  --dp-sloj: rgba(15, 28, 36, .45);
  --dp-sloj-senka: 0 24px 64px rgba(0, 0, 0, .28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   M196 — TEMNA TEMA (Zoran: „перфекција во секој поглед").
   SAMO vo ovoj fajl: `css/distributer.css` go chita EDINSTVENO `distributer.php`,
   pa prepishuvanjeto na `--dv-*` tokenite tuka NE go zasega ostatokot od
   aplikacijata (dv.css go delat 13 strani). Panelot koristi 29 dv-tokeni; shest se
   geometrija i ne se menuvaat, pa ostanuvaat ~23 boi — celata tema e EDEN blok.
   EDEN selektor (`html[data-theme="dark"]`), ne i media-query: skriptata vo <head>
   sekogash go stampuva atributot (od localStorage, inache od `prefers-color-scheme`),
   pa nema dve mesta shto mozat da se razidat.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  /* Akcentot vo temno SVETLI — malinovata na svetla podloga e prekonstrasna na temna. */
  --dv-akcent: #e884ab;        --dv-akcent-tem: #d16b94;
  --dv-kopche: #c2537c;        --dv-kopche-tem: #d2678d;   /* hover SVETLI, ne temni */
  --dv-povrshina: #14181d;     --dv-karta: #1c2228;
  --dv-linija: rgba(232, 200, 214, .14);
  --dv-tekst: #e9edf2;         --dv-muted: #98a4b1;
  --dv-tiho: #232a31;          --dv-tiho-tem: #2c343c;
  --dv-akcent-bled: rgba(232, 132, 171, .14);
  --dv-akcent-mek: #3a2330;    --dv-akcent-mek-tem: #472a3a;
  --dv-akcent-ram: rgba(232, 132, 171, .38);
  --dv-ok: #4ade80;            --dv-ok-bg: rgba(74, 222, 128, .13);
  --dv-warn: #fbbf24;          --dv-warn-bg: rgba(251, 191, 36, .13);
  --dv-danger: #f87171;        --dv-danger-bg: rgba(248, 113, 113, .13);
  --dv-info: #7cc0f8;          --dv-info-bg: rgba(124, 192, 248, .13);
  --dv-senka: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 28px rgba(0, 0, 0, .45);
  --dv-senka-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 36px rgba(0, 0, 0, .55);

  --dp-lenta-bg: rgba(20, 24, 29, .90);
  --dp-moj-bg: #2b2419;        --dp-moj-ram: #5a4a22;
  --dp-kreden-bg: #2a2317;     --dp-kreden-ram: #7a5a1e;
  --dp-jazik-bg: #2a323a;      --dp-jazik-tekst: #9fb0bd;
  --dp-sloj: rgba(0, 0, 0, .62);
  --dp-sloj-senka: 0 24px 64px rgba(0, 0, 0, .6);

  /* `--akcent` doagja od PHP (bojata na brendot po domen, distributer.php) i vo
     temno mozhe da padne pod kontrast. Vo temna tema sekogash gi predava tokenite. */
  --akcent: var(--dv-akcent);
}
/* Lentata za kolachinja ima sopstven fajl (css/cookie-consent.css, spodelen so
   javnite strani) — tuka se prepishuva SAMO vnatre vo panelot, za da ne ostane
   svetol pravoagolnik so nechitliv tekst vrz temnata strana. */
html[data-theme="dark"] .cookie-consent__inner {
  background: var(--dv-karta); border: 1px solid var(--dv-linija); box-shadow: var(--dv-senka);
}
html[data-theme="dark"] .cookie-consent__title { color: var(--dv-tekst); }
html[data-theme="dark"] .cookie-consent__text  { color: var(--dv-muted); }
html[data-theme="dark"] .cookie-consent__text a { color: var(--dv-akcent); }
html[data-theme="dark"] .cookie-consent__btn--ghost {
  background: var(--dv-tiho); border-color: var(--dv-linija); color: var(--dv-tekst);
}
html[data-theme="dark"] .cookie-consent__btn--solid { background: var(--dv-kopche); color: #fff; }

/* Logoto na brendot e napraveno za svetla podloga. */
html[data-theme="dark"] .dp-strana__znak,
html[data-theme="dark"] .dp-logo { filter: brightness(1.12); }
/* Kalendarot na flatpickr ima sopstveni boi. */
html[data-theme="dark"] .flatpickr-calendar {
  background: var(--dv-karta); color: var(--dv-tekst);
  border: 1px solid var(--dv-linija); box-shadow: var(--dv-senka);
}
html[data-theme="dark"] .flatpickr-day { color: var(--dv-tekst); }
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--dv-muted); }
html[data-theme="dark"] .flatpickr-day:hover { background: var(--dv-tiho); border-color: var(--dv-tiho); }
html[data-theme="dark"] .flatpickr-day.selected { background: var(--dv-kopche); border-color: var(--dv-kopche); color: #fff; }
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] span.flatpickr-weekday { background: var(--dv-karta); color: var(--dv-muted); fill: var(--dv-tekst); }
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-monthDropdown-months { color: var(--dv-tekst); background: var(--dv-karta); }

/* ── Baza ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--dv-povrshina);
  color: var(--dv-tekst);
  overflow-x: hidden;
}

a { color: var(--akcent, var(--dv-akcent)); text-decoration: none; }

/* =============================================================================
   SHELL
   ============================================================================= */
.dp-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* ── Leva kolona ──────────────────────────────────────────────────────────── */
.dp-strana {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--dp-strana-w);
  display: flex; flex-direction: column;
  background: var(--dv-karta);
  border-right: 1px solid var(--linija);
}

.dp-strana__brend {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--dp-lenta-h); flex: 0 0 auto;
  padding: 0 18px;
  border-bottom: 1px solid var(--linija);
  color: inherit; text-decoration: none;
}
/* M192: klasite od markapot dobivaat SOPSTVENI pravila — dosega se stilizraa
   preku `> div` i `img`, pa vtor element vo blokot bi go skrshil izgledot. */
.dp-strana__znak, .dp-strana__brend img { height: 40px; width: auto; flex: 0 0 auto; }
.dp-strana__ime, .dp-strana__brend > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dp-strana__ime strong, .dp-strana__brend strong {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--dv-tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-strana__ime span, .dp-strana__brend span {
  margin-top: 1px; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Navigacija ───────────────────────────────────────────────────────────── */
/* M192 (Zoran: „изгледот на менијата не се најубави… споредбено со дигиталмени").
   Sedum stavki so ISTA debelina se chitaat kako blok, ne kako lista. Popravkata
   NE e da se vikne aktivnata, tuku da se STIVNE mirnata: 600 → 500 vo miruvanje,
   800 → 600 aktivno. Pilulata dobiva pogolem gutter (10 → 14) za da izgleda kako
   predmet VO panelot, a ne kako lenta preku cela shirina. */
.dp-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px;
}

.dp-nav__etiketa {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 10px 12px 6px; margin: 0;
}
.dp-nav__etiketa:first-child { padding-top: 2px; }

.dp-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;                    /* visinata ja pravi padingot — dolg
                                            prevod vo dva reda ne se seche */
  border-radius: var(--dp-nav-r);
  color: var(--muted); font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  background: transparent; border: 0; width: 100%; text-align: left;
  font-family: inherit;
  transition: background .2s var(--dv-ease), color .2s var(--dv-ease);
}
/* 20px sobira i najshirokiot FA5 glif (fa-layer-group, fa-sitemap) — etiketite
   pochnuvaat na ISTA linija kaj site stavki. */
.dp-nav__link i { width: 20px; flex: 0 0 20px; text-align: center; font-size: 15px; opacity: .9; }
.dp-nav__link span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover vo tinta na akcentot, ne neutralno sivo — sivo do malinov akcent
   izgleda kako dva sistema. Bez transform: stavkite ne skokaat pod kursor. */
.dp-nav__link:hover { background: var(--dv-akcent-bled); color: var(--dv-tekst); }
.dp-nav__link.e-aktiven {
  background: var(--dv-akcent-mek);
  color: var(--akcent, var(--dv-akcent));
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--dv-akcent-ram);
}
.dp-nav__link.e-aktiven i { color: var(--akcent, var(--dv-akcent)); opacity: 1; }
.dp-nav__link.e-aktiven:hover { background: var(--dv-akcent-mek-tem); }

/* Neprochitani tiketi se ALARM, ne brojach. (Modifikatorot `--danger` postoeshe
   ama PHP-to nikogash ne go pechatashe — sega crvenoto e osnovata.) */
.dp-nav__broj {
  margin-left: auto; flex: 0 0 auto;
  min-width: 22px; height: 20px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--dv-danger-bg); color: var(--danger);
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dp-nav__link.e-aktiven .dp-nav__broj { background: var(--dv-karta); }

/* ── Dno na kolonata ──────────────────────────────────────────────────────── */
.dp-strana__dno {
  flex: 0 0 auto;
  border-top: 1px solid var(--linija);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
}

/* M197 (Zoran): chovekot e GORE, megju brendot i menito — pa nosi sopstven pading
   i linija dolu (porano beshe vo `.dp-strana__dno` i ja nasleduvashe negovata). */
.dp-korisnik {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  flex: 0 0 auto; padding: 14px 18px; border-bottom: 1px solid var(--linija);
}
.dp-korisnik__tekst, .dp-korisnik > div { min-width: 0; }
.dp-korisnik strong {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--dv-tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-korisnik small {
  display: block; margin-top: 2px; font-size: 11px; color: var(--muted);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-korisnik > div { min-width: 0; }

.dp-avatar {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--dp-radius);
  background: var(--dv-akcent-bled); color: var(--akcent, var(--dv-akcent));
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; overflow: hidden;
}
.dp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* M192: odjavata NE e primarno dejstvo — mek ispolnet blok bez ram-hrom, za da
   ne se natprevaruva so navigacijata nad nea. */
.dp-odjava {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: var(--dp-radius);
  background: var(--dv-tiho); color: var(--muted);
  font: 500 13px/1 Manrope, system-ui, sans-serif; cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.dp-odjava:hover {
  background: var(--dv-danger-bg); color: var(--danger);
}

/* M197 (Zoran): dnoto e DVA reda — tema i jazik po POLOVINA shirina gore,
   odjavata preku CELA shirina dolu. Porano trite deleа eden red, pa selektot beshe
   stisnat na 62px i celoto dno izgledashe nedovrsheno. */
.dp-strana__dno { gap: 8px; }
/* GRID, ne flex: `flex: 1 1 0` na kopche so `white-space: nowrap` sepak dava
   povekje prostor na podolgata sodrzhina (izmereno 126/102). `1fr 1fr` e tochno
   polovina bez ogled na sodrzhinata. */
.dp-dno-red { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 8px; }
.dp-dno-red > * { min-width: 0; display: flex; }
.dp-dno-red .dp-btn { width: 100%; }
.dp-dno-red select {
  width: 100%; min-width: 0;
  height: var(--dv-ctl-h-sm); padding: 0 8px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst);
  font: 13px Manrope, system-ui, sans-serif; cursor: pointer;
  text-align: center; text-align-last: center;
}

/* Selektot za jazik vo TOP-lentata (pod 860px levata kolona e skriena) porano go
   nasleduvashe pravilото na `.dp-dno-desno`; sega ima svoe. */
.dp-lenta .dp-jazik select {
  height: var(--dv-ctl-h-sm); padding: 0 8px; width: 62px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst);
  font: 13px Manrope, system-ui, sans-serif; cursor: pointer;
  text-align: center; text-align-last: center;
}

/* ── Glavna kolona ────────────────────────────────────────────────────────── */
.dp-glavno {
  flex: 1 1 auto; min-width: 0;
  margin-left: var(--dp-strana-w);
  display: flex; flex-direction: column;
}

/* M192: `min-height` na DVETE strani (lenta i .dp-strana__brend) so podot
   podignat na 72px — dvete dolni linii se spojuvaat vo EDNA, a naslovot ima
   mesto. Porano podot beshe 64 (pod sodrzhinata), pa moravshe TOCHNA visina. */
.dp-lenta {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  min-height: var(--dp-lenta-h); flex: 0 0 auto; padding: 12px 26px;
  border-bottom: 1px solid var(--linija);
  background: var(--dp-lenta-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dp-lenta__naslov { min-width: 0; }
.dp-lenta__naslov h1 {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.2; color: var(--dv-tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-lenta__naslov p {
  margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-lenta__akcii {
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  justify-content: flex-end;
}

.dp-panel {
  flex: 1 1 auto; min-width: 0;
  /* M173 (Zoran, 1920x1200): PREKU CEL EKRAN — 1080px ostavashe ~800px mrtov
     prostor nadesno. M201: ama ni 1640px ne e tochno — red vo koj imeto e levo a
     statusot 1200px nadesno se chita kako dve razlichni raboti. Kapak na 1460px
     (pri 1900 ostavaat po ~90px nastrana, pri 1440 nishto ne se menuva) i vo
     SREDINA — toa e balans, ne mrtov prostor. */
  width: 100%; max-width: 1460px; margin-inline: auto;
  padding: 24px 26px 60px;
  transition: opacity .18s var(--dv-ease);
}
.dp-panel.e-vcituva { opacity: .5; pointer-events: none; }

/* ── Dolna navigacija (samo mobilno) ──────────────────────────────────────── */
/* M194: telotо e `.dv-dolna` + `.dv-lizgacka` vo css/dv.css (ista lenta kako vo
   salonskiot panel — lizga namesto da stesnuva). Tuka ostanuva SAMO ona shto e
   specifichno za partnerskiot panel. */
.dp-dolna { z-index: 45; }   /* dv.css dava 13, a .dp-strana e 40 */
.dp-dolna .dv-dolna__stavka { position: relative; }   /* nosach na tochkata */

/* ── Vidlivost po shirina ─────────────────────────────────────────────────── */
/* M197: `.dp-btn` e definirano PODOLU i nosi `display: inline-flex` so ista
   specifichnost — pa kopche so klasa `.dp-samo-tesen` sepak se gledashe na shirok
   ekran (temата vo top-lentata). `!important` e tochniot alat: ova e prekinuvach
   za vidlivost, ne stil shto nekoj podocna smee da go nadgradi. */
.dp-samo-tesen  { display: none !important; }
.dp-samo-shirok { display: inline-flex; }

/* =============================================================================
   KOMPONENTI (porteni od inline <style> vo distributer.php)
   ============================================================================= */

/* ── Zaglavje vo sekcija / najava ─────────────────────────────────────────── */
.dp-logo { height: 42px; width: auto; }

/* ── Kopchinja ────────────────────────────────────────────────────────────── */
.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--dp-ctl); padding: 0 16px;
  border: 0; border-radius: var(--dp-radius);
  background: var(--dv-kopche); color: #fff;
  font: 600 14px/1 Manrope, system-ui, sans-serif;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.dp-btn:hover { background: var(--dv-kopche-tem); }   /* ist token kako .dv-btn vo dv.css — 6% brightness ne se zabelezhuva */
.dp-btn--ghost {
  background: var(--dv-karta); color: var(--dv-tekst);
  border: 1px solid var(--linija);
}
.dp-btn--ghost:hover {
  filter: none;
  border-color: var(--dv-akcent-ram); color: var(--akcent, var(--dv-akcent));
}
.dp-btn--sm { height: var(--dv-ctl-h-sm); padding: 0 11px; font-size: 13px; }
.dp-btn--ikona { width: var(--dp-ctl); padding: 0; }
.dp-btn--sm.dp-btn--ikona { width: var(--dv-ctl-h-sm); }

/* ── Karti i KPI ──────────────────────────────────────────────────────────── */
.dp-karta {
  background: var(--dv-karta); border: 1px solid var(--linija);
  border-radius: var(--dv-radius); padding: 14px 16px;
}
.dp-kpi {
  /* 150px, ne 170: panelot e ~1000px korisni, a KPI-kartichkite se SHEST.
     So 170 stanuvaat 5+1 — shestata visi sama vo vtor red i izgleda skrsheno. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.dp-kpi span { font-size: 13px; color: var(--muted); }
.dp-kpi b {
  font-size: 22px; display: block; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Redovi ───────────────────────────────────────────────────────────────── */
.dp-red {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--linija); border-radius: var(--dv-radius);
  background: var(--dv-karta);
}
/* M192: redot reagira na kursor, kako `.dv-red` vo ostatokot od aplikacijata. */
.dp-red { transition: box-shadow .2s var(--dv-ease), border-color .2s; }
.dp-red:hover { box-shadow: var(--dv-senka); border-color: var(--dv-akcent-ram); }
/* .dp-red e flex — golo [hidden] NE go krie. */
.dp-red[hidden] { display: none !important; }
.dp-red__ime { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dp-red small {
  display: block; color: var(--muted); font-weight: 400; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* Ш5: mojot klon = okér (jasno „od distributer"). */
.dp-red--moj { background: var(--dp-moj-bg); border-color: var(--dp-moj-ram); }
.dp-red--tivok { opacity: .6; }

/* Monospejs referalen link vo red — mora da se prekrshuva na 390px. */
.dp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; overflow-wrap: anywhere; word-break: break-word;
}

/* ── Sekcii i period ──────────────────────────────────────────────────────── */
.dp-sekcija { margin-bottom: 26px; }
.dp-sekcija h2 { font-size: 16px; margin: 0 0 10px; }
.dp-period { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 22px; }

/* ── Polinja i formi ──────────────────────────────────────────────────────── */
.dp-pole { min-width: 0; }
.dp-pole label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.dp-pole input,
.dp-red input[type=text],
.dp-red input[type=password],
.dp-lenta select,
.dp-forma .dp-pole select {
  height: var(--dp-ctl); padding: 0 12px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst);
  font: 14px Manrope, system-ui, sans-serif;
  max-width: 100%;
}
.dp-pole input[type=date] { font-variant-numeric: tabular-nums; }
/* M195: flatpickr go krie originalnoto pole i pravi svoe (`.form-control.input`)
   — mora da gi nasledi ISTITE stilovi, inache datumot izgleda kako tugjo pole. */
.dp-pole input.flatpickr-input,
.dp-forma .dp-pole input.flatpickr-input,
.dp-period input.flatpickr-input { font-variant-numeric: tabular-nums; }
.flatpickr-calendar { font-family: Manrope, system-ui, sans-serif; }
.dp-pole input:focus,
.dp-lenta select:focus,
.dp-forma select:focus,
.dp-tiket-forma textarea:focus {
  outline: 2px solid var(--dv-akcent-ram); outline-offset: 0;
  border-color: var(--akcent, var(--dv-akcent));
}
.dp-forma { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; width: 100%; }
.dp-forma .dp-pole { flex: 1 1 150px; min-width: 0; }
.dp-forma .dp-pole input,
.dp-forma .dp-pole select {
  width: 100%; height: var(--dp-ctl); padding: 0 10px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst); font-size: 14px;
}

/* ── Badzhovi ─────────────────────────────────────────────────────────────── */
.dp-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--dv-akcent-bled); color: var(--akcent, var(--dv-akcent));
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; margin-right: 4px;
}
.dp-badge--danger { background: var(--dv-danger-bg); color: var(--danger); }
.dp-badge--ok     { background: var(--dv-ok-bg);     color: var(--dv-ok); }
.dp-badge--warn   { background: var(--dv-warn-bg);   color: var(--dv-warn); }
/* M191: jazik na shablonot — neutralen, ne se natprevaruva so pazarniot bejdz. */
.dp-badge--jazik  { background: var(--dp-jazik-bg); color: var(--dp-jazik-tekst); letter-spacing: .06em; }
.dp-badge--kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ── Alerti i beleshki ────────────────────────────────────────────────────── */
.dp-alert {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; margin-bottom: 12px;
  border-radius: var(--dp-radius);
  background: var(--dv-danger-bg); color: var(--danger);
  font-size: 14px;
}
.dp-alert--info { background: var(--dv-info-bg); color: var(--dv-info); }
.dp-alert a { color: inherit; font-weight: 700; }
.dp-alert span { min-width: 0; overflow-wrap: anywhere; }
.dp-note { color: var(--muted); font-size: 14px; }
.dp-hint { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ── Д3: tiketi ───────────────────────────────────────────────────────────── */
.dp-tiket-red { text-decoration: none; color: inherit; cursor: pointer; }
.dp-tiket-red.e-novo { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.dp-tiket-red:hover { border-color: var(--akcent, var(--dv-akcent)); }
.dp-tiket-red__datum {
  margin-left: auto; white-space: nowrap;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}

.dp-nit { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.dp-nit__poraka {
  max-width: 86%; align-self: flex-start; min-width: 0;
  background: var(--dv-karta); border: 1px solid var(--linija);
  border-radius: 12px 12px 12px 4px; padding: 9px 13px;
}
.dp-nit__poraka--nasa {
  align-self: flex-end; background: var(--dv-akcent-mek);
  border-radius: 12px 12px 4px 12px;
}
.dp-nit__glava {
  font-size: 12px; color: var(--muted); margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.dp-nit__tekst { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.dp-nit-glava { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-nit-glava h2 { margin: 0; min-width: 0; }

.dp-tiket-forma textarea {
  width: 100%; min-height: 96px; padding: 10px 12px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  font: inherit; font-size: 14px; resize: vertical;
}
.dp-tiket-forma input[type=text] { width: 100%; }

/* ── Kredencijali i QR ────────────────────────────────────────────────────── */
.dp-kreden { border-color: var(--dp-kreden-ram); background: var(--dp-kreden-bg); margin-bottom: 12px; }
.dp-kreden code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; padding: 4px 8px;
  background: var(--dv-karta); border: 1px solid var(--linija); border-radius: 6px;
  overflow-wrap: anywhere;
}
.dp-qr {
  display: none; width: 100%; padding: 10px; text-align: center;
  background: var(--dv-karta); border: 1px solid var(--linija);
  border-radius: var(--dv-radius-sm);
}
.dp-qr svg { max-width: 220px; height: auto; }

/* =============================================================================
   NAJAVA (bez shell — sopstven centriran ekran)
   ============================================================================= */
.dp-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dp-login-karta {
  width: 100%; max-width: 380px; padding: 30px 28px;
  background: var(--dv-karta); border: 1px solid var(--linija);
  border-radius: var(--dv-radius); box-shadow: var(--dv-senka);
}
.dp-login-karta h1 { font-size: 20px; margin: 14px 0 4px; }
.dp-login-karta .dp-pole { margin-bottom: 14px; }
.dp-login-karta input { width: 100%; }

/* =============================================================================
   VODICH (onboarding sloj)
   ============================================================================= */
#dpVodicSloj {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: flex-end; justify-content: center; padding: 20px;
  background: var(--dp-sloj);
}
.dp-vodic-cel {
  position: relative; z-index: 9501;
  background: var(--dv-karta); border-radius: var(--dv-radius-sm);
  box-shadow: 0 0 0 4px var(--akcent, var(--dv-akcent));
}
.dp-vodic-karta {
  max-width: 440px; margin-bottom: 12px; padding: 18px 20px;
  background: var(--dv-karta); border-radius: var(--dv-radius-sm);
  box-shadow: var(--dp-sloj-senka);
}
.dp-vodic-karta p.n { margin: 0 0 6px; font-weight: 700; }
.dp-vodic-karta p.t { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.dp-vodic-noze { display: flex; justify-content: flex-end; gap: 8px; }

/* =============================================================================
   RESPONZIVNOST
   ============================================================================= */

/* Pod 860px: leva kolona OFF, dolna lenta ON.
   5 stavki × 74px = 370px — vleguva vo 390px telefon bez lizganje, no
   `overflow-x` e ostaven odbranbeno (podolgi prevodi / pogolem font). */
@media (max-width: 860px) {
  .dp-strana { display: none !important; }
  .dp-glavno {
    margin-left: 0;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .dp-samo-tesen  { display: inline-flex !important; }
  .dp-samo-shirok { display: none !important; }

  /* Levata kolona ja nema — tochnata visina veke nema so shto da se poramnuva,
     pa lentata smee da diishe i akciite da se prelomat. */
  .dp-lenta { height: auto; min-height: var(--dp-lenta-h); padding: 10px 14px; }
  .dp-lenta__akcii { flex-wrap: wrap; }
  .dp-panel { padding: 18px 14px 32px; }

  /* Tap-celi ≥ 40px na dopir. */
  .dp-btn--sm { height: 40px; }
  .dp-btn--sm.dp-btn--ikona { width: 40px; }
}

@media (max-width: 720px) {
  .dp-lenta__naslov h1 { font-size: 18px; }
  .dp-nit__poraka { max-width: 94%; }
}

@media (max-width: 520px) {
  .dp-kpi { grid-template-columns: 1fr; }
  .dp-lenta__akcii { gap: 6px; }
  .dp-red { padding: 10px 12px; gap: 8px; }
  .dp-login-karta { padding: 24px 18px; }
}

/* =============================================================================
   PRISTAPNOST
   ============================================================================= */
.dp-nav__link:focus-visible,
.dp-odjava:focus-visible,
.dv-dolna__stavka:focus-visible,
.dp-strana__brend:focus-visible,
.dp-btn:focus-visible,
.dp-tiket-red:focus-visible,
.dp-dno-red select:focus-visible,
.dp-lenta .dp-jazik select:focus-visible,
.dp-pole input:focus-visible,
.dp-tiket-forma textarea:focus-visible,
.dp-alert a:focus-visible {
  outline: 2px solid var(--akcent, var(--dv-akcent));
  outline-offset: 2px;
  border-radius: var(--dp-radius);
}
.dp-pole input:focus-visible,
.dp-dno-red select:focus-visible,
.dp-lenta .dp-jazik select:focus-visible,
.dp-tiket-forma textarea:focus-visible { outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  .dp-shell *,
  .dp-nav__link,
  .dv-dolna__stavka,
  .dp-btn,
  .dp-odjava,
  .dp-panel {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── Dopolnenija posle sostavuvanjeto na markupot ──────────────────────────── */
/* Jazichnata forma e flex-stavka za da moze selektot vnatre da se rastegne. */
.dp-dno-red form { min-width: 0; display: flex; }
.dp-dno-red form select { width: 100%; }

/* Tochka „ima neprochitano" na dolnata navigacija (na shirok ekran e broj vo
   sidebarot; tuka nema mesto za cifra, pa e samo signal). M194: ja zadrzhuvame
   namesto brojot vo etiketata — na 74px `nowrap` etiketa brojot prv se seche. */
.dp-dolna-nav__tocka {
  position: absolute; top: 6px; right: 50%; transform: translateX(14px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger, #c0392b);
  box-shadow: 0 0 0 2px var(--dv-karta, #fff);
}

/* Cookie-lentata e position:fixed i na partner-panelot ja pokrivashe LEVATA
   kolona — tokmu odjavata i jazikot. Ovde ja pomestuvame nadesno od kolonata.
   Pod 860px kolonata i onaka ja nema, pa lentata si ostanuva preku cel ekran. */
@media (min-width: 861px) {
  body:has(.dp-shell) .cookie-consent-root,
  body:has(.dp-shell) #cookieConsentRoot { left: calc(var(--dp-strana-w) + 16px); }
}

/* Jazicen izbirach na ekranot za najava (M170). Diskreten — pod formata. */
/* M186 (Zoran): jazikot GORE-DESNO na kartata za najava (porano centriran pod kopcheto). */
.dp-login-karta { position: relative; }
.dp-jazik-najava { position: absolute; top: 12px; right: 12px; margin: 0; display: flex; }
.dp-jazik-najava select {
  height: var(--dv-ctl-h-sm); padding: 0 10px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--muted);
  font: 600 12px Manrope, system-ui, sans-serif; cursor: pointer;
}
.dp-jazik-najava select:hover { color: var(--dv-tekst); border-color: var(--akcent, var(--dv-akcent)); }

/* M196: edno kopche, dve ikoni — se gleda onaa shto kazhuva KADE vodi klikot
   (mesechina vo svetla tema, sonce vo temna). */
.dp-tema-kopche .dp-tema-svetla { display: none; }
html[data-theme="dark"] .dp-tema-kopche .dp-tema-temna { display: none; }
html[data-theme="dark"] .dp-tema-kopche .dp-tema-svetla { display: inline-flex; }   /* M203: `.ik` e inline-flex */

/* ── M186: oko za lozinka, alatki, kreden vo red, ureduvanje in-place ────── */
.dp-loz { position: relative; display: block; width: 100%; }
/* i vo .dp-forma (Postavki): `.dp-forma .dp-pole input` e pospecifichno i go gazeshe padding-ot. */
.dp-loz input, .dp-forma .dp-pole .dp-loz input { display: block; width: 100%; padding-right: 40px; }
.dp-oko {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 6px; background: none;
  color: var(--muted); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dp-oko:hover, .dp-oko:focus-visible { color: var(--akcent, var(--dv-akcent)); background: var(--dv-akcent-bled); outline: none; }
.dp-oko--red { position: static; transform: none; width: 26px; height: 26px; vertical-align: middle; }
.dp-alatki { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
/* M201: sè vo EDNA grupa — kopcheto „Vlezi" beshe `margin-left: auto` i na shirok
   ekran begashe na rabot, daleku od korisnikot i lozinkata na koi se odnesuva. */
.dp-kreden-red {
  width: 100%; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 13px; padding-top: 8px; border-top: 1px dashed var(--linija);
}
.dp-kreden-red .dp-btn { margin-left: 2px; }
.dp-kreden-red code { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dp-forma--uredi { border-top: 1px dashed var(--linija); padding-top: 10px; }

/* ── M189: kartichka „kampanjata e lansirana" — tekst levo, QR desno ─────── */
.dp-nova-kamp { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.dp-nova-kamp__tekst { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dp-nova-kamp__link { margin: 0; }
.dp-nova-kamp__link code { font-size: 12.5px; overflow-wrap: anywhere; }
/* M202: kartata na prodazhnata strana nosi POMALKU tekst od kampanjata (bez naslov i
   bez statusen red), pa `align-items: flex-start` ostavashe ~120px prazno levo od QR-ot.
   Tuka dvete koloni se centriraat edna sprema druga. */
#dpSajtSekcija .dp-nova-kamp { align-items: center; }
.dp-qr-nova { margin: 0; flex: 0 0 auto; text-align: center; }
.dp-qr-nova > div {
  /* QR-ot ostanuva BEL i vo temna tema — skenerite baraat svetla podloga. */
  padding: 8px; background: #fff; border: 1px solid var(--linija);
  border-radius: var(--dv-radius-sm); line-height: 0;
}
.dp-qr-nova svg { width: 148px; height: 148px; display: block; }
.dp-qr-nova figcaption {
  margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* M200: alatki pod sopstvenata posledna NEPROCHITANA poraka. Namerno se tivki —
   ova e popravka na propust, ne sekojdnevno dejstvo. */
.dp-nit__alatki { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.dp-nit__znak { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.dp-nit__kop {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 2px 4px; border-radius: 6px;
  color: var(--muted); font: 500 12px Manrope, system-ui, sans-serif; cursor: pointer;
}
.dp-nit__kop:hover { color: var(--akcent, var(--dv-akcent)); background: var(--dv-akcent-bled); }
.dp-nit__kop--rusi:hover { color: var(--danger); background: var(--dv-danger-bg); }
.dp-nit__uredi { margin-top: 8px; }
.dp-nit__uredi[hidden] { display: none; }
.dp-nit__uredi textarea {
  width: 100%; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--dv-akcent-ram); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst);
  font: 14px Manrope, system-ui, sans-serif;
}

/* M201: dve kolони na Pregled — na tesok ekran edna pod druga. */
.dp-dve-koloni { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .dp-dve-koloni { grid-template-columns: 1fr; gap: 18px; } }

/* M199: harmonika za poraki — redot e zaglavie, nitkata se otvora pod nego. */
.dp-tiket-stavka { margin-bottom: 8px; }
.dp-tiket-stavka .dp-red { margin-bottom: 0; }
.dp-tiket-strelka { margin-left: 8px; font-size: 12px; color: var(--muted); transition: transform .2s var(--dv-ease); }
.dp-tiket-red.e-otvoren .dp-tiket-strelka { transform: rotate(180deg); }
.dp-tiket-red.e-otvoren {
  border-color: var(--dv-akcent-ram);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.dp-tiket-telo {
  padding: 14px 16px 16px;
  border: 1px solid var(--dv-akcent-ram); border-top: 0;
  border-radius: 0 0 var(--dv-radius) var(--dv-radius);
  background: var(--dv-karta);
}
.dp-tiket-telo[hidden] { display: none; }
.dp-tiket-telo .dp-nit { margin-top: 0; }

/* M199: dejstvata pod nitkata. Na shirok ekran „Zatvori" bega nadesno (druga
   namera od „Odgovori"); pod 560px dvete se TOCHNO polovina — palecot bara ednakvi
   celi, a `flex-wrap` gi ostavashe edno do drugo so razlichna shirina. */
.dp-nit-akcii { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dp-nit-akcii__zatvori { margin-left: auto; }
@media (max-width: 560px) {
  .dp-nit-akcii { display: grid; grid-template-columns: 1fr 1fr; }
  .dp-nit-akcii .dp-btn { width: 100%; margin-left: 0; }
  .dp-nit-akcii .dp-btn:only-child { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   M198 — ZAEDNICHKA LENTA ZA SPISOCI (filter · prebaruvanje · redovi/karti · strani)
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-alatnik {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--dv-karta); border: 1px solid var(--linija);
  border-radius: var(--dv-radius);
}
.dp-alatnik .dp-cipovi { margin: 0; flex: 1 1 auto; min-width: 0; }
.dp-alatnik__desno { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; }

.dp-prebaraj { position: relative; display: flex; align-items: center; }
.dp-prebaraj i {
  position: absolute; left: 11px; font-size: 12px; color: var(--muted); pointer-events: none;
}
.dp-prebaraj input {
  width: 190px; max-width: 42vw; height: var(--dv-ctl-h-sm); padding: 0 10px 0 30px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst);
  font: 13px Manrope, system-ui, sans-serif;
}
.dp-prebaraj input::-webkit-search-cancel-button { cursor: pointer; }

/* Prekinuvach redovi/karti — EDNA grupa, ne dve oddelni kopchinja. */
.dp-pogled { display: inline-flex; background: var(--dv-tiho); border-radius: var(--dp-radius); padding: 2px; gap: 2px; }
.dp-pogled button {
  width: 32px; height: calc(var(--dv-ctl-h-sm) - 4px);
  display: grid; place-items: center;
  border: 0; border-radius: calc(var(--dp-radius) - 2px);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
}
.dp-pogled button.e-aktiven { background: var(--dv-karta); color: var(--akcent, var(--dv-akcent)); box-shadow: var(--dv-senka); }

.dp-alatnik select[data-po-strana] {
  height: var(--dv-ctl-h-sm); padding: 0 6px; width: 62px;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--dv-tekst);
  font: 13px Manrope, system-ui, sans-serif; cursor: pointer;
  text-align: center; text-align-last: center;
}

.dp-pag { display: flex; align-items: center; gap: 4px; }
.dp-pag[hidden] { display: none; }
.dp-pag span {
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: center;
}
.dp-pag button {
  width: var(--dv-ctl-h-sm); height: var(--dv-ctl-h-sm);
  display: grid; place-items: center;
  border: 1px solid var(--linija); border-radius: var(--dp-radius);
  background: var(--dv-karta); color: var(--muted); cursor: pointer; font-size: 12px;
}
.dp-pag button:hover:not(:disabled) { color: var(--akcent, var(--dv-akcent)); border-color: var(--dv-akcent-ram); }
.dp-pag button:disabled { opacity: .4; cursor: default; }

/* ── Pogled „karti": ist red, druga geometrija ─────────────────────────────── */
.dp-lista--karti {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px;
}
.dp-lista--karti > .dp-grupa { grid-column: 1 / -1; }
.dp-lista--karti .dp-red { margin-bottom: 0; align-content: flex-start; }
.dp-lista--karti .dp-red__glava { flex-direction: column; align-items: flex-start; gap: 6px; }
.dp-lista--karti .dp-red__meta { margin-left: 0; white-space: normal; }
.dp-lista--karti .dp-red__ime { flex: 0 0 auto; }
/* Vo karta imeto zema CEL red, bejdzovite se prelevaat vo red pod nego, akciite
   dolu. (So `flex-direction: column` sekoj bejdz dobivashe sopstven red — kula.) */
.dp-lista--karti .dp-firma { flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dp-lista--karti .dp-firma .dp-red__ime { flex: 1 1 100%; margin-bottom: 2px; }
.dp-lista--karti .dp-firma .dp-red__akcii { flex: 1 1 100%; width: auto; margin-top: 6px; }
.dp-lista--karti .dp-preliv { margin-left: 0; }
.dp-lista--karti .dp-kreden-red { flex-direction: column; align-items: flex-start; gap: 8px; }
.dp-lista--karti .dp-kreden-red .dp-btn { margin-left: 0 !important; }

@media (max-width: 560px) {
  .dp-alatnik { padding: 10px; }
  .dp-alatnik__desno { width: 100%; margin-left: 0; }
  .dp-prebaraj { flex: 1 1 auto; }
  .dp-prebaraj input { width: 100%; max-width: none; }
  .dp-lista--karti { grid-template-columns: 1fr; }
}

/* ── M187: red vo DVE linii (glava: badzh, ime, status, brojki · akcii: kopchinja) ── */
.dp-red--dve { row-gap: 8px; padding: 12px 14px; }
.dp-red__glava { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; min-width: 0; }
.dp-red__meta {
  margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dp-red__meta b { color: var(--dv-tekst); font-weight: 600; }
.dp-red__akcii { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.dp-red__akcii > form { margin: 0; display: flex; }

/* M194: glavnoto — ispolneto, so etiketa, sekogash prvo. */
.dp-red__akcii .dp-btn--glavno { flex: 0 1 auto; font-weight: 600; }
/* Sporednite — kvadrat so TIVKA podloga, ne ram. Ram okolu pet kopchinja pravi
   pet ramki; podloga pravi edna grupa. */
.dp-red__akcii .dp-btn--ikona {
  width: var(--dv-ctl-h-sm); padding: 0;
  background: var(--dv-tiho); border-color: transparent; color: var(--muted);
}
.dp-red__akcii .dp-btn--ikona:hover {
  background: var(--dv-akcent-bled); border-color: transparent;
  color: var(--akcent, var(--dv-akcent));
}
/* Rushitelno = crvena tinta, ne siva kutija so crvena ikona. */
.dp-btn--rusi { background: var(--dv-danger-bg) !important; color: var(--danger) !important; }

/* ── „⋯" preliv-meni: &lt;details&gt;, ne JS-popap ─────────────────────────────── */
/* M201 (Zoran, sliku): „⋯" beshe `margin-left: auto` — na 1900px ekran begashe na
   samiot rab i ostavashe prazna dupka nasred redot. Dejstvata se EDNA grupa; „⋯"
   sedi do niv, odvoen so tenka linija namesto so pola ekran. */
.dp-preliv { position: relative; margin-left: 2px; padding-left: 8px; }
.dp-preliv::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--linija);
}
.dp-preliv > summary {
  list-style: none; cursor: pointer;
  width: var(--dv-ctl-h-sm); height: var(--dv-ctl-h-sm);
  display: grid; place-items: center;
  border-radius: var(--dp-radius);
  background: var(--dv-tiho); color: var(--muted);
  transition: background .15s, color .15s;
}
.dp-preliv > summary::-webkit-details-marker { display: none; }
.dp-preliv > summary::marker { content: ''; }
.dp-preliv > summary:hover { background: var(--dv-tiho-tem); color: var(--dv-tekst); }
.dp-preliv[open] > summary { background: var(--dv-akcent-mek); color: var(--akcent, var(--dv-akcent)); }
.dp-preliv > summary:focus-visible { outline: 2px solid var(--akcent, var(--dv-akcent)); outline-offset: 2px; }
.dp-preliv__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25;
  min-width: 204px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--dv-karta); border: 1px solid var(--linija);
  border-radius: var(--dv-radius); box-shadow: var(--dv-senka-hover, var(--dv-senka));
}
.dp-preliv__list form { margin: 0; }
.dp-preliv__list .dp-btn {
  width: 100%; justify-content: flex-start; height: 34px;
  background: transparent; border: 0; color: var(--dv-tekst); font-weight: 500;
}
.dp-preliv__list .dp-btn:hover { background: var(--dv-tiho); }
.dp-preliv__list .dp-btn--rusi:hover { background: var(--dv-danger-bg) !important; }

/* Telefon: glavnoto preku cela shirina, ikonite pod nego vo ednakva mrezha. */
@media (max-width: 560px) {
  .dp-red__akcii .dp-btn--glavno { flex: 1 1 100%; justify-content: center; }
  .dp-red__akcii .dp-btn--ikona { flex: 1 1 0; width: auto; min-width: 40px; }
  .dp-preliv { margin-left: 0; flex: 0 0 auto; }
}
.dp-grupa {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.dp-grupa:first-of-type { margin-top: 6px; }
@media (max-width: 640px) {
  .dp-red__meta { margin-left: 0; white-space: normal; width: 100%; }
  .dp-red__meta { margin-left: 0; }
  .dp-preliv { margin-left: auto; }   /* pod 560px akciite se mrezha — „⋯" na kraj */
}

/* ── M174: statistika + filter-chipovi na tabot Firmi ─────────────────────── */
.dp-stat-lenta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.dp-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--linija); border-radius: 999px;
  background: var(--dv-karta); font-size: 12px; font-weight: 600;
  color: var(--muted); white-space: nowrap;
}
.dp-stat b { font-size: 15px; color: var(--dv-tekst); font-variant-numeric: tabular-nums; }
.dp-stat.e-ok b     { color: var(--dv-ok); }
.dp-stat.e-warn b   { color: var(--dv-warn); }
.dp-stat.e-danger b { color: var(--danger); }

.dp-cipovi { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.dp-cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--dp-radius);
  border: 1px solid var(--linija); background: var(--dv-karta);
  color: var(--muted); font: 600 12px Manrope, system-ui, sans-serif;
  cursor: pointer; opacity: .62;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.dp-cip:hover { opacity: 1; }
.dp-cip.e-aktiven {
  opacity: 1; background: var(--dv-akcent-mek);
  color: var(--akcent, var(--dv-akcent)); border-color: var(--dv-akcent-ram);
}
.dp-cip .broj {
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: var(--dv-tiho); font-variant-numeric: tabular-nums;
}
.dp-cip.e-aktiven .broj { background: var(--dv-karta); }

/* Redovi na firmi: leva lenta kako signal „bara vnimanie" / „istekol". */
.dp-firma.e-bara    { border-left: 3px solid var(--dv-warn); }
.dp-firma.e-istekol { opacity: .72; }
.dp-firma .dp-red__akcii { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.dp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }

/* Brojche do naslov na sekcija (M174). */
.dp-sklop-broj {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 2px 8px; margin-left: 6px;
  border-radius: 999px; background: var(--dv-tiho);
  font-size: 12px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; vertical-align: middle;
}

/* ── M174: sklopivi sekcii (Demomallar / Kampanjer) ───────────────────────── */
.dp-sklop > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; margin: 0 0 8px;
  -webkit-tap-highlight-color: transparent;
}
.dp-sklop > summary::-webkit-details-marker { display: none; }
.dp-sklop > summary::before {
  content: '\25B8'; opacity: .5; font-size: 13px;
  transition: transform .15s var(--dv-ease); flex: 0 0 auto;
}
.dp-sklop[open] > summary::before { transform: rotate(90deg); }
.dp-sklop > summary h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.dp-sklop > summary:hover h2 { color: var(--akcent, var(--dv-akcent)); }
.dp-sklop > summary:focus-visible { outline: 2px solid var(--akcent, var(--dv-akcent)); outline-offset: 3px; border-radius: var(--dp-radius); }

/* M176: formata za lozinka — kopcheto se poramnuva so DNOTO na polinjata
   (etiketite gi krevaat poljata za ~18px, pa bez ova kopcheto lebdi nagore). */
#dpLozinkaForma { align-items: flex-end; }
#dpLozinkaForma .dp-pole input { width: 100%; }
#dpLozinkaForma .dp-btn { flex: 0 0 auto; }

/* ── M203: помошни класи за inline SVG иконите (`includes/ikoni_svg.php`) ─────
   Font Awesome си отиде од панелот — беше 74 KB woff2 + 12 KB CSS (gzip) за
   ~30 глифа. Иконата сега е `<i class="ik"><svg …>`: големината иде од
   `font-size` (висината е 1em), бојата од `color` (`fill="currentColor"`), па
   сите постоечки `i` правила (`.dp-nav__link i`, `.dp-tema-*`) важат непроменети.
   Тука се само она што порано беше inline `style=` на самата икона. */
.dp-ik-slab { opacity: .6; }
.dp-ik-mal  { font-size: 11px; }

/* Замена за `fa-spin` (копчето „креирај празен шаблон"), со истите вредности
   како во all.min.css: 2s, linear, бесконечно. */
.ik--vrti > svg { animation: dp-vrti 2s infinite linear; }
@keyframes dp-vrti { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .ik--vrti > svg { animation: none; } }