/* v5.css — Elite Wines · Terreni, il disegno del 23/10/2026.
   Viene DOPO tokens.css e app.css: la base (moduli, firma dei documenti) resta, la pelle
   scura di skin.css non si carica più. Marca: verde bosco #14231C, panna #EFE5D5,
   inchiostro #0A140E, oro #B08C4A solo per marchio e accenti.
   Tema chiaro apposta: si legge sotto il sole, al tavolo, con una mano.
   Forma: contenitori 18 px, tessere 14 px, tutto ciò che si preme è a pillola.
   Campi a 16 px: sotto quella misura Safari su iPhone ingrandisce la pagina da solo. */

:root {
  --v-verde: #14231C; --v-verde-2: #1E3329; --v-verde-3: #2B4638;
  --v-ink: #0A140E; --v-ink-2: #3E4A42; --v-ink-3: #56615A;
  --v-panna: #EFE5D5; --v-faqe: #F4EEE4; --v-karta: #FFFCF7; --v-vija: #E2D7C4; --v-vija-2: #EDE5D7;
  --v-ari: #B08C4A; --v-ari-2: #DCC28C; --v-ari-3: #8A6A2E;
  --v-kuq: #A93524; --v-kuq-bg: #F7E2DC;
  --v-gjelber: #2C6E47; --v-gjelber-bg: #DDEDE2;
  --v-verdhe: #7A5F17; --v-verdhe-bg: #F3E8C8;
  --v-blu: #2F5F76; --v-blu-bg: #DCE9EF;
  --v-r: 18px; --v-rt: 14px; --v-pill: 999px;
  --v-hije: 0 1px 2px rgba(20, 35, 28, .06), 0 8px 22px rgba(20, 35, 28, .08);
  --v-hije-2: 0 18px 50px rgba(10, 20, 14, .22);
  --v-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --v-bar: 72px;
  --v-ease: cubic-bezier(.2, .8, .2, 1);
  --v-gjeresi: 560px;
}

/* ── base: la pagina scorre (app.css bloccava html/body per la mappa a schermo pieno) ── */
html, body { height: auto; min-height: 100%; overflow: visible; }
body {
  display: block; padding-top: 0; background: var(--v-panna); color: var(--v-ink);
  font: 400 16px/1.45 var(--v-font); -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
}
body.flete-hapur { overflow: hidden; }
:focus-visible { outline: 3px solid var(--v-ari); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ik { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
h1, h2, h3, h4, p { margin: 0; }
button { cursor: pointer; }

/* ══ HYRJA ═══════════════════════════════════════════════════════════════ */
.hyrje {
  position: fixed; inset: 0; z-index: 1290; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 0; padding: calc(env(safe-area-inset-top) + 28px) 16px 32px;
  background: radial-gradient(120% 70% at 50% 0%, #22392C 0%, var(--v-verde) 55%, #0E1914 100%);
}
.hyrje.fshihet { display: none; }
.hyrje-marka img { width: 168px; height: auto; margin: 4px auto 22px; display: block; }
.hyrje-kuti {
  width: 100%; max-width: 420px; background: var(--v-karta); color: var(--v-ink); text-align: left;
  border-radius: 24px; padding: 26px 22px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.hyrje-titull { font: 700 32px/1.05 var(--v-display); color: var(--v-ink); }
.hyrje-kuti .hyrje-nen { margin: 6px 0 18px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--v-ink-2); }
.hyrje-kuti label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--v-ink-2); }
.hyrje-kuti input, .hyrje-kuti select {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--v-vija);
  background: #fff; color: var(--v-ink); font: 500 16px var(--v-font); letter-spacing: 0; text-align: left;
}
.hyrje-kuti input:focus, .hyrje-kuti select:focus { outline: none; border-color: var(--v-verde); box-shadow: 0 0 0 3px rgba(20, 35, 28, .12); }
.fusha-sy { position: relative; }
.fusha-sy input { padding-right: 52px; }
.fusha-sy .sy { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; background: none;
  color: var(--v-ink-3); display: grid; place-items: center; border-radius: 12px; }
.hyrje-kuti .btn { margin-top: 18px; }
.lidhje-hyrje { display: block; width: 100%; margin-top: 14px; padding: 10px 4px; border: 0; background: none;
  color: var(--v-ink-2); font: 500 15px/1.35 var(--v-font); text-align: center; }
.lidhje-hyrje b { color: var(--v-verde); text-decoration: underline; text-underline-offset: 3px; }
.hyrje-gati { padding: 4px 0 0; color: var(--v-ink); }
.hyrje-gati .gati-ik { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--v-gjelber-bg); color: var(--v-gjelber); margin-bottom: 12px; }
.hyrje-gati b { display: block; font-size: 18px; line-height: 1.3; }
.hyrje-gati p { margin-top: 8px; font-size: 15.5px; color: var(--v-ink-2); }
.hyrje-ndihme { font-size: 14px !important; color: var(--v-ink-3) !important; }
.hyrje .gabim { margin-top: 12px; color: var(--v-kuq); font-size: 15px; font-weight: 500; min-height: 0; }
.hyrje-info { margin-top: 18px; font-size: 13px; line-height: 1.45; color: var(--v-ink-3); }

/* ══ TELAIO E PAGINE ═════════════════════════════════════════════════════ */
.app { max-width: var(--v-gjeresi); margin: 0 auto; min-height: 100dvh; background: var(--v-faqe);
  padding-bottom: calc(var(--v-bar) + env(safe-area-inset-bottom) + 24px); }
@media (min-width: 600px) { .app { box-shadow: 0 0 0 1px var(--v-vija), 0 30px 80px rgba(20, 35, 28, .14); } }
.faqe { display: none; }
body[data-faqe="sot"] #faqe-sot, body[data-faqe="lokalet"] #faqe-lokalet, body[data-faqe="verat"] #faqe-verat,
body[data-faqe="une"] #faqe-une, body[data-faqe="management"] #faqe-management { display: block; }

