/* DriverNova — aplicatia clientilor, STRICT ce are ea in plus fata de dashboardul de admin.
   (Opus, 10 oct 2026, SPEC_DESIGN_COMUN_20261010.)

   Regula fisierului: aici NU se redefineste designul. Culorile, fonturile, razele si umbrele
   vin din variabilele puse de `static-shared/dn-design.css` — acelasi fisier pe care il cere
   si adminul. Daca o regula de aici ar putea sta acolo, locul ei e acolo.

   Ce ramane deci al clientului:
     1. contactul blocat pana la deblocare + contorul de credite + mesajul de upgrade
        (singurele diferente pe care spec-ul le permite fata de admin);
     2. ecranele pe care adminul nu le are deloc: Astazi, reamintirile, istoricul postarilor,
        tabelele din Piata, planul si dispozitivele.

   ATENTIE: `dn.css` NU e servit de aplicatia asta (nginx: `location = /c/static/dn.css` ->
   serviciul de conturi). Stilul pus acolo e cod mort. Fisierul asta se serveste de radar-dash. */

/* ---------------------------------------------------- 1. plan, credite, deblocare */

body.radar-dark .insigna {
  padding: 3px 9px; border-radius: 999px;
  background: var(--brand-accent-soft, var(--surface-2)); color: var(--brand-accent, var(--ink));
  font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
body.radar-dark .topbar-actions > .contor {
  color: var(--ink-2); font-size: 12px; line-height: 18px; white-space: nowrap;
}
body.radar-dark .topbar-actions > .contor b { color: var(--ink); font-weight: 600; }
/* Pe telefon bara de sus a adminului are doar marca si contul. Planul si creditele au locul lor
   in fila Cont, deci aici dispar — altfel ar calca peste „DriverNova". */
@media (max-width: 767.98px) {
  body.radar-dark .topbar-actions > .insigna,
  body.radar-dark .topbar-actions > .contor { display: none; }
}
/* Punctul 19 (audit independent, 12 oct 2026): de aceea creditele au o a doua gazda, in bara de
   verificare de sub titlul Drivers. Pe desktop e ascunsa (acolo se vede cea din bara de sus), pe
   telefon ia tot randul, ca sa nu intre in concurenta cu „Checked at …" si „Reminders · N". */
body.radar-dark #driverActivity > #contorMobil { display: none; }
@media (max-width: 767.98px) {
  /* Bara de verificare NU e un rand de flex pe telefon: `drivernova-grid-controls-20261006`
     o face GRID de trei coloane (.9fr 1.5fr .85fr) sub 768 px — masurat in browser, nu presupus
     (primele doua incercari, cu `flex-basis` si apoi cu `flex: 1 0 100%`, lasau contorul la 96 px
     si rupeau textul in trei randuri). Deci: rand propriu, pe toate coloanele. `flex-wrap` rămâne
     pentru straturile in care bara chiar e flex (si pentru chip-ul „First to write wins"). */
  body.radar-dark #driverActivity { flex-wrap: wrap; }
  body.radar-dark #driverActivity > #contorMobil {
    display: block; grid-column: 1 / -1; flex: 1 0 100%;
    color: var(--ink-2); font-size: 12px; line-height: 18px;
  }
  body.radar-dark #driverActivity > #contorMobil b { color: var(--ink); font-weight: 600; }
}

/* Textul postarii cat timp cardul e blocat: acelasi corp ca la admin, doar estompat. */
body.radar-dark .driver-post-preview.mascat { opacity: .72; }

/* Randul de tabel al adminului e o GRILA cu coloane fixe; ce adauga clientul sub card trebuie
   sa ocupe tot randul, altfel ar deveni o coloana ingusta. */
body.radar-dark .driver-row > .dn-client-extra { grid-column: 1 / -1; margin-top: 8px; }
body.radar-dark .driver-mobile-card > .dn-client-extra { margin-top: 10px; }

