/* =========================================================
   KartaPracy v4 — Kalendarz (kafelki/pigułki) + UI shell
   ========================================================= */

:root{
  --bg:#EAE6DD;
  --text:#0B0B0B;
  --muted:#3A3A3A;
  --card:#FFFFFF;
  --line:rgba(11,11,11,.14);
  --accent:#C4A15A;
  --link:#546C7B;

  --radius:18px;
  --shadow:0 1px 0 rgba(11,11,11,.06);

  --wrap:1100px;
  --pad:16px;

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --tile-w: 44px;
  --tile-h: 78px;
  --tile-r: 999px;
  --tile-gap: 8px;

  --b-work: rgba(11,11,11,.18);
  --b-sat: #546C7B;
  --b-sun: #4C1E1E;
  --b-statoff: #8B1E1E;

  --bg-work: #4A6FA5;
  --bg-delegation: #3F8E7D;
  --bg-vacation: #F2B705;
  --bg-sick: #C44536;
  --bg-unpaid: #7A7A7A;
  --bg-free: #4CAF50;
  --bg-holiday: #8B1E1E;

    --bg-empty: #F2F2F2;
/* legacy aliases (PL) */
  --bg-urlop: var(--bg-vacation);
  --bg-chorobowe: var(--bg-sick);
  --bg-delegacja: var(--bg-delegation);
  --bg-wolne: var(--bg-free);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.45}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:12px}

.skip-link{position:absolute;left:-9999px;top:8px;background:var(--card);border:1px solid var(--line);padding:10px 12px;border-radius:12px}
.skip-link:focus{left:16px;z-index:9999}

/* HEADER */
.header{position:sticky;top:0;z-index:50;background:var(--bg)}
.header__inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);font-weight:900;letter-spacing:.5px}
.brand__title{font-size:18px;font-weight:900;letter-spacing:.2px}
.brand__sub{font-size:12px;color:rgba(11,11,11,.62)}
.header__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.65);border:1px solid var(--line);box-shadow:var(--shadow);font-size:12px}
.chip--mono{font-family:var(--mono)}
.header__rule{height:1px;background:var(--accent);opacity:.55}

/* BURGER */
.burger{display:none;appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.65);border-radius:14px;padding:10px 12px;cursor:pointer;box-shadow:var(--shadow)}
.burger__lines{display:block;width:22px;height:14px;position:relative}
.burger__lines::before,.burger__lines::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--text);border-radius:2px;transition:transform .18s ease, top .18s ease, bottom .18s ease}
.burger__lines::before{top:2px}
.burger__lines::after{bottom:2px}
.burger[data-open="1"] .burger__lines::before{top:6px;transform:rotate(45deg)}
.burger[data-open="1"] .burger__lines::after{bottom:6px;transform:rotate(-45deg)}

/* NAV */
.nav{border-bottom:1px solid var(--line);background:rgba(255,255,255,.15)}
.nav__inner{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0}
.nav__desktop{display:flex;gap:8px;flex-wrap:wrap}
.nav__link{display:inline-flex;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid transparent;color:var(--text)}
.nav__link:hover{background:rgba(255,255,255,.55);border-color:var(--line)}
.nav__link.is-active{background:rgba(196,161,90,.14);border-color:rgba(196,161,90,.55)}

/* MOBILE PANEL */
.nav__panel{display:none}
.nav__meta{display:none}

/* MAIN */
.main{padding:18px 0 34px}
.h1{margin:0 0 6px;font-size:22px;letter-spacing:.2px}
.muted{color:rgba(11,11,11,.72)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid rgba(196,161,90,.55);background:rgba(196,161,90,.16);font-weight:700}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.55)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.nav-backdrop{position:fixed;inset:0;background:rgba(11,11,11,.25);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.nav-backdrop.is-on{opacity:1;pointer-events:auto}

@media (max-width: 920px){
  .header__meta{display:none}
}

@media (max-width: 720px){
  .burger{display:inline-flex}
  .nav__desktop{display:none}
  .nav__panel{
    display:flex;
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(86vw, 360px);
    padding:84px 14px 14px;
    background:rgba(234,230,221,.96);
    border-left:1px solid var(--line);
    box-shadow:-12px 0 30px rgba(11,11,11,.10);
    transform:translateX(110%);
    transition:transform .2s ease;
    flex-direction:column;
    gap:6px;
    z-index:45;
  }
  .nav__panel.is-open{transform:translateX(0)}
  .nav__link{padding:12px 12px}
  .nav__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
}

/* CALENDAR */
.cal{display:flex;flex-direction:column;gap:12px}
.cal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}

