:root{
  --bg:#f7f7fb; --card:#fff; --text:#1f2937; --muted:#6b7280;
  --primary:#c1121f; --primary-600:#a50f1a; --border:#e5e7eb;
  --ok:#0a7f32; --bad:#a50f1a; --shadow: 0 1px 2px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#f3f4f6;padding:.1em .3em;border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#fdecec}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-title{font-weight:800}
.brand-sub{color:var(--muted);font-size:12px}
.nav{display:flex;gap:12px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px}
.nav a.logout{background:#f8fafc;border:1px solid var(--border)}
.nav a:hover{background:#f8f9fb}

.container{max-width:1100px;margin:24px auto;padding:0 16px}
.footer{max-width:1100px;margin:24px auto 32px;padding:0 16px;color:var(--muted);font-size:14px}

.hero{margin:10px 0 18px}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card.secondary{background:#fffdfd}
h1{margin:0 0 8px;font-size:26px}
h2{margin:0 0 12px;font-size:20px}
h3{margin:0 0 10px;font-size:18px}

.form{display:grid;gap:12px}
label{display:grid;gap:6px;font-weight:600}
input[type="tel"],input[type="text"],input[type="number"],input[type="date"],select{
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;width:100%;background:#fff
}
.btn{background:var(--primary);color:#fff;padding:12px 16px;border:none;border-radius:12px;cursor:pointer;font-weight:700}
.btn:hover{background:var(--primary-600)}
.btn.ghost{background:#fff;border:1px solid var(--border);color:var(--text)}
.btn.ghost:hover{background:#fafafa}

.alert{background:#fff8f8;border:1px solid #ffd6d9;color:#7f1d1d;padding:10px 12px;border-radius:10px;margin-bottom:10px}
.note{background:#eef6ff;border:1px solid #d5e6ff;color:#1d4ed8;padding:10px 12px;border-radius:10px;margin-bottom:10px}
.callout{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px dashed var(--border);border-radius:12px}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.table thead th{position:sticky;top:0;background:var(--card)}
.table tfoot th{background:#fafafa}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.list{margin:8px 0 0;padding-left:18px}
.card { margin-bottom: 18px; }
/* === MOBILE FIRST ULEPSZENIA === */

/* większe cele dotykowe i brak zoomu na polach (iOS) */
input, select, button { font-size:16px; }
button, .nav a { min-height:44px; }

/* topbar i nawigacja na małych ekranach */
@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; gap:8px; }
  .nav{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  .nav a{ white-space:nowrap; }
  .grid-2{ grid-template-columns:1fr; } /* jeden słupek */
  .card{ margin-bottom:16px; }
}

/* tabele „kartowe” na mobile: ukryj thead i pokaż etykiety w komórkach */
.table.responsive thead { display: table-header-group; } /* desktop default */
@media (max-width: 720px){
  .table.responsive thead { display:none; }
  .table.responsive, 
  .table.responsive tbody, 
  .table.responsive tr, 
  .table.responsive td { display:block; width:100%; }
  .table.responsive tr{ border:1px solid var(--border); border-radius:12px; margin:10px 0; padding:8px 10px; background:#fff; }
  .table.responsive td{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 6px; border-bottom:1px dashed var(--border);
  }
  .table.responsive td:last-child{ border-bottom:none; }
  .table.responsive td::before{
    content: attr(data-label);
    font-weight:600; color:var(--muted); margin-right:12px; flex: 1 1 auto;
  }
  .table.responsive td > *:not(.mobile-hide){ flex: 0 0 auto; }
}

/* drobne: przewijane długie liczby */
.table td{ word-break: break-word; }
/* większe pola wyboru na mobile */
select { min-height:44px; }
input[type="date"] { min-height:44px; }

/* mniejsze paddingi w kartach na bardzo małych ekranach */
@media (max-width: 380px){
  .card { padding:14px; border-radius:14px; }
  .btn { padding:10px 14px; border-radius:10px; }
}