body.radar-dark .dn-contact-blocat {
  margin: 8px 0 0; color: var(--ink-2); font-size: 12px; line-height: 18px;
}
body.radar-dark .dn-client-extra > .contact {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 20px;
}
body.radar-dark .dn-client-extra > .contact a { color: var(--brand-accent, var(--ink)); }

/* Identitatea din subsolul barei laterale: trei randuri, nu un bloc lipit. */
body.radar-dark .side-user > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.radar-dark .side-user #workspace-company { font-weight: 600; color: var(--ink); }

body.radar-dark .banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink-2); font-size: 13px; line-height: 20px;
}
body.radar-dark .banner p { margin: 0; flex: 1 1 220px; }

/* Suprafata cardului: in designul comun e scrisa cu DOI stramosi, `#tab-soferi #soferiLista`
   (cool-palette:69-72,144 si warm-theme:304-306). Clientul are TREI liste de soferi (Soferi,
   Astazi, Salvati) si un id e unic, deci `#soferiLista` sta pe containerul paginii — adica
   deasupra lui `#tab-soferi`, nu dedesubt, si perechea de stramosi nu se potriveste. Cele cinci
   declaratii de mai jos sunt SINGURUL lucru copiat din design in toata aplicatia clientilor.
   Daca se schimba culoarea cardului in design, aici e al doilea loc de schimbat; daca lista
   asta creste, mutati componenta in `static-shared/` si stergeti blocul. */
body.radar-dark.drivernova.dn-warm :is(#tab-soferi, #tab-today, #tab-shortlist) :is(.driver-row, .driver-row.driver-mobile-card),
body.radar-dark.drivernova.dn-warm :is(#tab-soferi, #tab-today, #tab-shortlist) .driver-row.driver-mobile-card:hover {
  background: #fff; border-color: var(--border-soft); color: var(--text-secondary);
}
body.radar-dark.drivernova.dn-warm :is(#tab-soferi, #tab-today, #tab-shortlist) .driver-row:hover { background: #f1f7f8; }
@media (max-width: 767.98px) {
  body.radar-dark.drivernova.dn-warm :is(#tab-soferi, #tab-today, #tab-shortlist) .driver-row.driver-mobile-card {
    border-radius: var(--radius-lg); box-shadow: 0 2px 5px #243b5310;
  }
}
body.radar-dark.drivernova.dn-warm :is(#tab-soferi, #tab-today, #tab-shortlist)
  :is(.driver-identity > .avatar, .driver-card-header > .avatar) { background: var(--bg-selected); }

/* Cele doua reguli pe care designul comun le pune pe `#soferiLista` INSUSI (nu pe descendenti),
   deci nu ajung la listele clientului: fundalul listei in ecranul Soferi
   (`drivernova-cool-palette-20260929/palette.css`) si grila de carduri pe telefon
   (`mobile-avatars-20260919/radar-mobile.css`). Daca se schimba acolo, se schimba si aici. */
body.radar-dark #tab-soferi .driver-list,
body.radar-dark #tab-today .driver-list,
body.radar-dark #tab-shortlist .driver-list { background: transparent; }
@media (max-width: 767.98px) {
  body.radar-dark .lista.driver-list {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
    margin: 0; padding: 0; border: 0; background: transparent;
  }
}

/* Cautarea e o functie de plan: `dn-app.js` scoate `ascuns` de pe `#f-q` doar pentru conturile
   care o au. Cand campul e ascuns, rama lui din bara de sus (cu lupa) n-are ce cauta acolo.
   `:has()` e deja folosit de designul comun (`.bc-stanga:has(#resetFiltre:disabled)`). */
body.radar-dark .topbar .search-field:has(> .inp.ascuns) { display: none; }

/* ---------------------------------------------------- 2. randul de surse (Toate / FB / TG / Altele) */

body.radar-dark .seg.surse { margin: 0 0 12px; flex-wrap: wrap; }
body.radar-dark .seg.surse .surse-nr {
  margin-left: 6px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
body.radar-dark .seg.surse .seg-btn[aria-pressed="true"] .surse-nr { color: inherit; }

/* ---------------------------------------------------- 3. ecranele proprii clientului */

body.radar-dark .today-counts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px;
}
body.radar-dark .today-count {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink-2); font-size: 12px; text-align: left; cursor: pointer;
}
body.radar-dark .today-count:hover { border-color: var(--control-line); }
body.radar-dark .today-count b { color: var(--ink); font-size: 24px; font-weight: 700; line-height: 30px; }

body.radar-dark .today-block { margin: 0 0 20px; }
body.radar-dark .today-heading {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
body.radar-dark .today-heading h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }

body.radar-dark .productivity-status { margin: 6px 0; color: var(--ink-2); font-size: 13px; }
body.radar-dark .productivity-status[data-state="error"] { color: var(--danger, var(--ink)); }

body.radar-dark .post-history { margin-top: 10px; }
body.radar-dark .post-history > summary {
  cursor: pointer; color: var(--ink-2); font-size: 12px; line-height: 18px;
}
body.radar-dark .history-post {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
body.radar-dark .history-post .text { margin: 4px 0; color: var(--ink); font-size: 13px; line-height: 20px; }
body.radar-dark .history-post .text.mascat { opacity: .72; }

/* Fisele din Piata si din Cont: aceeasi carte ca in restul aplicatiei. */
body.radar-dark .sectiune { margin: 0 0 20px; }
body.radar-dark .sectiune > h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
body.radar-dark .card-titlu { color: var(--ink); font-weight: 600; }
body.radar-dark .card-meta { color: var(--ink-2); font-size: 12px; line-height: 18px; }
body.radar-dark .fapte { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
body.radar-dark .dim.mic { color: var(--ink-2); font-size: 12px; line-height: 18px; }
body.radar-dark .nota { color: var(--warning-text, var(--ink-2)); font-size: 12px; }

body.radar-dark .reminder-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 18px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--ink);
}
body.radar-dark .reminder-dialog::backdrop { background: rgba(5, 8, 12, .55); }
body.radar-dark .reminder-dialog fieldset { border: 0; margin: 0; padding: 0; }
body.radar-dark .reminder-dialog label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--ink-2); }
body.radar-dark .reminder-dialog input,
body.radar-dark .reminder-dialog textarea,
body.radar-dark #suport-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font: inherit;
}
body.radar-dark .reminder-footer { display: flex; gap: 8px; margin-top: 14px; }