.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--tile-gap);padding:4px 2px 0}
.dow{font-family:var(--mono);font-size:12px;color:rgba(11,11,11,.62);text-align:center;padding:6px 0}

.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--tile-gap);align-items:start;padding:2px}

.day-tile{
  width:var(--tile-w);
  height:var(--tile-h);
  border-radius:var(--tile-r);
  border:2px solid var(--b-work);
  background:var(--bg-empty);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  margin:0 auto;
  position:relative;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.day-icon{width:18px;height:18px;border-radius:999px;border:1px solid transparent;opacity:0}
.day-num{font-family:var(--mono);font-weight:800;font-size:18px;line-height:1;font-variant-numeric: tabular-nums;}

.b-work{border-color:var(--b-work)}
.b-sat{border-color:color-mix(in srgb, var(--b-sat) 80%, transparent)}
.b-sun{border-color:color-mix(in srgb, var(--b-sun) 80%, transparent)}
.b-statoff{border-color:var(--b-statoff)}

.bg-work{background:var(--bg-work)}
.bg-delegation{background:var(--bg-delegation)}
.bg-vacation{background:var(--bg-vacation)}
.bg-sick{background:var(--bg-sick)}
.bg-unpaid{background:var(--bg-unpaid)}
.bg-free{background:var(--bg-free)}
.bg-holiday{background:var(--bg-holiday)}

/* legacy (PL) */
.bg-urlop{background:var(--bg-urlop)}
.bg-chorobowe{background:var(--bg-chorobowe)}
.bg-delegacja{background:var(--bg-delegacja)}
.bg-wolne{background:var(--bg-wolne)}

.day-tile.is-today{
  border-width:3px;
  box-shadow: 0 0 0 2px var(--accent);
}
.day-tile.is-empty{background:transparent;border-color:transparent;box-shadow:none;pointer-events:none}

.day-tile:active{transform:translateY(1px);box-shadow:0 0 0 rgba(11,11,11,.0)}
.day-tile:hover{transform:translateY(-1px);box-shadow:0 2px 0 rgba(11,11,11,.08)}
.day-tile:focus-visible{outline:2px solid var(--link);outline-offset:3px}

@media (max-width:720px){
  :root{--tile-w:40px;--tile-h:72px;--tile-gap:6px}
}
@media (max-width:360px){
  :root{--tile-w:36px;--tile-h:68px;--tile-gap:5px}
  .day-num{font-size:16px}
}

/* LEGEND IN MENU */
.legend-menu{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.legend-menu summary{cursor:pointer;font-weight:800;padding:8px 6px;border-radius:12px}
.legend-menu summary:hover{background:rgba(255,255,255,.35)}
.legend-block{margin-top:10px}
.legend-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

.legend{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  font-size:12px;
  font-family:var(--mono);
}
.legend.pill{border-color:var(--b-work)}
.legend.is-today{border-width:2px}

/* FOOTER */
.footer{border-top:1px solid var(--line);padding:14px 0}
.footer__inner{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer__muted{color:rgba(11,11,11,.60)}


/* Month nav: allow wrap on small screens */
.cal__nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cal__nav .btn{white-space:nowrap}
@media (max-width:420px){
  .cal__nav{justify-content:flex-start}
}


/* STRONGER TODAY HIGHLIGHT */
.day-tile.is-today{
  border-width:3px;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Stronger, less pastel statuses + today emphasis */
.day-tile.is-today{
  border-width:3px;
  box-shadow: 0 0 0 2px var(--accent);
}


/* DAY EDIT */
.card{
  background:rgba(255,255,255,.65);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}
.day__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-family:var(--mono);font-size:12px;color:rgba(11,11,11,.65)}
.field__control{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.85);
  font:inherit;
}
.field__control:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.field--full{grid-column:1 / -1}
.field__textarea{resize:vertical;min-height:110px}
.form__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
@media (max-width:720px){
  .form__grid{grid-template-columns:1fr}
}


/* AUTH */
.auth{
  min-height: calc(100vh - 80px);
  display:grid;
  place-items:center;
  padding:24px 0 36px;
}
.auth__card{
  width:min(420px, 92vw);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  box-shadow: 0 8px 30px rgba(11,11,11,.10);
}
.auth__brand{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:18px;
  background:rgba(196,161,90,.18);
  border:1px solid rgba(196,161,90,.55);
  font-weight:900;
  margin-bottom:10px;
}
.alert{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(76,30,30,.45);
  background:rgba(76,30,30,.12);
  font-family:var(--mono);
  font-size:12px;
}
.small{font-size:12px}
.nav__sep{display:inline-block;width:1px;height:26px;background:var(--line);margin:0 6px;border-radius:2px}


/* PROFILE UI */
.h2{margin:0 0 10px;font-size:16px;font-weight:900;letter-spacing:.2px}
.profile__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.notice{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  font-family:var(--mono);
  font-size:12px;
}
.notice--ok{border-color: rgba(31,107,74,.55); background: rgba(31,107,74,.12)}
.notice--err{border-color: rgba(76,30,30,.55); background: rgba(76,30,30,.12)}
@media (max-width: 820px){
  .profile__grid{grid-template-columns: 1fr}
}

/* KV */
.kv{margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.55)}
.kv__row{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.kv__row:first-child{border-top:0}
.kv__k{font-family:var(--mono);font-size:12px;color:rgba(11,11,11,.7)}
.kv__v{font-family:var(--mono);font-size:12px}

/* TABLE */
.tablewrap{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:auto;background:rgba(255,255,255,.55)}
.table{width:100%;border-collapse:collapse;min-width:860px}
.table th,.table td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.table thead th{border-top:0;font-size:12px;letter-spacing:.2px;text-transform:uppercase;font-family:var(--mono);color:rgba(11,11,11,.7)}
.table tbody td{font-size:14px}
.mono{font-family:var(--mono);font-size:12px}
.admin__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.admin__actions{display:flex;gap:8px;flex-wrap:wrap}
.btn--ghost{background:transparent}

.card--soft{background:rgba(255,255,255,.45)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width: 820px){.grid2{grid-template-columns:1fr}}


/* ===== LAYOUT – main width (desktop) ===== */
main {
  width: 100%;
}

@media (min-width: 1024px) {
  main {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* KP v4: checkbox row */
.check{display:flex;gap:.6rem;align-items:flex-start}
.check input{margin-top:.15rem}

/* Ensure status backgrounds override base tile background */
.day-tile.bg-work{background:var(--bg-work);}
.day-tile.bg-delegation{background:var(--bg-delegation);}
.day-tile.bg-vacation{background:var(--bg-vacation);}
.day-tile.bg-sick{background:var(--bg-sick);}
.day-tile.bg-unpaid{background:var(--bg-unpaid);}
.day-tile.bg-free{background:var(--bg-free);}
.day-tile.bg-holiday{background:var(--bg-holiday);}
.day-tile.bg-empty{background:var(--bg-empty);}
/* =========================
   STATUS BG (day_status)
   ========================= */

.bg-empty      { background-color: #F2F2F2; }
.bg-work       { background-color: #4A6FA5; }
.bg-delegation { background-color: #3F8E7D; }
.bg-vacation   { background-color: #F2B705; }
.bg-sick       { background-color: #C44536; }
.bg-unpaid     { background-color: #7A7A7A; }
.bg-free       { background-color: #4CAF50; }
.bg-holiday    { background-color: #8B1E1E; }


/* =========================
   TASKS
   ========================= */
.tasks{list-style:none;padding:0}
.task{border:1px solid #ccc;margin:8px;padding:8px;border-radius:8px}
.task.active{border-color:green}
.task.new{border-color:blue}
.task.paused{border-color:orange}
.badge{padding:2px 6px;border-radius:4px;font-size:12px}


/* =========================
   TASKS — badges (priority/status)
   ========================= */
.pri{font-family:var(--mono);text-transform:lowercase}
.pri--low{background:rgba(84,108,123,.18);border:1px solid rgba(84,108,123,.55)}
.pri--normal{background:rgba(31,107,74,.16);border:1px solid rgba(31,107,74,.55)}
.pri--high{background:rgba(242,183,5,.18);border:1px solid rgba(242,183,5,.70)}
.pri--critical{background:rgba(76,30,30,.16);border:1px solid rgba(76,30,30,.70)}
.st{font-family:var(--mono);text-transform:lowercase}
.st--new{background:rgba(58,58,58,.12);border:1px solid rgba(58,58,58,.45)}
.st--in_progress{background:rgba(74,111,165,.18);border:1px solid rgba(74,111,165,.60)}
.st--done{background:rgba(31,107,74,.14);border:1px solid rgba(31,107,74,.55)}
.st--fix{background:rgba(90,42,125,.14);border:1px solid rgba(90,42,125,.55)}
.st--paused{background:rgba(196,161,90,.18);border:1px solid rgba(196,161,90,.60)}
.st--cancelled{background:rgba(11,11,11,.10);border:1px solid rgba(11,11,11,.35)}