*{box-sizing:border-box}
body{font-family:system-ui,"Segoe UI",Roboto,sans-serif;margin:0;background:#eceff4;color:#1f2533;font-size:17px}
body.login{display:flex;min-height:100vh;align-items:center;justify-content:center}
a{color:#4f46e5;text-decoration:none}
a:hover{text-decoration:underline}

header{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;background:#fff;border-bottom:3px solid #6366f1;position:sticky;top:0;box-shadow:0 1px 4px rgba(30,40,80,.07);z-index:5}
header b{color:#1f2533;font-size:18px}
header .out{font-size:16px}

main{max-width:920px;margin:20px auto;padding:0 14px;display:flex;flex-direction:column;gap:18px}

/* sekcje = wyraznie oddzielone ramki */
.card{background:#fff;border:1px solid #c7cedb;border-radius:11px;padding:16px;box-shadow:0 1px 3px rgba(30,40,80,.06)}
.card h1{margin:-16px -16px 16px;padding:16px;font-size:23px;color:#fff;background:#6366f1;border-radius:10px 10px 0 0}
.card h2{margin:-16px -16px 16px;padding:12px 16px;font-size:18px;color:#fff;background:#6366f1;border-radius:10px 10px 0 0;letter-spacing:.01em}

input,select,button{font:inherit;padding:9px 11px;border-radius:8px;border:1px solid #b9c2d0;background:#fff;color:#1f2533}
input:disabled{background:#eef1f6;color:#7a8290}
input:focus,select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18)}
button{background:#6366f1;border-color:#6366f1;color:#fff;cursor:pointer;font-weight:600}
button:hover{background:#5258ee}

.row{display:flex;gap:9px;flex-wrap:wrap}
.row input{flex:1;min-width:150px}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid #e7eaf1;font-size:16px}
th{color:#1f2533;font-weight:600;background:#f5f7fa}
tr:last-child td{border-bottom:0}

.mono{font-family:ui-monospace,monospace;font-size:14px;color:#1f2533}
.dim{color:#1f2533}
.btn{display:inline-block;background:#6366f1;color:#fff;padding:6px 13px;border-radius:7px;font-size:16px}
.btn:hover{background:#5258ee;text-decoration:none}

.msg{background:#e6f6ee;border:1px solid #86d3a8;color:#15723f;padding:10px 14px;border-radius:9px}
.err{background:#fdebef;border:1px solid #f0a6b5;color:#ad2138;padding:10px 14px;border-radius:9px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:15px;color:#1f2533;font-weight:500}
.inline{flex-direction:row;align-items:center;gap:8px;color:#1f2533}

/* przekazniki - kazdy w swojej ramce */
.relay{border:1px solid #c2cbd9;border-radius:9px;padding:13px;margin-bottom:11px;background:#f6f8fb}
.relay:last-child{margin-bottom:0}

/* zdjecia z kamery */
.lastphoto img{display:block;max-width:100%;max-height:260px;border:1px solid #c7cedb;border-radius:8px;margin-top:10px}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.thumbs img{width:72px;height:54px;object-fit:cover;border:1px solid #c7cedb;border-radius:6px}

.save{position:sticky;bottom:0;padding:12px 0;background:linear-gradient(transparent,#eceff4 45%)}
.save button{width:100%;padding:12px;font-size:18px}

.iodot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#cbd2e0;margin-left:6px;vertical-align:middle}

/* suwak ON/OFF wyjscia */
.switch{position:relative;display:inline-block;width:46px;height:24px;margin-top:3px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#cdd2e0;border-radius:24px;cursor:pointer;transition:.15s}
.switch .sl:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked+.sl{background:#6366f1}
.switch input:checked+.sl:before{transform:translateX(22px)}

/* mobile */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:620px}
#skyplot{max-width:100%;height:auto}
@media (max-width:640px){
  header{flex-wrap:wrap;gap:6px 12px;padding:10px 12px}
  main{margin:12px auto;gap:14px}
  .card{padding:13px}
  .card h2{margin:-13px -13px 13px;padding:11px 13px}
  th,td{padding:8px 6px;font-size:12.5px}
  input,select,button{padding:10px 11px}
  /* Dlugie podpisy przy checkboxach maja white-space:nowrap wpisane w atrybut style=, wiec nie moga sie
     zawinac. Nie siedza w zadnym przewijanym pudelku, wiec wypychaja CALY dokument w bok i strona daje
     sie przesuwac na boki. !important, bo styl inline bije arkusz. */
  .inline{white-space:normal !important}
  /* Sztywne 620px ma sens na monitorze, na telefonie gwarantuje, ze kazda tabela wystaje poza ekran.
     Siatka harmonogramu ma wlasne min-width w atrybucie style= i je zachowa, przewijajac sie wewnatrz
     swojego pudelka zamiast rozpychac strone. */
  .tablewrap table{min-width:0}
  .card,.field,label,p,td,th{overflow-wrap:break-word}
}