/* Landing — orașul Hubeez (secțiunea de sub hero). Doar pe PC; pe telefon secțiunea nu se afișează. */
.or-sectiune {
  --or-noapte: #0a0a14;
  --or-miere: #FF7A45;
  --or-miere-adanca: #e67e00;
  --or-polen: #FFA982;
  --or-text: #f5efe0;
  --or-text-stins: #b3aa96;
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 65% at 55% 50%, #2a1d0c 0%, #120d10 55%, var(--or-noapte) 100%);
  color: var(--or-text);
  font-family: 'Outfit', system-ui, sans-serif;
}
@media (max-width: 900px) { .or-sectiune { display: none; } }

.or-macheta { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform 1.4s cubic-bezier(.45, .05, .25, 1); --z: 1; opacity: 0; }
.or-sectiune.or-gata .or-macheta { opacity: 1; transition: transform 1.4s cubic-bezier(.45, .05, .25, 1), opacity .8s ease; }
.or-sectiune.or-in-urmarire .or-macheta { transition: none; }
.or-randare { width: 100%; height: 100%; display: block; user-select: none; }
.or-strat { position: absolute; inset: 0; pointer-events: none; }
.or-harta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* Geofence-uri și ping-uri GPS */
.or-geofence { fill: rgba(125, 211, 252, .07); stroke: rgba(125, 211, 252, .55); stroke-width: 2.5; stroke-dasharray: 10 8; transition: fill .4s, stroke .4s; }
.or-geofence.or-activ { fill: rgba(255, 122, 69, .16); stroke: rgba(255, 122, 69, .95); }
.or-geofence-eticheta { fill: #e0f2fe; font: 600 22px 'Outfit', sans-serif; paint-order: stroke; stroke: rgba(10, 10, 20, .75); stroke-width: 6px; }
.or-sectiune:not(.or-flota-live):not(.or-in-urmarire) .or-geofence,
.or-sectiune:not(.or-flota-live):not(.or-in-urmarire) .or-geofence-eticheta { opacity: .35; }
.or-ping { fill: none; stroke: rgba(245, 239, 224, .7); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: or-ping 1.6s ease-out forwards; }
@keyframes or-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* Pini */
.or-pin {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 0; padding: 0; background: var(--or-miere);
  box-shadow: 0 0 0 4px rgba(255, 122, 69, .3), 0 2px 10px rgba(0, 0, 0, .45);
  pointer-events: auto; cursor: pointer; transform: scale(calc(1 / var(--z)));
}
.or-pin::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--or-miere); opacity: 0; }
.or-pin.or-pulseaza::after { animation: or-unda 1s ease-out; }
@keyframes or-unda { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(2.6); } }
.or-pin:focus-visible { outline: 2px solid var(--or-polen); outline-offset: 4px; }
.or-eticheta {
  position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%);
  white-space: nowrap; font: 500 .82rem 'Outfit', sans-serif;
  background: rgba(10, 10, 20, .85); color: var(--or-text); padding: .3rem .6rem; border-radius: 6px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.or-pin:hover .or-eticheta, .or-pin:focus-visible .or-eticheta, .or-pin.or-activ .or-eticheta { opacity: 1; }
.or-pin.or-activ { background: var(--or-polen); }

/* Albine */
.or-albina { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; will-change: transform; }
.or-albina.or-mare { width: 48px; height: 48px; margin: -24px 0 0 -24px; opacity: 0; }
.or-sectiune.or-in-flux .or-albina.or-mare { opacity: 1; }
.or-albina img { width: 100%; height: 100%; display: block; }
.or-albina img + img { display: none; }
.or-albina.or-f1 img:first-of-type { display: none; }
.or-albina.or-f1 img + img { display: block; }
.or-pachet {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 3px;
  background: var(--or-polen); box-shadow: 0 0 10px 4px rgba(255, 122, 69, .75); transform: translate(-11px, 0); display: none;
}
.or-albina.or-cu-pachet .or-pachet, .or-albina.or-mare .or-pachet { display: block; }
.or-sectiune.or-in-flux .or-albina:not(.or-mare) { opacity: 0 !important; }

