:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --border:#e8e2d6;
  --primary:#c09040;
  --primary2:#b09040;
  --card:#ffffff;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
  --radius2:22px;
  --ok:#16a34a;
  --warn:#f59e0b;
  --blue:#1d4ed8;
  --danger:#dc2626;
  --chip:#f7f3ea;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* TŁO: obraz + delikatna warstwa dla czytelności */
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.45)),
    url("./assets/Tloapk.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;

  color:var(--text);
}

/* opcjonalnie: lekka poświata pod kartami na bardzo „kontrastowym” tle */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  z-index:-1;
}

a{color:inherit}
button,input,select,textarea{font:inherit}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter: blur(8px);
  z-index:20;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width:220px;
}
.brand img{height:85px; width:auto; display:block}
.badge{
  font-size:12px; color:var(--muted); border:1px solid var(--border);
  padding:4px 8px; border-radius:999px; background:#fff;
}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  border:1px solid var(--border); background:#fff; color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn:hover{background:#fbfbfb}
.btn.primary{
  background:var(--primary); color:#fff; border-color:transparent;
}
.btn.primary:hover{background:var(--primary2)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--danger); color:#fff; border-color:transparent}
.btn.small{padding:7px 10px; border-radius:10px; font-size:13px}

.grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:16px;
}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius2); box-shadow:var(--shadow);
  padding:16px;
}
.card h2{margin:0 0 8px 0; font-size:18px}
.card h3{margin:0 0 8px 0; font-size:16px}
.muted{color:var(--muted); font-size:13px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:6px; min-width:180px; flex:1}
.field label{font-size:12px; color:var(--muted)}
.field input,.field select,.field textarea{
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  background:#fff; outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{min-height:80px; resize:vertical}

.kpis{display:flex; gap:10px; flex-wrap:wrap}
.kpi{
  border:1px dashed var(--border); border-radius:14px; padding:10px 12px;
  background: #fff;
}
.kpi .v{font-weight:700; font-size:16px}
.kpi .k{font-size:12px; color:var(--muted)}

.table{
  width:100%; border-collapse:separate; border-spacing:0 10px;
}
.table th{font-size:12px; text-align:left; color:var(--muted); padding:0 10px}
.table td{
  background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:12px 10px;
}
.table tr td:first-child{border-left:1px solid var(--border); border-radius:12px 0 0 12px}
.table tr td:last-child{border-right:1px solid var(--border); border-radius:0 12px 12px 0}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--chip); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:12px;
}
.pill.ok{background:#ecfdf5;border-color:#bbf7d0}
.pill.warn{background:#fffbeb;border-color:#fde68a}
.pill.blue{background:#eff6ff;border-color:#bfdbfe}

.login{
  min-height: calc(100vh - 74px);
  display:flex; align-items:center; justify-content:center;
}
.login .box{max-width:420px; width:100%}
.center{text-align:center}

/* FIX: logoMark ma pokazywać obrazek (a nie kafelek 62x62 z gradientem) */
.logoMark{
  width:auto;
  height:auto;
  border-radius:0;
  background: transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: inherit;
  font-weight:800;
}
.logoMark img{
  display:block;
  width: min(220px, 60vw);
  height: auto;
  object-fit: contain;
}

.hr{height:1px;background:var(--border); margin:10px 0}

.line-card{
  display:grid; grid-template-columns: 120px 1fr 220px; gap:12px;
  padding:14px; border-radius:18px;
  border:1px solid var(--border); background:#fff;
}
@media (max-width: 900px){ .line-card{grid-template-columns:1fr} }

.preview{
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  min-height:90px;
}
.preview .mini{
  width:92px; height:72px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg,#f3f4f6,#fff);
  position:relative;
}
.preview .blind{
  position:absolute; left:10px; right:10px; top:14px; bottom:14px;
  border-radius:10px;
  border:1px solid var(--border);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 6px, rgba(0,0,0,.02) 6px 12px);
}
.priceBox{
  border:1px solid var(--border);
  background:#fff;
  border-radius:16px;
  padding:12px;
}
.priceBox .p{font-weight:800; font-size:18px}
.stickyFooter{
  position:sticky; bottom:0; z-index:10;
  background:rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-top:1px solid var(--border);
  padding:12px 0;
}
.footerInner{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.chips{display:flex; gap:8px; flex-wrap:wrap}

/* v2 compact tweaks */
.field{min-width:140px}
.card{padding:14px}
.row{gap:10px}
.formGrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:900px){.formGrid2{grid-template-columns:1fr}}

/* v3 login logo */
.logoLogin{
  width: min(320px, 70vw);
  height: auto;
  display:block;
  margin: 0 auto;
}
.login .box.card{
  padding-top: 18px;
}

/* FIX: header logo always visible */
.brandLogo{height:85px;width:auto;display:block;object-fit:contain}

/* =========================================================
   FIX: "Ilość" nie nachodzi na "Wymiary"
   (działa nawet bez dodatkowych klas w HTML)
   ========================================================= */

/* W obrębie kart pozycji: pole z inputem qty zawężamy.
   Ponieważ w HTML masz data-k="qty", to łapiemy selektorem po atrybucie.
*/
.line-card input[data-k="qty"]{
  width: 88px;
  min-width: 88px;
}

/* Żeby pole "Ilość" nie rozpychało wiersza: jego .field ma się nie rozciągać.
   Nie mamy klasy na field, więc ograniczamy po tym, że zawiera input[data-k="qty"].
*/
.line-card .field:has(input[data-k="qty"]){
  flex: 0 0 96px;
  min-width: 96px;
}

/* Dla bezpieczeństwa: wiersz z wymiarami i ilością niech może się zawijać,
   ale wymiar ma mieć pierwszeństwo (rośnie), a ilość zostaje stała.
*/
.line-card .row{
  align-items:flex-end;
}
.line-card .field:has(input[data-k="w"]),
.line-card .field:has(input[data-k="h"]){
  flex: 1 1 220px;
  min-width: 220px;
}

/* =========================================================
   Przygotowanie pod ikonki strzałek w polach wymiarów
   (dodamy w app.js wrappery + klasy, ale CSS już gotowy)
   ========================================================= */

.dimInputs{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
}

.dimGroup{
  display:flex;
  align-items:center;
  gap:6px;
}

.dimIcon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}

/* Prosty wygląd ikonek (SVG będzie miało stroke="currentColor") */
.dimIcon svg{
  width:18px;
  height:18px;
  display:block;
}

/* Węższe inputy na mm (żeby się mieściły) */
.line-card input[data-k="w"],
.line-card input[data-k="h"]{
  width:110px;
}
/* ===== STAGE1: line-card layout v2 ===== */
.line-card-v2{
  grid-template-columns: 180px 1fr 220px; /* lewy: mini+opis, środek: pola, prawy: ceny */
  align-items:start;
}
@media (max-width: 900px){
  .line-card-v2{ grid-template-columns: 1fr; }
}

/* lewy panel */
.lineLeft{ display:flex; flex-direction:column; gap:10px; }
.lineMeta{ padding:2px 2px 0 2px; }
.lineMetaTitle{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  margin-bottom:6px;
}
.lineMetaGrid{
  display:grid;
  gap:4px;
  font-size:12px;
  color: var(--muted);
}
.lineMetaGrid .k{ color: var(--muted); }
.lineMetaGrid .v{ color: var(--text); font-weight:600; }

/* wymiary bardziej kompaktowo */
.dimsField{ flex: 1 1 340px; min-width: 300px; }
.dimsRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.dimsRow .field{ min-width: 130px; flex: 1 1 140px; }
.dimsRow .field.qtyField{ flex: 0 0 88px; min-width: 88px; }

/* priceBox lepiej wykorzystać */
.priceBox-v2 .priceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.priceBox-v2 .priceStrong{
  margin-top:6px;
}
.priceBox-v2 .p{
  font-weight:800;
  font-size:18px;
}
/* ===== FIX: Wymiary obok siebie + szeroko jak pola powyżej ===== */
.dimsFieldWide{
  width: 100%;
}

/* grid zamiast flex => zawsze 2 kolumny + ilość */
.dimsRow{
  display: grid;
  grid-template-columns: 1fr 1fr 92px;
  gap: 10px;
  align-items: end;
}

/* żeby nie było „przyciśnięć” */
.dimsRow .field{ min-width: 0; }
.dimsRow .qtyField{ width: 92px; }

/* na bardzo wąskich ekranach (telefon pionowo) może się zwinąć */
@media (max-width: 520px){
  .dimsRow{
    grid-template-columns: 1fr;
  }
  .dimsRow .qtyField{ width: 100%; }
}

/* ===== NOWY LAYOUT KARTY v3 — flex zamiast grid ===== */
.line-card-v2 {
  display: block !important;
  grid-template-columns: unset !important;
  padding: 0 !important;
}
.line-card-v2 > div[style*="display:flex"] {
  display: flex !important;
}

/* === NOWY LAYOUT KARTY v3 — bez konfliktu ze starym CSS === */
.line-card-v3 {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.btn.success, button.btn.success { background: #1a9e5c; color: #fff; border: 2px solid #157a46; padding: 13px 28px; font-size: 14px; font-weight: 700; border-radius: 10px; box-shadow: 0 4px 14px rgba(21,122,70,0.4); }
.btn.success:hover, button.btn.success:hover { background: #157a46; }