body.radar-dark .workspace-role { color: var(--ink-2); font-size: 12px; }

/* `ascuns` exista in designul comun; `ascuns-vizual` tine elementul pentru cititorul de ecran. */
body.radar-dark .ascuns-vizual {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Companies: contactul firmei
   PARITATE (10 oct 2026). Blocul de contact (si nota de plan de pe Free) sta in
   `.dn-company-replies`, elementul pe care adminul il da raspunsurilor la anunt — clientul nu are
   raspunsuri, deci rândul e liber, iar asezarea in grila cardului (rând 3 sau 4, toata lățimea,
   la fiecare dintre cele trei lățimi) vine din `companies.css`, nu de aici. Aici doar interiorul. */
body.radar-dark #firmeLista .dn-company-replies > .contact {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 20px;
}
body.radar-dark #firmeLista .dn-company-replies > .contact a { color: var(--brand-accent, var(--ink)); }
body.radar-dark #firmeLista .dn-company-replies > .dn-contact-blocat { margin: 0; }

/* ---------------------------------------------------------------- cardul de sofer, DESCHIS
   PARITATE (11 oct 2026, cerere Sergiu de pe contul Pro): tap pe card -> textul postarii nu mai
   e taiat la doua randuri si apar toate faptele. Declaratiile sunt EXACT cele cu care designul
   partajat deschide un text taiat (`.text-postare.deschis` din `compact-reference-20260913/
   theme-radar.css:214`), aplicate pe elementul clientului. Selectorul e mai specific decat cele
   doua reguli care taie (`.driver-post-preview` la desktop si `#soferiLista .driver-mobile-card >
   .driver-post-preview` pe telefon), ca sa le invinga pe amandoua. */
