/* ======================= PLANOWANIE / GRAFIK ======================= */
[hidden] { display: none !important; }
:root {
  --k-work: rgba(37, 99, 235, .16); --k-training: rgba(20, 150, 140, .2); --k-off: rgba(120, 130, 150, .22);
  --k-comp: rgba(14, 165, 200, .22); --k-leave: rgba(31, 174, 91, .24); --k-leave_demand: rgba(31, 174, 91, .42);
  --k-occasional: rgba(150, 90, 220, .24); --k-care: rgba(230, 80, 140, .22); --k-sick: rgba(232, 163, 23, .32);
  --k-unpaid: rgba(150, 110, 70, .28); --k-absent: rgba(220, 58, 67, .3); --hol: rgba(220, 58, 67, .12);
}
.small { font-size: 13px; }
.only-print { display: none; }
.blk { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.ta { width: 100%; font: inherit; background: var(--card); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }

/* kolory rodzajów wpisów */
.k-work { background: var(--k-work); } .k-training { background: var(--k-training); } .k-off { background: var(--k-off); }
.k-comp { background: var(--k-comp); } .k-leave { background: var(--k-leave); } .k-leave_demand { background: var(--k-leave_demand); }
.k-occasional { background: var(--k-occasional); } .k-care { background: var(--k-care); } .k-sick { background: var(--k-sick); }
.k-unpaid { background: var(--k-unpaid); } .k-absent { background: var(--k-absent); }

/* pędzel i chipy */
.brushbar { padding: 10px 14px; margin-bottom: 12px; }
.brush-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--text); background: var(--card); white-space: nowrap; }
.chip:hover { filter: brightness(.96); }
.chip.on { outline: 2px solid var(--accent); outline-offset: 1px; font-weight: 700; }
.chip.erase { background: rgba(220, 58, 67, .12); }
.chip.static { cursor: default; font-size: 12px; padding: 2px 9px; margin: 2px 4px 2px 0; display: inline-block; }
.chip.hol-chip { background: var(--hol); } .chip.we-chip { background: var(--weekend); }
.skip { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.legend { margin: 6px 0 20px; line-height: 2; }
.chips { margin: 8px 0; }

/* siatka grafiku */
.plan-wrap { padding: 0; overflow: auto; max-height: calc(100vh - 330px); min-height: 200px; }
table.plan { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; width: max-content; min-width: 100%; }
.plan th, .plan td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 0; }
.plan thead th { position: sticky; top: 0; z-index: 3; background: var(--accent-soft); height: 40px; min-width: 35px; }
.plan thead th.corner { left: 0; z-index: 5; min-width: 165px; text-align: left; padding-left: 10px; }
.plan .dn { font-weight: 700; line-height: 1.1; } .plan .dw { color: var(--muted); font-size: 11px; }
.plan th.we, .plan td.we { background: var(--weekend); } .plan th.hol, .plan td.hol { background: var(--hol); }
.plan thead th.we { background: var(--weekend); } .plan thead th.hol { background: color-mix(in srgb, var(--hol) 100%, var(--card)); }
.plan th.today { box-shadow: inset 0 -3px 0 var(--accent); }
.plan td.today { box-shadow: inset 0 0 0 2px var(--accent); }
.plan .mon, .plan th.mon { border-left: 2px solid var(--line); }
.plan td.emp { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; padding: 4px 8px; min-width: 165px; cursor: pointer; border-right: 2px solid var(--line); }
.plan td.emp:hover { background: var(--accent-soft); }
.plan .en { font-weight: 700; white-space: nowrap; } .plan .ep { color: var(--muted); font-size: 11px; white-space: nowrap; }
.wbadge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: #fff; font-size: 11px; text-align: center; }
.plan td.cell { height: 44px; min-width: 35px; position: relative; cursor: pointer; user-select: none; line-height: 1.15; }
.plan td.cell:hover { filter: brightness(.93); }
.plan.painting td.cell { cursor: crosshair; }
.plan td.cell.sel { outline: 2px dashed var(--accent); outline-offset: -2px; }
.plan .t { font-weight: 600; font-size: 11px; letter-spacing: -.2px; } .plan .hh { color: var(--muted); font-size: 11px; } .plan .code { font-weight: 800; font-size: 13px; line-height: 40px; }
.plan .act { font-size: 10.5px; color: var(--accent); border-top: 1px dotted var(--line); }
.plan td.warn .wmark { position: absolute; top: 0; right: 2px; color: var(--red); font-weight: 800; font-size: 12px; }
.plan td.sum, .plan th.sumh { min-width: 50px; font-weight: 700; padding: 0 6px; background: var(--accent-soft); }
.plan td.sum.neg, .tile.neg .tv { color: var(--red); } .plan td.sum.pos, .tile.pos .tv { color: var(--green); }
.plan tfoot td { background: var(--card); font-weight: 600; height: 28px; position: sticky; bottom: 0; z-index: 2; }
.plan tfoot td.emp { z-index: 4; cursor: default; }
.plan tfoot td.we { background: var(--weekend); } .plan tfoot td.hol { background: var(--hol); }

/* okna */
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin: 12px 0; }
.kind { border: 2px solid transparent; border-radius: 10px; padding: 8px 10px; text-align: left; cursor: pointer; color: var(--text); font-size: 13px; }
.kind.on { border-color: var(--accent); font-weight: 600; }
.kind b { display: inline-block; min-width: 26px; }
.timebox { background: var(--accent-soft); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.tplrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
.grid4 label, .rangebox label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.rangebox { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.rangebox label.inl, label.inl { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--text); font-size: 13px; }
.wline { color: var(--red); margin: 4px 0; }
.modal h4 { margin: 18px 0 8px; font-size: 15px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; }
.tile .tl { font-size: 12px; color: var(--muted); font-weight: 600; } .tile .tv { font-size: 20px; font-weight: 700; } .tile .ts { font-size: 11.5px; color: var(--muted); }
.bar { height: 12px; border-radius: 6px; background: var(--accent-soft); overflow: hidden; display: flex; margin-bottom: 10px; }
.bar .b-taken { background: var(--accent); } .bar .b-plan { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.wlist { margin: 0; padding-left: 18px; } .wlist li.warn { color: var(--red); } .wlist li.info { color: var(--muted); }
.mail-list { max-height: 260px; overflow: auto; display: grid; gap: 6px; padding: 8px 0; }
.warnbox { background: rgba(232, 163, 23, .16); border-radius: 10px; padding: 10px 12px; }
.mail-result { margin-top: 8px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--head); color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 100; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.toast.bad { background: var(--red); }
.row-actions .grow { flex: 1; }

@page { size: A4 landscape; margin: 8mm; }
@media print {
  .noprint, .brushbar, .overlay { display: none !important; }
  .only-print { display: block; }
  .print-head { margin-bottom: 6px; } .print-head h2 { margin: 0; }
  .print-foot { display: flex; justify-content: space-between; margin-top: 18px; }
  .plan-wrap { max-height: none; overflow: visible; border: 0; }
  table.plan { font-size: 8.5px; width: 100%; }
  .plan thead th, .plan td.emp, .plan tfoot td { position: static; }
  .plan thead th { height: 28px; min-width: 0; } .plan td.cell { height: 30px; min-width: 0; }
  .plan td.emp, .plan thead th.corner { min-width: 110px; }
  .plan .code { line-height: 28px; font-size: 10px; } .plan .hh { font-size: 8px; }
  .plan td.today, .plan th.today { box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chip.static { font-size: 9px; }
}