/* Vehicule (din atlas: 16 direcții pe coloane, tipurile pe rânduri) */
.or-vehicule { position: absolute; inset: 0; pointer-events: none; }
.or-vehicul {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; will-change: transform;
  background-repeat: no-repeat; transition: opacity .25s;
}
.or-tag {
  position: absolute; left: 50%; bottom: 72%; transform: translateX(-50%) scale(calc(1 / var(--z))); transform-origin: bottom center;
  white-space: nowrap; font: 500 .74rem 'Outfit', sans-serif; color: var(--or-text);
  background: rgba(10, 10, 20, .82); padding: .18rem .45rem; border-radius: 5px; border-left: 3px solid var(--c, #FF7A45);
  opacity: 0; transition: opacity .2s;
}
.or-vehicul:hover .or-tag, .or-vehicul.or-urmarit .or-tag, .or-sectiune.or-flota-live .or-tag { opacity: 1; }

/* Cardul din stânga jos */
.or-card {
  position: absolute; left: 1.5rem; bottom: 1.5rem; width: 330px; max-height: calc(100% - 7rem); overflow-y: auto;
  padding: 1.2rem 1.35rem; background: rgba(10, 10, 20, .84);
  border: 1px solid rgba(255, 122, 69, .18); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  transition: opacity .6s; z-index: 2;
}
.or-sectiune.or-in-flux .or-card, .or-sectiune.or-in-urmarire .or-card { opacity: 0; pointer-events: none; }
.or-card-eticheta { margin: 0 0 .4rem; color: var(--or-miere); font-weight: 600; font-size: .85rem; }
.or-card h2 { margin: 0 0 .8rem; font-size: 1.45rem; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.or-butoane { display: flex; gap: .6rem; flex-wrap: wrap; }
.or-buton { font: inherit; font-weight: 600; padding: .65rem 1.15rem; border-radius: 999px; text-decoration: none; cursor: pointer; }
.or-buton-plin { background: linear-gradient(135deg, var(--or-miere), #e67e00); color: #fff; border: 0; }
.or-buton-gol { background: rgba(10, 10, 20, .78); color: var(--or-miere); border: 1.5px solid var(--or-miere); }
.or-fluxuri { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.or-fluxuri p { width: 100%; margin: 0 0 .1rem; color: var(--or-text-stins); font-size: .88rem; }
.or-fluxuri button { font: inherit; font-size: .85rem; color: var(--or-text); background: rgba(10, 10, 20, .78); border: 1px solid rgba(255, 122, 69, .4); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.or-fluxuri button:hover { background: rgba(255, 122, 69, .22); }
.or-buton:focus-visible, .or-fluxuri button:focus-visible { outline: 2px solid var(--or-polen); outline-offset: 2px; }

.or-panou { display: none; margin-top: 1rem; border-left: 2px solid var(--or-miere-adanca); padding: .2rem 0 .2rem 1rem; }
.or-sectiune.or-panou-deschis .or-panou { display: block; }
.or-panou-zona { color: var(--or-miere-adanca); font-size: .85rem; margin: 0 0 .2rem; }
.or-panou-titlu { font-size: 1.2rem; font-weight: 600; margin: 0 0 .35rem; color: var(--or-miere); }
.or-panou-text { margin: 0 0 .6rem; line-height: 1.5; font-size: .92rem; }
.or-panou-functii { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.or-panou-functii li { font-size: .8rem; background: rgba(255, 122, 69, .12); border: 1px solid rgba(255, 122, 69, .3); padding: .15rem .5rem; border-radius: 999px; }
.or-sectiune.or-flota-live .or-panou-text { display: none; }

.or-curse { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.or-curse[hidden] { display: none; }
.or-curse li { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--c); border-radius: 8px; padding: .45rem .6rem; font-size: .8rem; }
.or-r1 { display: flex; justify-content: space-between; gap: .5rem; }
.or-r1 b { font-weight: 600; }
.or-r2 { color: var(--or-text-stins); margin: .1rem 0 .35rem; }
.or-bara { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.or-bara i { display: block; height: 100%; background: var(--c); width: 0; }
.or-r3 { display: flex; justify-content: space-between; align-items: center; color: var(--or-text-stins); margin-top: .3rem; font-variant-numeric: tabular-nums; }
.or-r3 button { font: inherit; font-size: .76rem; color: var(--or-miere); background: transparent; border: 1px solid rgba(255, 122, 69, .5); border-radius: 999px; padding: .1rem .55rem; cursor: pointer; }

/* Cardurile de urmărire (vehicul / flux) */
.or-urmarire, .or-flux-card {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: min(560px, 92%);
  padding: 1rem 1.25rem; background: rgba(10, 10, 20, .9); border: 1px solid rgba(255, 122, 69, .35); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5); z-index: 3;
}
.or-urmarire[hidden], .or-flux-card[hidden] { display: none; }
.or-pas { margin: 0 0 .3rem; color: var(--or-miere); font-size: .85rem; }
.or-text-mare { margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.45; }
.or-actiuni { display: flex; gap: .5rem; }
.or-actiuni button { font: inherit; font-size: .9rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(245, 239, 224, .3); background: transparent; color: var(--or-text); cursor: pointer; }
.or-actiuni .or-principal { background: linear-gradient(135deg, var(--or-miere), #e67e00); color: #fff; border-color: var(--or-miere); font-weight: 600; }
.or-actiuni button:disabled { opacity: .4; cursor: default; }
.or-actiuni button:focus-visible { outline: 2px solid var(--or-polen); outline-offset: 3px; }

/* Traseul fluxului urmărit */
.or-flux-urma { fill: none; stroke: #FFA982; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 122, 69, .95)); }
.or-flux-nod { fill: rgba(255, 122, 69, .25); stroke: #FFA982; stroke-width: 4; }
.or-sectiune.or-in-flux .or-geofence, .or-sectiune.or-in-flux .or-geofence-eticheta { opacity: .2; }

@media (prefers-reduced-motion: reduce) {
  .or-macheta { transition: none; }
  .or-ping, .or-pin.or-pulseaza::after { animation: none; }
}

/* ---------- Raportul flotei (modul „Flota live”), date demonstrative ---------- */
.or-raport {
  --or-s1: #3987e5; --or-s2: #d95926; --or-s3: #199e70; --or-s4: #c98500;
  --or-grila: #2c2c2a; --or-axa: #898781; --or-secundar: #c3c2b7;
  position: absolute; right: 1.5rem; top: 5.5rem; bottom: 1.5rem; width: 400px; overflow-y: auto; z-index: 2;
  padding: 1.1rem 1.2rem 1.3rem; background: rgba(20, 18, 26, .94);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.or-raport[hidden] { display: none; }
.or-sectiune.or-in-flux .or-raport, .or-sectiune.or-in-urmarire .or-raport { display: none; }
.or-raport-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.or-raport-cap h3 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--or-text); }
.or-raport-perioada { margin: .15rem 0 0; font-size: .8rem; color: var(--or-axa); }
.or-raport-inchide { font: inherit; font-size: 1.3rem; line-height: 1; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--or-secundar); cursor: pointer; }
.or-raport-inchide:focus-visible, .or-bara-rand:focus-visible { outline: 2px solid var(--or-polen); outline-offset: 2px; }

.or-placi { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.or-placa { padding: .6rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: .1rem; }
.or-placa-et { font-size: .75rem; color: var(--or-secundar); }
.or-placa strong { font-size: 1.15rem; font-weight: 600; color: var(--or-text); }
.or-placa-sub { font-size: .72rem; color: var(--or-axa); }

.or-r-sect { margin-top: 1rem; }
.or-r-sect h4 { margin: 0 0 .5rem; font-size: .88rem; font-weight: 600; color: var(--or-text); }
.or-r-nota { margin: -.3rem 0 .45rem; font-size: .75rem; color: var(--or-axa); }
.or-r-svg { width: 100%; height: auto; display: block; overflow: visible; }
.or-r-segment { cursor: default; }
.or-s1 { fill: var(--or-s1); background: var(--or-s1); }
.or-s2 { fill: var(--or-s2); background: var(--or-s2); }
.or-s3 { fill: var(--or-s3); background: var(--or-s3); }
.or-s4 { fill: var(--or-s4); background: var(--or-s4); }
.or-legenda { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .25rem; }
.or-legenda li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .5rem; font-size: .8rem; color: var(--or-secundar); }
.or-legenda b { font-weight: 500; color: var(--or-text); font-variant-numeric: tabular-nums; }
.or-mostra { width: 10px; height: 10px; border-radius: 3px; display: block; }

.or-bare { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.or-bara-rand { width: 100%; display: grid; grid-template-columns: 78px 1fr 40px; align-items: center; gap: .5rem; padding: .22rem .3rem; border: 0; border-radius: 6px; background: transparent; color: var(--or-secundar); font: inherit; font-size: .78rem; cursor: pointer; text-align: left; }
.or-bara-rand:hover { background: rgba(255, 255, 255, .05); color: var(--or-text); }
.or-bara-pista { height: 10px; display: block; }
.or-bara-umplere { display: block; height: 100%; background: var(--or-s1); border-radius: 0 4px 4px 0; }
.or-bara-val { text-align: right; color: var(--or-text); font-variant-numeric: tabular-nums; }

.or-r-grila { stroke: var(--or-grila); stroke-width: 1; }
.or-r-axa { fill: var(--or-axa); font: 11px 'Outfit', sans-serif; }
.or-r-linie { fill: none; stroke: var(--or-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.or-r-punct { fill: var(--or-s1); stroke: rgba(20, 18, 26, 1); stroke-width: 2; }
.or-r-cursor { stroke: var(--or-axa); stroke-width: 1; stroke-dasharray: 3 3; }

.or-alerte { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.or-alerta { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; font-size: .8rem; color: var(--or-text); padding: .4rem .55rem; border-radius: 8px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--or-st); }
.or-alerta-et { font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--or-st); color: var(--or-text); }
.or-critic { --or-st: #d03b3b; }
.or-atentie { --or-st: #fab219; }
.or-serios { --or-st: #ec835a; }
.or-bine { --or-st: #0ca30c; }

.or-tooltip { position: absolute; z-index: 4; min-width: 150px; padding: .45rem .6rem; border-radius: 8px; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .12); font-size: .78rem; color: var(--or-secundar); pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.or-tooltip[hidden] { display: none; }
.or-tt-titlu { color: var(--or-text); font-weight: 600; margin-bottom: .1rem; }

/* ---------- Energie · SCADA ---------- */
.or-energie-strat { display: none; }
.or-sectiune.or-energie-live .or-energie-strat { display: inline; }
.or-energie-fir { fill: none; stroke: rgba(25, 158, 112, .35); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.or-energie-p { fill: #6ee7b7; stroke: rgba(52, 211, 153, .35); stroke-width: 8; }  /* halou din contur, nu din filtru */
.or-energie-p2 { fill: #FFA982; stroke: rgba(255, 122, 69, .35); stroke-width: 8; }
.or-sectiune.or-energie-live .or-geofence, .or-sectiune.or-energie-live .or-geofence-eticheta { opacity: .15; }
.or-legenda-rand { display: flex; gap: 1rem; margin: 0 0 .4rem; }
.or-legenda-rand li { display: flex; gap: .4rem; }
.or-r-linie-p { stroke: var(--or-s3); }
.or-r-punct-p { fill: var(--or-s3); }
.or-r-surplus { fill: rgba(25, 158, 112, .16); }
.or-r-acum { stroke: var(--or-text-stins); stroke-width: 1; }

/* ---------- Linia de metrou a fluxului (ca harta-metrou a proiectului) ---------- */
.or-metrou { margin: .2rem 0 .7rem; }
.or-metrou-svg { width: 100%; height: auto; display: block; overflow: visible; }
.or-m-vanzari { --m: #3987e5; }
.or-m-contract { --m: #9085e9; }
.or-m-logistica { --m: #199e70; }
.or-m-montaj { --m: #c98500; }
.or-m-bani { --m: #FF7A45; }
.or-m-ai { --m: #c3c2b7; }
.or-m-segment { stroke: var(--m); stroke-width: 4; stroke-linecap: round; opacity: .3; }
.or-m-segment.or-m-parcurs { opacity: 1; }
.or-m-statie { cursor: pointer; outline: none; }
.or-m-tinta { fill: transparent; }
.or-m-punct { fill: #14121a; stroke: var(--m); stroke-width: 2.5; transition: r .2s; }
.or-m-statie.or-m-gata .or-m-punct { fill: var(--m); }
.or-m-statie.or-m-curenta .or-m-punct { fill: var(--m); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--m)); }
.or-m-statie:hover .or-m-punct, .or-m-statie:focus-visible .or-m-punct { stroke: #fff; }
.or-m-eticheta { fill: var(--or-text); font: 600 11px 'Outfit', sans-serif; }
.or-m-legenda { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .74rem; color: var(--or-text-stins); }
.or-m-legenda li { display: flex; align-items: center; gap: .35rem; }
.or-m-legenda i { width: 14px; height: 4px; border-radius: 2px; background: var(--m); display: block; }

/* ---------- Clădiri interactive: zone de click + fișa clădirii ---------- */
.or-zona { fill: rgba(255, 122, 69, 0); stroke: rgba(255, 122, 69, 0); stroke-width: 3; stroke-linejoin: round; pointer-events: all; cursor: pointer; transition: fill .2s, stroke .2s; }
.or-zona:hover, .or-zona.or-zona-activa { fill: rgba(255, 122, 69, .10); stroke: rgba(255, 122, 69, .9); filter: drop-shadow(0 0 8px rgba(255, 122, 69, .6)); }
.or-sectiune.or-in-flux .or-zona, .or-sectiune.or-in-urmarire .or-zona { pointer-events: none; }
.or-pin.or-hover .or-eticheta { opacity: 1; }

.or-fisa {
  position: absolute; z-index: 5; width: 290px; pointer-events: auto;
  padding: .85rem 1rem 1rem; background: rgba(14, 12, 20, .95);
  border: 1px solid rgba(255, 122, 69, .35); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  transform-origin: left center; transform: translate(22px, -50%) scale(calc(1 / var(--z)));
  color: var(--or-text); font-size: .85rem;
}
.or-fisa[hidden] { display: none; }
.or-fisa.or-fisa-stanga { transform-origin: right center; transform: translate(calc(-100% - 22px), -50%) scale(calc(1 / var(--z))); }
.or-fisa.or-fisa-sus { transform: translate(22px, -88%) scale(calc(1 / var(--z))); }
.or-fisa.or-fisa-stanga.or-fisa-sus { transform: translate(calc(-100% - 22px), -88%) scale(calc(1 / var(--z))); }
.or-fisa-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.or-fisa-zona { margin: 0; font-size: .74rem; color: var(--or-miere); }
.or-fisa h4 { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 600; }
.or-fisa-inchide { font: inherit; font-size: 1.1rem; line-height: 1; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--or-text-stins); cursor: pointer; flex: none; }
.or-fisa-cifre { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; }
.or-fisa-cifre li { padding: .35rem .55rem; border-radius: 8px; background: rgba(255, 255, 255, .05); border-left: 3px solid var(--or-miere); font-weight: 500; }
.or-fisa-text { margin: 0 0 .55rem; color: var(--or-text-stins); line-height: 1.45; font-size: .8rem; }
.or-fisa-flux { margin-top: .7rem; width: 100%; font: inherit; font-weight: 600; font-size: .82rem; padding: .5rem .8rem; border-radius: 999px; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--or-miere), #e67e00); }
.or-fisa-inchide:focus-visible, .or-fisa-flux:focus-visible { outline: 2px solid var(--or-polen); outline-offset: 2px; }
.or-pin.or-activ .or-eticheta { opacity: 0; }  /* fișa clădirii ține deja numele */


/* fundal opac în locul neclarității (backdrop-filter costa la fiecare cadru) */
.or-card, .or-raport, .or-fisa { background: rgba(14, 12, 20, .97); }