@import url("fonts.css");

:root{
  --ground:#F1EEEA; --surface:#FBFAF8; --surface-2:#F5F1ED;
  --ink:#1D1520; --ink-2:#4A3E51; --muted:#6B5F72; --hairline:#DED5D6;
  --brand:#610F7D; --brand-ink:#610F7D;
  --a:#8433A0; --b:#00908C; --u:#2457A6; --c:#B87209; --d:#AB2350;
  --shadow:0 1px 2px rgba(29,21,32,.05),0 10px 30px -18px rgba(29,21,32,.35);
  --display:"Wulkan Headline",Georgia,serif;
  --body:"TWK Lausanne",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:-.01em; margin:0}
h1{font-size:30px; line-height:1.15}
h2{font-size:23px; line-height:1.2}
h3{font-size:17px}
a{color:var(--brand)}
small,.small{font-size:13px}
.muted{color:var(--muted)}
.ink2{color:var(--ink-2)}

.card{background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow)}
.card + .card{margin-top:14px}

button,.btn{
  font-family:var(--body); font-size:14px; cursor:pointer;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--hairline); border-radius:8px; padding:7px 13px;
}
button:hover,.btn:hover{background:var(--surface-2)}
button.pri,.btn.pri{background:var(--brand); border-color:var(--brand); color:#fff}
button.pri:hover{filter:brightness(1.1)}
button.ghost{background:transparent; border-color:transparent; color:var(--muted)}
button:disabled{opacity:.45; cursor:default}

input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  font-family:var(--body); font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline); border-radius:8px; padding:7px 10px; width:100%;
}
textarea{line-height:1.5; resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--brand) 35%,transparent); outline-offset:1px}
label.fld{display:block; margin-bottom:10px}
label.fld span{display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}

table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--hairline); vertical-align:top}
th{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:400}

.pill{display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px; border:1px solid var(--hairline); background:var(--surface-2); color:var(--ink-2)}
.pill.on{background:color-mix(in srgb,var(--b) 14%,var(--surface)); border-color:color-mix(in srgb,var(--b) 35%,var(--hairline)); color:#0a5f5d}
.pill.off{background:color-mix(in srgb,var(--d) 10%,var(--surface)); border-color:color-mix(in srgb,var(--d) 30%,var(--hairline)); color:#8a1c40}
.pill.frozen{background:color-mix(in srgb,var(--c) 14%,var(--surface)); border-color:color-mix(in srgb,var(--c) 35%,var(--hairline)); color:#7a4b06}

.row{display:flex; gap:10px; align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto}
.sep{height:1px; background:var(--hairline); margin:14px 0}

/* chipy do przeciągania */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--hairline); background:var(--surface); cursor:grab; user-select:none;
}
.chip.kier{border-color:color-mix(in srgb,var(--a) 40%,var(--hairline)); background:color-mix(in srgb,var(--a) 8%,var(--surface))}
.chip.bo{border-color:color-mix(in srgb,var(--b) 40%,var(--hairline)); background:color-mix(in srgb,var(--b) 8%,var(--surface))}
.chip.wakat{border-style:dashed; color:var(--muted)}
.chip .x{opacity:.4; cursor:pointer; font-size:14px; line-height:1}
.chip .x:hover{opacity:1; color:var(--d)}
.drop{min-height:34px; border:1px dashed var(--hairline); border-radius:8px; padding:5px; display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start}
.drop.over{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 6%,transparent)}
.drop:empty::after{content:"przeciągnij tutaj"; font-size:12px; color:var(--muted); opacity:.7}

@media print{
  header,nav,.pod,#druk,button{display:none!important}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ddd; break-inside:avoid; page-break-inside:avoid}
  main{padding:0; max-width:none}
}

.ro{opacity:.96}
.ro input,.ro textarea,.ro select{background:var(--surface-2); color:var(--ink-2)}