:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --fg: #e6e8ee;
  --muted: #98a0b0;
  --accent: #6aa8ff;
  --accent-2: #7ee0c0;
  --danger: #ff7a7a;
  --warn: #ffc46b;
  --ok: #6fd08c;
  --radius: 10px;
  --nav-h: 3.2rem;
}

* { box-sizing: border-box; }

body.app {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.25; }
p { margin: 0 0 .6rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------------------------------------------------------------- nav */
.topnav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 26, 33, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav ul {
  list-style: none; display: flex; align-items: center; gap: 1.1rem;
  margin: 0 auto; padding: .7rem 1.2rem; max-width: 1080px;
  min-height: calc(var(--nav-h) - 1.4rem);
}
.topnav .brand { font-weight: 700; color: var(--fg); letter-spacing: -.01em; }
.topnav li { display: flex; align-items: center; gap: .4rem; }
.topnav .nav-link { color: var(--muted); }
.topnav .nav-link:hover, .topnav .nav-link.active { color: var(--fg); text-decoration: none; }
.topnav li:last-child { margin-left: auto; }
.who { color: var(--fg); font-weight: 600; }
.who-strong { font-weight: 600; }
.token-chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-2);
  padding: .1rem .45rem; border-radius: 6px; font-size: .8rem; letter-spacing: .06em;
}
.copy-btn { font-size: .75rem; color: var(--muted); }
/* The signed-in cluster (name, token, copy, log out) is its own flex row so the
   items get a real gap; as inline elements they had none and ran together. */
.nav-user { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nav-label { display: inline; }
/* The notification link holds a label and a count, so it needs its own gap. */
.nav-notif { display: inline-flex; align-items: center; gap: .4rem; }
.pill {
  background: var(--danger); color: #1a0c0c; border-radius: 999px;
  padding: 0 .4rem; font-size: .7rem; font-weight: 700;
}
.subtle { font-size: .85rem; }

/* ---------------------------------------------------------------- layout */
.container { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
.page-title { font-size: 1.7rem; letter-spacing: -.02em; }
.lede { color: var(--muted); }
.section { margin-top: 2rem; }
/* A section's own children (button rows, upload boxes, lists) need spacing too.
   The title keeps its own margin-bottom, so the element right after it gets no
   extra top margin to avoid doubling the gap. */
.section > * + *:not(.section-title) { margin-top: .8rem; }
.section > .section-title + * { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: .8rem; }
.stack.tight { gap: .5rem; }
.grow { flex: 1 1 auto; min-width: 0; }
.back { display: inline-block; color: var(--muted); margin-bottom: .8rem; font-size: .9rem; }
.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
.page-head { margin-bottom: 1.2rem; }
.title-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.row-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.05rem; }
.row-title a { color: var(--fg); }
.row-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .35rem; }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.row-actions.end { justify-content: flex-end; margin-top: .3rem; }
.row { display: flex; gap: 1rem; align-items: flex-start; }
.count { color: var(--muted); font-size: .8rem; }
/* A count badge nested in a section title sits right after the label text. */
.section-title .count { margin-left: .5rem; }
.empty { color: var(--muted); font-style: italic; }
.hint { color: var(--muted); font-size: .82rem; }
.desc { color: var(--muted); }
.desc-lg { color: var(--fg); font-size: 1.05rem; max-width: 60ch; }
.muted { color: var(--muted); }

/* ------------------------------------------------------ project context
   The subtask page and the subtask forms say which project they belong to
   with a bordered, tinted banner so the parent project is never in doubt. */
