/*
  LIPM CRM – ukoly.css, verze v01 (24. 10. 2026) – PROVOZ_MINIMUM, bod 2 (Úkoly)
  Vzhled obrazovky Úkoly (Domů → Moje úkoly, Obchod → Úkoly):
  řádky úkolů s kolečkem „hotovo“, skupiny podle termínu, nabídka „Termín ▾“,
  potvrzení dole s tlačítkem „Vrátit“. Načítá se až po styl.css (používá jeho barvy).
*/
.ukoly { display: flex; flex-direction: column; gap: var(--mezera); }
.u-delic { width: 1px; height: 22px; background: #D5DBE1; margin: 0 2px; }
.filtr-stitek.varovani:not(.aktivni) span { color: var(--cervena); font-weight: 700; }
.u-hlava-vpravo { display: flex; align-items: center; gap: 12px; }
.u-novy { height: 30px; padding: 0 12px; font-size: 13px; }

/* skupiny podle termínu */
.u-skupina { padding: 5px 16px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text3); background: var(--pozadi); border-bottom: 1px solid var(--okraj); }
.u-skupina span { margin-left: 4px; font-weight: 600; }
.u-skupina-pozde { color: var(--cervena); }

/* jeden úkol */
.u-radek { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 8px 16px; border-bottom: 1px solid var(--okraj-jemny); }
.u-radek:last-child { border-bottom: 0; }
.u-radek:hover { background: #FAFCFC; }
.u-kolecko { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid #9AA6B2; background: #fff; cursor: pointer; padding: 0; font-size: 13px; font-weight: 700; line-height: 18px; color: #fff; }
.u-kolecko:hover { border-color: var(--zelena); background: #EAF6EF; }
.u-kolecko:hover::after { content: '✓'; color: var(--zelena); }
.u-kolecko.cekame { border-color: #C98A00; background: #FFF1DC; }
.u-kolecko.je-hotovo { background: var(--zelena); border-color: var(--zelena); }
.u-kolecko.je-hotovo:hover { background: #fff; border-color: #9AA6B2; }
.u-kolecko.je-hotovo:hover::after { content: ''; }
.u-kolecko:disabled { opacity: .5; cursor: default; }
.u-kolecko:focus-visible, .u-text:focus-visible { outline: 2px solid rgba(0,161,154,.5); outline-offset: 2px; }
.u-hlavni { min-width: 0; }
.u-text { display: -webkit-box; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.u-text:hover { color: var(--lipm-tmava); }
.u-info { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font-size: 12px; color: var(--text3); }
.u-info .mono { font-size: 11px; }
.u-info .po-terminu { color: var(--cervena); font-weight: 600; }
.u-info b { color: var(--text2); font-weight: 600; }
.u-tecka { margin: 0 6px; color: #B3BCC6; }
.u-pozn { margin-top: 2px; font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-uzavreny .u-text { color: var(--text2); font-weight: 400; }
.u-hotovo-text { color: var(--zelena); font-weight: 600; }
.u-akce { position: relative; display: flex; gap: 2px; white-space: nowrap; }
.u-tl { font-size: 13px; padding: 4px 8px; color: var(--lipm-tmava); }

/* nabídka „Termín ▾“ */
.u-menu { position: absolute; right: 0; top: 100%; z-index: 40; min-width: 200px; background: #fff; border: 1px solid var(--okraj); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 4px; }
.u-menu .novy-polozka { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; }
.u-menu-datum { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--text2); border-top: 1px solid var(--okraj-jemny); margin-top: 2px; }

/* potvrzení dole s tlačítkem „Vrátit“ */
.oznameni-akce { display: flex; align-items: center; gap: 14px; }
.oznameni-akce[hidden] { display: none; }
.u-vratit { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.u-vratit:hover { background: rgba(255,255,255,.12); }

@media (max-width: 640px) {
  .u-delic { display: none; }
  .u-radek { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 12px; }
  .u-akce { grid-column: 2; justify-content: flex-end; margin-top: -2px; }
  .u-menu { right: 0; }
  .u-hlava-vpravo .vedlejsi { display: none; }
}