/* Aplicatia soferului — pentru telefon, folosita cu o mana, in cabina. */
:root {
  /* paleta MAXIS: bleumarin, cyan, turcoaz. Rosul si portocaliul raman doar
     ca semnal (eroare, atentie): un sofer trebuie sa le recunoasca pe loc. */
  --albastru: #0B2F66; --albastru-inchis: #071A36; --cyan: #12C7E6; --turcoaz: #00B3A4;
  --text: #1f2937; --gri: #6b7280;
  --linie: #e5e7eb; --fond: #f3f5f8; --alb: #fff; --verde: #007F74; --rosu: #b91c1c;
  --portocaliu: #b45309; --verde-fond: #e6f6f4; --rosu-fond: #fef2f2; --portocaliu-fond: #fffbeb;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--text);
       font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--albastru); }
.bara { position: sticky; top: 0; z-index: 10; color: #fff;
        background: linear-gradient(135deg, var(--albastru) 0%, var(--albastru-inchis) 100%);
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(90deg, var(--cyan), var(--turcoaz)) 1;
        display: flex; align-items: center; gap: 10px; padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top)); }
.bara a { color: #fff; text-decoration: none; }
.bara .titlu { font-weight: 600; font-size: 17px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bara .mic { font-size: 13px; opacity: .85; }
.pagina { max-width: 640px; margin: 0 auto; padding: 16px; }
.card { background: var(--alb); border: 1px solid var(--linie); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.card h2 { font-size: 15px; margin: 0 0 10px; color: var(--gri); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.card h3 { font-size: 16px; margin: 14px 0 8px; }
.placa { font-size: 26px; font-weight: 700; letter-spacing: .04em; }
.gri { color: var(--gri); } .mic { font-size: 13px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
       min-height: 52px; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent;
       font: 600 16px/1.2 inherit; text-decoration: none; cursor: pointer; margin-bottom: 10px; }
.btn-p { background: var(--albastru); color: #fff; }
.btn-p:active { background: var(--albastru-inchis); }
.btn-s { background: var(--alb); color: var(--albastru); border-color: #BFE6F2; }
.btn-r { background: var(--alb); color: var(--rosu); border-color: #f3c4c4; }
.btn-v { background: var(--verde); color: #fff; }
.btn[disabled], .btn.inactiv { opacity: .45; pointer-events: none; }
.btn-mic { min-height: 38px; font-size: 14px; width: auto; display: inline-flex; margin: 0; padding: 6px 12px; }
.eticheta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.e-verde { background: var(--verde-fond); color: var(--verde); }
.e-rosu { background: var(--rosu-fond); color: var(--rosu); }
.e-port { background: var(--portocaliu-fond); color: var(--portocaliu); }
.e-gri { background: var(--fond); color: var(--gri); }
.e-albastru { background: #e6f4fa; color: var(--albastru); }
.alerta { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 15px; }
.a-ok { background: var(--verde-fond); color: var(--verde); border: 1px solid #aee3dd; }
.a-err { background: var(--rosu-fond); color: var(--rosu); border: 1px solid #f3c4c4; }
.a-info { background: #e8f6fb; color: #0B2F66; border: 1px solid #bfe6f2; }
.a-port { background: var(--portocaliu-fond); color: var(--portocaliu); border: 1px solid #f6dfa6; }
label.c { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 5px; }
input[type=text], input[type=tel], input[type=number], input[type=date], input[type=password],
select, textarea { width: 100%; font: 16px inherit; padding: 12px; border: 1px solid #cfd6de;
       border-radius: 10px; background: #fff; color: var(--text); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #8ddcec; border-color: var(--albastru); }
.grila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rand { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.rand:last-child { border-bottom: 0; }
.rand .v { text-align: right; font-weight: 600; }
.lista a.item, .lista div.item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
       padding: 12px 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; }
.lista .item:last-child { border-bottom: 0; }
/* checklist */
.punct { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.punct:last-child { border-bottom: 0; }
.punct .nume { font-weight: 600; margin-bottom: 8px; }
.alegeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.alegeri input { position: absolute; opacity: 0; pointer-events: none; }
.alegeri label { display: block; text-align: center; padding: 10px 4px; border: 1px solid #cfd6de;
       border-radius: 8px; font-size: 14px; font-weight: 600; background: #fff; cursor: pointer; }
.alegeri input:checked + label.ok { background: var(--verde); border-color: var(--verde); color: #fff; }
.alegeri input:checked + label.pb { background: var(--portocaliu); border-color: var(--portocaliu); color: #fff; }
.alegeri input:checked + label.ls { background: var(--rosu); border-color: var(--rosu); color: #fff; }
.detalii-pb { display: none; margin-top: 8px; }
.punct.cu-pb .detalii-pb { display: block; }
.punct.revizuit { background: var(--portocaliu-fond); margin: 0 -16px; padding: 12px 16px; }
/* poze */
.poze { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.poza-camp { position: relative; border: 2px dashed #cfd6de; border-radius: 10px; min-height: 110px;
       display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
       font-size: 14px; color: var(--gri); overflow: hidden; background: #fafafa; cursor: pointer; }
.poza-camp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.poza-camp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poza-camp .et { position: relative; z-index: 1; background: rgba(255,255,255,.88); padding: 3px 8px; border-radius: 6px; font-weight: 600; color: var(--text); }
.poza-camp.are { border-style: solid; border-color: var(--verde); }
.miniaturi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.miniaturi img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.galerie a { display: block; position: relative; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); display: block; }
.galerie span { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 4px; }
/* ecranul de asteptare la trimitere */
#ocupat { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 50; display: none;
          align-items: center; justify-content: center; }
#ocupat .cutie { background: #fff; border-radius: 12px; padding: 22px; width: min(320px, 86vw); text-align: center; }
#ocupat .progres { height: 8px; background: var(--fond); border-radius: 99px; overflow: hidden; margin-top: 12px; }
#ocupat .progres div { height: 100%; width: 0; background: var(--albastru); transition: width .2s; }
/* PV */
.pv-doc { background: #fff; font-size: 14px; }
.pv-doc h1 { font-size: 17px; text-align: center; margin: 0 0 4px; }
.pv-doc .sub { text-align: center; color: var(--gri); font-size: 13px; margin-bottom: 14px; }
.pv-doc table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.pv-doc th, .pv-doc td { border: 1px solid var(--linie); padding: 6px 8px; text-align: left; vertical-align: top; }
.pv-doc th { background: #f9fafb; font-weight: 600; }
.pv-doc .semn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pv-doc .semn div { border: 1px solid var(--linie); border-radius: 8px; padding: 10px; font-size: 13px; min-height: 90px; }
.bifa { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 12px 0; }
.bifa input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; }
.sugestii { border: 1px solid #cfd6de; border-radius: 10px; margin-top: 4px; overflow: hidden; }
.sugestii div { padding: 10px 12px; border-bottom: 1px solid var(--linie); font-size: 14px; background: #fff; }
.sugestii div:last-child { border-bottom: 0; }
video#camera { width: 100%; border-radius: 12px; background: #000; }
@media print {
  .bara, .fara-tipar, #ocupat { display: none !important; }
  body { background: #fff; }
  .pagina { max-width: none; padding: 0; }
  .card { border: 0; padding: 0; }
}

/* comutatorul de limbă din bara de sus */
.bara .limba { margin-left: 10px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px; font-weight: 700; letter-spacing: .03em; text-decoration: none; }

/* inventarul din PV: bifat implicit, şoferul debifează ce lipseşte */
.inv-grupa { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; margin: 14px 0 4px; }
.inv-grupa:first-of-type { margin-top: 4px; }
.inv-rand { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px;
  border-bottom: 1px solid #eef1f4; cursor: pointer; }
.inv-rand input[type=checkbox] { width: 24px; height: 24px; flex: none; accent-color: var(--verde); }
.inv-rand .inv-et { flex: 1; font-size: 15px; }
.inv-rand .inv-nr { width: 76px; flex: none; margin: 0; text-align: center; }
.inv-rand.inv-lipsa { background: #fff7ed; }
.inv-rand.inv-lipsa .inv-et { color: #b45309; font-weight: 600; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.declaratie { font-size: 13.5px; line-height: 1.5; }
.declaratie li { margin-bottom: 8px; }
.declaratie .alt { display: block; color: #6b7280; font-size: 12px; margin-top: 2px; }
.inv-rand .inv-nota { display: block; font-size: 12px; font-style: italic; color: #b91c1c; margin-top: 2px; font-weight: 400; }

/* butonul Înapoi din bară: ţintă mare, pentru deget */
.bara > a:first-child:not(.mic) { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -6px 4px -6px -10px; padding: 0 10px 2px;
  font-size: 34px; line-height: 1; font-weight: 300; border-radius: 10px; }
.bara > a:first-child:not(.mic):active { background: rgba(255,255,255,.18); }
/* previzualizarea video-ului în caseta lui */
.poza-camp video { width: 100%; max-height: 260px; border-radius: 8px; background: #000; display: block; margin-bottom: 8px; }
.reluat { font-size: 13px; }