/* ============================
   TO-DO LIST MOODLE PROJECT
   Clean Dark UI — bigger type, lighter weights, strong priority
   ============================ */

/* ==== THEME TOKENS ==== */
:root{
  /* Base neutrals (flat) */
  --bg:#0d1117;
  --card:#161b22;
  --text:#e6edf3;
  --muted:#a6afba;
  --border:#2d333b;
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  /* Header gradient only (Lisek) */
  --grad-a:#8036B7;
  --grad-b:#FCB100;

  /* Accents */
  --accent:#FCB100;      /* buttons, links */
  --accent-ink:#0d1117;
  --danger:#ef4444;

  /* Priorities (flat) */
  --prio-critical:#ef4444;
  --prio-high:#f59e0b;
  --prio-normal:#8b949e; /* neutral (was blue) */
  --prio-low:#10b981;

  /* Radii & rhythm */
  --r-lg:16px;
  --r-md:12px;
  --gap:18px;
  --pad:18px;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(252,177,0,.30);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size: 18px;                /* ↑ większa baza */
  line-height: 1.65;              /* ↑ czytelność */
  background: var(--bg);
}

/* ==== HEADER (gradient zostaje) ==== */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px,4vw,28px);
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(128,54,183,.18), rgba(252,177,0,.12)),
    rgba(13,17,23,.85);
  backdrop-filter: blur(8px) saturate(140%);
}
.site-title{
  margin:0; font-weight:700;      /* ↓ było 800 */
  letter-spacing:.2px;
  font-size:clamp(20px,2.2vw,26px); /* ↑ */
  background: linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.site-nav{display:flex; gap:10px}

/* ==== BUTTONS (flat) ==== */
.btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  padding:10px 14px; font-weight:600;     /* ↓ lżejsze */
  border-radius:12px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow);
  font-size: 16px;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform: translateY(1px)}
.btn:focus-visible{outline:none; box-shadow: var(--ring)}
.btn--ghost{ background: transparent; color: var(--text); border:1px solid var(--border); }

/* ==== LAYOUT ==== */
.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  padding: clamp(16px,3vw,28px);
  max-width:1200px; margin:0 auto;
}
@media (min-width: 980px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

/* ==== PANEL / CARD (flat) ==== */
.panel{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.panel__title{
  margin: 0 0 8px;
  font-size: 19px;          /* ↑ */
  font-weight: 600;         /* ↓ */
}
.panel__subtitle{
  margin:10px 0 8px;
  font-size: 15px;          /* ↑ */
  color:var(--muted);
  font-weight:600;          /* ↓ */
}

/* ==== TODO LIST ==== */
.todo-form{margin:0}
.todo-list{list-style:none; padding:0; margin:0}
.todo-item{
  border-top:1px solid var(--border);
  border-left: 4px solid transparent;     /* kolor w zależności od priorytetu */
  padding-left: 8px;                       /* miejsce na listwę */
}
.todo-item:first-child{border-top:none}

/* Kolorowa listwa priorytetu (bez zmian w PHP, używamy :has) */
.todo-item:has(.badge-critical){ border-left-color: var(--prio-critical); }
.todo-item:has(.badge-high){     border-left-color: var(--prio-high); }
.todo-item:has(.badge-normal){   border-left-color: var(--prio-normal); }
.todo-item:has(.badge-low){      border-left-color: var(--prio-low); }

.checkbox-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 2px; cursor:pointer; border-radius:10px;
}
.checkbox-row:hover{background: rgba(255,255,255,.03)}
.checkbox-row:has(input[type="checkbox"]:focus-visible){box-shadow: var(--ring)}

.checkbox-row input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }
.check-ui{
  width:22px; height:22px; border:2px solid #3a444f; border-radius:6px; flex:0 0 auto;
  position:relative; margin-top:2px; background:#0d1117;
}
/* kontener wiersza */
.checkbox-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:12px 2px; border-radius:10px;
}

/* sam checkbox ukryty wizualnie, ale dostępny */
.checkbox-row input[type="checkbox"]{
  position:absolute; opacity:0; pointer-events:none;
}

/* klikany tylko mały obszar obok checkboxa */
.check-only{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; cursor:pointer; flex:0 0 auto;
  margin-top:2px;
}