body.radar-dark #soferiLista .driver-row.deschis > .driver-post-preview,
body.radar-dark .driver-row.deschis > .driver-post-preview {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
body.radar-dark .driver-row { cursor: pointer; }
body.radar-dark .driver-row :is(a, button, input, select, textarea, label, details) { cursor: auto; }

/* Faptele intregi: in DOM mereu, vizibile doar pe cardul deschis. Chipurile folosesc clasele de
   meta ale designului (`.driver-card-meta` / `.driver-card-fact`), care insa sunt stilizate numai
   sub pragul de telefon; aici se adauga strictul necesar ca sa arate la fel si pe desktop. */
body.radar-dark #soferiLista .dn-card-fapte { display: none; }
body.radar-dark #soferiLista .driver-row.deschis > .dn-card-fapte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  grid-column: 1 / -1; min-width: 0; margin: 6px 12px 0 44px;
  color: var(--text-secondary, #5A554D); font-size: 13px; line-height: 18px;
}
body.radar-dark #soferiLista .driver-row.deschis > .dn-card-fapte > .driver-card-fact {
  display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; white-space: normal;
}
body.radar-dark #soferiLista .driver-row.deschis > .dn-card-fapte > .driver-card-fact + .driver-card-fact::before {
  content: '·'; flex: none;
}
@media (max-width: 767.98px) {
  body.radar-dark #soferiLista .driver-mobile-card.deschis > .dn-card-fapte { margin: 0; }
}

/* ---------------------------------------------------------------- „First to write wins"
   SPEC_BANNER_PRIMUL_20261011. Nota foloseste componenta `.banner` a designului partajat; aici se
   adauga doar ce cere specificatia in plus: accentul auriu din stanga, locul iconitei si butonul.
   Auriul e cel al marcii (`--dn-bronz`), cu o rezerva pentru cazul in care variabila lipseste. */
