/* Úkolníček (/tasks, panel Mé úkoly) a zvoneček oznámení v appbaru. */

/* ---- termín: po termínu červeně, dnes oranžově, splněný zeleně (Erplitex, demo) ---- */
.task-due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-due--late { color: var(--mud-palette-error); font-weight: 600; }
.task-due--today { color: var(--mud-palette-warning-darken); font-weight: 600; }
.task-due--done { color: var(--mud-palette-success); }

/* ---- seznam ---- */
.task-tabs { margin-bottom: 8px; }
.task-row { cursor: pointer; }
.task-title { font-weight: 500; }
.task-title__important { vertical-align: text-bottom; margin-right: 2px; }
.task-title--cancelled { text-decoration: line-through; }
.task-title__icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; color: var(--mud-palette-text-secondary); font-size: 0.8rem; }
.task-title__icons > span, .task-title__icons > a { display: inline-flex; align-items: center; gap: 1px; color: inherit; }
.task-quick-dates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ---- detail ---- */
.task-detail { display: flex; flex-direction: column; gap: 12px; }
.task-detail__title { overflow-wrap: anywhere; }
.task-detail__people { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.task-detail__people > span { display: inline-flex; align-items: center; gap: 4px; }
.task-detail__description { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 12px; border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray); border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0; }
.task-detail__section { display: flex; flex-direction: column; gap: 6px; }
.task-thread { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.task-thread__item { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.task-thread__item--mine { align-self: flex-end; align-items: flex-end; }
.task-thread__meta { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.task-thread__bubble { white-space: pre-wrap; overflow-wrap: anywhere; padding: 6px 10px; border-radius: var(--ss-radius-sm, 12px); background: var(--mud-palette-background-gray); }
.task-thread__item--mine .task-thread__bubble { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

/* ---- panel Mé úkoly ---- */
.my-tasks__row { display: flex; align-items: center; gap: 6px; min-height: 36px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.my-tasks__row:last-child { border-bottom: none; }
.my-tasks__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }

/* ---- zvoneček ---- */
.notification-bell__badge .mud-badge { font-variant-numeric: tabular-nums; }
.notification-menu .mud-list { padding: 0; }
.notification-panel { width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; }
.notification-panel__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.notification-panel__title { font-weight: 600; }
.notification-panel__list { max-height: min(480px, 60vh); overflow-y: auto; }
.notification-panel__group { position: sticky; top: 0; z-index: 1; padding: 4px 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.notification-panel__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 12px; color: var(--mud-palette-text-secondary); }
.notification-panel__footer { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }

.notification-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-left: 3px solid transparent;
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notification-item:hover, .notification-item:focus-visible { background: var(--mud-palette-action-default-hover); outline: none; }
.notification-item--unread { border-left-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.notification-item__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--ss-radius-xs, 8px); }
.notification-item__icon--primary { color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.notification-item__icon--success { color: var(--mud-palette-success); background: var(--mud-palette-success-hover); }
.notification-item__icon--warning { color: var(--mud-palette-warning-darken); background: var(--mud-palette-warning-hover); }
.notification-item__icon--error { color: var(--mud-palette-error); background: var(--mud-palette-error-hover); }
.notification-item__icon--info { color: var(--mud-palette-info); background: var(--mud-palette-info-hover); }
.notification-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notification-item__title { font-size: 0.875rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notification-item--unread .notification-item__title { font-weight: 600; }
.notification-item__text { font-size: 0.8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-item__time { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.notification-item__dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--mud-palette-primary); }

@media (max-width: 600px) {
    .task-thread__item { max-width: 100%; }
}