:root{
  --charcoal:#1a1f2b;
  --charcoal-2:#232a3a;
  --paper:#f8f7f4;
  --card:#ffffff;
  --ink:#23262f;
  --muted:#6b7280;
  --line:#e7e5e0;
  --accent:#b8863b;
  --accent-soft:#f1e4cf;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
}
body.is-authed{ display:flex; min-height:100vh; }
body.is-guest{ display:flex; min-height:100vh; align-items:center; justify-content:center; }

/* SIDEBAR */
.sidebar{
  width:240px; background:var(--charcoal); color:#e7e5e0;
  display:flex; flex-direction:column; flex-shrink:0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-header{ padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-terra{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.brand-name{ font-size:20px; font-weight:700; margin-top:2px; color:#fff; }
.nav{ flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; }
.nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:8px; color:#c7c9d1; text-decoration:none; font-size:14.5px;
  transition:background .15s, color .15s;
}
.nav a svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav a.active{ background:var(--accent); color:#fff; }
.nav a.active svg{ opacity:1; }
.badge-terminy{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.badge-terminy-pilne{ background:#b3441e; }
.zlec-przeterminowane td{ background:#fbeae5; }
.zlec-zblizajace td{ background:var(--accent-soft); }
.material-niski-stan td{ background:#fff3cd; }
.zlec-zaliczka{ color:var(--accent); font-weight:600; }

/* MAIN */
.main{ flex:1; padding:36px 44px; }
.main h1{ font-size:26px; font-weight:700; margin:0 0 22px; letter-spacing:-.01em; }
body.is-guest .main{ flex:none; padding:0; max-width:none; }

/* CARD */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:28px 30px; box-shadow:0 1px 2px rgba(20,20,20,.03); margin-bottom:24px;
}
.card form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin:0; }
/* Selektor potomka (nie ">"): niektore <p> siedza w DIV-ach z display:contents
   (bloki kategorii materialu) - ">" lapie tylko BEZPOSREDNIE dzieci <form> w
   drzewie DOM, ktore display:contents nie zmienia, wiec te zagniezdzone <p>
   dostawaly domyslny margines przegladarki (~16px) i wizualnie "zjezdzaly"
   nizej niz sasiad w tym samym rzedzie siatki spoza takiego div-a (Radek
   2026-09-04/05: "Rozmiar arkusza"/"Pojemnosc" nie na poziomie "Cena"). */
.card form p{ margin:0; }
.card form p.full{ grid-column:1 / -1; }
/* Notatka techniczna + Prog minimalny: Radek 2026-09-04 chce ta pare ZAWSZE
   razem, Notatka lewo/Prog prawo, niezaleznie od kategorii. Sama kolejnosc
   w HTML (Notatka przed Progiem) tego nie gwarantuje - auto-placement w
   grid parowalby je z czymkolwiek poprzedzajacym w zaleznosci od parzystej
   /nieparzystej liczby wczesniejszych pol (rozna dla kazdej kategorii).
   Jawne przypisanie kolumny wymusza wlasciwy uklad zawsze, bez liczenia. */
#pole-notatka{ grid-column:1; }
#pole-prog{ grid-column:2; }
.calc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.calc-fields > p{ margin:0; }
.calc-fields > p.full{ grid-column:1 / -1; }
/* Radek 2026-09-05: wieksz odstep od pol wymiarow sztuki powyzej (Plotter/
   Laser) - przyciski zapisu szablonu siedzialy prawie od razu pod nimi. */
.calc-szablon-zapis{ margin-top:20px; }
.card label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#3d4150; }
.field-hint{ font-size:12px; font-weight:400; color:var(--muted); margin-top:-3px; }
.card input, .card select, .card textarea{
  padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  font-size:14.5px; font-family:inherit; background:#fdfdfc; color:var(--ink); width:100%;
  box-sizing:border-box;
}
.card input, .card select{ height:42px; }
.card input:focus, .card select:focus, .card textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.card button[type="submit"]{
  grid-column:1 / -1; justify-self:start; margin-top:16px;
  padding:11px 26px; border-radius:9px; border:none; font-size:14.5px; font-weight:600;
  cursor:pointer; font-family:inherit; background:var(--charcoal); color:#fff;
}
.card button[type="submit"]:hover{ background:var(--charcoal-2); }

/* KONTAKT */
.kontakt-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 72px); text-align:center;
}
.kontakt-card{ max-width:360px; text-align:center; padding:36px 30px; }
.kontakt-logo{ max-height:110px; margin-bottom:18px; }
.kontakt-tagline{ margin:0 0 22px; color:var(--muted); font-size:14px; }
.kontakt-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 0; border-top:1px solid var(--line); font-size:15px;
}
.kontakt-row:first-of-type{ border-top:none; }
.kontakt-row svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; }
.kontakt-row a{ color:var(--ink); text-decoration:none; font-weight:600; }
.kontakt-row a:hover{ color:var(--accent); }

/* LOGIN CARD */
.card-login{ width:360px; }
.card-login form{ grid-template-columns:1fr; }

/* MESSAGES */
.msg{ padding:12px 16px; border-radius:9px; background:var(--accent-soft); color:#6b4a17; margin-bottom:20px; font-size:14.5px; }

/* TABLES */
.raport-sort{ display:flex; gap:10px; margin:10px 0 20px; }
.raport-sort a{
  padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:14px;
}
.raport-sort a.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.raport-wybor{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }

.tbl{ width:100%; border-collapse:collapse; }
.tbl th{
  text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line);
}
.tbl td{ padding:12px; border-bottom:1px solid var(--line); font-size:14.5px; }
.tbl tr:hover td{ background:#faf9f7; }
.tbl-actions{ white-space:nowrap; }
.tbl-actions .icon-btn,
.tbl-actions .inline-form{ vertical-align:middle; margin-right:6px; }
.tbl-actions .icon-btn:last-child,
.tbl-actions .inline-form:last-child{ margin-right:0; }

/* BUTTONS */
.btn-add{
  display:inline-block; padding:10px 20px; border-radius:9px; background:var(--charcoal);
  color:#fff !important; text-decoration:none; font-size:14.5px; font-weight:600; margin-bottom:18px;
}
.btn-add:hover{ background:var(--charcoal-2); }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--muted);
  cursor:pointer; text-decoration:none;
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.icon-btn-danger:hover{ border-color:#b3441e; color:#b3441e; }
.inline-form{ display:inline-block; margin:0; }

/* KALKULATOR LAYOUT */
.calc-layout{ display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.calc-form-col{ flex:1 1 480px; min-width:0; }
.calc-form-col .card{ margin-bottom:24px; }
.calc-form-col .card:last-child{ margin-bottom:0; }
.calc-section-title{
  font-size:12px; font-weight:700; margin:0 0 16px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em;
}
.calc-result-col{ flex:0 0 360px; position:sticky; top:24px; }
.calc-result-panel form{ display:block; }
.calc-result-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:280px; text-align:center; margin:0;
}
.calc-result-placeholder p{ margin:0; color:var(--muted); font-size:14.5px; }
.calc-result-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
}
.calc-kategorie{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:6px; }
.calc-kategoria-radio{ flex-direction:row !important; align-items:center; gap:6px !important; font-weight:400 !important; }
.calc-kategoria-radio input{ width:auto; }
.calc-result-icon svg{ width:24px; height:24px; }

/* RESULT TABLE (kalkulator) */
.tbl-result{ width:100%; border-collapse:collapse; margin-top:8px; }
.tbl-result th{ text-align:left; padding:9px 4px; font-size:14.5px; font-weight:400; color:var(--muted); border-bottom:1px solid var(--line); }
.tbl-result td{ padding:9px 4px; text-align:right; border-bottom:1px solid var(--line); font-size:14.5px; }
.tbl-result tr:last-child th, .tbl-result tr:last-child td{
  border-bottom:none; font-size:19px; font-weight:700; padding-top:14px;
}
.tbl-result tr:last-child td{ color:var(--accent); }