body.radar-dark .dn-banner-primul {
  align-items: flex-start; gap: 12px;
  border-left: 4px solid var(--dn-bronz, #C9AD86);
}
body.radar-dark .dn-banner-primul > .icon { flex: none; margin-top: 2px; color: var(--dn-bronz, #C9AD86); }
body.radar-dark .dn-banner-text { flex: 1 1 220px; min-width: 0; }
body.radar-dark .dn-banner-text > strong { display: block; color: var(--ink); font-size: 14px; line-height: 20px; }
body.radar-dark .dn-banner-text > p { margin: 2px 0 0; }
body.radar-dark .dn-banner-ok { flex: none; min-height: 44px; }   /* tinta de atins, ceruta in spec */

/* ------------------------------------------------- „Open post" din bara de marcare e o ANCORA
   11 oct 2026, bugul lui Sergiu din Chrome pe iPhone (vezi `baraActiuni`): locul al patrulea al
   barei, dupa deblocare, e `<a href target=_blank>`, nu un buton care cheama `.click()` pe alta
   ancora. Clasele sunt aceleasi, deci aspectul vine tot din designul partajat; aici se adauga
   NUMAI cele doua lucruri pe care o ancora nu le ia de la buton:
     1. sublinierea de link, care nu exista pe niciun buton din bara;
     2. starea plina, pe care butonul o primea din `[aria-pressed="true"]` — un atribut care pe un
        link n-ar fi valid (nu e comutator). Valorile sunt EXACT cele din
        `card-actiuni.css:118-123` (bara de pe telefon) si `:365` (fasia de iconite de pe desktop),
        masurate inainte si dupa schimbare: 40,94,104 pe fundal si alb pe text la 390 px,
        40,94,104 pe text si fundal transparent la 1280 px. */
body.radar-dark .dn-c2-link { text-decoration: none; }
body.radar-dark .dn-c2-buton.dn-c2-link {
  background: var(--dn-petrol, #285E68); border-color: var(--dn-petrol, #285E68); color: #fff;
}
body.radar-dark .dn-c2-buton.dn-c2-link svg { fill: currentColor; }
body.radar-dark .dn-c2-ic.dn-c2-link { color: var(--dn-petrol, #285E68); }

/* ---------------------------------------------------------------- teaserul de plan
   SPEC_FINISAJE_CLIENT_20261011 punctul 1. Componenta e `.banner` de mai sus (acelasi card de
   upgrade ca `#banner-free`) si structura de text e cea a notei „First to write wins"
   (`.dn-banner-text`), deci aici nu se defineste niciun stil nou — se corecteaza doar marginea:
   `.banner` e gandit pentru capul paginii (`margin: 0 0 12px`), iar teaserul sta la BAZA unui card,
   dupa tabel, unde marginea de jos ar fi lasat un gol si l-ar fi lipit de tabelul de deasupra. */
body.radar-dark .dn-teaser-plan { margin: 10px 0 0; }
body.radar-dark .dn-teaser-buton { flex: none; }

/* Chip-ul ramas dupa inchidere, in bara de verificare, langa „Reminders". */
body.radar-dark .dn-banner-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 2px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--ink-2); cursor: pointer;
  font: 500 12px/18px var(--sans); white-space: nowrap;
}
body.radar-dark .dn-banner-chip > .icon { width: 14px; height: 14px; color: var(--dn-bronz, #C9AD86); }
body.radar-dark .dn-banner-chip:hover { color: var(--ink); }

/* „Write now" — langa ceasul verde, cat timp postarea e sub doua ore si n-a fost deblocata. */
body.radar-dark .dn-scrie-acum {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: #E7F4EC; color: #15803d;
  font: 600 11px/18px var(--sans); white-space: nowrap;
}

/* Culoarea ceasului, pe telefon. Designul partajat o aplatizeaza intentionat
   in DOUA locuri: `mobile-avatars-20260919/radar-mobile.css:92` pe telefon si
   `drivernova-no-cdl-20260920/radar-dark.css:130` pe desktop, amandoua `color: inherit`,
   ca ora sa se citeasca la fel ca restul metei. Semnalul cerut de SPEC_BANNER_PRIMUL_20261011 are
   nevoie exact de culoare, deci aici se face exceptia — numai pentru cele doua benzi, cu aceleasi
   valori ca in designul partajat (`theme-radar.css:702-704`), si numai pe cardul clientului. */
body.radar-dark #soferiLista .driver-card-time .source-time.ceas-verde,
body.radar-dark #soferiLista .driver-activity .source-time.ceas-verde { color: #15803d; }
body.radar-dark #soferiLista .driver-card-time .source-time.ceas-gri,
body.radar-dark #soferiLista .driver-activity .source-time.ceas-gri { color: var(--ink-3, #6b7280); }

/* QAFIX1 #7 (QA runda 2, randul #77): comutatorul de limba al postarii, pe fiecare card.
   Butoane de 44 px inaltime pe telefon (tinta de deget), fara latime fixa — „Original" e cel mai
   lung cuvant si se traduce. Se vede si pe cardul inchis: traducerea e motivul pentru care un
   recrutor care nu stie ruseste poate citi o postare ruseasca, deci n-are ce cauta sub un tap. */
body.radar-dark .dn-traducere {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 6px 0 2px; grid-column: 1 / -1;
}
body.radar-dark .dn-traducere-buton {
  min-height: 28px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--ink-2);
  font-size: 12px; line-height: 1.2; cursor: pointer;
}
body.radar-dark .dn-traducere-buton:hover { color: var(--ink); border-color: var(--ink-3); }
body.radar-dark .dn-traducere-buton.activ {
  border-color: var(--active-text, var(--ink)); color: var(--ink);
  background: var(--surface-2, transparent); font-weight: 500;
}
@media (max-width: 767.98px) {
  body.radar-dark .dn-traducere-buton { min-height: 32px; padding: 6px 12px; font-size: 13px; }
}