.project-banner {
  display: flex; align-items: baseline; gap: .55rem;
  background: rgba(106, 168, 255, .08);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: .55rem .8rem;
  margin-bottom: 1rem;
  color: var(--fg);
  text-decoration: none;
}
.project-banner:hover { text-decoration: none; border-color: var(--accent-2); }
.project-banner .p-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.project-banner .p-name { font-weight: 600; font-size: 1.05rem; }
.form-project {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  background: rgba(106, 168, 255, .07);
  border: 1px dashed var(--line);
  border-radius: 8px; padding: .45rem .65rem;
  font-size: .86rem; color: var(--muted);
}
.form-project a { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.card.mine { border-left: 3px solid var(--accent); }
.project-row, .subtask-row { transition: border-color .15s; }
.project-row:hover { border-color: #39404f; }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.badge-on { background: rgba(111, 208, 140, .16); color: var(--ok); }
.badge-off { background: rgba(152, 160, 176, .16); color: var(--muted); }
.badge-accent { background: rgba(106, 168, 255, .16); color: var(--accent); }
.badge-overdue { background: rgba(255, 122, 122, .16); color: var(--danger); }
.badge-today { background: rgba(255, 196, 107, .18); color: var(--warn); }
.badge-soon { background: rgba(255, 196, 107, .12); color: var(--warn); }
.badge-far { background: rgba(106, 168, 255, .12); color: var(--accent); }
.badge-due-none { background: transparent; color: var(--muted); font-size: .72rem; }
.badge-pri-low { background: rgba(152, 160, 176, .16); color: var(--muted); }
.badge-pri-medium { background: rgba(255, 196, 107, .18); color: var(--warn); }
.badge-pri-high { background: rgba(255, 122, 122, .18); color: var(--danger); }
.chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  padding: .1rem .45rem; border-radius: 6px; font-size: .76rem;
}
.chip.strong { color: var(--fg); }
.chip.accent { color: var(--accent-2); }

/* ---------------------------------------------------------------- forms */
.card.form-card { display: flex; flex-direction: column; gap: .9rem; }
.form-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field.actions-field { justify-content: flex-end; }
label { color: var(--muted); font-size: .8rem; font-weight: 600; }
input, select, textarea {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .6rem; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type=file] { padding: .4rem; }
label.check { display: flex; flex-direction: row; align-items: center; gap: .45rem; color: var(--fg); }
label.check input { width: auto; }
/* No text-transform here: tokens are mixed case, and uppercasing the display
   while the value stays lowercase makes a correct token look like it was
   typed wrongly. */
.token-input { letter-spacing: .22em; font-family: ui-monospace, monospace; }
.search-input { min-width: 200px; }
.filter-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.2rem;
}
.filter-grid { display: grid; gap: .8rem; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.actions { display: flex; gap: .5rem; }

/* ---------------------------------------------------------------- buttons */
button, .small-link {
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: .45rem .8rem; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .small-link:hover { border-color: var(--accent); text-decoration: none; }
button.primary { background: var(--accent); color: #0b1220; border-color: var(--accent); }
button.ghost { background: transparent; color: var(--muted); }
button.danger { color: var(--danger); }
button.small { padding: .25rem .55rem; font-size: .8rem; }
button.tiny { padding: .1rem .45rem; font-size: .72rem; }
button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { border-color: var(--line); }
.small-link { padding: .2rem .5rem; font-size: .78rem; }

/* ---------------------------------------------------------------- comments */
.comment { padding: .7rem .9rem; }
.comment.mine { border-left: 3px solid var(--accent-2); }
.comment-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.comment-body { white-space: pre-wrap; }

/* ---------------------------------------------------------------- polls */
.poll-card { border-left: 3px solid var(--accent-2); }
.poll-q { font-size: 1rem; }
.opts { display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0; }
.opt { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; }
.opt.picked { border-color: var(--accent-2); }
.opt-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.opt-label.picked { color: var(--accent-2); font-weight: 700; }
progress.bar { width: 100%; height: .5rem; margin-top: .35rem; accent-color: var(--accent); }
progress.bar.picked { accent-color: var(--accent-2); }
progress { appearance: none; border: none; background: var(--bg); border-radius: 999px; }
progress::-webkit-progress-bar { background: var(--bg); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* ---------------------------------------------------------------- files */
.file-row .file-name { font-size: .95rem; margin: 0; }
.file-name a { color: var(--fg); }

/* ---------------------------------------------------------------- users */
.user-row .token-cell { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.sticky-side { position: sticky; top: 4.5rem; }

/* ---------------------------------------------------------------- notifications */
.notif-msg { color: var(--fg); }
.notif { border-left: 3px solid transparent; }
.notif.unread { border-left-color: var(--accent); background: #1a1f2b; }

/* ---------------------------------------------------------------- login */
.login-card { max-width: 26rem; margin: 4rem auto; display: flex; flex-direction: column; gap: 1rem; }
.flash-ok, .flash-err {
  border-radius: 8px; padding: .5rem .7rem; margin: .5rem 0; font-size: .9rem;
}
.flash-ok { background: rgba(111, 208, 140, .12); color: var(--ok); }
.flash-err { background: rgba(255, 122, 122, .12); color: var(--danger); }
/* ---------------------------------------------------------------- editing region
   #modal is where every create and edit form is loaded. It is pinned directly
   under the nav and outlined in the accent colour so an open form never reads
   as ordinary page content. */
#modal {
  position: sticky; top: var(--nav-h); z-index: 15;
  margin: 0 0 1.5rem; padding: 1rem 1.1rem;
  background: var(--panel-2);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
/* A pseudo-element survives the innerHTML swap, so the label stays put. */
#modal:not(:empty)::before {
  content: "Úprava nižšie";
  display: block; margin-bottom: .8rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
/* The form brings its own card, but the panel is the card here. */
#modal .card { border: 0; background: transparent; padding: 0; margin: 0; }
#modal:empty { display: none; }
#upload-box:empty, #upload-result:empty, #poll-box:empty { display: none; }
.htmx-request .primary { opacity: .6; }

@media (max-width: 780px) {
  .filter-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  /* The nav wraps to two or more rows here, so it is taller than --nav-h and
     a sticky panel would end up underneath it. */
  #modal { position: static; }
  .topnav ul { gap: .7rem; flex-wrap: wrap; }
  .token-cell { display: none; }
}