/*
 * Portalul soferilor (/sofer), cu aspectul din filmul de prezentare.
 * ---------------------------------------------------------------------------
 * Negru, carduri gri inchis, titluri mari si un degrade portocaliu-roz-mov
 * pentru ce se apasa. Totul sta sub body.sofer, deci administrarea si portalul
 * contabilei nu sunt atinse. Ales de utilizator pe 30.10.2026: „culorile
 * aplicatiei soferilor trebuie sa ramana ca in video”.
 */

/* fisierul se incarca doar in portalul soferilor, deci si <html> e al lui:
   negru pana jos, si cand pagina e mai scurta decat ecranul */
html { background: #000; color-scheme: dark; }

body.sofer {
  --sf-fundal: #000;
  --sf-card: #1c1c1e;
  --sf-card-2: #2c2c2e;
  --sf-linie: rgba(255, 255, 255, .08);
  --sf-text: #f5f5f7;
  --sf-text-2: #98989f;
  --sf-text-3: #6e6e73;
  --sf-grad: linear-gradient(90deg, #ff7a1a 0%, #ff3d6e 52%, #a35cff 100%);
  --sf-grad-oblic: linear-gradient(135deg, #ff7a1a 0%, #ff3d6e 60%, #a35cff 100%);
  --sf-portocaliu: #ff8a2a;
  --sf-roz: #ff4f7b;
  --sf-mov: #a970ff;
  --sf-albastru: #4aa8ff;
  --sf-verde: #30d158;
  --sf-rosu: #ff453a;
  --sf-curba: cubic-bezier(0.32, 0.72, 0, 1);
  --sf-sus: env(safe-area-inset-top, 0px);
  --sf-jos: env(safe-area-inset-bottom, 0px);
  background: var(--sf-fundal);
  color: var(--sf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}
body.sofer button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- campuri si butoane ---------- */

.sofer .sf-camp {
  display: block; width: 100%; height: 52px; margin: 0 0 10px; padding: 0 16px;
  background: var(--sf-card); color: var(--sf-text);
  border: 1px solid transparent; border-radius: 14px;
  font: inherit; font-size: 17px; outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.sofer .sf-camp::placeholder { color: var(--sf-text-3); }
.sofer .sf-camp:focus { border-color: rgba(255, 79, 123, .6); background: #232326; }
.sofer .sf-cod { text-align: center; letter-spacing: .5em; font-size: 24px; font-weight: 600; }

.sofer .sf-buton, .sofer .sf-buton-gri, .sofer .sf-buton-verde {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .25s var(--sf-curba), opacity .2s ease, background .3s ease, color .3s ease;
}
.sofer .sf-buton { background: var(--sf-grad); color: #fff; }
.sofer .sf-buton:disabled { opacity: .35; cursor: default; }
.sofer .sf-buton.trimis { background: var(--sf-verde); color: #04210d; }
.sofer .sf-buton-gri { background: var(--sf-card); color: var(--sf-text); }
.sofer .sf-buton-gri.rosu { color: var(--sf-rosu); margin-top: 22px; }
.sofer .sf-confirma-tot { margin: 0 0 12px; }
.sofer .sf-buton-text {
  display: block; width: 100%; margin-top: 10px; padding: 12px; border: 0; background: none;
  color: var(--sf-roz); font-size: 16px; font-weight: 500; cursor: pointer;
}
/* „Trimite alt cod (1:42)”: stins cat asteapta, cu cifrele care nu sar. */
.sofer .sf-buton-text:disabled { color: var(--sf-text-2); cursor: default; font-variant-numeric: tabular-nums; }
.sofer .cod-nota { color: var(--sf-text-2); font-size: 13.5px; text-align: center; line-height: 1.45; margin: 4px 8px 0; }
.sofer .sf-buton:active:not(:disabled), .sofer .sf-buton-gri:active,
.sofer .sf-dala:active, .sofer .sf-card.apasabil:active { transform: scale(.97); transition-duration: .08s; }

.sofer .sf-eroare { color: var(--sf-rosu); font-size: 14px; min-height: 0; margin: 2px 2px 10px; }
.sofer .sf-eroare:empty { display: none; }
.sofer .sf-nota { color: var(--sf-text-2); font-size: 13.5px; line-height: 1.45; margin: 6px 2px 12px; }
.sofer .sf-sub { color: var(--sf-text-2); font-size: 15px; line-height: 1.45; margin: 0 0 18px; }

/* ---------- conectarea ---------- */

.sofer .sf-intrare {
  max-width: 440px; margin: 0 auto;
  padding: calc(64px + var(--sf-sus)) 22px calc(40px + var(--sf-jos));
}
.sofer .sf-intrare-cap { text-align: center; margin-bottom: 34px; }
.sofer .sf-intrare-logo {
  width: 84px; height: 84px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 50px rgba(255, 61, 110, .25);
}
.sofer .sf-intrare-cap h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 18px 0 2px; }
.sofer .sf-intrare-cap p { color: var(--sf-text-2); font-size: 15px; margin: 0; }
.sofer .sf-intrare-corp h2 { font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
.sofer .sf-tine-minte { display: flex; align-items: center; gap: 10px; color: var(--sf-text-2); font-size: 14.5px; margin: 4px 2px 14px; }
.sofer .sf-tine-minte input { width: 20px; height: 20px; accent-color: var(--sf-roz); }

/* fundalul cu cele doua lumini, ca in film */
.sofer #loginScreen::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 420px at 20% 30%, rgba(255, 61, 110, .16), transparent 65%),
              radial-gradient(600px 420px at 85% 70%, rgba(163, 92, 255, .14), transparent 65%);
}

/* steagurile: in colt doar la conectare, apoi stau in „Eu” */
.sofer.sf-in-aplicatie .steaguri-plutitoare { display: none; }
.sofer .sf-limba .steaguri { display: flex; gap: 10px; }

/* ---------- aplicatia ---------- */

.sofer .sf-app { max-width: 560px; margin: 0 auto; }
/* Ecranul care intra aluneca 36px din dreapta. Fara taietura, in clipa aceea
   pagina iese mai lata decat telefonul, iar Chrome pe Android micsoreaza totul
   ca sa incapa (si bara de jos iese din ecran). */
body.sofer, .sofer .sf-app { overflow-x: clip; }
.sofer .sf-ecran {
  padding: calc(14px + var(--sf-sus)) 20px calc(110px + var(--sf-jos));
  min-height: 100vh;
}
.sofer .sf-ecran[hidden] { display: none; }
/* Trecerea intre ecrane (driver.js, arataEcran): cel care pleaca ramane fixat
   unde se vedea, cel care vine e in pagina. Fundal negru pe amandoua, ca la
   alunecare sa nu se vada unul prin altul. */
.sofer .sf-ecran.sf-pleaca {
  position: fixed; z-index: 1; margin: 0; pointer-events: none;
  background: var(--sf-fundal);
}
.sofer .sf-ecran.sf-vine { position: relative; z-index: 2; background: var(--sf-fundal); }
.sofer .sf-ecran.sf-pleaca.sf-deasupra { z-index: 3; }
@keyframes sf-loc { from { opacity: 0; } to { opacity: 1; } }

.sofer .sf-titlu { font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.sofer .sf-salut { color: var(--sf-text-2); font-size: 17px; margin-top: 18px; }
.sofer .sf-inapoi {
  display: inline-flex; border: 0; background: none; padding: 10px 0 4px; cursor: pointer;
  color: var(--sf-roz); font-size: 17px; font-weight: 500;
}
.sofer .sf-inapoi[hidden] { display: none; }
.sofer .sf-ecran:not(:has(.sf-inapoi:not([hidden]))) .sf-titlu:first-of-type { margin-top: 18px; }
.sofer .sf-sectiune { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 28px 2px 10px; }
.sofer .mic-sus, .sofer .sf-mic-sus {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 600; color: var(--sf-text-2);
}

.sofer .sf-card { background: var(--sf-card); border-radius: 22px; padding: 16px 18px; }
.sofer .sf-card + .sf-card { margin-top: 10px; }

/* capul de pe Acasa: salutul si avatarul */
.sofer .sf-cap-acasa { display: flex; justify-content: space-between; align-items: flex-end; }
.sofer .sf-avatar {
  width: 42px; height: 42px; border-radius: 50%; border: 0; flex: 0 0 auto; cursor: pointer;
  background: var(--sf-grad-oblic); color: #fff; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.sofer .sf-avatar.mare { width: 64px; height: 64px; font-size: 22px; cursor: default; }

/* cardurile „de acum” de pe Acasa */
.sofer #sfAcum { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sofer #sfAcum:empty { display: none; }
.sofer .sf-acum .sf-mare-text { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 6px 0 3px; }
.sofer .sf-acum .sf-detalii { color: var(--sf-text-2); font-size: 14px; }
.sofer .sf-acum .sf-progres { height: 5px; border-radius: 3px; background: var(--sf-card-2); margin-top: 14px; overflow: hidden; }
.sofer .sf-acum .sf-progres i { display: block; height: 100%; background: var(--sf-grad); border-radius: 3px; }
.sofer .sf-acum .sf-buton { height: 46px; font-size: 16px; margin-top: 14px; }
.sofer .sf-acum.cu-sageata { display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; width: 100%; border: 0; color: inherit; }
.sofer .sf-acum.cu-sageata > div { flex: 1; }
.sofer .sf-acum.cu-sageata::after { content: "›"; color: var(--sf-text-3); font-size: 24px; }

/* dalele 2x2 */
.sofer .sf-dale { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sofer .sf-dala {
  background: var(--sf-card); border: 0; border-radius: 22px; height: 118px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left; cursor: pointer; transition: transform .3s var(--sf-curba), background-color .2s ease;
}
.sofer .sf-dala b { display: block; font-size: 16.5px; font-weight: 600; }
.sofer .sf-dala small { display: block; color: var(--sf-text-2); font-size: 12.5px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sofer .sf-dala > span:last-child { max-width: 100%; }
.sofer .sf-ic { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sofer .sf-ic svg { width: 19px; height: 19px; }
.sofer .sf-ic.portocaliu { background: rgba(255, 138, 42, .16); color: var(--sf-portocaliu); }
.sofer .sf-ic.roz { background: rgba(255, 79, 123, .16); color: var(--sf-roz); }
.sofer .sf-ic.mov { background: rgba(169, 112, 255, .18); color: var(--sf-mov); }
.sofer .sf-ic.albastru { background: rgba(74, 168, 255, .16); color: var(--sf-albastru); }
.sofer .sf-ic.verde { background: rgba(48, 209, 88, .16); color: var(--sf-verde); }

/* ---------- calendarul de concediu ---------- */

.sofer .sf-luna-cap { display: flex; justify-content: space-between; align-items: center; margin: 22px 2px 10px; }
.sofer .sf-luna-cap b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sofer .sf-luna-cap b::first-letter { text-transform: uppercase; }
.sofer .sf-sageata {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sf-card);
  color: var(--sf-text); font-size: 22px; line-height: 1; cursor: pointer; margin-left: 6px;
}
.sofer .sf-zile-sapt, .sofer .sf-saptamana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.sofer .sf-zile-sapt span { color: var(--sf-text-3); font-size: 12px; font-weight: 600; padding-bottom: 6px; }
.sofer .sf-saptamana { position: relative; }
/* Calendarul trece pana la marginea ecranului (peste marginile de 20px ale
   ecranului), ca luna care pleaca sa iasa din ecran, nu sa fie taiata la
   jumatatea drumului. pan-y: sus-jos ramane derularea paginii, stanga-dreapta
   schimba luna (driver.js). */
.sofer .sf-cal {
  position: relative; overflow: hidden; margin: 0 -20px; padding: 0 20px;
  touch-action: pan-y;
}
.sofer .sf-cal-pagina.pleaca { position: absolute; top: 0; left: 20px; right: 20px; pointer-events: none; }
.sofer .sf-zi {
  position: relative; z-index: 1; height: 46px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 500; color: var(--sf-text); font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.sofer .sf-zi.alta-luna { color: transparent; pointer-events: none; }
.sofer .sf-zi.liber { color: var(--sf-text-3); }
.sofer .sf-zi.azi { color: var(--sf-roz); font-weight: 700; }
/* concediile care exista deja: aprobat = verde plin estompat, in asteptare = contur */
.sofer .sf-zi.aprobat::before, .sofer .sf-zi.asteapta::before {
  content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; z-index: -1;
}
.sofer .sf-zi.aprobat::before { background: rgba(48, 209, 88, .2); }
.sofer .sf-zi.aprobat { color: #7ee89a; }
.sofer .sf-zi.asteapta::before { border: 1.5px dashed rgba(255, 138, 42, .8); }
/* alegerea: banda in degrade, pe fiecare rand al saptamanii */
/* Banda se lungeste si se scurteaza lin cand adaugi sau scoti zile: driver.js
   ii schimba doar left si width (deseneazaAlegerea). */
.sofer .sf-banda {
  position: absolute; top: 4px; height: 38px; border-radius: 19px; background: var(--sf-grad);
  z-index: 0; pointer-events: none;
  transition: left .4s var(--sf-curba), width .4s var(--sf-curba);
}
.sofer .sf-banda.fara-tranzitie { transition: none; }
.sofer .sf-zi.ales { color: #fff; font-weight: 600; }
.sofer .sf-zi.ales::before { display: none; }

.sofer .sf-legenda { display: flex; gap: 16px; margin: 10px 4px 0; color: var(--sf-text-3); font-size: 12.5px; }
.sofer .sf-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sofer .sf-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sofer .sf-legenda i.aprobat { background: rgba(48, 209, 88, .55); }
.sofer .sf-legenda i.asteapta { border: 1.5px dashed var(--sf-portocaliu); }
.sofer .sf-legenda i.azi { background: var(--sf-roz); }

.sofer .sf-rezumat { margin-top: 16px; position: relative; }
.sofer .sf-rezumat .sf-sterge {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .08); color: var(--sf-text-2);
  font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sofer .sf-rezumat .sf-sterge:active { background: rgba(255, 255, 255, .16); }
.sofer .sf-rezumat b { font-size: 18px; font-weight: 600; }
.sofer .sf-rezumat p { color: var(--sf-text-2); font-size: 14px; margin: 3px 0 0; }

.sofer .sf-segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--sf-card); border-radius: 14px; margin: 12px 0 10px;
}
.sofer .sf-segment button {
  height: 40px; border: 0; border-radius: 11px; background: none; cursor: pointer;
  color: var(--sf-text-2); font-size: 15px; font-weight: 600;
  transition: background-color .25s ease, color .25s ease;
}
.sofer .sf-segment button.ales { background: var(--sf-card-2); color: var(--sf-text); }

/* cererile mele */
.sofer .sf-cerere { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sofer .sf-cerere b { font-size: 16px; font-weight: 600; display: block; }
.sofer .sf-cerere p { color: var(--sf-text-2); font-size: 13.5px; margin: 3px 0 0; line-height: 1.4; }
.sofer .sf-stare {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
}
.sofer .sf-stare.approved { background: rgba(48, 209, 88, .16); color: var(--sf-verde); }
.sofer .sf-stare.pending { background: rgba(255, 138, 42, .16); color: var(--sf-portocaliu); }
.sofer .sf-stare.rejected { background: rgba(255, 69, 58, .16); color: var(--sf-rosu); }
.sofer .sf-anuleaza {
  margin-top: 12px; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--sf-rosu); font-size: 14.5px; font-weight: 500;
}

/* ---------- lunile (cipuri) ---------- */

.sofer .sf-cipuri {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 18px -20px 14px; padding: 0 20px;
}
.sofer .sf-cipuri::-webkit-scrollbar { display: none; }
.sofer .sf-cip {
  flex: 0 0 auto; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  background: var(--sf-card); color: var(--sf-text-2); font-size: 14.5px; font-weight: 600;
  transition: background-color .25s ease, color .25s ease;
}
.sofer .sf-cip span:first-child { text-transform: capitalize; }
.sofer .sf-cip small { font-size: 12px; font-weight: 500; opacity: .7; margin-left: 4px; }
.sofer .sf-cip.ales { background: #fff; color: #000; }

/* ---------- fluturasul si diurna ---------- */

.sofer .sf-bani .sf-mic-sus span:first-child { text-transform: uppercase; }
.sofer .sf-suma { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; }
.sofer .sf-suma small { color: var(--sf-text-2); font-size: 18px; font-weight: 500; }
.sofer .sf-suma b { font-size: 46px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sofer .sf-sub-suma { color: var(--sf-text-2); font-size: 14px; margin-bottom: 12px; }
.sofer .sf-linii > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 15px; border-top: .5px solid var(--sf-linie); }
.sofer .sf-linii > div > span:first-child { color: var(--sf-text-2); }
.sofer .sf-linii > div > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sofer .sf-linii small { display: block; color: var(--sf-text-3); font-size: 12.5px; margin-top: 2px; }
.sofer .sf-linii .gros span { color: var(--sf-text) !important; }
.sofer .sf-buton-pdf {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  height: 52px; border-radius: 999px; background: var(--sf-card); text-decoration: none;
  color: var(--sf-portocaliu); font-weight: 600; font-size: 16px;
}
.sofer .sf-buton-pdf:active { transform: scale(.97); }
.sofer .sf-eticheta-mica {
  display: inline-block; margin: 0 0 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 138, 42, .14); color: var(--sf-portocaliu); font-size: 12.5px; font-weight: 600;
}
.sofer .sf-gol { text-align: center; color: var(--sf-text-2); font-size: 15px; line-height: 1.5; padding: 34px 18px; }
.sofer .sf-gol svg { width: 44px; height: 44px; color: var(--sf-text-3); display: block; margin: 0 auto 12px; }
.sofer .sf-bani-intra { animation: sf-loc .35s ease both; }

/* ---------- Eu -> Pe telefon (aplicatia pe ecranul principal) ---------- */

.sofer .sf-instalare-ic { width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto; }
.sofer .sf-rand .sf-mic-buton.gri { background: var(--sf-card-2); color: var(--sf-portocaliu); }
.sofer .sf-pasi { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: .5px solid var(--sf-linie); counter-reset: pas; animation: sf-loc .3s ease both; }
.sofer .sf-pasi li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--sf-text-2); line-height: 1.35; }
.sofer .sf-pasi li b { color: var(--sf-text); font-weight: 600; }
.sofer .sf-pas-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--sf-card-2);
  display: flex; align-items: center; justify-content: center; color: var(--sf-albastru);
}
.sofer .sf-pas-ic svg { width: 19px; height: 19px; }
.sofer .sf-pas-ic.sf-pas-text { font-size: 12.5px; font-weight: 700; color: var(--sf-albastru); }

/* ---------- Acasa -> cardul cursei, ca in filmul de prezentare ----------
   „Cursa de azi”, traseul, „km · camion · ETA” si bara in degrade; sub el
   butoanele ETA si pasul urmator (eta.py pe server). */

.sofer .sf-cursa-bloc { display: flex; flex-direction: column; gap: 8px; }
.sofer .sf-cursa-film {
  display: block; width: 100%; border: 0; color: inherit; text-align: left; cursor: pointer;
  font: inherit; padding: 16px 18px 18px;
  background: linear-gradient(180deg, #232326 0%, var(--sf-card) 100%);
  transition: transform .25s var(--sf-curba);
}
.sofer .sf-cursa-film:active { transform: scale(.985); }
.sofer .sf-cursa-film .sf-detalii { font-variant-numeric: tabular-nums; }
.sofer .sf-cursa-film .sf-progres i { transition: width .6s var(--sf-curba); }

.sofer .sf-cursa-butoane { display: grid; grid-template-columns: minmax(96px, 1fr) 2.2fr; gap: 8px; }
.sofer .sf-cursa-butoane > :only-child { grid-column: 1 / -1; }
.sofer .sf-eta-buton, .sofer .sf-pas-buton {
  height: 52px; border: 0; border-radius: 16px; cursor: pointer; font: inherit;
  font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; transition: transform .25s var(--sf-curba), opacity .2s ease;
}
.sofer .sf-eta-buton { background: var(--sf-card); color: var(--sf-text); }
.sofer .sf-eta-buton svg { width: 19px; height: 19px; color: var(--sf-portocaliu); flex: 0 0 auto; }
.sofer .sf-pas-buton { background: var(--sf-grad); color: #fff; }
.sofer .sf-pas-buton span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sofer .sf-eta-buton:active, .sofer .sf-pas-buton:active { transform: scale(.97); }
.sofer .sf-eta-buton:disabled, .sofer .sf-pas-buton:disabled { cursor: default; }
/* cat asteapta GPS-ul si serverul */
.sofer .lucreaza { animation: sf-lucreaza 1s ease-in-out infinite alternate; }
@keyframes sf-lucreaza { from { opacity: 1; } to { opacity: .55; } }

.sofer .sf-cursa-nota { color: var(--sf-text-2); font-size: 13px; line-height: 1.5; padding: 0 4px; }
.sofer .sf-cursa-nota + .sf-cursa-nota { margin-top: -6px; }
.sofer .sf-cursa-nota .sf-ok-mic { color: var(--sf-verde); font-weight: 700; }
.sofer .sf-link {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--sf-roz); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .sofer .lucreaza { animation: none; opacity: .6; }
  .sofer .sf-cursa-film .sf-progres i { transition: none; }
}

/* ---------- Dispecer: chatul cu biroul (din 2.36) ----------
   Biroul in stanga (gri), soferul in dreapta (degrade). ETA-urile si pasii
   cursei sunt tot ale lui, dar ca fise inchise, nu ca text scris. Caseta de
   scris e lipita deasupra barei de jos (sticky, nu fixed: pe iPhone, cu
   tastatura deschisa, una fixed ramane ascunsa sub tastatura). */

.sofer .sf-bara-nr {
  position: absolute; top: -3px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--sf-roz); color: #fff; font-style: normal; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #0e0e10;
}
.sofer .sf-bara-nr[hidden] { display: none; }

.sofer .sf-chat { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-bottom: 8px; }
.sofer .sf-chat-zi {
  align-self: center; margin: 12px 0 4px; padding: 3px 12px; border-radius: 999px;
  background: var(--sf-card); color: var(--sf-text-2); font-size: 12.5px; font-weight: 600;
}
.sofer .sf-chat-zi::first-letter { text-transform: uppercase; }
.sofer .sf-chat-rand { display: flex; }
.sofer .sf-chat-rand.eu { justify-content: flex-end; }
.sofer .sf-bula {
  max-width: 82%; padding: 9px 13px 7px; border-radius: 20px; font-size: 16px; line-height: 1.35;
}
.sofer .sf-bula.birou { background: var(--sf-card-2); color: var(--sf-text); border-bottom-left-radius: 6px; }
.sofer .sf-bula.eu { background: var(--sf-grad-oblic); color: #fff; border-bottom-right-radius: 6px; }
.sofer .sf-bula.eu.fisa { background: var(--sf-card); border: .5px solid var(--sf-linie); color: var(--sf-text); }
.sofer .sf-bula b { font-weight: 600; }
.sofer .sf-bula-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sofer .sf-bula.birou b + .sf-bula-text { margin-top: 2px; }
.sofer .sf-bula-sus { display: flex; align-items: center; gap: 6px; }
.sofer .sf-bula-sus svg { width: 17px; height: 17px; color: var(--sf-portocaliu); flex: 0 0 auto; }
.sofer .sf-bula-bifa { color: var(--sf-verde); font-weight: 700; }
.sofer .sf-bula-det { color: var(--sf-text-2); font-size: 13.5px; margin-top: 2px; }
.sofer .sf-bula-meta { margin-top: 3px; font-size: 11.5px; opacity: .7; text-align: right; }
.sofer .sf-bula.birou .sf-bula-meta { text-align: left; }
.sofer .sf-bula .sf-proba { margin: 0 6px 0 0; }

.sofer .sf-chat-scrie {
  position: sticky; bottom: calc(64px + var(--sf-jos) + 10px); z-index: 5;
  display: flex; align-items: flex-end; gap: 8px; margin: 8px -6px 0; padding: 6px;
  background: rgba(0, 0, 0, .82); border-radius: 26px;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sofer .sf-chat-scrie { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}
.sofer .sf-chat-scrie textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 130px; padding: 11px 16px;
  border: .5px solid var(--sf-linie); border-radius: 22px; background: var(--sf-card);
  color: var(--sf-text); font: inherit; font-size: 16px; line-height: 1.35;
}
.sofer .sf-chat-scrie textarea::placeholder { color: var(--sf-text-3); }
.sofer .sf-chat-scrie textarea:focus { outline: none; border-color: rgba(255, 79, 123, .6); }
.sofer .sf-chat-scrie button {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sf-grad-oblic); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--sf-curba), opacity .2s ease;
}
.sofer .sf-chat-scrie button svg { width: 20px; height: 20px; margin-left: 2px; }
.sofer .sf-chat-scrie button:active { transform: scale(.92); }
.sofer .sf-chat-scrie button:disabled { opacity: .5; }

/* ---------- Eu -> Notificari ---------- */

.sofer .sf-notif-ic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px;
  background: rgba(255, 79, 123, .16); color: var(--sf-roz);
  display: flex; align-items: center; justify-content: center;
}
.sofer .sf-notif-ic svg { width: 24px; height: 24px; }

/* ---------- Eu -> Locatia in tura (aplicatia Varno Driver) ---------- */

.sofer .sf-tura .sf-tura-ic { background: rgba(255, 138, 31, .16); color: var(--sf-portocaliu); }
.sofer .sf-tura .sf-rand + .sf-rand { margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--sf-linie); }
.sofer .sf-tura .sf-rand p b { display: inline; font-size: inherit; color: var(--sf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sofer .sf-tura .sf-legatura {
  display: block; width: 100%; margin-top: 14px; padding: 12px 0 0;
  border: 0; border-top: .5px solid var(--sf-linie); background: none;
  color: var(--sf-portocaliu); font: 600 15px/1.2 inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.sofer .sf-tura-nota { margin: 10px 0 0; color: var(--sf-text-2); font-size: 13px; }
.sofer .sf-tura-eroare { margin: 12px 0 0; color: var(--sf-rosu); font-size: 13.5px; }

/* Cardul turei de pe Acasa, doar in aplicatia Android. Punctul verde pulseaza cat locatia pleaca. */
.sofer .sf-tura-acasa .sf-detalii { line-height: 1.45; }
.sofer .sf-tura-acasa .sf-detalii b { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sofer .sf-tura-acasa .sf-mare-text { font-variant-numeric: tabular-nums; }
.sofer .sf-tura-acasa .sf-buton-gri { height: 46px; font-size: 16px; margin-top: 14px; background: var(--sf-card-2); }
.sofer .sf-tura-punct {
  display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: var(--sf-verde); vertical-align: 1px; animation: sf-tura-puls 2s ease-in-out infinite;
}
@keyframes sf-tura-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sofer .sf-tura-punct { animation: none; } }

/* Cursele de proba trimise din Panel: o eticheta mica langa referinta, ca sa
   nu fie luate drept comenzi adevarate. */
.sofer .sf-proba {
  display: inline-block; margin-left: 6px; padding: 1px 7px 0; border-radius: 6px;
  background: rgba(169, 112, 255, .22); color: #d4bbff;
  font-size: 10.5px; letter-spacing: .08em; vertical-align: 1px;
}

/* ---------- cursa (comenzile LKW ale camionului) ---------- */

.sofer .sf-sub-titlu { color: var(--sf-text-2); font-size: 15px; margin: 4px 2px 0; }
.sofer .sf-sub-titlu:empty { display: none; }
.sofer .sf-cursa { padding: 0; overflow: hidden; }
.sofer .sf-cursa-cap {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; background: none; color: inherit; padding: 16px 18px; cursor: pointer;
}
.sofer .sf-cursa-cap > div { flex: 1; min-width: 0; }
.sofer .sf-cursa-cap:disabled { cursor: default; }
.sofer .sf-cursa:not(.deschisa) .sf-cursa-cap::after { content: "›"; color: var(--sf-text-3); font-size: 24px; transition: transform .3s var(--sf-curba); }
.sofer .sf-traseu { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin-top: 6px; }
.sofer .sf-traseu span { color: var(--sf-text-3); font-weight: 500; }
.sofer .sf-cand { color: var(--sf-text-2); font-size: 14px; margin: 3px 0 0; }
.sofer .sf-cursa-corp { display: none; padding: 0 18px 16px; }
.sofer .sf-cursa.deschisa .sf-cursa-corp { display: block; animation: sf-loc .3s ease both; }
.sofer .sf-cursa .sf-linii { margin-top: 6px; }

/* Opririle: doua puncte legate de o linie in degrade, ca un traseu. */
.sofer .sf-opriri { position: relative; margin: 2px 0 6px; }
.sofer .sf-oprire { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.sofer .sf-oprire > i {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%;
  background: var(--sf-card); border: 3px solid var(--sf-portocaliu); position: relative; z-index: 1;
}
.sofer .sf-oprire:last-child > i { border-color: var(--sf-mov); }
.sofer .sf-oprire:first-child::after {
  content: ""; position: absolute; left: 6px; top: 27px; bottom: -13px; width: 2px;
  background: linear-gradient(180deg, var(--sf-portocaliu), var(--sf-roz) 55%, var(--sf-mov));
  border-radius: 1px;
}
.sofer .sf-oprire > div { flex: 1; min-width: 0; }
.sofer .sf-oprire b { display: block; font-size: 16.5px; font-weight: 600; margin-top: 3px; }
.sofer .sf-oprire p { color: var(--sf-text-2); font-size: 14px; margin: 2px 0 0; }
.sofer .sf-oprire .sf-cand { color: var(--sf-text); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sofer .sf-harta {
  flex: 0 0 auto; align-self: center; text-decoration: none; padding: 9px 14px; border-radius: 999px;
  background: var(--sf-card-2); color: var(--sf-portocaliu); font-size: 14px; font-weight: 600;
}
.sofer .sf-harta:active { transform: scale(.96); }
.sofer .sf-gol.sf-gol-mic { padding: 18px; font-size: 14.5px; margin-top: 16px; }

/* ---------- documente ---------- */

.sofer .sf-rand { display: flex; align-items: center; gap: 12px; }
.sofer .sf-rand > div { flex: 1; min-width: 0; }
.sofer .sf-rand b { display: block; font-size: 16px; font-weight: 600; }
.sofer .sf-rand p { color: var(--sf-text-2); font-size: 13.5px; margin: 2px 0 0; }
.sofer .sf-rand a, .sofer .sf-rand .sf-mic-buton {
  flex: 0 0 auto; text-decoration: none; border: 0; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.sofer .sf-rand a { background: var(--sf-card-2); color: var(--sf-portocaliu); }
.sofer .sf-rand .sf-mic-buton { background: var(--sf-grad); color: #fff; }
.sofer .sf-rand .sf-ok { color: var(--sf-verde); font-size: 13.5px; font-weight: 600; flex: 0 0 auto; }

/* ---------- eu ---------- */

.sofer .sf-profil { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.sofer .sf-profil b { font-size: 19px; font-weight: 600; }
.sofer .sf-profil p { color: var(--sf-text-2); font-size: 14px; margin: 2px 0 0; }

/* ---------- bara de jos ---------- */

.sofer .sf-bara {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: flex-start;
  height: calc(64px + var(--sf-jos)); padding: 8px 0 var(--sf-jos);
  background: rgba(14, 14, 16, .94); border-top: .5px solid var(--sf-linie);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sofer .sf-bara {
    background: rgba(18, 18, 20, .72);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
}
.sofer .sf-bara button {
  position: relative;
  width: 68px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--sf-text-3); font-size: 10.5px; font-weight: 600; transition: color .2s ease;
}
.sofer .sf-bara button svg { width: 25px; height: 25px; transition: transform .3s var(--sf-curba); }
.sofer .sf-bara button.activ { color: var(--sf-portocaliu); }
.sofer .sf-bara button:active svg { transform: scale(.88); }

/* bara „Adauga pe ecranul principal” sta deasupra barei de jos */
.sofer.sf-in-aplicatie .pwa-bar { bottom: calc(74px + var(--sf-jos)); }

/* toast: deasupra barei de jos */
.sofer .toast { bottom: calc(84px + var(--sf-jos)); }

@media (prefers-reduced-motion: reduce) {
  .sofer .sf-bani-intra { animation: none; }
  .sofer .sf-banda, .sofer .sf-zi { transition: none; }
}
.sofer .sf-rezumat p.sf-pas { color: var(--sf-roz); font-weight: 500; }
/* sageata din „‹ Acasă” e desenata aici, ca textul sa ramana doar „Acasă” (si
   sa-l gaseasca dictionarul) */
.sofer .sf-inapoi::before { content: "‹"; margin-right: 5px; }

/* ecranul de pornire: negru, cu cele doua lumini, iar dunga de jos in degrade */
html body.sofer .start-ecran {
  background: radial-gradient(520px 380px at 25% 35%, rgba(255, 61, 110, .18), transparent 65%),
              radial-gradient(520px 380px at 80% 70%, rgba(163, 92, 255, .16), transparent 65%), #000;
}
.sofer .start-ecran::after { background: var(--sf-grad); }
.sofer .start-bara i { background: var(--sf-grad); }

/* „La multi ani!” pe Acasa: cardul in degradeul aplicatiei, cu confetti. */
.sofer .sf-lma { position: relative; overflow: visible; background: var(--sf-grad-oblic); color: #fff; display: block; }
.sofer .sf-lma-in { min-width: 0; }
.sofer .sf-lma .sf-mic-sus { color: rgba(255, 255, 255, .82); }
.sofer .sf-lma .sf-mare-text { font-size: 24px; }
.sofer .sf-lma .sf-detalii { color: rgba(255, 255, 255, .9); }
.sofer .sf-confetti { position: absolute; top: 40%; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; z-index: 2; }