
:root{
  --tlo:#f3f5f7; --karta:rgba(255,255,255,.75); --tekst:#111827; --opis:#6b7280;
  --linia:rgba(17,24,39,.10); --akcent:#2563eb; --cien:0 12px 30px rgba(0,0,0,.10); --r:16px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--tekst);
  background:radial-gradient(1200px 800px at 10% 10%, rgba(37,99,235,.15), transparent 50%),
             radial-gradient(1000px 700px at 90% 20%, rgba(99,102,241,.12), transparent 50%),
             var(--tlo);min-height:100vh}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:none;margin:0;padding:0;min-height:100vh}
.shell{display:grid;grid-template-columns:260px 1fr;gap:16px;min-height:100vh;align-items:start;padding:16px}
.sidebar{background:rgba(255,255,255,.6);backdrop-filter:blur(14px);border:1px solid var(--linia);
  border-radius:var(--r);padding:14px;box-shadow:var(--cien);position:sticky;top:16px;height:fit-content}
.brand{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.5);border:1px solid var(--linia)}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--akcent);box-shadow:0 0 0 6px rgba(37,99,235,.15)}
.nav{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.nav a{padding:10px 12px;border-radius:12px;border:1px solid transparent;display:flex;justify-content:space-between;align-items:center}
.nav a:hover{background:rgba(255,255,255,.65);border-color:var(--linia)}
.badge{font-size:12px;color:var(--opis)}
.card{background:var(--karta);backdrop-filter:blur(14px);border:1px solid var(--linia);border-radius:var(--r);box-shadow:var(--cien)}
.header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--linia)}
.h-title{font-size:18px;font-weight:600}
.content{padding:16px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--linia);text-align:left;font-size:14px;vertical-align:top}
.table th{color:var(--opis);font-weight:600}
.pill{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--linia);background:rgba(255,255,255,.7);font-size:12px}
.pill.ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.12)}
.pill.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12)}
.pill.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.12)}
.btn{border:1px solid var(--linia);background:rgba(255,255,255,.85);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:700}
.btn.primary{background:rgba(37,99,235,.95);color:#fff;border-color:rgba(37,99,235,.5)}
.input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--linia);background:rgba(255,255,255,.9);outline:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:980px){.shell{grid-template-columns:1fr}.sidebar{position:relative;top:auto}}
@media(max-width:820px){.row,.row3{grid-template-columns:1fr}}

/* Publiczny wybór sprzętu */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:rgba(255,255,255,.72);border:1px solid var(--linia);border-radius:18px;box-shadow:var(--cien);
  padding:14px;display:flex;flex-direction:column;gap:10px;transition:transform .15s ease, border-color .15s ease}
.tile:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.35)}
.tile .t-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tile .t-name{font-weight:800;font-size:16px}
.tile .t-meta{color:var(--opis);font-size:12px;line-height:1.5}
.tile .t-actions{display:flex;gap:8px;flex-wrap:wrap}
.kat{margin:14px 0 10px;display:flex;justify-content:space-between;align-items:center}
.kat h3{margin:0;font-size:16px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

.thumb{width:84px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--linia);flex:0 0 auto}
.t-row{display:flex;gap:12px;align-items:flex-start}

/* Poprawka układu miniatury na kafelkach */
.t-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.t-left{min-width:0}
.t-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}
.thumb{width:86px;height:66px;object-fit:cover;border-radius:12px;border:1px solid var(--linia);background:rgba(255,255,255,.55)}
.thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--opis);font-size:12px;line-height:1.2;text-align:center}


/* Kalendarz – responsywność na telefonach */
.calendar-wrap{display:grid;grid-template-columns:1fr 420px;gap:12px;align-items:start}
.calendar-table{border-collapse:separate;border-spacing:6px 6px}
.day-pill{justify-content:center;min-width:44px;height:34px}

@media (max-width: 720px){
  .calendar-wrap{grid-template-columns:1fr !important}
  .calendar-actions{flex-wrap:wrap}
  .calendar-actions .btn{padding:8px 10px;font-size:12px}
  .calendar-table{width:100%}
  .calendar-table th{font-size:11px}
  .day-pill{min-width:32px;height:30px;font-size:12px;padding:4px 8px}
}
