@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root { --bg:#121212; --surf:#1E1E1E; --surf2:#2a2a2a; --pri:#0d6efd; --pri2:#0a58ca; --text:#E0E0E0; --mut:#8E8E8E; --bor:#333; --ok:#28a745; --err:#d9534f; }
*{box-sizing:border-box} body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);padding:20px;margin:0}
.container{max-width:1000px;margin:0 auto}
.card{background:var(--surf);border:1px solid var(--bor);border-radius:16px;padding:24px;margin-bottom:20px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.grid-2-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.input-group{position:relative;margin-bottom:20px}
.input-group input,.input-group select{width:100%;background:#0b0f15;border:1px solid var(--bor);border-radius:10px;color:var(--text);padding:16px}
.input-group label{position:absolute;top:-10px;left:10px;font-size:.8rem;color:var(--mut);background:var(--surf);padding:0 6px}
.btns{display:flex;gap:8px;margin-left:8px}
.btn-icon{width:52px;height:52px;border-radius:10px;border:1px solid var(--bor);background:var(--surf2);cursor:pointer;color:var(--text)}
.btn-icon:hover{background:var(--pri);border-color:var(--pri);color:#fff}
.btn-primary{display:flex;gap:8px;align-items:center;justify-content:center;background:var(--pri);color:#fff;border:0;border-radius:10px;padding:14px 18px;font-weight:600;cursor:pointer}
.btn-primary:hover{background:var(--pri2)}
.radio-toggle,.radio-buttons{display:flex;border:1px solid var(--bor);border-radius:10px;overflow:hidden}
.radio-toggle input,.radio-buttons input{display:none}
.radio-toggle label,.radio-buttons label{flex:1;text-align:center;padding:12px;background:var(--surf);color:var(--mut);cursor:pointer}
.radio-toggle input:checked+label,.radio-buttons input:checked+label{background:var(--pri);color:#fff}
.grid-rozliczenie{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-platnosc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:center}
.footer-summary{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;align-items:center;border:1px solid var(--bor);border-radius:16px;background:var(--surf);padding:20px}
.status{display:none;padding:12px;border-radius:10px;text-align:center}
.status.info{display:block;background:#0d6dfd2a;border:1px solid var(--pri);color:var(--pri)}
.status.success{display:block;background:#28a7452a;border:1px solid var(--ok);color:var(--ok)}
.status.error{display:block;background:#d9534f2a;border:1px solid var(--err);color:var(--err)}
@media(max-width:900px){.grid-2-col,.grid-rozliczenie,.grid-platnosc{grid-template-columns:1fr}.footer-summary{grid-template-columns:1fr}}

/* toolbar */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toolbar .sep{width:8px}

/* hotfix: nie pozwól zwijać się grupom przełączników w nagłówku */
.toolbar .input-group{min-width:260px; flex:0 0 260px}

/* --- header controls (typ + płatność) --- */
.header{display:block}
.header-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:8px;margin-bottom:8px}
.hc-block{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--bor);border-radius:12px;padding:8px 12px}
.hc-title{color:var(--mut);font-size:.9rem}
.radio-toggle,.radio-buttons{display:flex;gap:6px;border:none}
.radio-toggle input,.radio-buttons input{display:none}
.radio-toggle label,.radio-buttons label{
  padding:8px 12px;border:1px solid var(--bor);border-radius:10px;background:var(--surf2);color:var(--text);cursor:pointer;white-space:nowrap
}
.radio-toggle input:checked+label,.radio-buttons input:checked+label{
  background:var(--pri);border-color:var(--pri);color:#fff
}

/* header controls */
.header{display:block}
.header-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:8px;margin-bottom:8px}
.hc-block{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--bor);border-radius:12px;padding:8px 12px}
.hc-title{color:var(--mut);font-size:.9rem}
.radio-toggle,.radio-buttons{display:flex;gap:6px;border:none}
.radio-toggle input,.radio-buttons input{display:none}
.radio-toggle label,.radio-buttons label{
  padding:8px 12px;border:1px solid var(--bor);border-radius:10px;background:var(--surf2);color:var(--text);cursor:pointer;white-space:nowrap
}
.radio-toggle input:checked+label,.radio-buttons input:checked+label{
  background:var(--pri);border-color:var(--pri);color:#fff
}

/* header controls */
.header{display:block}
.header-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:8px;margin-bottom:8px}
.hc-block{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--bor);border-radius:12px;padding:8px 12px}
.hc-title{color:var(--mut);font-size:.9rem}
.radio-toggle,.radio-buttons{display:flex;gap:6px;border:none}
.radio-toggle input,.radio-buttons input{display:none}
.radio-toggle label,.radio-buttons label{
  padding:8px 12px;border:1px solid var(--bor);border-radius:10px;background:var(--surf2);color:var(--text);cursor:pointer;white-space:nowrap
}
.radio-toggle input:checked+label,.radio-buttons input:checked+label{
  background:var(--pri);border-color:var(--pri);color:#fff
}

/* hotfix: nie pozwól zwijać się grupom przełączników w nagłówku */
.toolbar .input-group{min-width:260px; flex:0 0 260px}

/* header controls */
.header{display:block}
.header-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:8px;margin-bottom:8px}
.hc-block{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--bor);border-radius:12px;padding:8px 12px}
.hc-title{color:var(--mut);font-size:.9rem}
.radio-toggle,.radio-buttons{display:flex;gap:6px;border:none}
.radio-toggle input,.radio-buttons input{display:none}
.radio-toggle label,.radio-buttons label{
  padding:8px 12px;border:1px solid var(--bor);border-radius:10px;background:var(--surf2);color:var(--text);cursor:pointer;white-space:nowrap
}
.radio-toggle input:checked+label,.radio-buttons input:checked+label{
  background:var(--pri);border-color:var(--pri);color:#fff
}

/* Styl dla linku Historia */
.btn-link-historia {
  float: right;
  margin-top: -30px; /* Dopasuj wg potrzeby */
  display: inline-block; margin-left: 20px; padding: 8px 15px; background-color: var(--surf2);
  color: var(--text); border: 1px solid var(--bor); border-radius: 8px; text-decoration: none;
  font-size: 0.9rem; transition: background-color 0.2s ease; vertical-align: middle; /* Dodano wyrównanie */
}
.btn-link-historia:hover { background-color: var(--pri); border-color: var(--pri); color: #fff; }

/* Poprawki dla przycisku Historia w header-controls */
.hc-block-link {
  padding: 0; /* Usuń padding bloku */
  border: none; /* Usuń ramkę bloku */
  background: none; /* Usuń tło bloku */
}
.hc-block-link .btn-link-historia {
  float: right;
  margin-top: -30px; /* Dopasuj wg potrzeby */
  margin-left: 0; /* Usuń lewy margines linku */
  /* Zachowaj resztę stylów z .btn-link-historia */
  display: inline-block;
  padding: 10px 15px; /* Lekko większy padding pionowy */
  background-color: var(--surf2);
  color: var(--text);
  border: 1px solid var(--bor);
  border-radius: 10px; /* Dopasuj do reszty */
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}
.hc-block-link .btn-link-historia:hover {
  background-color: var(--pri);
  border-color: var(--pri);
  color: #fff;
}