/* Csókási Agro – Raktár rendszer – belső, letisztult admin/gazda felület */

:root{
  --gold:#a97e1f;
  --gold-dark:#8a6717;
  --soil:#241b13;
  --cream:#faf6ec;
  --cream-dark:#efe6d1;
  --white:#ffffff;
  --border:#e2d8bd;
  --ok:#4b6e3a;
  --warn:#b4591f;
  --danger:#b23b2e;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:'Fraunces', Georgia, serif;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:var(--sans); background:var(--cream); color:var(--soil);
  line-height:1.5; font-size:15px;
}
a{color:var(--gold-dark);}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0 0 .5rem;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--soil); color:var(--cream); padding:.9rem 1.6rem;
  position:relative;
}
.topbar a{color:var(--cream); text-decoration:none;}
.topbar .brand{font-family:var(--serif); font-size:1.15rem; display:flex; align-items:center; gap:.6rem;}
.topbar .brand img{height:28px; width:auto;}
.topbar nav.topnav{display:flex; gap:1.3rem; font-size:.9rem; flex-wrap:wrap;}
.topbar nav.topnav a.active{color:#e6c766; font-weight:600;}
.topbar .user{font-size:.85rem; opacity:.85; display:flex; align-items:center; gap:1rem;}

/* ---------- reszponzív mobil menü (admin nav) ---------- */
.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0;
  position:fixed; top:.85rem; right:1.6rem; z-index:210;
}
.burger span{width:100%; height:2px; background:var(--cream); border-radius:2px; transition:transform .25s, opacity .25s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .burger{display:flex;}
  .topbar nav.topnav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; inset:0; z-index:200; background:var(--soil);
    padding:5rem 1.8rem 2rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .35s ease; flex-wrap:nowrap;
  }
  .topbar nav.topnav.open{transform:translateX(0);}
  .topbar nav.topnav a{
    padding:1rem 0; font-size:1.05rem; border-bottom:1px solid rgba(250,246,236,.1);
  }
}
.wrap{max-width:1440px; margin:0 auto; padding:2.2rem 2.4rem 4rem;}
.card{
  background:var(--white); border:1px solid var(--border); border-radius:6px;
  padding:1.7rem 1.9rem; margin-bottom:1.8rem;
}
table{width:100%; border-collapse:collapse; font-size:.94rem;}
th, td{text-align:left; padding:.8rem .9rem; border-bottom: 3px groove var(--border); line-height:1.55;}
th{font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:#6b5f47; padding-bottom:.7rem;}
tr:hover td{background:var(--cream-dark);}
/* Zebra-csíkozás minden admin/gazda táblázaton — a table-tools.js adja a
   csa-row-even/csa-row-odd osztályt (látható sorrend szerint, hogy egy
   több <tr>-ből álló rekord — pl. a Betakarítási tételek fő+részletek
   sora — mindig egyben, egyszínűként csíkozódjon, és szűrés/lapozás után
   is a ténylegesen szomszédos, látható sorok váltakozzanak). */
tr.csa-row-even td{background:rgba(226,216,189,.3);}
tr.csa-row-odd td{background:rgba(250,246,236,.3);}
tr.csa-row-even:hover td, tr.csa-row-odd:hover td{background:var(--cream-dark);}
/* A fontosabb (nem "muted"/másodlagos) adatok kiemelése félkövérrel, hogy
   gyorsabban olvasható legyen egy táblázat — az űrlap-elemek (input/select/
   textarea) ettől függetlenül maradnak normál súlyúak. */
td:not(.muted){font-weight:600;}
td input, td select, td textarea, td button{font-weight:400;}
td button{font-weight:600;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
@media (max-width:700px){ .grid-2{grid-template-columns:1fr;} .topbar{flex-direction:column; align-items:flex-start; gap:.6rem;} }
label{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#6b5f47; margin:.85rem 0 .3rem;}
input, select, textarea{
  width:100%; padding:.65rem .75rem; border:1px solid var(--border); border-radius:4px;
  font-family:var(--sans); font-size:.95rem; background:var(--white); color:var(--soil);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:0;}
.btn{
  display:inline-block; background:var(--gold); color:var(--white); border:0; padding:.6rem 1.2rem;
  border-radius:4px; font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; margin-top:1rem;
  transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow:0 1px 2px rgba(36,27,19,.12);
}
.btn:hover{background:var(--gold-dark); box-shadow:0 3px 8px rgba(36,27,19,.22); transform:translateY(-1px);}
.btn:active{background:#755410; box-shadow:0 1px 2px rgba(36,27,19,.18); transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--soil); outline-offset:2px;}
.btn:disabled{background:var(--border); color:#9a8f77; cursor:not-allowed; box-shadow:none; transform:none;}
.btn.secondary{background:var(--white); color:var(--soil); border:1px solid var(--border);}
.btn.secondary:hover{background:var(--cream-dark); border-color:#cbbf9d;}
.btn.secondary:active{background:#e6dcc0;}
.btn.danger{background:var(--danger);}
.btn.danger:hover{background:#8f2e24;}
.btn-sm{padding:.3rem .7rem; font-size:.8rem; margin-top:0;}
.pill{display:inline-block; padding:.15rem .55rem; border-radius:99px; font-size:.75rem; font-weight:600;}
.pill.ok{background:#e5efdd; color:var(--ok);}
.pill.warn{background:#fbe8d8; color:var(--warn);}
.flash{padding:.8rem 1rem; border-radius:4px; margin-bottom:1.2rem; font-size:.9rem;}
.flash.success{background:#e5efdd; color:var(--ok); border:1px solid #c7dbb6;}
.flash.error{background:#fbe1dc; color:var(--danger); border:1px solid #f0bcb2;}
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--soil);
}
.login-box{background:var(--cream); padding:2.4rem 2.2rem; border-radius:8px; width:100%; max-width:360px;}
.login-box .brand{text-align:center; margin-bottom:1.2rem; font-family:var(--serif); font-size:1.3rem;}
.login-box .brand img{height:44px; margin-bottom:.6rem;}
.muted{color:#8a7c5e; font-size:.85rem;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1.2rem;}
.stat{background:var(--cream-dark); border-radius:6px; padding:1.1rem 1.2rem;}
.stat strong{display:block; font-family:var(--serif); font-size:1.4rem;}
.stat span{font-size:.78rem; color:#6b5f47;}
form.inline{display:inline;}
.actions{display:flex; flex-wrap:wrap; gap:.6rem;}
.quality-fields{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:.4rem 1.3rem;}

/* ---------- popup / modal (pl. Tisztítás és Szárítás) ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(36,27,19,.55);
  align-items:center; justify-content:center; z-index:300; padding:1rem;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--white); border-radius:8px; padding:1.6rem 1.8rem; max-width:420px; width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.modal-box h3{margin:0 0 .5rem;}
.modal-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.3rem;}
.modal-actions .btn{margin-top:0;}

/* ---------- táblázat eszköztár: keresés, szűrők, lapozás ---------- */
.csa-table-toolbar{
  display:flex; flex-wrap:wrap; gap:1rem 1.2rem; align-items:flex-end; margin-bottom:1.4rem;
}
.csa-table-toolbar label{margin:0 0 .3rem;}
.csa-table-toolbar .csa-search{flex:1 1 240px; min-width:200px;}
.csa-table-toolbar .csa-filter{min-width:160px;}
.csa-table-toolbar .csa-reset{margin-top:1.65rem;}
.csa-pagination{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.9rem; margin-top:1.2rem; font-size:.85rem; color:#6b5f47;
}
.csa-pagination .csa-pg-btns{display:flex; align-items:center; gap:.8rem;}
.csa-pagination button{margin-top:0;}
.csa-pagination .csa-pg-indicator{white-space:nowrap;}
tr.csa-no-results td{text-align:center; color:#8a7c5e; padding:1.5rem; font-weight:400;}

/* ---------- Betakarítási tételek: dupla-soros rekord-elrendezés ---------- */
/* Minden tétel két <tr>-ből áll: a fő sor (gyors áttekintés: dátum, gazda,
   növény, mennyiség, tisztítva/szárítva, műveletek) és alatta egy mindig
   látható "részletek" sor (fuvarozó, földterület, minőség, veszteség,
   megjegyzés) — így egyik sor sem szélesebb a kártyánál, és minden adat
   kényelmesen olvasható marad vízszintes görgetés/kicsordulás nélkül. */
tr.tetel-fo-sor td{border-bottom:none; padding-bottom:.5rem;}
tr.tetel-reszlet-sor td{padding-top:0; padding-bottom:1rem;}
.tetel-reszlet-grid{
  display:flex; flex-wrap:wrap; gap:.35rem 2rem;
  color:#8a7c5e; font-size:.86rem; font-weight:400;
  padding:20px 25px;
}
.tetel-reszlet-grid .reszlet-item{white-space:normal;}
.tetel-reszlet-grid .reszlet-item-wide{flex:1 1 260px;}
.tetel-reszlet-grid strong{color:var(--soil); font-weight:600; margin-right:.3rem;}

/* ---------- tárolóhely-kapacitás sáv ---------- */
.cap-bar-wrap{display:flex; align-items:center; gap:.6rem; min-width:120px;}
.cap-bar-track{
  flex:1; background:var(--cream-dark); border:1px solid var(--border); border-radius:99px;
  height:10px; overflow:hidden;
}
.cap-bar-fill{height:100%; background:var(--gold); border-radius:99px 0 0 99px; transition:width .3s;}
.cap-bar-fill.cap-warn{background:var(--warn);}
.cap-bar-fill.cap-danger{background:var(--danger);}
.cap-bar-label{font-size:.78rem; color:#6b5f47; white-space:nowrap; min-width:2.6em; text-align:right;}