/* A Solara Supplier stíluslapja – a beszállító lapjai. ASZTALI GÉPRE
   készül (a beszállító innen nyomtat), de telefonon is használható marad:
   keskeny képernyőn a sorok egymás alá törnek. A színek a SOLARA-éi. */
:root{
  --kek:#2A5C9A; --kek-sotet:#1F4878; --tinta:#1F2429; --halk:#5A626B;
  --vonal:#C9D1DA; --hatter:#EEF1F5; --lap:#fff;
  --zold:#27724A; --piros:#B23A2F; --borostyan:#8A5A00;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--hatter); color:var(--tinta);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;}
a{color:var(--kek-sotet);}
.halk{color:var(--halk);}
[hidden]{display:none !important;}

/* fejléc */
.fej{position:sticky; top:0; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:8px 20px;
  background:var(--kek); color:#fff;}
.fej-cim{display:flex; align-items:center; gap:10px; color:#fff;
  text-decoration:none; font-size:18px; font-weight:600; min-width:0;}
.fej-logo{height:34px; width:auto; background:#fff; border-radius:50%;}
.fej-ki{display:flex; align-items:center; gap:12px; margin:0; min-width:0;}
.fej-nev{font-size:14px; opacity:.92; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;}

.lap{max-width:1100px; margin:0 auto; padding:18px 20px 40px;}
.lap-cim{margin:0 0 4px; font-size:24px; line-height:1.2;}
.szakasz-cim{margin:22px 0 8px; font-size:17px;}
.vissza-sor{margin:0 0 12px;}

.kartya{background:var(--lap); border:1px solid var(--vonal); border-radius:8px;
  padding:14px 16px; margin:14px 0;}
.ures{color:var(--halk); text-align:center;}
.uzenet{margin:0 0 12px; padding:10px 12px; border-radius:8px;
  background:#E3F1E8; border:1px solid var(--zold); color:#17482E;}
.uzenet-hiba{background:#FBE9E7; border-color:var(--piros); color:#7A241C;}

/* gombok */
.gomb{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:6px 14px; border-radius:6px; font:inherit;
  font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap;
  border:1px solid var(--vonal); background:var(--lap); color:var(--tinta);}
.gomb:hover{border-color:#9AA6B3;}
.gomb-fo{background:var(--kek); border-color:var(--kek); color:#fff;}
.gomb-fo:hover{background:var(--kek-sotet); border-color:var(--kek-sotet);}
.gomb:disabled{opacity:.5; cursor:default;}
.gomb-fej{background:transparent; border-color:rgba(255,255,255,.6);
  color:#fff; font-weight:500;}
.gomb-fej:hover{border-color:#fff;}
.gomb:focus-visible, input:focus-visible, button:focus-visible{
  outline:2px solid #F0B429; outline-offset:1px;}

/* mezők */
input[type=text], input[type=password], input[type=date], input[type=number]{
  min-height:38px; padding:6px 10px; font:inherit; color:var(--tinta);
  background:#fff; border:1px solid var(--vonal); border-radius:6px;}

/* táblázat */
.tabla-doboz{background:var(--lap); border:1px solid var(--vonal);
  border-radius:8px; overflow-x:auto;}
.tabla{width:100%; border-collapse:collapse;}
.tabla th{text-align:left; font-weight:600; font-size:13px; color:var(--halk);
  padding:9px 12px; border-bottom:1px solid var(--vonal); white-space:nowrap;}
.tabla td{padding:9px 12px; border-bottom:1px solid #E6EAEF; vertical-align:top;}
.tabla tr:last-child td{border-bottom:0;}
.tabla .szam{text-align:right; white-space:nowrap;}
.tabla tr.kesz td{color:var(--halk);}
.allapot{display:inline-block; padding:2px 10px; border-radius:12px;
  font-size:13px; font-weight:600; background:#E6EAEF; color:var(--tinta);}
.allapot-elkuldve{background:#FCEFD2; color:#6B4500;}
.allapot-visszaigazolva{background:#DDE9F7; color:#1F4878;}
.allapot-feladva{background:#DFF0E5; color:#17482E;}

/* A BEJELENTKEZŐ ABLAK – a lap közepén, fejléc nélkül. */
body.belepo-lap{min-height:100vh; display:flex; align-items:center;
  justify-content:center;}
body.belepo-lap .lap{width:100%; max-width:400px; padding:20px 16px;}
.belepo{display:flex; flex-direction:column; gap:6px; background:var(--lap);
  border:1px solid var(--vonal); border-radius:10px; padding:26px 26px 24px;
  box-shadow:0 10px 30px rgba(31,36,41,.12);}
.belepo-logo{align-self:center; width:84px; height:84px; object-fit:contain;
  margin-bottom:6px;}
.belepo-cim{margin:0; text-align:center; font-size:22px;}
.belepo-ceg{margin:0 0 10px; text-align:center; color:var(--halk);}
.belepo label{font-weight:600; margin-top:8px;}
.belepo input{width:100%; min-height:42px;}
.belepo .gomb-fo{margin-top:16px; min-height:42px;}

/* a rendelés adatai */
.adatok{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:flex-end;}
.adat{display:flex; flex-direction:column; min-width:0;}
.adat span{font-size:13px; color:var(--halk);}
.adat-szeles{flex:1 1 260px;}
.adat-gomb{margin-left:auto;}

/* KITÖLTÉS MINDEN SORRA – egy dátum és egy ország a rendelés minden sorába */
.kitolto{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  margin:16px 0 0;}
.kitolto label{display:flex; align-items:center; gap:8px; font-weight:600;}
.kitolto input[type=text]{width:190px;}
.kitolto-uzenet{margin:0; color:var(--borostyan); font-weight:600;}
.kitolto-uzenet:empty{display:none;}

/* EGY TÉTEL ÉS A LEJÁRAT-SORAI. A hat oszlop: Darab, Lejárat, Származási
   ország, Cikkszám, Etikett, és a sor törlésének helye. */
.tetel-fej{display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px;}
.tetel-nev{margin:0; font-size:16px; line-height:1.3;}
.tetel-ar{margin:2px 0 0; font-size:13px;}
.rendelve{white-space:nowrap; font-weight:600;}
.lsorok{margin-top:10px;}
.lsor{display:grid; align-items:center; gap:8px 12px;
  grid-template-columns:86px 158px minmax(130px,1fr) minmax(176px,1.1fr) 70px 34px;
  padding:4px 0;}
.lsor > *{min-width:0;}
.lsor input{width:100%;}
.lfej{font-size:13px; color:var(--halk); padding:0 0 2px;}
.cikkszam{font-family:Consolas,"Cascadia Mono","Courier New",monospace;
  font-size:14px; overflow-wrap:anywhere;}
.cikkszam-valtozott{color:var(--piros); font-weight:600;}
.cikkszam-valtozott small{display:block; font-family:"Segoe UI",system-ui,sans-serif;
  font-weight:400; font-size:12px;}
.sor-le{width:34px; height:34px; border-radius:6px; border:1px solid var(--vonal);
  background:#fff; color:var(--piros); font-size:20px; line-height:1;
  cursor:pointer;}
.sor-le:hover{border-color:var(--piros);}
.tetel-lab{display:flex; align-items:center; gap:14px; margin-top:8px;
  flex-wrap:wrap;}
.megadva{font-size:13px; font-weight:600;}
.megadva-jo{color:var(--zold);}
.megadva-elter{color:var(--piros);}
.mentes-sor{display:flex; align-items:center; gap:14px; margin:16px 0 0;}
.mentes-sor .gomb-fo{min-width:120px;}

/* AZ ETIKETT MÉRETE – négy szám és a két gomb */
.etikett-sor{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  margin:0;}
.etikett-cim{font-weight:600;}
.etikett-sor label{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.m-mm{width:72px;}
.m-db-kicsi{width:64px;}
.etikett-gombok{display:flex; gap:8px; margin-left:auto;}
.etikett-doboz .kitolto-uzenet{margin-top:10px;}

/* a lépések (visszaigazolás, feladás) */
.lepes-urlap{display:flex; flex-direction:column; gap:10px; max-width:560px;}
.lepes-urlap .szakasz-cim{margin:0;}
.mezosor{display:flex; flex-direction:column; gap:4px;}
.mezosor label{font-weight:600;}
.lepes-urlap .gomb-fo{align-self:flex-start; min-width:150px;}

/* KESKENY KÉPERNYŐN a lejárat-sor két sorba törik: fent a három mező, alatta
   a cikkszám, az etikett és a törlés. */
@media (max-width:760px){
  .lap{padding:14px 12px 32px;}
  .fej{padding:8px 12px;}
  .lfej{display:none;}
  .lsor{grid-template-columns:76px minmax(0,1fr) minmax(0,1fr);
    border-top:1px solid #E6EAEF; padding:8px 0;}
  .lsor .cikkszam{grid-column:1 / span 2;}
  .lsor .etikett-db{text-align:right;}
  .lsor .sor-vege{grid-column:1 / -1; justify-self:end;}
  .lsor .sor-vege:empty{display:none;}
  .tetel-fej{flex-direction:column; gap:4px;}
  .etikett-gombok{margin-left:0;}
  .adat-gomb{margin-left:0;}
  .gomb{min-height:44px;}
  input[type=text], input[type=password], input[type=date], input[type=number]{
    min-height:44px;}
}