/* „kwadracik” UI */
.check-ui{
  width:22px; height:22px; border:2px solid #3a444f; border-radius:6px;
  background:#0d1117; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* focus na checkboxie → ring na check-only */
.checkbox-row input[type="checkbox"]:focus-visible + label.check-only{
  box-shadow: var(--ring);
}

/* stan zaznaczony */
.checkbox-row input[type="checkbox"]:checked + label.check-only .check-ui{
  border-color: var(--accent); background: var(--accent);
}
.checkbox-row input[type="checkbox"]:checked + label.check-only .check-ui::after{
  content:""; position:absolute; width:22px; height:22px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 11 8 15 16 6"/></svg>') center/16px 16px no-repeat;
}
/* dostępność: ukryty tekst tylko dla czytników ekranu */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* reszta treści: nieklikalna, normalny kursor */
.todo-content{display:block; min-width:0; cursor:default}

/* (opcjonalnie) delikatny hover całego wiersza bez wpływu na klikalność */
.checkbox-row:hover{ background: rgba(255,255,255,.03); }


.todo-content{display:block; min-width:0}
.todo-title{
  display:inline-block;
  font-weight: 600;        /* ↓ */
  font-size: 17px;         /* ↑ */
  margin-right:10px;
}
.todo-desc{display:block; color:var(--muted); margin-top:4px; font-size: 15px;}
.meta{
  display:flex; flex-wrap:wrap; gap:14px;
  color:#b6bdc7; font-size:14px;          /* ↑ */
  margin-top:8px;
}
.meta time{opacity:.95}

/* ==== BADGES (więcej „mocy”) ==== */
.badges{display:inline-flex; gap:8px; vertical-align:middle}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 12px;                         /* ↑ */
  border-radius:999px;
  font-size:13px;                           /* ↑ */
  font-weight:700;                          /* mocniejsze tylko tu */
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.badge::before{                              /* kropka-kolor przy labelce */
  content:""; width:8px; height:8px; border-radius:50%;
  background: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}
.badge-critical{ color:#ffd7d7; background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45); }
.badge-high{     color:#fff0d6; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.45); }
.badge-normal{   color:#e2e6ea; background: rgba(139,148,158,.20); border-color: rgba(139,148,158,.45); }
.badge-low{      color:#d8fff1; background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.45); }

/* ==== PATCH-NOTES (flat timeline + listwa priorytetu) ==== */
.patch-notes{margin-top:18px}
.done-list{list-style:none; padding:0 0 0 18px; margin:0; position:relative}
.done-list::before{
  content:""; position:absolute; left:8px; top:4px; bottom:4px; width:2px;
  background:#2d3340; border-radius:2px;
}
.done-item{
  position:relative; padding:12px 2px 12px 0; border-top:1px dashed var(--border);
  border-left: 4px solid transparent; padding-left: 8px;
}
.done-item:first-child{border-top:none}
.done-item::before{
  content:""; position:absolute; left:-10px; top:18px; width:10px; height:10px; border-radius:50%;
  background: var(--accent); box-shadow:0 0 0 2px #0d1117;
}
.done-item:has(.badge-critical){ border-left-color: var(--prio-critical); }
.done-item:has(.badge-high){     border-left-color: var(--prio-high); }
.done-item:has(.badge-normal){   border-left-color: var(--prio-normal); }
.done-item:has(.badge-low){      border-left-color: var(--prio-low); }

.done-title{display:flex; align-items:center; gap:8px; font-weight:600; font-size:17px;}
.done-check{display:none}
.strike{text-decoration:line-through; opacity:.9}
.done-desc{color:var(--muted); margin:6px 0 0; font-size:15px}
.small{font-size:14px}
.muted{color:var(--muted)}

/* ==== MANAGER ==== */
.manager{padding: clamp(16px,3vw,28px); max-width:1200px; margin:0 auto; display:grid; gap:var(--gap)}
.form{display:grid; gap:12px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:760px){ .form-row{grid-template-columns:1fr} }
label{display:grid; gap:6px; color:#dbeafe; font-weight:600}
input[type="text"], input[type="date"], textarea, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:#0d1117; color:var(--text); outline:none;
  font-size:16px;
}
input[type="text"]:focus, input[type="date"]:focus, textarea:focus, select:focus{ box-shadow: var(--ring) }
textarea{resize:vertical}
.actions{margin-top:6px}

.split{display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:980px){ .split{ grid-template-columns:1fr 1fr; } }

.admin-list{list-style:none; padding:0; margin:0}
.admin-item{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding:12px; border:1px solid var(--border); border-radius:12px; background:#141a23;
}
.admin-item + .admin-item{margin-top:10px}
.admin-item form{margin:0}
.admin-item strong{font-weight:600; font-size:16px}

/* ==== FLASH ==== */
.flash{
  margin:12px auto; max-width:960px; padding:12px 14px; border:1px solid var(--border);
  background:#141a23; color:#fff; border-radius:12px;
  font-size:16px;
}

/* ==== LINKS ==== */
a{color:var(--accent)} a:hover{filter:brightness(1.1)}

/* ==== MOBILE TWEAKS ==== */
@media (max-width:420px){
  .todo-title{display:block; margin:0 0 6px}
  .badges{margin:6px 0 0}
  .meta{gap:10px}
}
/* ==== DUE CHIP (wyeksponowana planowana data) ==== */
.due-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--border);
  font-weight:700; font-size:14px;
  line-height:1; white-space:nowrap;
}
.due-chip .ico{font-size:14px; opacity:.95}

/* Stany */
.due-chip.is-none{
  color:var(--muted);
  background: transparent;
  border-style: dashed;
}
.due-chip.is-overdue{
  color:#ffd7d7;
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
}
.due-chip.is-today{
  color:#fff0d6;
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.45);
}
.due-chip.is-soon{
  color:#ffe8b3;
  background: rgba(252,177,0,.16);
  border-color: rgba(252,177,0,.40);
}
.due-chip.is-future{
  color:#e2e6ea;
  background: rgba(139,148,158,.18);
  border-color: rgba(139,148,158,.40);
}

/* lekki oddech w wierszu metadanych */
.meta{ gap:16px; }
/* Pasek cofania */
.undo-bar{
  max-width:1200px; margin:12px auto 0; padding:10px 12px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  border:1px solid var(--border); border-radius:12px; background:#141a23;
}

/* Guzik przywróć (lekko wyróżniony, nie czerwony) */
.btn--restore{
  background: transparent; color: var(--accent);
  border:1px solid var(--accent); border-radius:12px; padding:8px 12px;
}
.btn--restore:hover{ filter:brightness(1.05) }

/* Uporządkowanie nagłówka wpisu „done” z przyciskiem po prawej */
.done-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.inline-form{ margin:0 }