/* testata verde col marchio grande */
.koka {
  background: var(--v-verde); color: var(--v-panna); border-radius: 0 0 28px 28px;
  padding: calc(env(safe-area-inset-top) + 18px) 18px 52px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
}
.koka-logo { width: 96px; height: auto; display: block; }
.koka-data { font-size: 14px; color: var(--v-ari-2); }
.koka h1 { font: 700 30px/1.02 var(--v-display); margin-top: 2px; color: #F6F0E6; }
.koka-turn { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 0 14px 0 10px; border-radius: var(--v-pill); border: 0; background: var(--v-verde-2); color: #EAE3D4; font: 500 14.5px var(--v-font); }
.koka-turn .ik { width: 18px; height: 18px; color: var(--v-ari-2); }
.koka-turn.aktiv { background: #2C6E47; color: #fff; }
.koka-turn.aktiv .ik { color: #fff; }
.sinkro-pill { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #BFC7BF; }
.sinkro-pill i { width: 8px; height: 8px; border-radius: 50%; background: #6FBF8E; }
.sinkro-pill.pritje i { background: var(--v-ari-2); }
.sinkro-pill.gabim { color: #F2B8AE; }
.sinkro-pill.gabim i { background: #E26A55; }
.sinkro-pill:empty { display: none; }

.koka-faqe { padding: calc(env(safe-area-inset-top) + 20px) 16px 4px; }
.koka-faqe h1 { font: 700 36px/1 var(--v-display); }
.koka-faqe p { margin-top: 4px; font-size: 15px; color: var(--v-ink-2); }

.cifrat { margin: -34px 14px 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--v-karta); border-radius: var(--v-r); box-shadow: var(--v-hije); }
.cifra { padding: 14px 12px 12px; }
.cifra + .cifra { border-left: 1px solid var(--v-vija-2); }
.cifra b { display: block; font: 700 32px/1 var(--v-display); }
.cifra span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.25; color: var(--v-ink-2); }
.cifra.kuq b { color: var(--v-kuq); }

.blok { padding: 26px 14px 0; }
.blok-siper { padding-top: 18px; margin-top: -34px; position: relative; }
.blok-krye { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.blok-krye h2 { font: 700 24px/1.1 var(--v-display); }
.blok-fund { padding-bottom: 8px; }
.lidhje-v5 { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 2px;
  color: var(--v-verde-3); font: 600 15px var(--v-font); white-space: nowrap; }
.lidhje-v5 .ik { width: 18px; height: 18px; }
.shenim-v5 { font-size: 13.5px; color: var(--v-ink-3); line-height: 1.4; }
.blok > .shenim-v5 { margin: 10px 4px 0; }

/* bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  padding: 0 20px; border-radius: var(--v-pill); border: 0; font: 600 16.5px var(--v-font); letter-spacing: 0;
  text-transform: none; white-space: nowrap; text-decoration: none; transition: transform .12s var(--v-ease), background-color .2s; }
.btn:active { transform: scale(.98); }
.btn .ik { width: 21px; height: 21px; }
.btn-kryesor { background: var(--v-verde); color: #F4EEE4; }
.btn-kryesor .ik { color: var(--v-ari-2); }
.btn-kryesor:active { background: var(--v-verde-3); }
.btn-dyte { background: var(--v-karta); color: var(--v-verde); box-shadow: inset 0 0 0 1.5px var(--v-verde); }
.btn-plot { width: 100%; }
.btn-vogel { min-height: 38px; padding: 0 14px; font-size: 14.5px; background: var(--v-karta); color: var(--v-verde);
  box-shadow: inset 0 0 0 1.5px var(--v-vija); }
.btn-vogel .ik { width: 17px; height: 17px; }
.btn:disabled { opacity: .5; }

/* la card del prossimo passo */
.hapi { background: var(--v-karta); border-radius: var(--v-r); box-shadow: var(--v-hije); overflow: hidden; border: 0; padding: 0; }
.hapi-sip { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px 16px 8px; }
.hapi-tekst { min-width: 0; cursor: pointer; }
.hapi-pse { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--v-pill);
  font-size: 13.5px; font-weight: 600; background: var(--v-verdhe-bg); color: var(--v-verdhe); letter-spacing: 0; text-transform: none; }
.hapi-pse .ik { width: 16px; height: 16px; }
.hapi-pse.kuq { background: var(--v-kuq-bg); color: var(--v-kuq); }
.hapi h3 { font: 700 30px/1.02 var(--v-display); margin-top: 10px; overflow-wrap: anywhere; }
.hapi-ku { margin-top: 4px; font-size: 15px; color: var(--v-ink-2); }
.hapi-ku b { color: var(--v-verde); }
.hapi-shishe { display: flex; align-items: flex-end; height: 112px; }
.hapi-shishe img { height: 112px; width: auto; margin-left: -14px; filter: drop-shadow(0 6px 8px rgba(10, 20, 14, .18)); }
.hapi-shishe img:first-child { margin-left: 0; }
.hapi-veprime { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; padding: 8px 16px 6px; }
.hapi-fund { display: flex; justify-content: space-between; padding: 0 10px 8px; }
.hapi-kalo { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 10px 8px;
  color: var(--v-ink-3); font: 500 14.5px var(--v-font); }
.hapi-kalo .ik { width: 17px; height: 17px; }
.hapi.mbaruar .hapi-pse { background: var(--v-gjelber-bg); color: var(--v-gjelber); }
#hapi-karta .theksuar, #hapi-karta.theksuar { animation: theksim 1.6s var(--v-ease); }
@keyframes theksim { 0% { box-shadow: 0 0 0 0 rgba(44, 110, 71, .5); } 100% { box-shadow: 0 0 0 14px rgba(44, 110, 71, 0); } }

/* tessera di categoria */
.tessera { width: 56px; height: 56px; border-radius: var(--v-rt); display: grid; place-items: center;
  background: var(--k, #6E6A60); color: #fff; flex: 0 0 auto; }
.tessera .ik { width: 28px; height: 28px; stroke-width: 1.7; }
.tessera-l { width: 72px; height: 72px; }
.tessera-l .ik { width: 34px; height: 34px; }
.tessera-xl { width: 100%; height: 100%; border-radius: 0; background: linear-gradient(160deg, var(--k), color-mix(in srgb, var(--k) 62%, #0A140E)); }
.tessera-xl .ik { width: 68px; height: 68px; stroke-width: 1.4; opacity: .95; }

/* righe di locale */
.lista-lokale { display: grid; gap: 10px; }
.rresht.rresht-v5 {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; width: 100%; text-align: left;
  padding: 12px 14px 12px 12px; background: var(--v-karta); border: 0; border-radius: var(--v-r); box-shadow: var(--v-hije);
  color: var(--v-ink); font: inherit; cursor: pointer; transition: transform .12s var(--v-ease); margin: 0;
}
.rresht.rresht-v5:active { transform: scale(.985); }
.r-tekst { min-width: 0; display: block; }
.r-tekst b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.r-tekst b small { font-size: 13px; font-weight: 500; color: var(--v-ink-3); }
.r-meta { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.3; color: var(--v-ink-2); }
.r-arsye { display: block; margin-top: 3px; font-size: 13.5px; color: var(--v-ink-3); }
.r-arsye.pin-dyshim::after { content: ' · pin i përafërt'; color: var(--v-kuq); }
.r-djathtas { display: grid; justify-items: end; gap: 4px; }
.numer-madh { font: 700 28px/1 var(--v-display); }
.gj { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--v-pill);
  font-size: 13px; font-weight: 600; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.gj-pa { background: #ECE5D8; color: var(--v-ink-2); }
.gj-proces { background: var(--v-blu-bg); color: var(--v-blu); }
.gj-vizituar { background: var(--v-verdhe-bg); color: var(--v-verdhe); }
.gj-klient { background: var(--v-verde); color: var(--v-ari-2); }
.gj-mbyllur { background: var(--v-kuq-bg); color: var(--v-kuq); }
.gj-ri { background: var(--v-gjelber-bg); color: var(--v-gjelber); }
.prio-v5 { font: 700 15px/1 var(--v-display); letter-spacing: .03em; color: var(--v-ink-3); }
.prio-v5.P1 { color: var(--v-verde); }
.bosh-v5 { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 18px; border-radius: var(--v-r);
  background: var(--v-karta); border: 1.5px dashed var(--v-vija); color: var(--v-ink-2); font-size: 15px; }
.bosh-v5 .ik { width: 30px; height: 30px; color: var(--v-ink-3); }
.bosh-v5 b { font-size: 17px; color: var(--v-ink); }
.bosh-v5.i-vogel { display: flex; justify-items: start; text-align: left; align-items: flex-start; gap: 10px; padding: 14px 16px; font-size: 14.5px; }
.bosh-v5.i-vogel .ik { width: 20px; height: 20px; margin-top: 1px; }
.me-shume { display: flex; justify-content: center; padding: 8px 0 4px; }

/* ══ BARRA IN BASSO ═════════════════════════════════════════════════════ */
.shiriti {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 800; width: 100%; max-width: var(--v-gjeresi);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 252, 247, .96); border-top: 1px solid var(--v-vija);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body:not([data-rol]) .shiriti { display: none; }
.sh-b { display: grid; justify-items: center; gap: 2px; padding: 6px 0 2px; min-height: 56px; border: 0; background: none;
  font: 600 12.5px var(--v-font); color: var(--v-ink-3); }
.sh-b .ik { width: 26px; height: 26px; }
.sh-b[aria-current="page"] { color: var(--v-verde); }
.sh-b[aria-current="page"] .ik { stroke-width: 2.1; }
.sh-jam { color: var(--v-verde); }
.sh-rreth { width: 64px; height: 64px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--v-verde); color: var(--v-ari-2); box-shadow: 0 0 0 5px var(--v-faqe), 0 10px 22px rgba(20, 35, 28, .3);
  transition: transform .12s var(--v-ease); }
.sh-rreth .ik { width: 30px; height: 30px; }
.sh-jam:active .sh-rreth { transform: scale(.94); }
body.flete-hapur .shiriti { visibility: hidden; }

/* ══ LOKALET ════════════════════════════════════════════════════════════ */
.kerko { position: sticky; top: 0; z-index: 30; padding: 10px 14px 8px; background: var(--v-faqe); }
.kerko-fusha { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; margin: 0;
  background: var(--v-karta); border-radius: var(--v-pill); box-shadow: inset 0 0 0 1.5px var(--v-vija); }
.kerko-fusha:focus-within { box-shadow: inset 0 0 0 2px var(--v-verde); }
.kerko-fusha .ik { color: var(--v-ink-3); }
#f-kerko { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0 !important; border-radius: 0; outline: 0;
  background: none !important; box-shadow: none !important; font: 500 16px var(--v-font); color: var(--v-ink); display: block; }
#f-kerko::placeholder { color: var(--v-ink-3); }
.ndarje-2 { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #E7DECF; border-radius: var(--v-pill); }
.ndarje-2 button { min-height: 42px; border: 0; border-radius: var(--v-pill); background: none; font: 600 15px var(--v-font);
  color: var(--v-ink-2); display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.ndarje-2 button .ik { width: 19px; height: 19px; }
.ndarje-2 button[aria-pressed="true"] { background: var(--v-karta); color: var(--v-verde); box-shadow: 0 1px 3px rgba(20, 35, 28, .15); }
.cipat { display: flex !important; gap: 8px; overflow-x: auto; padding: 8px 14px 2px; scrollbar-width: none; margin: 0; }
.cipat::-webkit-scrollbar { display: none; }
.cipat-pa-skaj { padding: 0 0 12px; }
.cip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px;
  border-radius: var(--v-pill); border: 0; background: var(--v-karta); box-shadow: inset 0 0 0 1.5px var(--v-vija);
  font: 600 15px var(--v-font); color: var(--v-ink); white-space: nowrap; }
.cip-kat { padding-left: 7px; }
.cip .k { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--k); color: #fff; }
.cip .k .ik { width: 16px; height: 16px; }
.cip small { font-size: 13px; font-weight: 500; color: var(--v-ink-3); }
.cip[aria-pressed="true"] { background: var(--v-verde); color: #F4EEE4; box-shadow: none; }
.cip[aria-pressed="true"] small { color: var(--v-ari-2); }
.numri { padding: 12px 18px 8px; font-size: 14.5px; color: var(--v-ink-2); }
#radha { padding: 0 14px; }
.harta-mbajtese { position: relative; margin: 6px 14px 0; height: calc(100dvh - 330px); min-height: 380px;
  border-radius: var(--v-r); overflow: hidden; box-shadow: var(--v-hije); }
#map { position: absolute; inset: 0; background: #E9E4DA; }
#map .leaflet-tile-pane { filter: grayscale(.75) brightness(1.05) contrast(.94); }
.fab { position: absolute; z-index: 500; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--v-karta); color: var(--v-verde); box-shadow: var(--v-hije); }
.fab-gps { right: 12px; bottom: 12px; }
.fab-legjenda { right: 12px; bottom: 66px; }
.legjenda { position: absolute; z-index: 600; right: 12px; bottom: 120px; max-width: 260px; display: none; padding: 12px 14px;
  border-radius: var(--v-rt); background: var(--v-karta); box-shadow: var(--v-hije-2); font-size: 13.5px; color: var(--v-ink); }
.legjenda.duket { display: block; }
.shto-mbajtese { padding: 16px 14px 0; }
body.pamje-harte .shto-mbajtese { display: none; }

/* ══ SCHEDA DEL LOCALE (e giornata dell'agente) ══════════════════════════ */
.mbulesa { background: rgba(10, 20, 14, .45); z-index: 900; }
.flete {
  left: 50%; right: auto; width: 100%; max-width: var(--v-gjeresi); transform: translate(-50%, 104%);
  max-height: calc(100dvh - 20px); top: auto; bottom: 0; padding-bottom: 0;
  background: var(--v-faqe); border-radius: 26px 26px 0 0; box-shadow: var(--v-hije-2);
  transition: transform .34s var(--v-ease), visibility .34s; visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.flete.duket { transform: translate(-50%, 0); visibility: visible; }
.flete-ditari { z-index: 980; }
#flete { z-index: 1000; }
#flete-brenda, #ditari-brenda { padding-bottom: env(safe-area-inset-bottom); }
.fl-koka { position: relative; height: 150px; overflow: hidden; border-radius: 26px 26px 0 0; background: var(--k); }
.fl-koka .flete-foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fl-mbyll { position: absolute; z-index: 3; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(255, 252, 247, .94); color: var(--v-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.fl-titull { position: relative; padding: 16px 18px 0; }
.fl-kat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--v-ink-2); }
.fl-titull h2 { font: 700 34px/1.02 var(--v-display); margin-top: 6px; overflow-wrap: anywhere; color: var(--v-ink); }
.fl-meta { margin-top: 6px; font-size: 15px; color: var(--v-ink-2); }
.fl-meta b { color: var(--v-verde); }
.fl-shenja { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.shenje-v5 { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--v-pill);
  background: #ECE5D8; color: var(--v-ink-2); font-size: 13px; font-weight: 600; }
.shenje-v5 .ik { width: 15px; height: 15px; }
.shenje-v5.kuq { background: var(--v-kuq-bg); color: var(--v-kuq); }
.shenje-v5.jeshile { background: var(--v-gjelber-bg); color: var(--v-gjelber); }
.shenje-v5 .pika { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.paralajm-v5 { display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px 0; padding: 12px 14px; border-radius: var(--v-rt);
  background: var(--v-verdhe-bg); color: var(--v-verdhe); font-size: 14.5px; font-weight: 500; }
.paralajm-v5 .ik { width: 20px; height: 20px; margin-top: 1px; }
.fl-pjese .paralajm-v5 { margin: 0 0 10px; }
.veprime4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 18px 0; }
.v4 { display: grid; justify-items: center; gap: 4px; padding: 13px 4px 11px; border-radius: var(--v-r); border: 0;
  background: var(--v-karta); box-shadow: var(--v-hije); color: var(--v-verde); font: 600 14px var(--v-font); text-decoration: none; }
.v4 .ik { width: 27px; height: 27px; }
.v4.kryesor { background: var(--v-verde); color: #F4EEE4; }
.v4.kryesor .ik { color: var(--v-ari-2); }
.v4:active { transform: scale(.97); }
.fl-pjese { padding: 24px 18px 0; }
.fl-pjese h3, .fl-pjese-krye h3 { font: 700 22px/1.1 var(--v-display); margin-bottom: 10px; color: var(--v-ink); }
.fl-pjese h3 small { font: 600 15px var(--v-font); color: var(--v-ink-3); margin-left: 4px; }
.fl-pjese-krye { display: flex; justify-content: space-between; align-items: baseline; }
.strategji { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--v-rt);
  background: var(--v-karta); box-shadow: inset 0 0 0 1.5px var(--v-vija-2); font-size: 14.5px; color: var(--v-ink-2); }
.strategji .ik { width: 19px; height: 19px; color: var(--v-ari-3); margin-top: 2px; }
.rresht-vere { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rresht-vere::-webkit-scrollbar { display: none; }
.v-karte { flex: 0 0 192px; scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; padding: 0; border: 0;
  background: var(--v-karta); border-radius: var(--v-r); box-shadow: var(--v-hije); overflow: hidden; color: var(--v-ink); font: inherit; }
.v-foto { height: 148px; display: grid; place-items: center; background: linear-gradient(180deg, #F2E9DA, #E5D8C1); }
.v-foto img { height: 134px; width: auto; filter: drop-shadow(0 6px 8px rgba(10, 20, 14, .2)); }
.v-tekst { display: grid; gap: 2px; padding: 10px 12px 12px; }
.v-tekst b { font-size: 16px; line-height: 1.2; }
.v-prod { font-size: 13.5px; color: var(--v-ink-2); }
.v-rr { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; }
.v-cmim { font: 700 18px/1 var(--v-display); color: var(--v-verde); }
.v-roli { font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--v-pill); background: var(--v-verdhe-bg); color: var(--v-verdhe); }
.v-pse { margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--v-ink-2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.menu-numra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.menu-numra span { padding: 10px 12px; border-radius: var(--v-rt); background: var(--v-karta); font-size: 13px; color: var(--v-ink-2); }
.menu-numra b { display: block; font: 700 22px/1 var(--v-display); color: var(--v-ink); margin-bottom: 2px; }
.menu-vere { list-style: none; margin: 0 0 8px; padding: 0; border-radius: var(--v-rt); background: var(--v-karta); overflow: hidden; }
.menu-vere li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; font-size: 14.5px; }
.menu-vere li + li { border-top: 1px solid var(--v-vija-2); }
.menu-vere b { white-space: nowrap; }
.takime-v5 { display: grid; gap: 8px; }
.takim-v5 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--v-rt);
  background: var(--v-karta); font-size: 14.5px; }
.takim-v5 > span:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.takim-v5 .ik { width: 18px; height: 18px; color: var(--v-ink-3); }
.takim-v5.vone { box-shadow: inset 3px 0 0 var(--v-kuq); }
.fl-pjese .kohore { list-style: none; margin: 0; padding: 0; }
.fl-pjese .kohore li { position: relative; padding: 0 0 14px 22px; border: 0; }
.fl-pjese .kohore li::before { content: ''; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--v-verde-3); }
.fl-pjese .kohore li::after { content: ''; position: absolute; left: 9px; top: 18px; bottom: 0; width: 1.5px; background: var(--v-vija); }
.fl-pjese .kohore li:last-child::after { display: none; }
.fl-pjese .k-krye { font-size: 13px; color: var(--v-ink-3); }
.fl-pjese .k-trup { font-size: 15px; color: var(--v-ink); }
.palos-v5 { margin: 22px 18px 0; border-radius: var(--v-r); background: var(--v-karta); box-shadow: var(--v-hije); overflow: hidden; }
.palos-v5 > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 16px; font-weight: 600; cursor: pointer; }
.palos-v5 > summary::-webkit-details-marker { display: none; }
.palos-v5 > summary i { font-weight: 500; color: var(--v-ink-3); font-size: 13.5px; }
.palos-v5 > summary .ik { color: var(--v-ink-3); }
.palos-v5[open] > summary { border-bottom: 1px solid var(--v-vija-2); }
.palos-v5 .te-dhena { padding: 6px 16px 4px; margin: 0; }
.palos-v5 .te-dhena dt { font-size: 12.5px; color: var(--v-ink-3); margin-top: 10px; text-transform: none; letter-spacing: 0; }
.palos-v5 .te-dhena dd { margin: 2px 0 0; font-size: 15px; }
.palos-v5 .te-dhena select { height: 44px; border-radius: 12px; border: 1.5px solid var(--v-vija); padding: 0 12px; font-size: 16px; background: #fff; }
.palos-v5 .rreshtim, .palos-v5 > p { padding: 10px 16px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.fl-poshte { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-top: 24px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 252, 247, .97);
  border-top: 1px solid var(--v-vija); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fjali-e-vogel { font-size: 13.5px; line-height: 1.45; color: var(--v-ink-3); margin-top: 8px; }
.foto-rresht img { height: 84px; border-radius: 12px; margin-top: 6px; }

/* ══ MODULI (dialoghi): un foglio chiaro, campi grandi ═══════════════════ */
.dialog { left: 50%; right: auto; width: 100%; max-width: var(--v-gjeresi); transform: translate(-50%, 100%);
  background: var(--v-faqe); transition: transform .3s var(--v-ease); z-index: 1100; }
.dialog.duket { transform: translate(-50%, 0); }
.dialog-krye { background: var(--v-karta); color: var(--v-ink); border-bottom: 1px solid var(--v-vija);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.dialog-krye h3 { font: 700 22px/1.1 var(--v-display); color: var(--v-ink); }
.dialog-krye button { color: var(--v-verde); font: 600 16px var(--v-font); padding: 10px 4px; }
.fusha { padding: 16px; }
.fusha label { margin: 18px 0 8px; font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v-ink-2); }
.fusha input[type=text], .fusha input[type=tel], .fusha input[type=date], .fusha input[type=datetime-local], .fusha input[type=search],
.fusha input[type=password], .fusha input[type=email], .fusha input[type=number], .fusha textarea, .fusha select {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--v-vija);
  background: #fff; font: 500 16px var(--v-font); color: var(--v-ink); }
.fusha input:focus, .fusha textarea:focus, .fusha select:focus { outline: none; border-color: var(--v-verde); box-shadow: 0 0 0 3px rgba(20, 35, 28, .1); }
.fusha input[type=file] { font-size: 15px; }
.zgjedhje { gap: 8px; }
.zgjedhje button { min-height: 46px; padding: 0 16px; border-radius: var(--v-pill); border: 0; background: var(--v-karta);
  box-shadow: inset 0 0 0 1.5px var(--v-vija); font: 600 15.5px var(--v-font); color: var(--v-ink); }
.zgjedhje button.akt { background: var(--v-verde); color: #F4EEE4; box-shadow: none; }
.dialog-fund { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 252, 247, .97);
  border-top: 1px solid var(--v-vija); }
.dialog .palos-formular { margin-top: 18px; border-radius: var(--v-rt); background: var(--v-karta); padding: 0 14px 12px; }
.dialog .palos-formular > summary { padding: 14px 0 4px; font-weight: 600; color: var(--v-verde); cursor: pointer; }
.pozicioni-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--v-rt);
  background: var(--v-gjelber-bg); color: var(--v-gjelber); font-weight: 600; }
.pozicioni-ok span { width: 100%; font-weight: 500; font-size: 14px; color: var(--v-ink-2); }
.konfirmo-tekst { font-size: 16px; line-height: 1.5; }

/* ══ VERËRAT ════════════════════════════════════════════════════════════ */
#vererat-trupi .cipat { padding-top: 10px; }
.rrjete-vere { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 14px 0; }
.v-karte-rrjete { flex: none; }
.v-karte-rrjete .v-foto { height: 172px; }
.v-karte-rrjete .v-foto img { height: 156px; }
.v-lloj { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--v-pill); background: #ECE5D8; color: var(--v-ink-2); white-space: nowrap; }
.pika-lloj { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #B9B0A0; }
.lloj-red.pika-lloj { background: #7A1F2B; } .lloj-white.pika-lloj { background: #E2CF8A; }
.lloj-rose.pika-lloj { background: #E59AA0; } .lloj-sparkling.pika-lloj { background: #C9B98A; } .lloj-sweet.pika-lloj { background: #C98A2E; }
.vere-fleta { position: fixed; inset: 0; z-index: 1150; overflow-y: auto; background: var(--v-faqe); color: var(--v-ink);
  transform: translateY(100%); visibility: hidden; transition: transform .32s var(--v-ease), visibility .32s; }
.vere-fleta.hapur { transform: none; visibility: visible; }
.vere-fleta__brenda { max-width: var(--v-gjeresi); margin: 0 auto; padding: 0 0 calc(40px + env(safe-area-inset-bottom)); }
.vf-koka { position: relative; height: 270px; display: grid; place-items: end center; padding-bottom: 14px;
  background: radial-gradient(70% 80% at 50% 70%, #F6EFE2, #E3D5BE); }
.vf-koka img { height: 236px; width: auto; filter: drop-shadow(0 18px 18px rgba(10, 20, 14, .3)); }
.vf-koka .fl-mbyll { top: calc(env(safe-area-inset-top) + 12px); }
.cifrat-vere { margin: 16px 18px 0; }
.cifrat-vere .cifra b { font-size: 24px; }
.vf-shenim { padding: 0 18px; }
.vf-tekst { font-size: 15.5px; line-height: 1.55; color: var(--v-ink); }
.rreshtat { margin: 0; display: grid; gap: 1px; background: var(--v-vija-2); border-radius: var(--v-rt); overflow: hidden; }
.rreshtat > div { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 10px 14px; background: var(--v-karta); }
.rreshtat dt { font-size: 13px; font-weight: 600; color: var(--v-ink-3); }
.rreshtat dd { margin: 0; font-size: 14.5px; }

/* ══ UNË ════════════════════════════════════════════════════════════════ */
#une-trupi { padding: calc(env(safe-area-inset-top) + 16px) 14px 0; }
.une-hero { padding: 18px; border-radius: var(--v-r); background: var(--v-verde); color: #F4EEE4; display: grid;
  grid-template-columns: 60px 1fr; gap: 14px; align-items: center; }
.une-inic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--v-verde-2);
  color: var(--v-ari-2); font: 700 26px/1 var(--v-display); }
.une-hero__t b { display: block; font: 700 28px/1 var(--v-display); }
.une-hero__t span { display: block; margin-top: 4px; font-size: 14px; color: #C9D0C8; }
.une-numra2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.une-numra2 > div { padding: 10px; border-radius: 12px; background: var(--v-verde-2); }
.une-numra2 b { display: block; font: 700 24px/1 var(--v-display); color: #fff; }
.une-numra2 b small { font-size: 14px; color: var(--v-ari-2); }
.une-numra2 span { display: block; margin-top: 3px; font-size: 12.5px; color: #C9D0C8; }
.une-turni { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--v-verde-2); }
.une-turni__gj { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.une-turni__gj i { width: 9px; height: 9px; border-radius: 50%; background: #8A968C; }
.une-turni.aktiv .une-turni__gj i { background: #6FBF8E; }
.une-turni .btn { min-height: 42px; font-size: 15px; }
.une-turni .btn-dyte { background: transparent; color: #F4EEE4; box-shadow: inset 0 0 0 1.5px #5D7266; }
.une-turni .btn-kryesor { background: var(--v-ari); color: var(--v-ink); }
.une-fjalia { grid-column: 1 / -1; font-size: 13px; color: #B9C2BA; }
.une-eyebrow { margin: 22px 4px 10px; font: 700 22px/1.1 var(--v-display); letter-spacing: 0; text-transform: none; color: var(--v-ink); }
.une-rrjeta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.une-tile { display: grid; align-content: start; gap: 4px; text-align: left; padding: 14px; border: 0; border-radius: var(--v-r);
  background: var(--v-karta); box-shadow: var(--v-hije); color: var(--v-ink); font: inherit; min-height: 128px; }
.une-tile__ik { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--v-panna); color: var(--v-verde); margin-bottom: 6px; }
.une-tile__t { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.une-tile__shenje { font-style: normal; font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--v-pill);
  background: var(--v-kuq); color: #fff; display: inline-grid; place-items: center; }
.une-tile__p { font-size: 13.5px; line-height: 1.35; color: var(--v-ink-2); }
.une-tile--kujdes .une-tile__ik { background: var(--v-verdhe-bg); color: var(--v-verdhe); }
.une-tile--dil .une-tile__ik { background: var(--v-kuq-bg); color: var(--v-kuq); }
.une-pale { margin-top: 12px; border-radius: var(--v-r); background: var(--v-karta); box-shadow: var(--v-hije); overflow: hidden; }
.une-pale > summary { list-style: none; padding: 15px 16px; cursor: pointer; }
.une-pale > summary::-webkit-details-marker { display: none; }
.une-pale__t { display: block; font-weight: 700; font-size: 16.5px; }
.une-pale__p { display: block; font-size: 13.5px; color: var(--v-ink-3); margin-top: 2px; }
.une-pale__trup { padding: 0 12px 12px; }
.une-shenim { margin: 14px 4px 0; font-size: 12.5px; color: var(--v-ink-3); }
.blloku { border-radius: var(--v-rt); background: var(--v-faqe); margin-top: 8px; overflow: hidden; }
.blloku h3 { font: 700 19px/1.2 var(--v-display); padding: 12px 12px 6px; }
.kutiza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px 10px; }
.kutiz { padding: 8px 10px; border-radius: 10px; background: var(--v-karta); }
.kutiz b { display: block; font: 700 20px/1 var(--v-display); }
.kutiz span { font-size: 12px; color: var(--v-ink-3); }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { padding: 7px 8px; text-align: left; border-top: 1px solid var(--v-vija-2); }
.tabela .num { text-align: right; }

/* ══ PASQYRA (direzione) ═════════════════════════════════════════════════ */
.lista-live { display: grid; gap: 10px; }
.live-karte { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 14px; border: 0; border-radius: var(--v-r); background: var(--v-karta); box-shadow: var(--v-hije); color: var(--v-ink); font: inherit; }
.avatar-v5 { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--v-verde);
  color: var(--v-ari-2); font: 700 24px/1 var(--v-display); }
.avatar-v5.bosh { background: #E7DECF; color: var(--v-ink-3); }
.live-tekst { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.live-tekst b { font-size: 18px; }
.live-rr { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--v-ink-2); }
.live-rr .ik { width: 16px; height: 16px; color: var(--v-ink-3); }
.live-alarm { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--v-kuq); }
.live-alarm .ik { width: 16px; height: 16px; }
.live-shig { color: var(--v-ink-3); }
.harte-v5 { height: 300px; margin-top: 12px; border-radius: var(--v-r); overflow: hidden; box-shadow: var(--v-hije); background: #E9E4DA; }
.harte-v5 .leaflet-tile-pane { filter: grayscale(.75) brightness(1.05) contrast(.94); }
.agjent-pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--v-verde); color: var(--v-ari-2);
  font: 700 16px/1 var(--v-display); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(44, 110, 71, .35); }
.agjent-pin.i-vjeter { background: #6E6A60; color: #fff; box-shadow: 0 0 0 3px #fff; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { padding: 14px; border-radius: var(--v-r); background: var(--v-karta); box-shadow: var(--v-hije); text-align: left; border: 0; font: inherit; color: var(--v-ink); }
.kpi b { display: block; font: 700 40px/1 var(--v-display); }
.kpi span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.3; color: var(--v-ink-2); }
.kpi h4 { font-size: 15px; margin-bottom: 8px; }
.kpi.i-gjere { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.bento > .kpi.i-gjere:first-child { background: var(--v-verde); }
.bento > .kpi.i-gjere:first-child b { font-size: 60px; color: #F6F0E6; }
.bento > .kpi.i-gjere:first-child span { color: #D2D8D0; }
.bento > .kpi.i-gjere:first-child em { font-style: normal; color: var(--v-ari-2); font-weight: 600; }
.kpi-kuq { background: var(--v-kuq-bg); }
.kpi-kuq b { color: var(--v-kuq); }
.kpi-kuq:disabled { background: var(--v-karta); }
.kpi-kuq:disabled b { color: var(--v-ink); }
.shirit-rez { display: flex; height: 14px; border-radius: var(--v-pill); overflow: hidden; gap: 2px; }
.shirit-rez span { display: block; }
.legjenda-rez { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.legjenda-rez div { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 14.5px; }
.legjenda-rez i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.legjenda-rez b { font: 700 18px/1 var(--v-display); }
.dita-k { width: 56px; height: 56px; border-radius: var(--v-rt); background: var(--v-panna); display: grid; place-items: center; align-content: center; }
.dita-k b { font: 700 22px/1 var(--v-display); }
.dita-k small { font-size: 12px; font-weight: 600; color: var(--v-ink-2); }
.pikat-rez { display: flex; gap: 3px; margin-top: 5px; }
.pikat-rez i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dy-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-top { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14.5px; border-top: 1px solid var(--v-vija-2); }
.rr-top b { font: 700 17px/1.2 var(--v-display); }
.llogari-v5 { cursor: default; }
.llogari-v5.joaktiv { opacity: .6; }
.llogari-v5 .avatar-v5 { width: 44px; height: 44px; font-size: 20px; }
.llogari-v5 { grid-template-columns: 44px 1fr auto; }
.dita-titull { padding-top: 20px; padding-right: 64px; }
.dita-titull .fl-mbyll { top: 14px; right: 14px; }
.dita-harta-mb { padding: 0 18px; }
.dita-harta-mb .harte-v5 { height: 280px; }
.dita-harta-mb .shenim-v5 { margin-top: 8px; }
.ndalesat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ndalese { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; width: 100%; text-align: left; padding: 12px;
  border: 0; border-radius: var(--v-rt); background: var(--v-karta); box-shadow: var(--v-hije); font: inherit; color: var(--v-ink); }
.ndalese-nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 15px/1 var(--v-display); }
.ndalese-nr.ne-harte { width: 28px; height: 28px; box-shadow: 0 0 0 2px #fff; }
.dita-gjurma { padding: 16px 18px 24px; }

/* ══ AVVISI, BENVENUTO, INSTALLAZIONE ════════════════════════════════════ */
.njoftim { bottom: calc(var(--v-bar) + env(safe-area-inset-bottom) + 18px); background: var(--v-ink); color: #F4EEE4;
  font: 500 15px/1.35 var(--v-font); padding: 13px 18px; border-radius: 14px; max-width: min(92vw, 460px); z-index: 1250; }
.njoftim.gabim { background: var(--v-kuq); color: #fff; }
body.flete-hapur .njoftim { bottom: calc(96px + env(safe-area-inset-bottom)); }
#udhezimi { background: rgba(10, 20, 14, .5); }
.udhezim-karte { background: var(--v-karta); color: var(--v-ink); border-radius: 24px 24px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
.udhezim-karte h2 { font: 700 30px/1.05 var(--v-display); color: var(--v-ink); }
.udhezim-karte p { font-size: 16px; line-height: 1.5; color: var(--v-ink-2); }
.instalo { bottom: calc(var(--v-bar) + env(safe-area-inset-bottom) + 14px) !important; background: var(--v-verde) !important; color: #F4EEE4 !important;
  border-radius: 18px !important; }
.instalo-btn { background: var(--v-ari) !important; color: var(--v-ink) !important; border-radius: var(--v-pill) !important; }

@media (min-width: 600px) {
  .rrjete-vere { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── ritocchi dopo le prime fotografie (23/10/2026) ── */
/* app.css fissava l'attribuzione OSM sopra il vecchio pannello: in v5 galleggiava sulle pagine */
.leaflet-control-attribution { position: relative !important; bottom: auto !important; right: auto !important;
  font-size: 10px; padding: 1px 6px; border-radius: 6px 0 0 0; background: rgba(255, 252, 247, .85) !important; transition: none; }
body:has(#flete.duket) .harte-v5 .leaflet-control-attribution { opacity: 1; }
.blok-siper { margin-top: 0; padding-top: 22px; }
#faqe-management .koka { padding-bottom: 50px; }
/* i moduli: il pulsante «Ruaj» resta in fondo allo schermo anche con poco contenuto */
#dialog-brenda { min-height: 100%; display: flex; flex-direction: column; }
#dialog-brenda > .fusha { flex: 1 0 auto; }
.dialog-krye button { text-decoration: none; }
.une-turni { flex-wrap: wrap; }
.une-turni .btn { flex: 1 1 150px; }
/* ⚠️ [hidden] deve vincere: `.hyrje-kuti label{display:block}` e `.btn{display:inline-flex}`
   lo scavalcavano, e la pagina d'accesso vera mostrava i campi della prova col PIN. */
[hidden] { display: none !important; }
/* il benvenuto: sul computer resta nella colonna dell'app, non a tutta finestra */
#udhezimi .udhezim-karte { max-width: var(--v-gjeresi); margin-left: auto; margin-right: auto; }

/* ── v52: la direzione come piattaforma di controllo (23/10/2026) ── */
.agjent-karte { padding: 16px; border-radius: var(--v-r); background: var(--v-karta); box-shadow: var(--v-hije); display: grid; gap: 12px; }
.ak-krye { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.ak-krye b { display: block; font: 700 22px/1.1 var(--v-display); margin-bottom: 4px; }
.agjent-karte .live-rr { align-items: flex-start; }
.agjent-karte .live-rr .ik { margin-top: 1px; }
.ak-numra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ak-numra span { padding: 8px 6px; border-radius: 12px; background: var(--v-faqe); text-align: center; font-size: 12px; color: var(--v-ink-2); line-height: 1.2; }
.ak-numra b { display: block; font: 700 24px/1 var(--v-display); color: var(--v-ink); margin-bottom: 2px; }
.ak-koha { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ak-koha li { display: grid; grid-template-columns: 44px 20px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--v-vija-2); font-size: 14.5px; }
.ak-koha time { font: 700 15px/1.3 var(--v-display); color: var(--v-verde); }
.ak-koha .ik { width: 18px; height: 18px; color: var(--v-ink-3); margin-top: 1px; }
.ak-koha b { font-weight: 600; }
.ak-bosh { font-size: 14.5px; color: var(--v-ink-2); }
.ak-bosh .kuq, .kuq { color: var(--v-kuq); }
.agjent-karte .btn { min-height: 46px; font-size: 15.5px; white-space: normal; text-align: center; line-height: 1.2; }
.zgjedhje-porosi button { min-height: 44px; }
.veprime-porosi { grid-template-columns: repeat(3, 1fr); padding-top: 22px; }
.rreshtat.rreshtat-porosi > div { grid-template-columns: 44px 1fr; }

/* ── v53: la stessa app per tutti, il Management ha la sua pagina (23/10/2026) ── */
/* la barra: icona con il numero degli ordini nuovi */
.sh-ik { position: relative; display: grid; place-items: center; }
.sh-shenje { position: absolute; top: -5px; right: -11px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--v-pill);
  background: var(--v-kuq); color: #fff; font: 700 11.5px/19px var(--v-font); font-style: normal; text-align: center;
  box-shadow: 0 0 0 2px #FFFCF7; }
.sh-b span:last-child { white-space: nowrap; }
/* le tre parti del Management: un selettore che si appoggia sulla testata verde */
.ndarje-mg { position: relative; z-index: 2; margin: -30px 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 5px; border-radius: var(--v-pill); background: var(--v-karta); box-shadow: 0 8px 22px rgba(20, 35, 28, .16); }
.ndarje-mg button { position: relative; min-height: 46px; border: 0; border-radius: var(--v-pill); background: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 15px var(--v-font); color: var(--v-ink-2); }
.ndarje-mg button .ik { width: 19px; height: 19px; flex: 0 0 auto; }
.ndarje-mg button[aria-selected="true"] { background: var(--v-verde); color: var(--v-panna); }
.ndarje-mg button[aria-selected="true"] .ik { color: var(--v-ari-2); }
.mg-shenje { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--v-pill); background: var(--v-kuq); color: #fff;
  font: 700 12px/20px var(--v-font); font-style: normal; }
@media (max-width: 370px) { .ndarje-mg button { font-size: 14px; gap: 4px; } .ndarje-mg button .ik { display: none; } }
.mg-permbledhje { padding: 22px 16px 0; font-size: 15px; color: var(--v-ink-2); }
.mg-permbledhje b { color: var(--v-kuq); }
#porosite-trupi .cipat { padding-top: 10px; }
.kpi-lidhje { cursor: pointer; }
.kpi-lidhje span::after { content: ' →'; color: var(--v-ari-3); }
/* Llogaritë: l'account di chi guida, senza contatori */
#mg-une .une-hero-mg { margin-bottom: 4px; }
.une-hero-mg .une-hero__t span + span { margin-top: 2px; word-break: break-all; }
.dok-mg { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--v-vija-2); }
.dok-mg:first-child { border-top: 0; padding-top: 2px; }
.dok-mg > b { font-size: 15.5px; }
.dok-mg-rr { display: flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--v-ink-2); }
.dok-mg-rr .ik { width: 18px; height: 18px; color: var(--v-ink-3); }
#lista-porosi { padding: 0 14px; }
/* la disponibilità di un vino (dal sito, 23/10/2026) */
.v-gjendja { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: var(--v-pill); font: 600 12px/1.5 var(--v-font); }
.v-gj-se-shpejti { background: #F3E7CF; color: var(--v-ari-3); }
.v-gj-mbaruar { background: #ECE7E1; color: var(--v-ink-3); }
.v-karte.pa-gjendje img { opacity: .55; }
.v-gjendja-rr { margin-top: 6px; font-size: 13.5px; color: var(--v-ink-2); }
/* locale senza prova di vino (verifica del 23/10/2026): lo guarda l'agente sul posto */
.vere-pa-prove { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 4px 16px 12px; padding: 12px 14px;
  border-radius: var(--v-rt); background: #F7EEDB; color: var(--v-ink); }
.vere-pa-prove > .ik { width: 20px; height: 20px; color: var(--v-ari-3); margin-top: 1px; }
.vere-pa-prove b { font-size: 15px; }
.vere-pa-prove p { margin: 3px 0 8px; font-size: 14px; color: var(--v-ink-2); }
/* appuntamenti: «U krye» · «Shtyje» · «Mbylle» (23/10/2026) */
.takim-v5 { flex-wrap: wrap; }
.takim-veprime { display: flex; flex-wrap: wrap; gap: 6px; }
.takim-veprime .btn { min-height: 38px; }
.kpi b small { font-size: 20px; color: var(--v-ink-3); font-weight: 600; }
.kujtese-riserve { margin-top: 18px; }
/* Management sul computer (revisione esterna, 23/10/2026): non una colonna da telefono ma una pagina
   larga, per confrontare agenti, numeri e ordini. Sul telefono non cambia niente. */
@media (min-width: 1000px) {
  body[data-faqe="management"] { --v-gjeresi: 1080px; }
  body[data-faqe="management"] .lista-live { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body[data-faqe="management"] .harte-v5 { height: 420px; }
  body[data-faqe="management"] .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-faqe="management"] .bento .kpi.i-gjere { grid-column: span 2; }
  body[data-faqe="management"] #lista-porosi,
  body[data-faqe="management"] #pasqyra-trupi .lista-lokale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-faqe="management"] .ndarje-mg { max-width: 620px; margin-left: auto; margin-right: auto; }
}
.kerko-vere { position: static; padding: 6px 14px 4px; }