* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #f1f5f9; color: #0f172a; min-height: 100vh; padding: 20px; line-height: 1.5; }
.wrap { max-width: 1100px; margin: 0 auto; }

header { background: linear-gradient(135deg, #0f172a, #1e40af); color: #fff; padding: 32px 36px; border-radius: 16px 16px 0 0; }
header .back { color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 16px; }
header .back:hover { color: #fff; }
header .logo { display: inline-block; padding: 4px 10px; background: rgba(255,255,255,.95); color: #0f172a; border-radius: 6px; font-weight: 800; letter-spacing: .5px; font-size: 11px; margin-bottom: 16px; }
header h1 { font-size: 28px; margin-bottom: 6px; letter-spacing: -.3px; }
header .subtitle { color: rgba(255,255,255,.75); font-size: 13px; max-width: 700px; }

form { background: #fff; padding: 32px 36px; border-radius: 0 0 16px 16px; box-shadow: 0 6px 30px rgba(15,23,42,.08); }

fieldset { border: none; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
fieldset:last-of-type { border-bottom: none; }
legend { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #0ea5e9; font-weight: 700; padding: 10px 0 14px; }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 12px; align-items: end; }
.row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { display: flex; flex-direction: column; }
.col label { font-size: 11px; font-weight: 600; color: #475569; margin-bottom: 5px; letter-spacing: .3px; text-transform: uppercase; }
.col input, .col select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; color: #0f172a; background: #fff; transition: all .15s; font-family: inherit; }
.col input:focus, .col select:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.col input::placeholder { color: #94a3b8; font-size: 13px; }

.hint { font-size: 12px; color: #64748b; padding: 8px 0; }
.hint strong { color: #0f172a; }

/* TABELA PAKIETOW */
.pakiety-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.pakiety-table thead th { background: linear-gradient(135deg, #0f172a, #1e40af); color: #fff; padding: 10px 12px; font-size: 12px; font-weight: 700; text-align: left; letter-spacing: .3px; }
.pakiety-table thead th small { display: block; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.pakiety-table thead th:first-child { border-top-left-radius: 8px; }
.pakiety-table thead th:last-child { border-top-right-radius: 8px; }
.pakiety-table td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.pakiety-table tbody tr:nth-child(even) td { background: #f8fafc; }
.pakiety-table td:first-child { font-weight: 500; color: #334155; }
.pakiety-table input { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-family: inherit; }
.pakiety-table input:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.2); }
.pakiety-table input:disabled { background: #e2e8f0; color: #94a3b8; border-color: #e2e8f0; cursor: not-allowed; }

/* URZADZENIA - LISTA */
.urzadzenie { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(260px, 1.5fr) 90px 44px; gap: 12px; align-items: end; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 10px; }
/* wiersz z polem Abonament (dzierzawa) - dodatkowa kolumna na kwote */
.urzadzenie.with-abo { grid-template-columns: minmax(140px, .85fr) minmax(200px, 1.3fr) 72px 118px 44px; }
.urzadzenie label { font-size: 10px; font-weight: 600; color: #475569; margin-bottom: 4px; letter-spacing: .3px; text-transform: uppercase; display: block; }
.urzadzenie select, .urzadzenie input { padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; width: 100%; font-family: inherit; background:#fff; }
.urzadzenie .btn-usun { background: #fee2e2; color: #dc2626; border: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; height: 36px; }
.urzadzenie .btn-usun:hover { background: #fecaca; }
.urzadzenie .info-auto { font-size: 10.5px; color: #94a3b8; grid-column: 1 / -1; padding-top: 4px; font-style: italic; }
.device-search { grid-column: 1 / -1; position: relative; }
.model-results { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:8px; margin-top:8px; }
.model-choice { text-align:left; border:1px solid #dbeafe; background:#fff; border-radius:8px; padding:9px 10px; cursor:pointer; color:#0f172a; }
.model-choice:hover { border-color:#0ea5e9; background:#eff6ff; }
.model-choice strong { display:block; font-size:12px; margin-bottom:3px; }
.model-choice span { display:block; font-size:11px; color:#64748b; line-height:1.35; }
.model-empty { color:#64748b; font-size:12px; padding:8px 10px; background:#fff; border:1px dashed #cbd5e1; border-radius:8px; }

.btn-add { background: rgba(14,165,233,.1); color: #0ea5e9; border: 1px dashed #0ea5e9; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 8px; transition: all .15s; }
.btn-add:hover { background: rgba(14,165,233,.18); }

select[name="opiekun_id"] { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; }

.actions { display: flex; gap: 16px; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid #e2e8f0; }
.btn-primary { background: linear-gradient(135deg, #0ea5e9, #2563eb); color: #fff; border: none; padding: 14px 36px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .3px; box-shadow: 0 4px 14px rgba(14,165,233,.3); transition: all .15s; }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,.4); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

#status-msg { font-size: 13px; color: #475569; }
#status-msg.success { color: #16a34a; font-weight: 600; }
#status-msg.error { color: #dc2626; font-weight: 600; }

@media (max-width: 760px) {
  .row.cols-2, .row.cols-3 { grid-template-columns: 1fr; }
  .urzadzenie, .urzadzenie.with-abo { grid-template-columns: 1fr; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn-primary { width: 100%; }
}