/* ==========================================================================
   GPS TEREN — traseele si opririle reale ale masinilor (tab in grupul Vizite)
   Namespace vg-*. Foloseste tokenii din css/variables.css, ca sa urmeze tema
   clara/intunecata fara nicio culoare fixa aici.
   ========================================================================== */

#view-vizite-gps .vg-panel { display: flex; flex-direction: column; gap: 14px; }

/* ── Bara de stare: ce s-a adus si cand ─────────────────────────────────── */
.vg-stare-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--surface-2, #f1f4f9); border: 1px solid var(--border, #e7ecf3);
    font-size: 12px; font-weight: 600; color: var(--text-2, #475569);
}
.vg-chip i { opacity: .75; }
.vg-chip.ok { border-color: color-mix(in srgb, #16a34a 40%, transparent); color: #16a34a; }
.vg-chip.warn { border-color: color-mix(in srgb, #d97706 45%, transparent); color: #b45309; }

/* ── Bara de comenzi ────────────────────────────────────────────────────── */
.vg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.vg-spacer { flex: 1 1 auto; }
.vg-camp { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--text-3, #64748b); }
.vg-camp input, .vg-camp select {
    padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border, #e7ecf3); background: var(--surface, #fff); color: var(--text, #1f2937);
}

.vg-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px;
    background: var(--surface-2, #f1f4f9); border: 1px solid var(--border, #e7ecf3); }
.vg-seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-2, #475569); }
.vg-seg-btn.active { background: var(--surface, #fff); color: var(--brand, #003349);
    box-shadow: 0 1px 3px rgba(0, 51, 73, .12); }

.vg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: 8px; border: 1px solid var(--border, #e7ecf3);
    background: var(--surface, #fff); color: var(--text, #1f2937);
    font-size: 13px; font-weight: 600; cursor: pointer; }
.vg-btn:hover { border-color: var(--brand, #003349); }
.vg-btn:disabled { opacity: .6; cursor: default; }
.vg-btn-mic { padding: 5px 10px; font-size: 12px; }

/* ── Tabel ──────────────────────────────────────────────────────────────── */
.vg-tabel-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border, #e7ecf3); }
.vg-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.vg-tabel thead th { position: sticky; top: 0; z-index: 1;
    background: var(--brand, #003349); color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; padding: 10px 12px; white-space: nowrap; }
.vg-th-left { text-align: left; }
.vg-th-num { text-align: right; }
.vg-tabel tbody td { padding: 9px 12px; border-top: 1px solid var(--border, #e7ecf3); vertical-align: middle; }
.vg-tabel tbody tr:nth-child(even of .vg-rand) { background: var(--surface-2, #f8fafc); }
.vg-td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-td-ora, .vg-td-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vg-td-strong { font-weight: 600; color: var(--text, #1f2937); }
.vg-td-actiuni { text-align: right; white-space: nowrap; }

.vg-rand { cursor: pointer; }
.vg-rand:hover { background: color-mix(in srgb, var(--brand, #003349) 5%, transparent) !important; }
.vg-rand.open { background: color-mix(in srgb, var(--brand, #003349) 8%, transparent) !important; }
.vg-rand-stins { opacity: .55; }
.vg-exp { margin-right: 6px; opacity: .5; font-size: 11px; }

.vg-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--surface-2, #f1f4f9); border: 1px solid var(--border, #e7ecf3); color: var(--text-2, #475569); }
.vg-tag-b2b { background: color-mix(in srgb, var(--brand, #003349) 12%, transparent); color: var(--brand, #003349); }
.vg-tag-stins { opacity: .7; font-weight: 600; }

/* ── Ziua desfasurata ───────────────────────────────────────────────────── */
.vg-subrand > td { padding: 0 !important; background: var(--surface-2, #f8fafc); }
.vg-sub { padding: 16px 18px; }

.vg-kpiuri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vg-kpi { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--border, #e7ecf3); }
.vg-kpi i { font-size: 15px; color: var(--brand, #003349); opacity: .7; }
.vg-kpi b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--text, #1f2937); }
.vg-kpi span { display: block; font-size: 11px; color: var(--text-3, #64748b); }

/* Cronologia zilei: o linie verticala prin toate opririle, cu pini numerotati. */
.vg-opriri { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.vg-opriri::before { content: ''; position: absolute; left: 74px; top: 12px; bottom: 12px;
    width: 2px; background: var(--border, #e7ecf3); }
.vg-op { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; position: relative; }
.vg-op-ora { flex: 0 0 58px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--text-3, #64748b); padding-top: 3px; }
.vg-op-pin { flex: 0 0 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 700; z-index: 1;
    background: var(--brand, #003349); color: #fff; }
.vg-op-txt { flex: 1 1 auto; font-size: 13px; padding-top: 2px; }
.vg-op-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3, #64748b); }
.vg-op-baza .vg-op-pin { background: var(--surface-2, #f1f4f9); color: var(--text-3, #64748b);
    border: 1px solid var(--border, #e7ecf3); }
.vg-op-baza { opacity: .7; }
.vg-op-scurt .vg-op-pin { background: var(--text-3, #94a3b8); }

.vg-nota { margin: 12px 0 0; font-size: 12px; color: var(--text-3, #64748b); line-height: 1.5; }
.vg-nota i { opacity: .7; margin-right: 4px; }

/* ── Cautare (tabul Masini) ─────────────────────────────────────────────── */
.vg-cautare { display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin-bottom: 10px;
    border-radius: 9px; border: 1px solid var(--border, #e7ecf3); background: var(--surface, #fff); }
.vg-cautare i { opacity: .5; }
.vg-cautare input { flex: 1 1 auto; border: 0; background: transparent; font-size: 13px;
    color: var(--text, #1f2937); outline: none; }
.vg-cautare span { font-size: 12px; color: var(--text-3, #64748b); white-space: nowrap; }

.vg-tabel-masini select, .vg-tabel-masini input[type="date"] {
    padding: 5px 8px; border-radius: 7px; font-size: 12px;
    border: 1px solid var(--border, #e7ecf3); background: var(--surface, #fff); color: var(--text, #1f2937);
}

@media (max-width: 760px) {
    .vg-bar { gap: 8px; }
    .vg-spacer { display: none; }
    .vg-opriri::before { left: 62px; }
    .vg-op-ora { flex-basis: 46px; font-size: 11px; }
}

/* ── Ziua: cronologie + harta, una langa alta ───────────────────────────── */
.vg-doua { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.15fr); gap: 16px; align-items: start; }
.vg-doua .vg-opriri { max-height: 520px; overflow-y: auto; padding-right: 6px; }

.vg-harta-cutie { position: sticky; top: 12px; }
.vg-harta { height: 520px; border-radius: 12px; border: 1px solid var(--border, #e7ecf3);
    background: var(--surface-2, #f1f4f9); overflow: hidden; }
/* Leaflet isi pune fundalul lui; il lasam sa respecte colturile rotunjite. */
.vg-harta .leaflet-container { border-radius: 12px; font: inherit; }
.vg-harta .leaflet-popup-content { font-size: 12.5px; line-height: 1.45; }
.vg-harta .leaflet-popup-content small { color: var(--text-3, #64748b); }

.vg-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px;
    font-size: 11.5px; color: var(--text-3, #64748b); }
.vg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.vg-bulina { width: 10px; height: 10px; border-radius: 50%; background: var(--pin, #64748b);
    display: inline-block; flex: 0 0 auto; }

/* Pinurile de pe harta: divIcon, deci CSS pur — fara imaginile implicite Leaflet.
   Cerc, nu „lacrima": lacrima cere o rotatie de -45deg, iar numarul dinauntru ar
   trebui contrarotit ca sa ramana drept. Un cerc numerotat se citeste la fel de
   bine si nu are cum sa iasa stramb. */
.vg-pin-wrap { background: none; border: 0; }
.vg-pin { display: flex; align-items: center; justify-content: center; line-height: 1;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--pin, #003349); color: #fff; font-size: 11px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3); border: 2px solid #fff; }
.vg-pin { width: 28px; height: 28px; font-size: 11.5px; }

/* Pinul unui partener: patrat rotunjit, ca sa NU semene cu oprirea (cerc numerotat).
   Mai mare si cu chenar alb gros — pe satelit, un punct mic dispare in imagine. */
.vg-pin-partener { display: block; width: 20px; height: 20px; border-radius: 6px;
    background: var(--pin, #475569); border: 3px solid #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .45); }
.vg-pin-partener.atins { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin) 35%, transparent),
    0 2px 8px rgba(0, 0, 0, .45); }

.vg-patrat { width: 11px; height: 11px; border-radius: 3px; background: var(--pin, #475569);
    display: inline-block; flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.vg-legenda b { font-weight: 700; color: var(--text-2, #475569); }
.vg-legenda-a-doua { margin-left: 6px; }

/* Comutatorul de straturi al Leaflet, adus la fonturile aplicatiei. */
.vg-harta .leaflet-control-layers { border-radius: 9px; border: 1px solid var(--border, #e7ecf3);
    box-shadow: 0 2px 8px rgba(0, 51, 73, .14); }
.vg-harta .leaflet-control-layers-list { font-size: 12.5px; padding: 4px 2px; }

/* Legatura oprire -> partener, in cronologie */
.vg-legat { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px;
    padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.vg-legat-exact { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.vg-legat-zona { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.vg-op-exact .vg-op-pin { background: #16a34a; }

@media (max-width: 1100px) {
    .vg-doua { grid-template-columns: 1fr; }
    .vg-harta-cutie { position: static; }
    .vg-harta { height: 380px; }
    .vg-doua .vg-opriri { max-height: none; }
}

/* ── Regionali: procentul sustinut ──────────────────────────────────────── */
.vg-th-share { min-width: 130px; }
.vg-procent { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.vg-procent-bar { height: 7px; border-radius: 999px; background: var(--text-3, #94a3b8); flex: 0 0 auto; max-width: 74px; }
.vg-procent-bar.ok { background: #16a34a; }
.vg-procent-bar.mediu { background: #d97706; }
.vg-procent-bar.rau { background: #dc2626; }
.vg-procent span { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-ok { color: #15803d; font-weight: 700; }
.vg-mediu { color: #b45309; font-weight: 700; }
.vg-rau { color: #b91c1c; font-weight: 700; }
.vg-td-gol { color: var(--text-3, #94a3b8); }
.vg-sub-txt { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-3, #64748b); }

/* ── Verificare: cartonase si verdicte ──────────────────────────────────── */
.vg-carduri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vg-card { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-radius: 11px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e7ecf3); min-width: 132px; }
.vg-card i { font-size: 17px; opacity: .8; }
.vg-card b { display: block; font-size: 19px; font-weight: 800; line-height: 1.1; }
.vg-card span { display: block; font-size: 11.5px; color: var(--text-3, #64748b); }
.vg-card-confirmat { border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.vg-card-confirmat i, .vg-card-confirmat b { color: #16a34a; }
.vg-card-probabil { border-color: color-mix(in srgb, #d97706 45%, transparent); }
.vg-card-probabil i, .vg-card-probabil b { color: #b45309; }
.vg-card-neconfirmat { border-color: color-mix(in srgb, #dc2626 45%, transparent); }
.vg-card-neconfirmat i, .vg-card-neconfirmat b { color: #b91c1c; }
.vg-card-fara-gps i, .vg-card-fara-gps b { color: var(--text-3, #64748b); }

.vg-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vg-verdict-confirmat { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.vg-verdict-probabil { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.vg-verdict-neconfirmat { background: color-mix(in srgb, #dc2626 15%, transparent); color: #b91c1c; }
.vg-verdict-fara-gps { background: var(--surface-2, #f1f4f9); color: var(--text-3, #64748b); }
/* Randul neconfirmat primeste o dunga rosie in stanga: se gaseste din scroll. */
.vg-v-neconfirmat td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* Avertisment: locul asta nu poate dovedi o vizita (sediu = baza masinii). */
.vg-avertisment { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px;
    padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: color-mix(in srgb, #dc2626 13%, transparent); color: #b91c1c; }

/* Indiciu ca randurile se deschid: harta sta in ziua desfasurata, iar fara textul
   asta nu o gaseste nimeni — nici cine a construit ecranul. */
.vg-indiciu { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    padding: 9px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.45;
    background: color-mix(in srgb, var(--brand, #003349) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand, #003349) 18%, transparent);
    color: var(--text-2, #475569); }
.vg-indiciu i { color: var(--brand, #003349); opacity: .8; }

.vg-td-harta { text-align: right; white-space: nowrap; }
.vg-deschide { display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: var(--surface-2, #f1f4f9); border: 1px solid var(--border, #e7ecf3);
    color: var(--text-2, #475569); }
.vg-rand:hover .vg-deschide { border-color: var(--brand, #003349); color: var(--brand, #003349); }
.vg-rand.open .vg-deschide { background: var(--brand, #003349); border-color: var(--brand, #003349); color: #fff; }