/* =========================================================
   APP.CSS v3
   Konwencja:
   01 Tokens
   02 Reset i typografia
   03 Layout (header, footer, main, kontenery)
   04 Komponenty (karty, listy, przyciski, tabele)
   05 Formularze (siatki, pola, warianty, walidacja)
   06 Upload (dropzone, miniatury)
   07 Toolbar
   08 Dostępność/ruch
   Media queries trzymamy przy danej sekcji lub na końcu sekcji.
========================================================= */


/* ========== 01 Tokens ========== */
:root{
  /* kolory bazowe */
  --fg:#222;
  --muted:#666;
  --bg:#f7f7f7;
  --card:#fff;
  --border:#e5e7eb;
  --bar:#f2f4f7;

  /* akcje */
  --primary:#111;
  --danger:#e11d48;
  --secondary:#eef1f5;

  /* pola formularzy */
  --fld-h:40px;
  --fld-br:10px;
  --fld-bc:#d8dbe0;
  --fld-bc-hover:#c6cbd3;
  --fld-bc-focus:#0f62fe;
  --fld-bg:#fff;
  --fld-bg-disabled:#f5f7fa;
  --fld-txt:#111827;
  --fld-ph:#9aa3af;
  --ring:0 0 0 3px rgba(15,98,254,.15);
}


/* ========== 02 Reset i typografia ========== */
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;background:var(--bg);color:var(--fg)
}
h1{margin:0;font-size:20px;font-weight:600}
h2{font-size:18px;margin:20px 0 10px}
a{color:inherit;text-decoration:none}


/* ========== 03 Layout ========== */
/* topbar */
header.topbar{background:var(--bar);border-bottom:1px solid var(--border)}
.topbar .wrap{
  max-width:1100px;margin:0 auto;
  padding:12px 16px;display:flex;align-items:center;gap:12px;justify-content:space-between
}
nav.nav{display:flex;gap:8px;flex-wrap:wrap}

/* stopka */
footer.foot{margin-top:auto;background:var(--bar);border-top:1px solid var(--border)}
.foot .wrap{max-width:1100px;margin:0 auto;padding:12px 16px;font-size:12px;color:var(--muted)}

/* treść */
main{max-width:1100px;margin:24px auto;padding:0 16px 40px}

/* kontener pomocniczy */
.container{max-width:1100px;margin:0 auto;padding:0 16px}


/* ========== 04 Komponenty ========== */
/* karty */
.card{
  background:var(--card);border-radius:12px;padding:16px;margin-bottom:24px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid var(--border)
}

/* element listy w kartach */
.item{
  display:grid;grid-template-columns:1fr auto 120px;gap:10px;
  align-items:center;margin-bottom:6px;padding:4px
}
#instalacyjne .item:nth-child(even),
#budowlane .item:nth-child(even){background:#fafafa;border-radius:6px}
.item .label{font-size:14px}
.item .unit{
  background:#f0f2f5;padding:4px 10px;border-radius:999px;font-size:12px;
  text-align:center;border:1px solid var(--border)
}

/* przyciski */
.btn{
  display:inline-block;padding:9px 14px;border:1px solid transparent;border-radius:10px;
  font-weight:600;cursor:pointer;line-height:1;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .02s ease,color .15s ease
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{filter:brightness(0.92);box-shadow:0 3px 10px rgba(0,0,0,.15)}
.btn-secondary{background:var(--secondary);color:var(--fg);border-color:var(--border)}
.btn-secondary:hover,.btn-secondary:focus-visible{background:#e7eaf0;border-color:#d7dbe2;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover,.btn-danger:focus-visible{background:#be123c;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.btn.input-sized{
  height:var(--fld-h);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;line-height:1
}

/* stos horyzontalny */
.hstack{display:flex;align-items:center;gap:12px}

/* tabele */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table tr:nth-child(even){background:#f9f9f9}

/* akcje i tekst pomocniczy */
.actions{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:12px;margin-left:2px}


/* ========== 05 Formularze ========== */
/* siatka */
.form-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
@media (max-width:960px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}

/* pole i etykieta */
.form-grid .field{display:flex;flex-direction:column;justify-content:flex-end}
.field + .field{margin-top:12px}
.field label{display:block;font-size:12px;color:#6b7280;margin-bottom:6px;min-height:18px}
.field .help{font-size:12px;color:#6b7280;margin-top:6px}

/* pola wspólne */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea{
  box-sizing:border-box;width:100%;height:var(--fld-h);
  padding:8px 12px;border:1px solid var(--fld-bc);border-radius:var(--fld-br);
  background:var(--fld-bg);color:var(--fld-txt);font-size:14px;line-height:1.2;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;outline:none
}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--fld-ph)}

/* stany */
input:hover,select:hover,textarea:hover{border-color:var(--fld-bc-hover)}
input:focus,select:focus,textarea:focus{border-color:var(--fld-bc-focus);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--fld-bg-disabled);color:#9aa3af;cursor:not-allowed}

/* walidacja */
.is-invalid,
input:invalid,select:invalid,textarea:invalid{
  border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)
}

/* rozmiary */
.input-sm{height:34px;padding:6px 10px;font-size:13px}
.input-lg{height:48px;padding:10px 14px;font-size:15px}

/* select: strzałka i padding pod ikonę */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%235b6b8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
  line-height:normal;
}
select::-ms-expand{display:none}


/* ========== 06 Upload ========== */
/* dropzone */
.dropzone{
  border:2px dashed var(--border);border-radius:12px;padding:16px;
  text-align:center;background:#fafafa
}
.dropzone.drag{background:#f0f8ff}

/* odnośnik akcji */
.linklike{color:#0f62fe;cursor:pointer;text-decoration:underline}

/* miniatury */
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{
  position:relative;width:120px;height:90px;border:1px solid var(--border);
  border-radius:8px;overflow:hidden;background:#fff
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .rm{
  position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;
  border:0;border-radius:6px;font-size:12px;padding:2px 6px;cursor:pointer
}


/* ========== 07 Toolbar ========== */
/* pasek filtrów */
.toolbar{
  display:grid;
  grid-template-columns:1fr 160px 160px auto auto; /* szukaj | od | do | odśwież | licznik */
  gap:10px;align-items:center;margin-bottom:12px
}

/* responsywność toolbara */
@media (max-width:920px){
  .toolbar{grid-template-columns:1fr 1fr auto}
  .toolbar > :nth-child(2){order:2} /* data od */
  .toolbar > :nth-child(3){order:3} /* data do */
  .toolbar > :nth-child(4){order:4} /* odśwież */
  .toolbar > :nth-child(5){order:5;justify-self:start}
}
@media (max-width:560px){
  .toolbar{grid-template-columns:1fr}
  .toolbar > *{width:100%}
  .toolbar .btn{width:auto;justify-self:start}
}


/* ========== 08 Dostępność/ruch ========== */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
}