/* ============================================================
   FamiPro — Components (refreshed)
   ------------------------------------------------------------
   BEM-like: block, block__element, block--modifier.
   Reusable UI komponenty (nie page shells).
   ============================================================ */

/* ============================================================
   STAR ICON (Famivel brand element)
   ============================================================ */

.star-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    color: currentColor;
    flex-shrink: 0;
}
.star-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.star-icon--blue    { color: var(--color-blue); }
.star-icon--teal    { color: var(--color-dark-teal); }
.star-icon--aqua    { color: var(--color-aqua-shade-2); }
.star-icon--apricot { color: var(--color-apricot-shade-1); }

/* Faza 45: brandové ✦ akcenty v empty states. Decentne, jemne, aqua tint. */
.widget-empty__star {
    width: 16px; height: 16px;
    margin-right: 4px;
    opacity: 0.7;
    vertical-align: -0.2em;
}
.empty-hint__star {
    width: 24px !important; height: 24px !important;
    opacity: 0.6;
    margin-bottom: 4px;
}
/* today-empty: pôvodne lucide ikona 48×48 muted, teraz ✦ aqua opacity 0.65 */
.today-empty__icon {
    width: 56px !important; height: 56px !important;
    opacity: 0.6;
    margin-bottom: var(--space-2);
}
/* empty-state full page (sync_log, users, projects, meetings, tasks, notifications) */
.empty-state .star-icon.empty-state__icon {
    width: 56px; height: 56px;
    opacity: 0.55;
    margin: 0 auto var(--space-3);
    display: block;
}
.cmd-palette__empty-star {
    width: 32px; height: 32px;
    opacity: 0.5;
    margin-bottom: var(--space-2);
    display: inline-block;
}
/* Greeting accent — drobná ✦ vedľa "Dobré ráno" */
.dashboard-greeting__star {
    width: 18px; height: 18px;
    margin-left: 6px;
    color: var(--color-aqua-shade-2);
    opacity: 0.65;
    vertical-align: -2px;
}
/* Task comment empty (renderuje JS) */
.task-comment-list__empty .star-icon {
    width: 14px; height: 14px;
    margin-right: 4px;
    opacity: 0.6;
    vertical-align: -0.15em;
}

@keyframes famipro-star-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.star-icon--spin svg {
    animation: famipro-star-spin 2s linear infinite;
    transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
    .star-icon--spin svg { animation: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;                /* mierne väčší click target */
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Sizes */
.btn--sm {
    padding: 6px 12px;
    font-size: var(--text-xs);
}
.btn--lg {
    padding: 14px 24px;
    font-size: var(--text-base);
}

/* Full-width */
.btn--block {
    display: flex;
    width: 100%;
}

/* Variants */
.btn--primary {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
    text-decoration: none;
}

.btn--secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn--secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    text-decoration: none;
}

.btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: transparent;
}
.btn--ghost:hover {
    background: var(--bg-subtle);
    text-decoration: none;
}

/* Danger — tlmený coral, NIE jasná červená */
.btn--danger {
    background: #FCE4E0;
    color: #8E3826;
    border-color: #F4B8AD;
}
.btn--danger:hover {
    background: #F8CFC7;
    border-color: #E89889;
    text-decoration: none;
}

/* Icon-only button (utility) */
.btn--icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}
.btn--icon.btn--sm { width: 28px; height: 28px; padding: 4px; }

/* ============================================================
   FORMS
   ============================================================ */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.label {
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.input,
.textarea,
.select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-muted);
}

.input:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled),
.select:hover:not(:focus):not(:disabled) {
    border-color: var(--border-strong);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus-ring);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-subtle);
}

.textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    line-height: 1.5;
}

.select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230A2628' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

/* Error state */
.input--error,
.textarea--error,
.select--error {
    border-color: #D26B5C;
}
.input--error:focus,
.textarea--error:focus,
.select--error:focus {
    box-shadow: 0 0 0 3px rgba(210, 107, 92, 0.25);
}

.field__help {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.field__error {
    font-size: var(--text-xs);
    color: #B85543;
    font-weight: 500;
}

/* Inline form row (for filter-bar, milestone inline form) */
.field-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.field-row .field { flex: 1; margin-bottom: 0; min-width: 180px; }

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    transition: box-shadow var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.card__header {
    margin-bottom: var(--space-4);
}
.card__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.card__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.card__body {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.card--hoverable {
    cursor: pointer;
}
.card--hoverable:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-strong);
}
.card--hoverable:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring), var(--shadow-card-hover);
}

/* Color bar on top of card (used in project show) */
.card__color-bar {
    height: 4px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
}

/* ============================================================
   BADGES — Notion-style soft tonals, no dot
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    /* Faza 60t: kompaktnejšia decentná pilulka (predtým 2px 10px / line 1.6). */
    padding: 1px 8px;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-full);
    background: var(--status-planning-bg);
    color: var(--status-planning-text);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Faza 60p: status pilulky → dedikovaná farebná mapa (žltá/modrá/fialová/zelená),
   oddelená od zdieľaných --status-* (warning/success). Platí všade rovnako
   (zoznam, detail, míľniky, dashboard) — žiadne per-stránka duplikáty. */
.badge--planning    { background: var(--badge-planning-bg);    color: var(--badge-planning-text); }
.badge--active      { background: var(--status-active-bg);      color: var(--status-active-text); }
.badge--in-progress,
.badge--in_progress { background: var(--badge-in-progress-bg); color: var(--badge-in-progress-text); }
.badge--paused,
.badge--waiting     { background: var(--badge-waiting-bg);      color: var(--badge-waiting-text); }
.badge--done        { background: var(--badge-done-bg);        color: var(--badge-done-text); }
.badge--blocked     { background: var(--status-blocked-bg);     color: var(--status-blocked-text); }
.badge--cancelled   { background: var(--status-cancelled-bg);   color: var(--status-cancelled-text); }

/* ============================================================
   PRIORITY DOT
   ============================================================ */

.priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--priority-low-color);
    margin-right: 6px;
    vertical-align: middle;
}
.priority-dot--low      { background: var(--priority-low-color); }
.priority-dot--medium   { background: var(--priority-medium-color); }
.priority-dot--high     { background: var(--priority-high-color); }
.priority-dot--urgent   { background: var(--priority-urgent-color); }

/* ============================================================
   COLOR DOT (for project.color in lists)
   ============================================================ */

.color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ============================================================
   DEADLINE LABEL (s farebným tonálom podľa state)
   ============================================================ */

.deadline {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--deadline-normal-text);
}
.deadline--overdue {
    background: var(--deadline-overdue-bg);
    color: var(--deadline-overdue-text);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.deadline--urgent {
    background: var(--deadline-urgent-bg);
    color: var(--deadline-urgent-text);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.deadline--upcoming {
    color: var(--deadline-upcoming-text);
    font-weight: 500;
}
.deadline--normal,
.deadline--none {
    color: var(--text-secondary);
}

/* ============================================================
   USER PILL (avatar + name inline)
   ============================================================ */

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.user-pill__avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-aqua-shade-1);
    color: var(--color-dark-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ============================================================
   ALERTS (legacy — pre flash messages)
   ============================================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: 500; margin: 0 0 var(--space-1); color: inherit; }
.alert__text { margin: 0; color: inherit; opacity: 0.92; }

.alert--info    { background: var(--color-aqua-white); border-color: var(--color-aqua-shade-2); color: var(--color-dark-teal); }
.alert--success { background: #D9F0E6; border-color: #A8D9C2; color: #1F5C4A; }
.alert--warning { background: var(--color-apricot-tint-1); border-color: var(--color-apricot); color: #7A4C2E; }
.alert--danger  { background: #FCE4E0; border-color: #F4B8AD; color: #8E3826; }

/* ============================================================
   TABLE
   ============================================================ */

.table-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table thead th {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    text-align: left;
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.table tbody tr {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color var(--transition-fast);
}
.table tbody tr:last-child { border-bottom: 0; }

.table tbody tr:hover {
    background: var(--bg-subtle);
}

.table tbody td {
    padding: 14px 16px;
    color: var(--text-primary);
    vertical-align: middle;
}

.table__title {
    font-weight: 500;
}
.table__title a {
    color: var(--text-primary);
    text-decoration: none;
}
.table__title a:hover {
    color: var(--text-link-hover); /* faza 41/S1: predtým cyan --accent-hover */
    text-decoration: underline;
}

.table__actions {
    text-align: right;
    white-space: nowrap;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    align-items: center;
}

.filter-bar__search {
    flex: 1 1 280px;
    min-width: 200px;
}

.filter-bar__select {
    flex: 0 1 180px;
    min-width: 140px;
}

.filter-bar__reset {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: auto;
    padding: 8px 12px;
}
.filter-bar__reset:hover {
    color: var(--text-link-hover); /* faza 41/S1: predtým cyan */
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-13) var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    gap: var(--space-4);
}

.empty-state__icon {
    width: 56px;
    height: 56px;
    color: var(--color-blue);
    opacity: 0.25;
    margin-bottom: var(--space-2);
}

.empty-state__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.empty-state__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    max-width: 360px;
}

/* ============================================================
   STATS CARD (dashboard)
   ============================================================ */

.stats-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stats-card__metric {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stats-card__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
}

.stats-card__trend {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.stats-card__trend--up   { color: #1F5F3F; }
.stats-card__trend--down { color: #8E3826; }

.stats-card__link {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-link); /* faza 41/S1: predtým --accent cyan */
}

/* ============================================================
   DASHBOARD — klikateľné stat karty + slide-down panel
   ============================================================ */

.dashboard-stats {
    margin-bottom: var(--space-6);
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: inherit;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.stat-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-blue);
}
.stat-card[aria-expanded="true"] {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-card-hover);
}

.stat-card__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.stat-card__count {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.stat-card__count--alert { color: var(--deadline-overdue-text); }
.stat-card__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.stat-card__hint--alert { color: var(--deadline-overdue-text); }

/* Panely sú full-width pod celým radom kariet (čistejšie pri 4 kartách). */
.stat-panels { margin-top: var(--space-4); }

.stat-panel {
    background: var(--bg-surface);
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    animation: statPanelSlideDown var(--transition-base);
}

@keyframes statPanelSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stat-panel__empty {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.stat-panel__section + .stat-panel__section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.stat-panel__heading {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-dark-teal-tint-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.count-pill {
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
}

.stat-list { list-style: none; padding: 0; margin: 0; }

.stat-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.stat-row:last-child { border-bottom: none; }

.stat-row__badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    white-space: nowrap;
}
.stat-row__parent {
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}
.stat-row__title {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stat-row__title:hover { color: var(--text-link); }

/* ============================================================
   MODAL (native <dialog>)
   ============================================================ */

.modal[open] {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 480px;
    width: calc(100% - 32px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: visible;
}
.modal::backdrop {
    background: rgba(0, 38, 40, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal__dialog {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.modal__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    line-height: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.modal__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.modal__close:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.modal__body {
    padding: var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.modal__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    background: var(--bg-elevated);
}

/* Confirm-dialog modifier — destructive context */
.modal--confirm .modal__body { color: var(--text-primary); }
.modal--confirm .modal__title { color: var(--text-primary); }

/* ============================================================
   TOOLTIP (CSS-only, on hover)
   ============================================================ */

.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip__content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-inverse);
    color: var(--text-on-dark);
    font-size: var(--text-xs);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: var(--z-dropdown);
}
.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   HEADER BELL (notifikácie) + nudge tlačidlá
   ============================================================ */

.header__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    /* Faza 66c: zvonček je teraz <button> (trigger dropdownu) — reset chrome. */
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.header-bell:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
    text-decoration: none;
}
.header-bell:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Faza 66r: animácia príchodu novej notifikácie — jemné zhúpnutie zvončeka + ✦ aqua pulz. */
@keyframes fp-bell-swing {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    45% { transform: rotate(7deg); }
    60% { transform: rotate(-5deg); }
    78% { transform: rotate(2deg); }
}
@keyframes fp-bell-pulse {
    0%   { transform: scale(0.55); opacity: 0.5; }
    100% { transform: scale(1.85); opacity: 0; }
}
.header-bell.is-arriving svg {
    animation: fp-bell-swing 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 50% 18%;
}
.header-bell.is-arriving::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border: 2px solid var(--color-famivel-blue, #72E6EF);
    animation: fp-bell-pulse 0.9s ease-out forwards;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .header-bell.is-arriving svg,
    .header-bell.is-arriving::after { animation: none; }
}

/* ===== Zvonček dropdown (Faza 66c) — glass prehľad posledných notifikácií ===== */
.bell-menu { position: relative; display: inline-flex; }
.bell-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 59, 65, 0.16), 0 2px 8px rgba(0, 59, 65, 0.08);
    z-index: var(--z-dropdown);
    overflow: hidden;
    /* spring entrance — bez display:none aby fungoval prechod */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transform-origin: top right;
    transition: opacity 160ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), visibility 160ms;
}
.bell-menu--open .bell-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.bell-dropdown__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.bell-dropdown__title { font-weight: var(--font-semibold); color: var(--text-primary); font-size: var(--text-sm); }
.bell-dropdown__count {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--color-dark-teal);
    background: var(--color-aqua-tint-1);
    padding: 2px 8px; border-radius: var(--radius-full);
}
.bell-dropdown__list { max-height: 360px; overflow-y: auto; padding: var(--space-1); }
.bell-dropdown__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 9px 10px;
    border-radius: var(--radius-md);
    color: inherit; text-decoration: none;
    transition: background 120ms ease;
}
.bell-dropdown__item:hover { background: rgba(114, 230, 239, 0.12); text-decoration: none; }
.bell-dropdown__icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-aqua-tint-1);
    color: var(--color-dark-teal);
}
.bell-dropdown__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.bell-dropdown__text {
    font-size: var(--text-sm); color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bell-dropdown__time { font-size: var(--text-xs); color: var(--text-muted); }
.bell-dropdown__dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-blue);
}
.bell-dropdown__item.is-unread .bell-dropdown__text { font-weight: var(--font-semibold); }
.bell-dropdown__item.is-unread { background: rgba(114, 230, 239, 0.07); }
.bell-dropdown__empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted); font-size: var(--text-sm);
    text-align: center;
}
.bell-dropdown__empty .star-icon { width: 30px; height: 30px; opacity: 0.55; }
.bell-dropdown__all {
    display: block; text-align: center;
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    color: var(--color-dark-teal); font-weight: var(--font-semibold); font-size: var(--text-sm);
    text-decoration: none;
    transition: background 120ms ease;
}
.bell-dropdown__all:hover { background: var(--bg-subtle); text-decoration: none; }

[data-theme="dark"] .bell-dropdown { background: rgba(22, 37, 40, 0.9); border-color: rgba(255, 255, 255, 0.1); }

/* Mobile: širší, ukotvený k pravému okraju, neoreže sa */
@media (max-width: 768px) {
    .bell-dropdown {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }
    .bell-dropdown__list { max-height: 60vh; }
}
.header-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--priority-urgent-color);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: var(--radius-full);
    min-width: 16px;
    text-align: center;
}

/* Mini 🔔 v dashboard riadkoch */
.stat-row__end {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-end;
}
.btn-nudge-mini {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    opacity: 0.55;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.btn-nudge-mini:hover {
    opacity: 1;
    background: var(--status-paused-bg);
}

/* ============================================================
   NUDGE MODAL
   ============================================================ */

/* Faza 30e: pôvodné .nudge-modal / .nudge-priority pravidlá presunuté
   do #36 vrstvy na konci súboru (glass redesign). Markup zmenený z
   .nudge-modal > .nudge-modal__backdrop + .nudge-modal__dialog na
   .nudge-modal-backdrop > .nudge-modal pattern (rovnaký ako #28 quick-create). */

/* ============================================================
   NOTIFICATION LIST (/notifikacie)
   ============================================================ */

.notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.notification-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.notification-item.is-unread {
    background: var(--color-aqua-tint-1);
    border-color: var(--color-aqua-shade-1);
}
.notification-item.is-read { opacity: 0.7; }

.notification-link {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
}
.notification-link:hover { text-decoration: none; background: var(--bg-subtle); border-radius: var(--radius-md); }

/* Faza 66y: mazanie notifikácie — × vpravo (flex, žiadne prekrytie textu), hover → apricot. */
.notification-item { position: relative; display: flex; align-items: stretch; }
.notification-link { flex: 1; min-width: 0; }
.notif-delete {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 44px;
    border: none; background: none; cursor: pointer;
    color: var(--text-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.notif-delete:hover {
    color: var(--color-apricot-shade-1, #8B5A3C);
    background: color-mix(in srgb, var(--color-apricot, #FFD0B0) 30%, transparent);
}
[data-theme="dark"] .notif-delete:hover { color: var(--color-apricot, #FFD0B0); }
.notification-item.notif-removing {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 240ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.notification-item__icon { font-size: var(--text-lg); line-height: 1.2; }
.notification-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notification-item__title { font-weight: 600; color: var(--text-primary); }
.notification-item__text { color: var(--text-secondary); font-size: var(--text-sm); white-space: pre-wrap; }
.notification-item__meta { color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }

/* ============================================================
   QUICK FILTER CHIPS (/projekty)
   ============================================================ */

.chip-row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--color-aqua-shade-1) transparent;
    -webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar { height: 6px; }
.chip-row::-webkit-scrollbar-track { background: transparent; }
.chip-row::-webkit-scrollbar-thumb {
    background: var(--color-aqua-shade-1);
    border-radius: 3px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-aqua-white);
    border: 1px solid var(--color-aqua-shade-1);
    border-radius: var(--radius-full);
    color: var(--color-dark-teal);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.chip:hover {
    background: var(--color-aqua-tint-1);
    border-color: var(--color-blue);
    color: var(--color-dark-teal-shade-1);
    text-decoration: none;
}
.chip--active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-dark-teal);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(114, 230, 239, 0.3);
}
.chip--active:hover {
    background: var(--color-blue-shade-1);
    border-color: var(--color-blue-shade-1);
    color: var(--color-dark-teal);
}
.chip__icon { font-size: 14px; line-height: 1; }
.chip__label { line-height: 1; }
.chip__count {
    background: rgba(0, 59, 65, 0.1);
    color: var(--color-dark-teal);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    line-height: 1;
}
.chip--active .chip__count { background: rgba(0, 59, 65, 0.2); }

@media (max-width: 768px) {
    .chip { padding: 7px 12px; }
    .chip__label { font-size: var(--text-xs); }
}

/* ============================================================
   VIZUÁLNA HIERARCHIA v zozname projektov
   ============================================================ */

.project-row--top td { font-weight: 500; }

.project-row--sub td {
    font-weight: 400;
    color: var(--color-dark-teal-tint-1);
}
.project-row--sub .col-title { padding-left: 28px; }

.sub-indicator {
    color: var(--color-dark-teal-tint-2);
    margin-right: 4px;
    font-weight: 400;
}
.parent-ref {
    color: var(--color-dark-teal-tint-2);
    font-size: var(--text-xs);
    margin-right: 6px;
    font-weight: 400;
}
.project-row--sub .badge { opacity: 0.7; }

.project-link { color: var(--color-dark-teal); text-decoration: none; }
.project-row--sub .project-link { color: var(--color-dark-teal-tint-1); }
.project-link:hover { color: var(--text-link); text-decoration: underline; }

/* ============================================================
   MULTI-SELECT FILTER (checkbox dropdown)
   ============================================================ */

.multi-select { position: relative; min-width: 180px; }

.multi-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.multi-select__trigger:hover { border-color: var(--color-blue); }
.multi-select[data-open="true"] .multi-select__trigger {
    border-color: var(--color-blue);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.multi-select__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select__chevron { color: var(--text-muted); transition: transform var(--transition-fast); flex-shrink: 0; }
.multi-select[data-open="true"] .multi-select__chevron { transform: rotate(180deg); }

.multi-select__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--color-blue);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    z-index: var(--z-dropdown);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--space-1) 0;
}
.multi-select__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.multi-select__option:hover { background: var(--color-aqua-tint-1); }
.multi-select__option input[type="checkbox"] { accent-color: var(--color-blue); }
.area-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.multi-select__clear {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-link);
    font-size: var(--text-xs);
    text-align: left;
    cursor: pointer;
}
.multi-select__clear:hover { background: var(--color-aqua-tint-1); }

/* ============================================================
   SUB-PROJECT CARDS (detail projektu)
   ============================================================ */

.count-badge {
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    margin-left: var(--space-2);
}

.sub-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.sub-project-card {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--color-aqua-shade-1);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.sub-project-card:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
.sub-project-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.sub-project-card__code {
    font-size: var(--text-xs);
    color: var(--color-dark-teal-tint-2);
    font-weight: 500;
    font-family: monospace;
}
.sub-project-card__title {
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: 1.4;
    margin-bottom: var(--space-3);
}
.sub-project-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

/* ============================================================
   PRIORITY BADGES
   ============================================================ */

.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
}
.priority-low    { background: var(--status-planning-bg);   color: var(--priority-low-color); }
.priority-medium { background: var(--status-active-bg);     color: var(--color-dark-teal-tint-1); }
.priority-high   { background: var(--status-paused-bg);     color: var(--priority-high-color); }
.priority-urgent { background: var(--deadline-overdue-bg);  color: var(--deadline-overdue-text); }

/* ============================================================
   INLINE EDITING
   ============================================================ */

.inline-editable {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background var(--transition-fast);
}
.inline-editable:hover { background: var(--bg-subtle); }
.inline-editable[data-editing="1"] { background: var(--color-aqua-tint-1); }

.inline-dropdown {
    background: var(--bg-surface);
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    z-index: var(--z-modal);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-1) 0;
}
.inline-dropdown__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: background var(--transition-fast);
}
.inline-dropdown__option:hover { background: var(--color-aqua-tint-1); }
.inline-dropdown__option.is-current { background: var(--color-aqua-white); font-weight: 600; }
.inline-dropdown__icon { font-size: 14px; }
.inline-dropdown__search {
    width: calc(100% - 16px);
    margin: var(--space-2);
    padding: 6px 8px;
    border: 1px solid var(--color-aqua-shade-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
}

.inline-date-input,
.inline-text-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
}
.inline-text-input { min-width: 200px; }
textarea.inline-text-input { resize: vertical; min-height: 50px; }

.owner-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-blue);
    color: var(--color-dark-teal);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface-inverse);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: var(--shadow-modal);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: var(--z-toast);
}
.toast--visible { transform: translateY(0); opacity: 1; }
.toast--success { background: var(--status-done-text); }
.toast--error   { background: var(--deadline-overdue-text); }

/* ============================================================
   PROJECT DETAIL — NOTION STYLE (header + metadata + sekcie)
   (tab navigácia odstránená v #12)
   ============================================================ */

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: var(--space-6) 0 var(--space-2);
}
.project-header__main { flex: 1; min-width: 0; }
.project-header__title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.project-code-large {
    font-size: var(--text-sm);
    color: var(--color-dark-teal-tint-2);
    font-weight: 500;
    font-family: 'Monaco', 'Menlo', monospace;
    background: var(--color-aqua-tint-1);
    padding: 2px 10px;
    border-radius: 6px;
}
.project-title { font-size: 28px; font-weight: 700; color: var(--color-dark-teal); margin: 0; line-height: 1.2; }
.project-header__parent-ref { font-size: 13px; color: var(--color-dark-teal-tint-1); margin-top: 8px; }
.project-header__parent-ref a { color: var(--text-link); text-decoration: none; }
.project-header__parent-ref a:hover { text-decoration: underline; }
.project-header__actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* Metadata strip — 3 kľúčové fields */
.project-metadata {
    margin: 16px 0 32px;
    padding: 14px 18px;
    background: var(--color-aqua-tint-1);
    border-radius: 10px;
    border: 1px solid var(--color-aqua-shade-1);
}
.metadata-strip { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.metadata-item { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 0; }
.metadata-item:first-child { padding-left: 0; }
.metadata-label { font-size: 11px; color: var(--color-dark-teal-tint-2); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.metadata-empty { color: var(--color-dark-teal-tint-2); }
.metadata-divider { width: 1px; height: 20px; background: var(--color-aqua-shade-1); margin: 0 12px; }
.user-cell { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Collapsible "Zobraziť všetky atribúty" */
.metadata-collapsible { margin-top: 8px; border-top: 1px solid var(--color-aqua-shade-1); padding-top: 8px; }
.metadata-collapsible[open] { margin-top: 12px; }
.metadata-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-dark-teal-tint-1);
    cursor: pointer; list-style: none; padding: 6px 0; user-select: none;
}
.metadata-toggle::-webkit-details-marker { display: none; }
.metadata-toggle__chevron { display: inline-block; transition: transform 0.15s; font-size: 10px; }
.metadata-collapsible[open] .metadata-toggle__chevron { transform: rotate(90deg); }
.metadata-toggle:hover { color: var(--color-dark-teal); }
.metadata-extended { padding: 8px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.metadata-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.metadata-row__label { color: var(--color-dark-teal-tint-2); min-width: 110px; flex-shrink: 0; }
.metadata-row__value { color: var(--color-dark-teal); flex: 1; }

@media (max-width: 768px) {
    .metadata-extended { grid-template-columns: 1fr; }
    .metadata-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
    .metadata-divider { display: none; }
    .metadata-item { padding: 0; }
}

/* Project sections */
.project-section { margin: 32px 0; }
.section-title {
    font-size: 18px; font-weight: 600; color: var(--color-dark-teal);
    margin: 0 0 16px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-aqua-shade-1);
    display: flex; align-items: center; gap: 10px;
}
.section-count {
    background: var(--color-aqua-white); color: var(--color-dark-teal);
    padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700;
}

/* Notion notes — read-only synced */
.notion-notes {
    padding: 16px; background: var(--color-aqua-tint-1); border-radius: 8px;
    color: var(--color-dark-teal); font-size: 14px; line-height: 1.7;
    border-left: 3px solid var(--color-blue);
}

/* ============================================================
   POPIS TAB (markdown rendered)
   ============================================================ */

.popis-content { max-width: 760px; line-height: 1.7; color: var(--color-dark-teal); }
.popis-content h1, .popis-content h2, .popis-content h3 {
    color: var(--color-dark-teal); margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3;
}
.popis-content h1 { font-size: 24px; font-weight: 600; }
.popis-content h2 { font-size: 20px; font-weight: 600; }
.popis-content h3 { font-size: 17px; font-weight: 600; }
.popis-content p { margin: 0.8em 0; }
.popis-content ul, .popis-content ol { padding-left: 24px; margin: 0.8em 0; }
.popis-content li { margin: 0.3em 0; }
.popis-content blockquote {
    border-left: 3px solid var(--color-blue);
    padding-left: 16px; margin: 1em 0;
    color: var(--color-dark-teal-tint-1); font-style: italic;
}
.popis-content code {
    background: var(--color-aqua-tint-1); padding: 2px 6px; border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace; font-size: 13px; color: var(--color-dark-teal);
}
.popis-content pre { background: var(--color-aqua-tint-1); padding: 12px 16px; border-radius: 8px; overflow-x: auto; margin: 1em 0; }
.popis-content pre code { background: none; padding: 0; }
.popis-content a { color: var(--text-link); text-decoration: underline; }

.popis-meta {
    font-size: var(--text-xs); color: var(--color-dark-teal-tint-2);
    margin-top: var(--space-6); padding-top: var(--space-4);
    border-top: 1px solid var(--color-aqua-shade-1);
}
.popis-actions { margin-top: var(--space-4); }
.popis-empty {
    text-align: center; padding: 48px 24px;
    background: var(--color-aqua-tint-1); border-radius: var(--radius-md); margin: var(--space-6) 0;
}
.popis-empty__icon { font-size: 32px; }
.popis-empty p { margin: var(--space-4) 0; color: var(--color-dark-teal-tint-1); }
.popis-empty__hint { font-size: var(--text-sm); color: var(--color-dark-teal-tint-2); }

/* ============================================================
   MARKDOWN EDITOR (split view)
   ============================================================ */

.markdown-editor { border: 1px solid var(--color-aqua-shade-1); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; }
.markdown-editor__toolbar {
    display: flex; align-items: center; gap: 4px; padding: 8px 12px;
    background: var(--color-aqua-tint-1); border-bottom: 1px solid var(--color-aqua-shade-1); flex-wrap: wrap;
}
.markdown-editor__toolbar button {
    padding: 4px 10px; background: var(--bg-surface); border: 1px solid var(--color-aqua-shade-1);
    border-radius: 6px; font-size: 13px; color: var(--color-dark-teal); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast);
    font-family: inherit;
}
.markdown-editor__toolbar button:hover { background: var(--color-aqua-white); border-color: var(--color-blue); }
.markdown-editor__divider { width: 1px; height: 20px; background: var(--color-aqua-shade-1); margin: 0 4px; }
.markdown-editor__split { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
.markdown-editor__input {
    border: none; padding: 16px; font-family: 'Monaco', 'Menlo', monospace; font-size: 13px; line-height: 1.6;
    resize: vertical; outline: none; background: var(--bg-surface); color: var(--color-dark-teal);
    border-right: 1px solid var(--color-aqua-shade-1);
}
.markdown-editor__preview { padding: 16px; overflow-y: auto; background: var(--color-aqua-tint-1); }
.markdown-editor__preview h1, .markdown-editor__preview h2, .markdown-editor__preview h3 { color: var(--color-dark-teal); margin-top: 1em; margin-bottom: 0.4em; }
.markdown-editor__preview h1 { font-size: 22px; }
.markdown-editor__preview h2 { font-size: 18px; }
.markdown-editor__preview h3 { font-size: 16px; }
.markdown-editor__preview p { margin: 0.6em 0; line-height: 1.6; }
.markdown-editor__preview ul, .markdown-editor__preview ol { padding-left: 20px; }
.markdown-editor__preview code { background: var(--bg-surface); padding: 2px 5px; border-radius: 3px; font-size: 12px; }
.markdown-editor__preview blockquote { border-left: 3px solid var(--color-blue); padding-left: 12px; color: var(--color-dark-teal-tint-1); font-style: italic; margin: 0.8em 0; }
.markdown-editor__footer {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
    background: var(--color-aqua-tint-1); border-top: 1px solid var(--color-aqua-shade-1); flex-wrap: wrap; gap: 12px;
}
.markdown-editor__hint { font-size: 11px; color: var(--color-dark-teal-tint-2); margin: 0; }
.markdown-editor__hint code { background: var(--bg-surface); padding: 1px 4px; border-radius: 3px; font-size: 10px; }
.markdown-editor__actions { display: flex; gap: 8px; }

@media (max-width: 768px) {
    .markdown-editor__split { grid-template-columns: 1fr; }
    .markdown-editor__input { border-right: none; border-bottom: 1px solid var(--color-aqua-shade-1); }
}

/* ============================================================
   KOMENTÁRE (native + Notion synced)
   ============================================================ */

.comments-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.comment {
    display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 16px;
    background: var(--bg-surface); border: 1px solid var(--color-aqua-shade-1); border-radius: 10px;
}
.comment:target { background: var(--color-aqua-tint-1); border-color: var(--color-blue); }
.comment__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-blue); color: var(--color-dark-teal);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.comment__avatar--notion { background: var(--color-aqua-shade-1); }
.comment__body { min-width: 0; }
.comment__header {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    color: var(--color-dark-teal-tint-2); margin-bottom: 6px; flex-wrap: wrap;
}
.comment__author { font-weight: 600; color: var(--color-dark-teal); font-size: 13px; }
.comment__time { font-size: 11px; }
.comment__edited { font-size: 11px; font-style: italic; }
.comment__source {
    background: var(--color-aqua-tint-1); padding: 1px 6px; border-radius: 8px;
    font-size: 10px; color: var(--color-dark-teal-tint-1); text-transform: uppercase; letter-spacing: 0.3px;
}
.comment__actions { margin-left: auto; display: flex; gap: 8px; }
.comment-action {
    background: none; border: none; color: var(--color-dark-teal-tint-1);
    font-size: 11px; cursor: pointer; padding: 2px 4px; font-family: inherit;
}
.comment-action:hover { color: var(--text-link); text-decoration: underline; }
.comment-action--danger:hover { color: var(--deadline-overdue-text); }
.comment__content { font-size: 14px; line-height: 1.6; color: var(--color-dark-teal); }
.comment__content p:first-child { margin-top: 0; }
.comment__content p:last-child { margin-bottom: 0; }

.mention {
    background: var(--color-aqua-tint-1); color: var(--text-link);
    padding: 1px 6px; border-radius: 4px; font-weight: 500; font-size: 13px;
}

.comment-edit-form { margin-top: 4px; }
.comment-edit-textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-blue); border-radius: 8px;
    font-size: 14px; line-height: 1.5; color: var(--color-dark-teal); background: var(--bg-surface);
    resize: vertical; font-family: inherit;
}
.comment-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.comment-form {
    background: var(--bg-surface); border: 1px solid var(--color-aqua-shade-1);
    border-radius: 10px; padding: 12px; margin-top: 16px;
}
.comment-form__input-wrap { position: relative; }
.comment-form__input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-aqua-shade-1); border-radius: 8px;
    font-size: 14px; line-height: 1.5; color: var(--color-dark-teal); background: var(--bg-surface);
    resize: vertical; font-family: inherit; transition: border-color var(--transition-fast);
}
.comment-form__input:focus { outline: none; border-color: var(--color-blue); }
.comment-form__footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 12px; }
.comment-form__hint { font-size: 11px; color: var(--color-dark-teal-tint-2); margin: 0; }
.comment-form__hint code { background: var(--color-aqua-tint-1); padding: 1px 5px; border-radius: 3px; font-size: 10px; }

.mention-dropdown {
    position: absolute; background: var(--bg-surface); border: 1px solid var(--color-blue);
    border-radius: 8px; box-shadow: var(--shadow-dropdown); max-height: 240px; overflow-y: auto;
    z-index: var(--z-dropdown); padding: 4px; min-width: 280px;
}
.mention-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background var(--transition-fast); }
.mention-option.is-selected, .mention-option:hover { background: var(--color-aqua-tint-1); }
.mention-option__avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--color-blue); color: var(--color-dark-teal);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.mention-option__name { font-size: 13px; font-weight: 500; color: var(--color-dark-teal); }
.mention-option__email { font-size: 11px; color: var(--color-dark-teal-tint-2); }

.notion-comments-section { margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--color-aqua-shade-1); }
.notion-comments-title { font-size: 14px; font-weight: 600; color: var(--color-dark-teal-tint-1); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.notion-comments-count { background: var(--color-aqua-tint-1); padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }

.comments-empty { text-align: center; padding: 32px 16px; color: var(--color-dark-teal-tint-2); font-size: 14px; }

@media (max-width: 768px) {
    .comment { grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 12px; }
    .comment__avatar { width: 28px; height: 28px; font-size: 10px; }
}

/* ============================================================
   HISTÓRIA (audit log)
   ============================================================ */

.history-collapsible { margin-top: 16px; }
.history-toggle {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    list-style: none; user-select: none; padding: 8px 0;
}
.history-toggle::-webkit-details-marker { display: none; }
.history-toggle__chevron { display: inline-block; transition: transform 0.15s; color: var(--color-dark-teal-tint-1); }
.history-collapsible[open] .history-toggle__chevron { transform: rotate(90deg); }
.section-title--inline { margin: 0; padding: 0; border: none; font-size: 16px; }

.history-content { padding: 12px 0 8px; border-top: 1px solid var(--color-aqua-shade-1); margin-top: 8px; }
.history-filters {
    display: flex; gap: 16px; margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-aqua-shade-1);
    font-size: 12px; color: var(--color-dark-teal-tint-1);
}

.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.history-item {
    display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 12px;
    background: var(--bg-surface); border: 1px solid var(--color-aqua-shade-1);
    border-radius: 8px; border-left-width: 3px; transition: background var(--transition-fast);
}
.history-item:hover { background: var(--color-aqua-tint-1); }
.history-item__avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-blue); color: var(--color-dark-teal);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.history-item__body { min-width: 0; }
.history-item__text { font-size: 13px; line-height: 1.5; color: var(--color-dark-teal); }
.history-item__text strong { font-weight: 600; color: var(--color-dark-teal); }
.history-item__text em {
    font-style: normal; font-weight: 500; background: var(--color-aqua-tint-1);
    padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.history-item__time { font-size: 11px; color: var(--color-dark-teal-tint-2); margin-top: 4px; }
.history-item__abs { opacity: 0.7; }

.log-action--created     { border-left-color: var(--color-blue); }
.log-action--status      { border-left-color: var(--color-blue-shade-1); }
.log-action--priority    { border-left-color: var(--color-apricot-shade-1); }
.log-action--deadline    { border-left-color: var(--color-apricot); }
.log-action--description { border-left-color: var(--color-aqua-shade-2); }
.log-action--danger      { border-left-color: var(--deadline-overdue-text); }
.log-action--success     { border-left-color: var(--status-done-text); }
.log-action--neutral     { border-left-color: var(--color-aqua-shade-2); }

.history-truncated { text-align: center; margin-top: 12px; font-size: 12px; color: var(--color-dark-teal-tint-2); font-style: italic; }

@media (max-width: 768px) {
    .history-item__abs { display: none; }
}

/* ============================================================
   DASHBOARD POLISH (#15)
   ============================================================ */

.dashboard-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
    margin-bottom: 28px;
}
.dashboard-header__main { min-width: 0; }
.dashboard-header__actions { flex-shrink: 0; }
.dashboard-header__date {
    font-size: 12px; color: var(--color-dark-teal-tint-2); margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sync-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.sync-indicator--ok { color: var(--status-done-text); }
.sync-indicator--warn { color: var(--status-paused-text); }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.dashboard-greeting { font-size: 28px; font-weight: 700; color: var(--color-dark-teal); margin: 0 0 8px; }
.dashboard-headline { font-size: 15px; color: var(--color-dark-teal-tint-1); margin: 0; line-height: 1.5; }
.dashboard-headline .hl-danger { color: var(--deadline-overdue-text); font-weight: 600; }
.dashboard-headline .hl-warning { color: var(--status-paused-text); font-weight: 600; }

/* Trend pod číslom v karte */
.stat-card__trend { font-size: 11px; margin-top: 6px; color: var(--color-dark-teal-tint-2); }
.stat-card__trend--up { color: var(--color-dark-teal-tint-1); }
.stat-card__trend--down { color: var(--status-done-text); }

/* "Vyžaduje pozornosť" */
.attention-section {
    margin: 32px 0; background: var(--color-aqua-tint-1); border-radius: 12px;
    padding: 20px 24px; border: 1px solid var(--color-aqua-shade-1);
}
.attention-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.section-title--small {
    font-size: 14px; font-weight: 600; color: var(--color-dark-teal); margin: 0; padding: 0; border: none;
    display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.attention-icon { font-size: 16px; font-style: normal; }
.attention-section__count { font-size: 12px; color: var(--color-dark-teal-tint-2); }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.attention-item {
    display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
    padding: 12px 14px; background: var(--bg-surface); border-radius: 8px;
    border-left: 3px solid var(--color-aqua-shade-2); transition: box-shadow var(--transition-fast);
}
.attention-item:hover { box-shadow: var(--shadow-card-hover); }
.attention-item--danger  { border-left-color: var(--deadline-overdue-text); }
.attention-item--warning { border-left-color: var(--color-apricot-shade-1); }
.attention-item--info    { border-left-color: var(--color-blue); }
.attention-item__icon {
    width: 36px; height: 36px; border-radius: 50%; background: var(--color-aqua-tint-1);
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.attention-item--danger .attention-item__icon { background: var(--deadline-overdue-bg); }
.attention-item--warning .attention-item__icon { background: var(--status-paused-bg); }
.attention-item__title a { color: var(--color-dark-teal); text-decoration: none; font-weight: 500; font-size: 14px; }
.attention-item__title a:hover { color: var(--text-link); text-decoration: underline; }
.attention-item__code {
    color: var(--color-dark-teal-tint-2); font-family: 'Monaco', monospace; font-size: 12px;
    background: var(--color-aqua-tint-1); padding: 1px 6px; border-radius: 4px; margin-right: 6px;
}
.attention-item__detail { font-size: 12px; color: var(--color-dark-teal-tint-1); margin-top: 4px; }
.area-tag {
    background: var(--color-aqua-white); color: var(--color-dark-teal); padding: 1px 7px; border-radius: 8px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.attention-item__actions { display: flex; gap: 6px; flex-shrink: 0; }
.attention-section__more { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--text-link); text-decoration: none; }
.attention-section__more:hover { text-decoration: underline; }

/* Activity feed */
.activity-section { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-aqua-shade-1); }
.activity-section__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.section-subtitle { font-size: 11px; color: var(--color-dark-teal-tint-2); }
.activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.activity-feed__item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-aqua-tint-1); }
.activity-feed__item:last-child { border-bottom: none; }
.activity-feed__avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--color-blue); color: var(--color-dark-teal);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.activity-feed__text { font-size: 13px; line-height: 1.5; color: var(--color-dark-teal); }
.activity-feed__text strong { font-weight: 600; }
.activity-feed__text a { color: var(--text-link); text-decoration: none; }
.activity-feed__text a:hover { text-decoration: underline; }
.code-mini { background: var(--color-aqua-tint-1); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--color-dark-teal-tint-1); font-family: 'Monaco', monospace; }
.activity-feed__time { font-size: 11px; color: var(--color-dark-teal-tint-2); margin-top: 2px; }

@media (max-width: 768px) {
    .dashboard-header { flex-direction: column; }
    .dashboard-greeting { font-size: 22px; }
    .attention-item { grid-template-columns: 32px 1fr; }
    .attention-item__actions { grid-column: 1 / -1; margin-top: 8px; justify-content: flex-end; }
    .attention-item__icon { width: 32px; height: 32px; font-size: 16px; }
}

/* ============================================================
   #16 — Mítingy (AI analýza) + Úlohy
   ============================================================ */

/* Generické page-header / tabuľka / form helpery */
.page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
}
.page-header h1 { margin: 0 0 4px; }
.page-subtitle { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.back-link { display: inline-block; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.link-action { font-size: var(--text-sm); white-space: nowrap; }

.data-table {
    width: 100%; border-collapse: collapse; background: var(--bg-surface);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden;
}
.data-table th, .data-table td {
    padding: 10px 14px; text-align: left; font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle);
}
.data-table th { color: var(--text-secondary); font-weight: 600; background: var(--bg-subtle); }
.data-table tr:last-child td { border-bottom: none; }

.form-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); }
.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-2); }
.section-count {
    font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
    background: var(--bg-subtle); padding: 1px 8px; border-radius: var(--radius-full); margin-left: 6px;
}

/* AI disclaimer banner */
.ai-disclaimer {
    background: var(--color-aqua-tint-1); padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 12px; color: var(--color-dark-teal-tint-1); margin: 16px 0;
    border-left: 3px solid var(--color-blue);
}

/* Meeting status pills (mapnuté na brand status tonals) */
.meeting-status { font-size: 12px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.meeting-status--uploaded  { background: var(--color-aqua-tint-1);   color: var(--color-dark-teal-tint-1); }
.meeting-status--analyzing { background: var(--deadline-urgent-bg);  color: var(--deadline-urgent-text); }
.meeting-status--analyzed  { background: var(--status-done-bg);      color: var(--status-done-text); }
.meeting-status--error     { background: var(--status-blocked-bg);   color: var(--status-blocked-text); }

/* ===== Meeting form — glass brand redizajn (faza 65) ===== */
.meeting-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 800px; }
.meeting-form label {
    display: flex; flex-direction: column; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--color-dark-teal); letter-spacing: -0.01em;
}
/* Glass polia — pokojné pozadie, jemný border, brand focus (ladí s detail úlohy) */
.meeting-form input,
.meeting-form select,
.meeting-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--text-primary);
    transition: all 150ms ease;
}
.meeting-form input:hover,
.meeting-form select:hover,
.meeting-form textarea:hover { border-color: rgba(0, 59, 65, 0.22); }
.meeting-form input:focus,
.meeting-form select:focus,
.meeting-form textarea:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.1), 0 4px 12px rgba(0, 59, 65, 0.06);
}
/* Prepojený projekt = glass picker: custom dark-teal chevron, žiadne native OS ▼ */
.meeting-form select {
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23003B41' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
/* Prepis — Satoshi (žiadny monospace), vzdušný riadkový rozostup */
.meeting-form textarea {
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.65;
    resize: vertical;
    min-height: 240px;
}
.meeting-form textarea::placeholder { color: var(--text-muted); }
/* Technická vata — veľmi tichý hint */
.meeting-form small,
.meeting-form__hint {
    font-size: 11px; font-weight: 400;
    color: var(--text-muted); opacity: 0.7;
}
/* AI transparentnosť — stíšená tichá poznámka pod tlačidlom (nie farebný box) */
.meeting-form__ai-note {
    display: flex; align-items: center; gap: 6px;
    margin: 4px 0 0;
    font-size: 12px; color: var(--text-muted);
}
.meeting-form__ai-note svg { opacity: 0.65; flex-shrink: 0; }

/* ===== Meeting transcript: text ALEBO upload (faza 66d) ===== */
.meeting-transcript { display: flex; flex-direction: column; gap: var(--space-3); }
.meeting-transcript__label {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--color-dark-teal); letter-spacing: -0.01em;
}
.meeting-transcript__label strong { color: var(--text-primary); font-weight: 800; }
.meeting-transcript__text { display: flex; flex-direction: column; gap: var(--space-2); }
.meeting-transcript.has-file .meeting-transcript__text textarea { opacity: 0.5; }
.meeting-transcript__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text-muted); }
.meeting-transcript__note svg { flex-shrink: 0; opacity: 0.7; }

/* „alebo" oddeľovač */
.meeting-or {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--text-muted); font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.meeting-or::before, .meeting-or::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }

/* Glass dropzone */
.meeting-dropzone {
    position: relative;
    border: 1.5px dashed rgba(0, 59, 65, 0.22);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 200ms ease,
                transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.meeting-dropzone:hover { border-color: var(--color-blue); background: rgba(114, 230, 239, 0.06); }
.meeting-dropzone.is-dragover { border-color: var(--color-blue); background: rgba(114, 230, 239, 0.12); transform: scale(1.01); }
.meeting-dropzone__input { display: none; }
.meeting-dropzone__prompt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.meeting-dropzone__prompt > [data-lucide],
.meeting-dropzone__prompt > svg { color: var(--color-dark-teal); opacity: 0.7; }
.meeting-dropzone__title { font-weight: var(--font-semibold); color: var(--text-primary); font-size: var(--text-sm); }
.meeting-dropzone__hint { font-size: var(--text-xs); color: var(--text-muted); }
.meeting-dropzone__browse {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--color-dark-teal); font: inherit; font-weight: 600;
    transition: opacity 120ms ease;
}
.meeting-dropzone__browse:hover { opacity: 0.7; }
.meeting-dropzone__file { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.meeting-dropzone__file > [data-lucide],
.meeting-dropzone__file > svg { color: var(--color-dark-teal); flex-shrink: 0; }
.meeting-dropzone__filename {
    font-weight: 600; color: var(--text-primary); font-size: var(--text-sm);
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meeting-dropzone__remove {
    background: none; border: 0; cursor: pointer; color: var(--text-muted);
    display: inline-flex; padding: 4px; border-radius: 50%;
    transition: background 150ms ease, color 150ms ease;
}
.meeting-dropzone__remove:hover { background: var(--status-blocked-bg, #FFE0E0); color: var(--status-blocked-text, #8B1F1F); }
[data-theme="dark"] .meeting-dropzone { background: rgba(30, 50, 55, 0.4); border-color: rgba(255, 255, 255, 0.15); }
[data-theme="dark"] .meeting-form input,
[data-theme="dark"] .meeting-form select,
[data-theme="dark"] .meeting-form textarea {
    background-color: rgba(30, 50, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .meeting-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2372E6EF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* Extracted tasks review table */
.extracted-tasks-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.extracted-tasks-table th, .extracted-tasks-table td {
    padding: 10px 8px; border-bottom: 1px solid var(--color-aqua-shade-1); text-align: left; font-size: 13px; vertical-align: top;
}
.extracted-tasks-table input[type=text], .extracted-tasks-table select, .extracted-tasks-table input[type=date] {
    width: 100%; padding: 4px 6px; border: 1px solid var(--color-aqua-shade-1); border-radius: 4px; font-size: 12px;
}
.extracted-tasks-table .context-cell { max-width: 280px; font-style: italic; color: var(--color-dark-teal-tint-1); font-size: 12px; }
/* Faza 71 (KROK 2/3): názov navrhovanej úlohy — dominantný, celý viditeľný (zalomí, neoreže). */
.extracted-title-input {
    width: 100%; min-width: 220px;
    font: inherit; font-weight: 600; font-size: 15px; line-height: 1.45;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 6px 8px; resize: none; overflow: hidden;
    white-space: pre-wrap; word-break: break-word;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.extracted-title-input:hover { border-color: rgba(0, 59, 65, 0.12); }
.extracted-title-input:focus { outline: none; border-color: var(--color-famivel-blue); background: rgba(255, 255, 255, 0.6); }

/* ── Faza 71 (KROK 3): glass karty navrhnutých úloh (scoped .meeting-*) ───────── */
.meeting-suggest-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.meeting-suggest {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.meeting-suggest:has(.task-checkbox:not(:checked)) { opacity: 0.55; }

/* glass checkbox */
.meeting-suggest__check { position: relative; display: inline-flex; padding-top: 5px; cursor: pointer; flex-shrink: 0; }
.meeting-suggest__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.meeting-suggest__box {
    width: 22px; height: 22px; border-radius: 7px;
    border: 2px solid rgba(0, 59, 65, 0.22);
    background: rgba(255, 255, 255, 0.6);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.meeting-suggest__check input:checked + .meeting-suggest__box {
    background: var(--color-dark-teal); border-color: var(--color-dark-teal);
}
.meeting-suggest__check input:checked + .meeting-suggest__box::after {
    content: ''; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.meeting-suggest__check input:focus-visible + .meeting-suggest__box { box-shadow: var(--shadow-focus-ring); }

.meeting-suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.meeting-suggest__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.meeting-suggest__date-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.meeting-suggest__date-wrap i, .meeting-suggest__date-wrap svg { color: var(--color-dark-teal); }
/* kontext = sekundárny, stlmený, kurzíva, celý (zalomí sa) */
.meeting-suggest__context {
    margin: 2px 0 0; font-size: 13px; font-style: italic;
    color: var(--text-muted); line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
}

/* glass assignee picker — kotvenie popovera (recykluje .person-popover/.person-option) */
.meeting-pick { position: relative; }
.meeting-pick__trigger { font-size: var(--text-sm); }
.meeting-pick__popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px; }

/* KROK 5: header s akciou + decentné mazanie (hover → apricot, ako × vzor). */
.meeting-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.meeting-header__actions { flex-shrink: 0; padding-top: 4px; }
.meeting-delete-btn:hover {
    color: #7A4C2E;
    border-color: var(--color-apricot);
    background: var(--color-apricot-tint-1);
}
.meeting-delete-btn:hover svg, .meeting-delete-btn:hover i { color: #7A4C2E; }
.extracted-tasks-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.unmapped-hint { display: block; margin-top: 2px; color: var(--deadline-urgent-text); font-size: 11px; }

.processed-tasks { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--color-aqua-shade-1); }
.processed-tasks summary { cursor: pointer; font-size: 13px; color: var(--color-dark-teal-tint-1); }
.processed-tasks ul { margin: 8px 0 0 20px; font-size: 13px; }

/* Transcript */
.transcript-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-aqua-shade-1); }
.transcript-section summary { cursor: pointer; }
.transcript-content {
    background: var(--color-aqua-tint-1); padding: 16px; border-radius: 8px;
    font-family: 'Monaco', monospace; font-size: 12px; line-height: 1.6;
    max-height: 400px; overflow-y: auto; margin-top: 12px; white-space: normal;
}

/* Task list + filtre */
.task-filter-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-aqua-shade-1); margin-bottom: 20px; }
.task-tab { padding: 10px 16px; font-size: 14px; color: var(--color-dark-teal-tint-1); text-decoration: none; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.task-tab:hover { color: var(--color-dark-teal); text-decoration: none; }
.task-tab--active { color: var(--color-dark-teal); border-bottom-color: var(--color-blue); font-weight: 600; }
.task-tab__count { background: var(--color-aqua-tint-1); padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.task-item {
    display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: flex-start;
    padding: 12px 16px; background: var(--bg-surface); border: 1px solid var(--color-aqua-shade-1); border-radius: 8px;
    transition: border-color var(--transition-fast);
}
.task-item:hover { border-color: var(--color-blue); }
.task-item--done { opacity: 0.55; }
.task-item--done .task-item__title { text-decoration: line-through; }
.task-item__title { font-size: 14px; font-weight: 500; color: var(--color-dark-teal); margin-bottom: 4px; }
.task-item__meta { display: flex; gap: 12px; font-size: 12px; color: var(--color-dark-teal-tint-1); flex-wrap: wrap; align-items: center; }
/* Faza 72: avatar + meno zodpovednej osoby na riadku úlohy — zvislo vycentrované. */
.task-item__assignee { display: inline-flex; align-items: center; gap: 6px; }
.task-overdue { color: var(--deadline-overdue-text); font-weight: 500; }

/* Faza 66q: jemný presný dátum vedľa relatívneho deadline (ako .today-item__exact-date na Dnes). */
.task-item__exact-date {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    opacity: 0.85;
    margin-left: -6px;
}

/* Faza 47/S2: farebné odstupňovanie deadlinov úloh (NIE projektov).
   Severity z task_due_severity() PHP helpera. Decentne, čitateľné na svetlom. */
.task-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--font-medium);
}
/* DNES — decentná zelená (univerzálny štandard pre "teraz", harmonická s paletou) */
.task-due--today {
    color: #2E9E7B;
}
/* ZAJTRA — dark-teal s famivel-blue accent (NIE čistý cyan na svetlom) */
.task-due--tomorrow {
    color: var(--color-dark-teal);
}
.task-due--tomorrow [data-lucide],
.task-due--tomorrow svg.lucide {
    color: var(--color-famivel-blue);
}
/* +2..+7 dní — neutrálna teal, jemný akcent */
.task-due--soon {
    color: var(--color-dark-teal-tint-1);
}
/* +8 a viac — text muted, žiadny akcent */
.task-due--far {
    color: var(--text-muted);
}
/* PO TERMÍNE 1-2 dni — apricot/oranžová (mierne pozor) */
.task-due--overdue-soft {
    color: var(--deadline-urgent-text); /* #8B4513 — brown/orange */
    font-weight: var(--font-semibold);
}
/* PO TERMÍNE 3+ dní — red (vážne, dlho po termíne) */
.task-due--overdue-hard {
    color: var(--deadline-overdue-text); /* #8B1F1F — burgundy red */
    font-weight: var(--font-semibold);
}
.task-source { background: var(--color-aqua-tint-1); padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.task-project-link { color: var(--text-link); text-decoration: none; }
.task-project-link:hover { text-decoration: underline; }

/* Sidebar badge (otvorené úlohy) */
.sidebar-badge { background: var(--color-blue); color: var(--color-dark-teal); padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; margin-left: auto; }

@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .extracted-tasks-table { display: block; overflow-x: auto; }
    .data-table { display: block; overflow-x: auto; }
}

/* ============================================================
   #16b — Tasks CRUD: filtre, akcie, formulár
   ============================================================ */

.page-header__actions { display: flex; gap: 8px; }

/* Druhá vrstva filtrov (projekt + priorita) */
.task-filter-row { display: flex; gap: 12px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.filter-select {
    padding: 6px 10px; border: 1px solid var(--color-aqua-shade-1); border-radius: 6px;
    background: var(--bg-surface); font-size: 13px; color: var(--color-dark-teal); cursor: pointer;
}
.filter-clear { font-size: 12px; color: var(--color-dark-teal-tint-1); text-decoration: none; padding: 4px 10px; }
.filter-clear:hover { color: var(--text-link); text-decoration: underline; }
.task-tab__count--danger { background: var(--deadline-overdue-bg); color: var(--deadline-overdue-text); }

/* Task item akcie (edit/delete na hover) — task-item má teraz 3. stĺpec */
.task-item { grid-template-columns: 24px 1fr auto; }
.task-item__actions { display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity var(--transition-fast); }
.task-item:hover .task-item__actions { opacity: 1; }
.task-action {
    background: none; border: none; padding: 4px 8px; font-size: 14px;
    color: var(--color-dark-teal-tint-1); cursor: pointer; border-radius: 4px;
    text-decoration: none; line-height: 1;
}
.task-action:hover { background: var(--color-aqua-tint-1); color: var(--color-dark-teal); }
.task-action--danger:hover { background: var(--deadline-overdue-bg); color: var(--deadline-overdue-text); }

/* Task formulár (nová / úprava) */
/* ===== Faza 66g: „Nová úloha" — glass brand (zladené s „Nový projekt") ===== */
.task-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
.task-form .form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.task-form .form-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-dark-teal); letter-spacing: -0.01em; }
.task-form .form-label-hint { color: var(--text-muted); font-weight: var(--font-normal); }
.task-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.task-form .form-row .form-group { margin: 0; }

/* Glass polia */
.task-form .form-input,
.task-form .form-select,
.task-form .form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: all 150ms ease;
}
.task-form .form-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.task-form .form-input:hover,
.task-form .form-select:hover,
.task-form .form-textarea:hover { border-color: rgba(0, 59, 65, 0.22); }
.task-form .form-input:focus,
.task-form .form-select:focus,
.task-form .form-textarea:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.1), 0 4px 12px rgba(0, 59, 65, 0.06);
}
/* Glass select — custom dark-teal chevron, žiadne native OS ▼ */
.task-form .form-select {
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23003B41' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
[data-theme="dark"] .task-form .form-input,
[data-theme="dark"] .task-form .form-select,
[data-theme="dark"] .task-form .form-textarea { background-color: rgba(30, 50, 55, 0.5); border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .task-form .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2372E6EF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* Area picker (recyklované z „Nový projekt"; scoped na .task-form aby nekolidoval
   s globálnym .area-option z task-detail dropdownu). */
.task-form .area-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
}
.task-form .area-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer; overflow: hidden;
    transition: all 150ms ease;
    grid-template-columns: none; /* override globálneho .area-option grid */
}
.task-form .area-option:hover { border-color: var(--color-dark-teal); background-color: rgba(114, 230, 239, 0.08); }
.task-form .area-option:has(input:checked) {
    border-color: var(--color-dark-teal);
    background-color: var(--color-aqua-white);
    box-shadow: 0 0 0 2px rgba(0, 59, 65, 0.08);
}
.task-form .area-option input[type="radio"] { display: none; }
.task-form .area-option__pill { flex-shrink: 0; font-family: inherit; }
.task-form .area-option__name {
    font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--font-medium);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-form .area-option--none .area-option__name { color: var(--text-muted); }

/* Recurring card + brand toggle riadok (nie plávajúci checkbox) */
.task-form .recurrence-card {
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--space-4);
}
.task-form .recurrence-switch {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    cursor: pointer; margin: 0;
}
.task-form .recurrence-switch__text {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-dark-teal);
}
.task-form .recurrence-switch__text [data-lucide],
.task-form .recurrence-switch__text svg { color: var(--color-famivel-blue); }
.task-form .recurrence-fields {
    display: flex; flex-direction: column; gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(0, 59, 65, 0.08);
}
.task-form .form-hint { font-size: var(--text-xs); color: var(--text-muted); margin: 4px 0 0; }

@media (max-width: 640px) {
    .task-form .form-row { grid-template-columns: 1fr; }
    .task-item__actions { opacity: 1; }
}

/* ============================================================
   #17 — Todoist integrácia (settings + indikátory)
   ============================================================ */

.status-card { padding: 14px 18px; border-radius: 8px; margin: 16px 0; font-size: 14px; }
.status-card--ok    { background: var(--status-done-bg);    color: var(--status-done-text);    border-left: 3px solid var(--status-done-text); }
.status-card--error { background: var(--deadline-overdue-bg); color: var(--deadline-overdue-text); border-left: 3px solid var(--deadline-overdue-text); }
.status-card code { background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 3px; font-family: 'Monaco', monospace; font-size: 12px; }

.status-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.status-pill--ok    { background: var(--status-done-bg);      color: var(--status-done-text); }
.status-pill--warn  { background: var(--status-paused-bg);    color: var(--status-paused-text); }
.status-pill--error { background: var(--deadline-overdue-bg); color: var(--deadline-overdue-text); }

.settings-section { margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--color-aqua-shade-1); }
.settings-section:first-of-type { border-top: none; padding-top: 0; }
.settings-section h2 { font-size: 16px; font-weight: 600; color: var(--color-dark-teal); margin: 0 0 8px; }
.settings-section .hint { font-size: 12px; color: var(--color-dark-teal-tint-2); margin: 0 0 12px; }

.mapping-table {
    width: 100%; border-collapse: collapse; margin: 12px 0; background: var(--bg-surface);
    border: 1px solid var(--color-aqua-shade-1); border-radius: 8px; overflow: hidden;
}
.mapping-table th {
    background: var(--color-aqua-tint-1); padding: 10px 12px; text-align: left; font-size: 12px;
    font-weight: 600; color: var(--color-dark-teal-tint-1); text-transform: uppercase; letter-spacing: 0.3px;
}
.mapping-table td { padding: 10px 12px; border-top: 1px solid var(--color-aqua-shade-1); font-size: 13px; }
.mapping-table tr:hover { background: var(--color-aqua-tint-1); }

.area-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }

/* Task source — Todoist (zámerný externý accent, bez brand tokenu) */
.task-source--todoist { background: #F3E8FF; color: #6B3FA0; }
.task-source--todoist a { color: inherit; text-decoration: none; }
.task-source--todoist a:hover { text-decoration: underline; }
.task-source--error { background: var(--deadline-overdue-bg); color: var(--deadline-overdue-text); }
.sync-error-detail { display: block; color: var(--deadline-overdue-text); }

/* #17a — warn banner + debug box */
.status-card--warn { background: var(--status-paused-bg); color: var(--status-paused-text); border-left: 3px solid var(--status-paused-text); }
.debug-info { margin-top: 12px; background: var(--color-aqua-tint-1); padding: 12px; border-radius: 6px; }
.debug-info pre { font-family: var(--font-mono); font-size: 12px; margin: 0 0 8px; white-space: pre-wrap; }

/* ============================================================
   #18 — UI polish (Linear + Notion + Mercury hybrid)
   ============================================================ */

/* ---- Lucide ikony ---- */
[data-lucide] { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.btn [data-lucide] { margin-right: 0; }
/* Faza 34b: zjednotené ikony nadpisov na color-blue-shade-2 (#45BBCE).
   Pôvodne color-blue (#72E6EF) bol bright cyan — nečitateľný ako foreground
   na svetlom pozadí. Cyan zostáva pre borders/backgrounds/accents v rest of UI. */
.section-title [data-lucide] { margin-right: var(--space-2); color: var(--text-link); vertical-align: -2px; }
.page-header h1 [data-lucide] { color: var(--text-link); vertical-align: -3px; margin-right: var(--space-2); }

/* ---- Typography ---- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
h3 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* ---- Buttons (zjednotené) ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base); font-weight: var(--font-medium); font-family: inherit;
    line-height: 1.4;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: all var(--transition-base);
}
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn--primary { background: var(--color-blue); color: var(--surface-inverse); font-weight: var(--font-semibold); }
.btn--primary:hover { background: var(--color-blue-shade-1); transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.btn--secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.btn--danger { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); }
.btn--danger:hover { background: var(--status-danger-text); color: #fff; }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-md); }
.btn--icon-only { padding: var(--space-2); width: 36px; height: 36px; }
.btn--icon-only [data-lucide] { margin: 0; }

/* ---- Inputs ---- */
input[type="text"], input[type="email"], input[type="date"], input[type="search"],
input[type="password"], select, textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal);
    color: var(--text-primary); background: var(--bg-surface);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(114, 230, 239, 0.15);
}

/* ---- Cards / surfaces ---- */
.card, .section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    transition: all var(--transition-base);
}
.card--interactive { cursor: pointer; }
.card--interactive:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---- F1 Dashboard stat cards ---- */
.stat-card {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: var(--space-5);
    cursor: pointer; transition: all var(--transition-base);
}
.stat-card:hover { border-color: var(--color-blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card__count { font-size: 42px; font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; margin: var(--space-2) 0; }
.stat-card__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }

/* ---- F2 Project header ---- */
.project-title { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; margin: 0; }
.project-code-large { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-muted); background: var(--bg-subtle); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); }

/* ---- F3 Task list item (Linear-like) ---- */
.task-item {
    display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3);
    align-items: flex-start; padding: var(--space-3) var(--space-4);
    background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.task-item:hover { border-color: var(--border-default); background: var(--bg-surface-hover); }
.task-checkbox-toggle { width: 18px; height: 18px; cursor: pointer; margin-top: 2px; accent-color: var(--color-blue); }
.task-item__title { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-primary); line-height: 1.4; margin-bottom: var(--space-1); }
.task-item--done .task-item__title { text-decoration: line-through; color: var(--text-muted); }
.task-item__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }

/* ---- F4 Empty states ---- */
.empty-state {
    text-align: center; padding: var(--space-12) var(--space-6);
    background: var(--bg-subtle); border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg); margin: var(--space-8) 0;
}
.empty-state__icon { width: 48px; height: 48px; margin: 0 auto var(--space-4); color: var(--text-muted); opacity: 0.5; }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0 0 var(--space-2); }
.empty-state__description, .empty-state__text { font-size: var(--text-base); color: var(--text-muted); max-width: 360px; margin: 0 auto var(--space-5); line-height: var(--leading-relaxed); }

/* ---- G Mikro-interakcie ---- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.main-content { animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1); }
.flash-stack .alert { animation: slideInRight 200ms cubic-bezier(0.4, 0, 0.2, 1); }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-default); border-top-color: var(--color-blue); border-radius: var(--radius-full); animation: spin 600ms linear infinite; }
.skeleton { background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--border-subtle) 50%, var(--bg-subtle) 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); }

.user-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-blue) 0%, var(--text-link) 100%); color: var(--surface-inverse); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-bold); flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: var(--shadow-xs); }
.user-avatar--lg { width: 40px; height: 40px; font-size: var(--text-sm); }
.user-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.user-cell .user-avatar:nth-of-type(odd)  { background: linear-gradient(135deg, var(--color-blue) 0%, var(--text-link) 100%); }
.user-cell .user-avatar:nth-of-type(even) { background: linear-gradient(135deg, var(--color-apricot) 0%, var(--color-apricot-shade-2) 100%); }
[data-theme="dark"] .user-avatar { background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-shade-1) 100%); color: var(--surface-inverse); box-shadow: var(--shadow-sm); }

.status-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); border-radius: var(--radius-xs); }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--text-primary); color: var(--bg-surface);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs);
    font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity var(--transition-fast); z-index: var(--z-dropdown);
}
[data-tooltip]:hover::after { opacity: 1; }

/* ============================================================
   #18b — viditeľný polish (spin, hover lift, flash, focus)
   ============================================================ */

/* Spinning lucide (loader) + size enforcement na placeholder <i> */
.spin { animation: spin 1s linear infinite; }
[data-lucide][width="12"] { width: 12px !important; height: 12px !important; }
[data-lucide][width="14"] { width: 14px !important; height: 14px !important; }

/* D — hover lift na riadkoch */
.task-item { cursor: default; position: relative; transition: all var(--transition-base); }
.task-item:hover { border-color: var(--color-blue); background: var(--bg-surface-hover); box-shadow: var(--shadow-sm); transform: translateX(2px); }

.table tbody tr { transition: background var(--transition-base), box-shadow var(--transition-base); }
.table tbody tr:hover { background: var(--bg-surface-hover); box-shadow: inset 3px 0 0 var(--color-blue); }

.subproject-card { transition: all var(--transition-base); }
.subproject-card:hover { border-color: var(--color-blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.attention-item { transition: all var(--transition-base); }
.attention-item:hover { box-shadow: var(--shadow-md); transform: translateX(2px); }

.activity-feed__item { transition: background var(--transition-fast); border-radius: var(--radius-sm); }
.activity-feed__item:hover { background: var(--bg-surface-hover); }

/* E — flash polish (reálna trieda je .alert), badge pulse, section-title align */
.flash-stack .alert { animation: flashIn 300ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm); }
@keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.sidebar-badge:not(:empty) { animation: subtlePulse 2s ease-in-out infinite; }
@keyframes subtlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.section-title { display: flex; align-items: center; gap: var(--space-2); }
.section-title [data-lucide] { color: var(--text-link); }

*:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: var(--radius-xs); }
button:focus-visible, a:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ============================================================
   #18c — UX fixes (názov→link, stat-panel header/close)
   ============================================================ */
.project-name-link { color: var(--text-primary); text-decoration: none; font-weight: var(--font-medium); transition: color var(--transition-fast); }
.project-name-link:hover { color: var(--text-link); text-decoration: none; }

.stat-panel__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.stat-panel__title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; }
.stat-panel__close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.stat-panel__close:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* ============================================================
   #19 — Calm Aqua: akcenty + glass filter + hover lift
   ============================================================ */

/* Primárne tlačidlo — jemný turquoise glow */
.btn--primary { box-shadow: 0 2px 8px -2px rgba(114, 230, 239, 0.50); }
.btn--primary:hover { box-shadow: 0 6px 16px -4px rgba(114, 230, 239, 0.55); }

/* Active chip → pokojné dark teal namiesto sýteho turquoise fillu.
   --surface-inverse ostáva tmavé aj v dark mode (na rozdiel od --color-dark-teal). */
.chip--active {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(0, 59, 65, 0.35);
}
.chip--active:hover {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: #fff;
    filter: brightness(1.12);
}
.chip--active .chip__count { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Filter bar → decentný glass */
.filter-bar {
    background: var(--glass-surface);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* Karty — výraznejší, plynulejší hover lift */
.card--interactive:hover,
.subproject-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ============================================================
   #19b — Calm Aqua: stlmenie tyrkysovej (turquoise = len akcent)
   Dekor (ikony/avatary/railing) → pokojný teal; sýta --color-blue
   ostáva len pre primárne CTA + focus ring. Mode-safe: --color-blue-shade-2
   a --color-dark-teal-tint-* fungujú aj v dark mode.
   ============================================================ */

/* Dekoratívne ikony v nadpisoch/sekciách → pokojná teal namiesto neónu */
.page-header h1 [data-lucide],
.page-header__title [data-lucide],
.section-title [data-lucide],
.dashboard__section-title [data-lucide],
.stat-card [data-lucide] { color: var(--color-dark-teal-tint-2); }

/* Avatary → pokojnejší teal gradient (dark mode si drží vlastný override) */
.user-avatar { background: linear-gradient(135deg, var(--text-link) 0%, var(--color-dark-teal-tint-1) 100%); }
.user-cell .user-avatar:nth-of-type(odd) { background: linear-gradient(135deg, var(--text-link) 0%, var(--color-dark-teal-tint-1) 100%); }

/* Hover rail v tabuľke + sidebar badge → menej neónové */
.table tbody tr:hover { box-shadow: inset 3px 0 0 var(--text-link); }
.sidebar-badge { background: rgba(114, 230, 239, 0.18); color: var(--text-on-dark); }

/* ============================================================
   #19c → Faza 81/82: quick-add riadok nahradený dividerom. Vizuál RECYKLUJE
   .dashboard-task-divider (jeden zdroj štýlu) — tu len blokový margin pre /projekty
   kontext (override tesného dashboard marginu medzi filtrami a tabuľkou).
   ============================================================ */
.projects-divider { margin: 4px 0 16px; }

/* ============================================================
   #19d — Editovateľný názov + "open" tlačidlo, lucide chip ikony
   ============================================================ */
.project-name { font-weight: var(--font-medium); color: var(--text-primary); }
.inline-editable.project-name:hover { color: var(--color-dark-teal-tint-1); }

.project-open {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; flex-shrink: 0;
    width: 24px; height: 24px; margin-left: 6px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.project-row:hover .project-open { opacity: 1; }
.project-open:hover,
.project-open:focus-visible { background: var(--bg-subtle); color: var(--text-link); text-decoration: none; opacity: 1; }

/* Lucide chip ikony — tlmená monochromatická farba (namiesto farebných emoji) */
.chip__icon { opacity: 0.85; }

/* ============================================================
   #19e — Calm Aqua audit zvyšných obrazoviek
   (nudge dots namiesto emoji 🟢🟡🔴, stat-card hover dial-back)
   ============================================================ */

/* Faza 30e: .nudge-priority__icon legacy pravidlá odstránené —
   markup používa .nudge-priority-card__dot v #36 vrstve. */

/* Stat-card hover — neónová modrá → tlmená shade-2 */
.stat-card:hover { border-color: var(--text-link); }

/* ============================================================
   #20 — Responsive: touch targety, iOS zoom fix, mobile layouty
   ============================================================ */

/* iOS Safari zoom-on-focus prevention — vstupy potrebujú ≥16px */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="search"],
    input[type="password"], input[type="date"], input[type="tel"],
    input[type="number"], input[type="url"], select, textarea,
    .inline-text-input, .inline-date-input {
        font-size: 16px;
    }
}

/* Mobile (<640) — touch targety + komponenty zlomené do stĺpca */
@media (max-width: 640px) {
    /* Dotykové ciele ≥40px (Apple HIG min 44, mid-ground 40) */
    .btn { min-height: 40px; padding: 8px 16px; }
    .btn--sm { min-height: 32px; padding: 6px 12px; }
    .btn--icon-only { width: 40px; height: 40px; }

    /* Filter-bar → stack (každý field na svoj riadok) */
    .filter-bar { flex-direction: column; align-items: stretch; padding: var(--space-3); }
    .filter-bar > * { width: 100%; }
    .filter-bar__search, .filter-bar__select { flex: 1 1 100%; min-width: 0; max-width: none; }
    .multi-select { min-width: 0; width: 100%; }
    .multi-select__trigger { width: 100%; }

    /* Chip-row — vyššie čipy pre touch (stále scrollable) */
    .chip { padding: 9px 14px; min-height: 36px; }

    /* Open ikonka v zozname projektov — jasnejšia (touch nemá hover) */
    .project-open { opacity: 0.75; }
    .table tbody td.table__title .project-open { opacity: 1; }

    /* Inline dropdown nech sa zmestí do viewportu */
    .inline-dropdown { max-width: calc(100vw - 16px); }
    .inline-text-input { max-width: calc(100vw - 32px); }

    /* Nudge modal — kompaktnejšie padding */
    .nudge-modal__dialog { padding: var(--space-4); max-height: 95vh; }
}

/* Tablet (641–1024) — filter-bar so search na celý riadok, ostatné v rade */
@media (min-width: 641px) and (max-width: 1024px) {
    .filter-bar { gap: var(--space-2); }
    .filter-bar__search { flex: 1 1 100%; }
}

/* Print pravidlá presunuté do public/assets/css/print.css (faza 22). */

/* ============================================================
   #27 — Faza 24 / Prompt #22: terminology + inline edit metadata + area dots
   ============================================================ */

/* C5: inline-edit deadline + person popovers */
.inline-edit-deadline,
.inline-edit-start,
.inline-edit-person { position: relative; display: inline-block; }

.metadata-value-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 3px 8px;
    background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit; font-size: var(--text-sm);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}
.metadata-value-btn:hover { background: var(--bg-subtle); border-color: var(--border-subtle); }
.deadline-value--empty { color: var(--text-muted); font-style: italic; }
.deadline-value--overdue { color: var(--status-danger-text); font-weight: var(--font-semibold); }

.deadline-popover,
.person-popover {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 280px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: var(--space-3);
    z-index: var(--z-dropdown);
    animation: fadeIn 150ms ease;
}
.deadline-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit;
}
.deadline-popover__actions {
    display: flex; gap: var(--space-2); justify-content: flex-end;
    margin-top: var(--space-3);
}

/* === Faza 66f FIX: deadline kalendár v detaile úlohy = floating flatpickr popup ===
   Predtým (64d) bol INLINE + zväčšený v úzkom sidebari → rozšíril modal,
   horizontálny scroll, prekrýval „Hotovo". Teraz je flatpickr appended na BODY a
   auto-pozicovaný (flip), takže netlačí layout. Popover už drží len input + akcie,
   takže žiadny min-width 340 a input je viditeľný (klik = otvor kalendár).
   Calendar dostáva brand vzhľad z flatpickr-famipro.css (rozumná veľkosť ~320px). */
.task-meta__menu.deadline-popover { min-width: 0; width: 240px; }

.person-popover { min-width: 320px; max-height: 380px; display: flex; flex-direction: column; padding: var(--space-2); }
.person-search {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit; font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}
.person-list { flex: 1; overflow-y: auto; max-height: 260px; display: flex; flex-direction: column; gap: 2px; }
.person-option {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%;
    padding: 6px var(--space-3);
    background: transparent; border: none; border-radius: var(--radius-xs);
    cursor: pointer; text-align: left;
    font: inherit; font-size: var(--text-sm); color: var(--text-primary);
    transition: background var(--transition-fast);
}
.person-option:hover { background: var(--bg-surface-hover); }
.person-option[aria-current="true"] { background: var(--color-aqua-white); font-weight: var(--font-medium); }
.person-option--clear {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px; padding-top: 8px;
    color: var(--text-muted); font-style: italic;
}
.person-option [data-lucide="check"], .person-option svg.lucide-check { margin-left: auto; color: var(--color-dark-teal); }

/* Faza 43/S2: Area pill — JEDEN vzhľad pre tabuľky aj dashboard (predtým
   dva rôzne — tabuľka sivá bez --area-color, dashboard s bodkou+halo).
   Tabuľkový tvar (pill obdĺžnik), area-color tint v pozadí, čitateľný
   tmavší text. ŽIADNA bodka — text "GOV" sám reprezentuje oblasť cez
   farbu pozadia + border. Konzistentné všade. */
.area-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 44px;
    text-align: center;
    line-height: 1.2;
    /* Area tint: 14% pozadie + 50% border + tmavší area-color text (mixed
       s dark-teal pre čitateľnosť aj na svetlých área farbách ako žltá). */
    background: color-mix(in srgb, var(--area-color, #78909C) 14%, rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--area-color, #78909C) 45%, rgba(0, 59, 65, 0.08));
    color: color-mix(in srgb, var(--area-color, #78909C) 55%, var(--color-dark-teal));
    box-shadow: 0 1px 2px rgba(0, 59, 65, 0.04);
}
.area-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: var(--area-color, #78909C);
}
[data-theme="dark"] .area-pill {
    background: color-mix(in srgb, var(--area-color, #78909C) 22%, rgba(30, 50, 55, 0.65));
    border-color: color-mix(in srgb, var(--area-color, #78909C) 55%, rgba(255, 255, 255, 0.1));
    color: color-mix(in srgb, var(--area-color, #78909C) 70%, #FFFFFF);
}

/* F3: description editor hint */
.description-editor-hint {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.description-editor-hint code {
    background: var(--bg-subtle);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-family: var(--font-mono);
}
.description-editor-hint kbd {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-bottom-width: 2px;
    padding: 0 4px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* F1: HTML tabuľka v popise (slash menu Tabuľka) */
.description-rendered .content-table,
.description-rendered table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-3) 0;
    font-size: var(--text-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.description-rendered .content-table th,
.description-rendered table th {
    background: var(--bg-subtle);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: var(--font-semibold);
    border-bottom: 1px solid var(--border-default);
}
.description-rendered .content-table td,
.description-rendered table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.description-rendered .content-table tr:last-child td,
.description-rendered table tr:last-child td { border-bottom: none; }

/* E: projekty table actions — nové buttony zarovnať */
.projects-full-width .table__actions {
    display: flex; gap: var(--space-2);
    align-items: center; justify-content: flex-end;
    white-space: nowrap;
}
.projects-full-width .table__actions .btn { white-space: nowrap; }

/* Sub-project card adjustments (rebrand na Míľnik) */
.sub-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.sub-project-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
    text-decoration: none; color: inherit;
    transition: all var(--transition-fast);
}
.sub-project-card:hover {
    border-color: var(--text-link);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    text-decoration: none;
}
.sub-project-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sub-project-card__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.sub-project-card__footer { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }

.section-count {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 8px;
    background: var(--bg-subtle); color: var(--text-secondary);
    font-size: var(--text-xs); font-weight: var(--font-bold);
    border-radius: var(--radius-full);
}

/* ============================================================
   #26 — Faza 23 / Prompt #21: bug fixy + slash commands + glassmorphism + highlight v2
   ============================================================ */

/* A2: [hidden] globálne enforce nad menej-specifickými display rule (status-dropdown apod.) */
[hidden] { display: none !important; }

/* A4: HIGHLIGHT SYSTEM v2 — primary tlačidlo = dark teal solid, cyan len ako accent */
.btn--primary {
    background: var(--color-dark-teal);
    color: #fff;
    border: 1px solid var(--color-dark-teal);
    font-weight: var(--font-semibold);
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.18);
}
.btn--primary:hover {
    background: var(--color-dark-teal-tint-1);
    border-color: var(--color-dark-teal-tint-1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 59, 65, 0.22);
}
.btn--primary [data-lucide],
.btn--primary svg.lucide { color: var(--color-blue); }

/* Cyan tlačidlo — sekundárne CTA (napr. quick-add v zozname) */
.btn--cyan {
    background: var(--color-blue);
    color: var(--color-dark-teal);
    border: 1px solid var(--color-blue);
    font-weight: var(--font-semibold);
}
.btn--cyan:hover {
    background: var(--color-blue-shade-1);
    border-color: var(--color-blue-shade-1);
}

/* Sidebar active item — calm, čitateľný */
.sidebar__item--active {
    background: rgba(114, 230, 239, 0.15);
    color: #fff;
    border-left: 3px solid var(--color-blue);
    font-weight: var(--font-medium);
}
.sidebar__item--active::before { display: none; }  /* nahrádza glow rail z #19 */

/* Chip active — zostáva dark teal solid (faza 19), len posilniť kontrast */
.chip--active {
    background: var(--color-dark-teal);
    color: #fff;
    border-color: var(--color-dark-teal);
}
.chip--active [data-lucide] { color: var(--color-blue); }

/* Selected/focus row v projects table */
.projects-full-width .table tbody tr:focus-within,
.projects-full-width .table tbody tr.selected {
    background: var(--color-aqua-white);
    box-shadow: inset 3px 0 0 var(--color-blue);
}

/* Text selection */
::selection { background: var(--color-blue); color: var(--color-dark-teal); }

/* Input/textarea focus — dark teal namiesto cyan ring */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.12);
}

/* A3: projekty tabuľka full-width + fixed column layout */
.projects-full-width { padding: 0; max-width: none; width: 100%; }
.projects-full-width .table { width: 100%; table-layout: fixed; }
.projects-full-width .table th:nth-child(1) { width: auto; min-width: 320px; }
.projects-full-width .table th:nth-child(2) { width: 100px; }
.projects-full-width .table th:nth-child(3) { width: 160px; }
.projects-full-width .table th:nth-child(4) { width: 140px; }
.projects-full-width .table th:nth-child(5) { width: 180px; }
.projects-full-width .table th:nth-child(6) { width: 130px; color: var(--text-muted); font-size: var(--text-xs); }
.projects-full-width .table th:last-child,
.projects-full-width .table td:last-child { width: 130px; text-align: right; white-space: nowrap; }
.projects-full-width .table td:nth-child(1) { overflow: hidden; text-overflow: ellipsis; }

/* C3-C5: GLASSMORPHISM — sidebar, modaly/popovery, toast, body gradient */

/* Body subtle gradient field (light + dark) */
body {
    background:
        radial-gradient(circle at 20% 20%, rgba(114, 230, 239, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 208, 176, 0.06) 0%, transparent 40%),
        var(--bg-app);
    background-attachment: fixed;
    min-height: 100vh;
}
[data-theme="dark"] body {
    background:
        radial-gradient(circle at 20% 20%, rgba(114, 230, 239, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 208, 176, 0.03) 0%, transparent 40%),
        var(--bg-app);
    background-attachment: fixed;
}

/* Sidebar frosted glass nad gradientom */
.sidebar {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-right: 1px solid var(--glass-border);
}
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(114,230,239,0.04) 0%, transparent 50%, rgba(0,59,65,0.10) 100%);
    pointer-events: none;
    z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* Modaly + popovery + dropdowny — frosted glass strong */
.slash-menu,
.status-dropdown,
.row-actions__dropdown,
.row-actions__popover,
.kebab-dropdown,
.modal__dialog,
.nudge-modal__dialog,
.inline-dropdown,
.user-menu__dropdown {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
}
[data-theme="dark"] .slash-menu,
[data-theme="dark"] .status-dropdown,
[data-theme="dark"] .row-actions__dropdown,
[data-theme="dark"] .row-actions__popover,
[data-theme="dark"] .kebab-dropdown,
[data-theme="dark"] .modal__dialog,
[data-theme="dark"] .nudge-modal__dialog,
[data-theme="dark"] .inline-dropdown,
[data-theme="dark"] .user-menu__dropdown {
    border-color: rgba(255, 255, 255, 0.10);
}

/* Toast glass dark */
.toast {
    background: var(--glass-bg-dark) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: #fff;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* C6: fallback ak prehliadač nevie backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .sidebar, .slash-menu, .status-dropdown, .row-actions__dropdown,
    .row-actions__popover, .kebab-dropdown, .modal__dialog,
    .nudge-modal__dialog, .inline-dropdown, .user-menu__dropdown, .toast {
        background: var(--bg-elevated);
    }
}

/* B3: SLASH MENU */
.slash-menu {
    position: absolute;
    width: 320px;
    max-height: 380px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    z-index: 1100;
    padding: var(--space-1);
    animation: slashMenuIn 150ms ease;
}
@keyframes slashMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.slash-menu__header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--font-semibold);
}
.slash-menu__empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.slash-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.slash-menu__item--selected,
.slash-menu__item:hover {
    background: var(--color-aqua-white);
}
.slash-menu__item-icon {
    flex-shrink: 0; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border-radius: var(--radius-sm);
    color: var(--color-dark-teal);
}
.slash-menu__item--selected .slash-menu__item-icon {
    background: var(--color-blue);
    color: var(--color-dark-teal);
}
.slash-menu__item-text { flex: 1; min-width: 0; }
.slash-menu__item-label       { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); }
.slash-menu__item-description { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* B5: rendered details/summary v popise + checkbox accent */
.description-rendered details {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-2) 0;
}
.description-rendered details summary {
    cursor: pointer;
    font-weight: var(--font-medium);
    padding: var(--space-1) 0;
    user-select: none;
}
.description-rendered details summary:hover { color: var(--color-dark-teal-tint-1); }
.description-rendered details[open] summary { margin-bottom: var(--space-2); }
.description-rendered input[type="checkbox"] {
    margin-right: var(--space-2);
    accent-color: var(--color-dark-teal);
}

/* Description editor sám má text-selection a focus ladený — drobnosti */
.description-editor {
    border-color: var(--color-dark-teal);
}
.description-editor:focus {
    box-shadow: 0 0 0 4px rgba(0, 59, 65, 0.10);
}

/* ============================================================
   #25 — Faza 22 / Prompt #20: inline editing + UX polish
   ============================================================ */

/* --- Dashboard greeting: prominent date (B) --- */
.dashboard-greeting__meta { margin-bottom: var(--space-3); }
.dashboard-greeting__date {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    text-transform: lowercase;
}
.dashboard-greeting__date::first-letter { text-transform: uppercase; }

/* --- C2: wider inline rename input --- */
.inline-text-input {
    width: 100%;
    min-width: 360px;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--bg-surface);
    box-sizing: border-box;
}
.inline-text-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(114, 230, 239, 0.15);
}
.col-title .inline-text-input { min-width: 320px; }
.table__title:has(.inline-text-input) { min-width: 360px; }

/* --- A4: project description Notion-style editor --- */
.project-description {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}
.project-description .section-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }

.description-container { position: relative; margin-top: var(--space-3); }

.description-rendered {
    min-height: 60px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: text;
    transition: background var(--transition-fast);
    line-height: var(--leading-relaxed);
}
.description-rendered:hover { background: var(--bg-surface-hover); }
.description-rendered:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    background: var(--bg-surface-hover);
}
.description-rendered h1,
.description-rendered h2,
.description-rendered h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.description-rendered h1:first-child,
.description-rendered h2:first-child,
.description-rendered h3:first-child { margin-top: 0; }
.description-rendered p { margin: 0 0 var(--space-3); }
.description-rendered ul,
.description-rendered ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.description-rendered code {
    background: var(--bg-subtle); padding: 2px 6px;
    border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 0.9em;
}
.description-rendered pre {
    background: var(--bg-subtle); padding: var(--space-3);
    border-radius: var(--radius-sm); overflow-x: auto; margin: 0 0 var(--space-3);
}
.description-rendered blockquote {
    border-left: 3px solid var(--color-blue);
    padding-left: var(--space-3); color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}

.description-editor {
    width: 100%;
    min-height: 180px;
    padding: var(--space-3);
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    background: var(--bg-surface);
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}
.description-editor:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(114, 230, 239, 0.15);
}

.description-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
}
.description-empty [data-lucide],
.description-empty svg { opacity: 0.4; margin-bottom: var(--space-2); }
.description-empty .hint {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    color: var(--text-muted);
}

.description-save-status {
    position: absolute;
    top: -28px; right: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-xs);
    color: var(--status-success-text);
    background: var(--status-success-bg);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
}
.description-save-status--error { color: var(--status-danger-text); background: var(--status-danger-bg); }
/* Faza 74: „Ukladám…" — neutrálny tón + rotujúci loader (nie success-zelená). */
.description-save-status--saving { color: var(--color-dark-teal); background: var(--color-aqua-tint-1); }
.description-save-status--saving [data-lucide="loader"],
.description-save-status--saving svg.lucide-loader {
    animation: famipro-spin 0.8s linear infinite;
}
@keyframes famipro-spin { to { transform: rotate(360deg); } }

/* --- D: inline status edit dropdown v project detail --- */
.inline-edit-status { position: relative; display: inline-block; }
.inline-edit-trigger {
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    font: inherit;
    display: inline-flex; align-items: center; gap: 4px;
}
.inline-edit-trigger:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.inline-edit-trigger i[data-lucide] { opacity: 0.7; }

.status-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    padding: var(--space-1);
    display: flex; flex-direction: column; gap: 2px;
}
.status-option {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: transparent; border: none; cursor: pointer;
    font: inherit; font-size: var(--text-sm); color: var(--text-primary);
    text-align: left; border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
/* Faza 60p: jemný farebný bod statusu (rovnaká mapa ako pilulky). */
.status-option::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.status-option--planning::before    { background: var(--badge-planning-text); }
.status-option--in_progress::before { background: var(--badge-in-progress-text); }
.status-option--waiting::before      { background: var(--badge-waiting-text); }
.status-option--done::before         { background: var(--badge-done-text); }
.status-option--cancelled::before    { background: var(--status-cancelled-text); }
/* Check ikona aktuálneho statusu na pravý okraj (predtým to riešil space-between). */
.status-option > i[data-lucide="check"],
.status-option > svg.lucide { margin-left: auto; }
.status-option:hover { background: var(--bg-subtle); }
.status-option[aria-current="true"] { background: var(--bg-subtle); font-weight: var(--font-semibold); }
.status-option i[data-lucide="check"] { color: var(--status-success-text); }

/* --- E4: widget actions (per-widget print button) --- */
.widget__actions { display: flex; align-items: center; gap: var(--space-2); }
.widget__print-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
    display: inline-flex; align-items: center; justify-content: center;
}
.widget__print-btn:hover {
    background: var(--bg-subtle);
    color: var(--text-link);
}

/* ============================================================
   #21 — Dashboard: Triage Timeline + Capacity + Active Digest + Activity
   ============================================================ */

/* --- Calm Greeting Bar --- */
.calm-greeting {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    background: var(--glass-surface);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.calm-greeting__main { flex: 1; min-width: 0; }
.calm-greeting__date { margin: 0 0 4px; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.calm-greeting__title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; }
.calm-greeting__filter { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--text-secondary); margin-left: 6px; }
.calm-greeting__filter a { color: var(--text-link); }
.calm-greeting__summary { margin: 0; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-snug); }
.calm-summary--alert { color: var(--status-danger-text); font-weight: var(--font-semibold); }
/* Faza 39/S2: keď je calm-summary--alert <a>, daj mu link affordance bez 90s underline. */
a.calm-summary--alert {
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
    transition: color 140ms ease, border-color 140ms ease;
}
a.calm-summary--alert:hover {
    color: var(--deadline-overdue-text);
    border-bottom-style: solid;
}

/* "Dnes ťa čaká: …" — link na /dnes pod headline */
.dashboard-today-summary {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.dashboard-today-summary__link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-dark-teal);
    text-decoration: none;
    font-weight: var(--font-medium);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(114, 230, 239, 0.12);
    /* Faza 60n: hover NEMENÍ rozmer (žiadne gap/padding) — len pozadie + tieň
       cez spring. Predtým gap 6→9px naťahovalo pilulku. */
    transition: background 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dashboard-today-summary__link:hover,
.dashboard-today-summary__link:focus-visible {
    background: rgba(114, 230, 239, 0.25);
    box-shadow: 0 2px 10px rgba(114, 230, 239, 0.30);
    /* Override globálneho a:hover { text-decoration: underline } (zakázaný underline). */
    text-decoration: none;
}
.dashboard-today-summary__link strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}
.dashboard-today-summary__arrow {
    font-size: var(--text-base);
    color: var(--color-dark-teal);
}
.calm-greeting__right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; }
.calm-greeting__sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); display: inline-block; }
.sync-dot--ok { background: var(--status-success-text); }
.sync-dot--warn { background: var(--status-warning-text); }

.icon-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast); }
.icon-pill:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.icon-pill__badge { position: absolute; top: -3px; right: -3px; background: var(--color-apricot-shade-1); color: #fff; font-size: 10px; font-weight: var(--font-bold); border-radius: var(--radius-full); padding: 1px 5px; min-width: 16px; text-align: center; line-height: 1.4; border: 2px solid var(--bg-app); }

/* --- Timeline Lane (4 stĺpce) --- */
.tl-lane { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.tl-col { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-4); display: flex; flex-direction: column; min-height: 220px; transition: box-shadow var(--transition-base); border-top: 4px solid var(--border-default); }
.tl-col:hover { box-shadow: var(--shadow-md); }
.tl-col--red   { border-top-color: var(--status-danger-text); }
.tl-col--amber { border-top-color: var(--color-apricot-shade-1); }
.tl-col--blue  { border-top-color: var(--text-link); }
.tl-col--grey  { border-top-color: var(--border-strong); opacity: 0.92; }
.tl-col__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.tl-col__title { margin: 0; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.tl-col__count { background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--font-bold); padding: 2px 9px; border-radius: var(--radius-full); }
.tl-col__empty { margin: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-muted); text-align: center; padding: var(--space-5) var(--space-3); }
.tl-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.tl-col__more { display: block; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-link); text-decoration: none; text-align: right; }
.tl-col__more:hover { text-decoration: underline; }

.tl-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; padding: 8px 10px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.tl-item:hover { background: var(--bg-surface-hover); border-color: var(--border-default); transform: translateX(1px); }
.tl-item__area { font-size: 10px; font-weight: var(--font-bold); padding: 2px 6px; border-radius: var(--radius-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; align-self: start; margin-top: 2px; }
.tl-item__body { min-width: 0; }
.tl-item__title { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); text-decoration: none; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item__title:hover { color: var(--text-link); text-decoration: none; }
.tl-item__parent { color: var(--text-muted); font-weight: var(--font-normal); font-size: var(--text-xs); }
.tl-item__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--text-xs); flex-wrap: wrap; }
.tl-item__date { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.tl-item__date--overdue { color: var(--status-danger-text); font-weight: var(--font-semibold); }
.tl-item__rel { font-size: 11px; color: inherit; }
.tl-item__avatar { flex-shrink: 0; align-self: start; margin-top: 1px; }

/* --- Capacity Strip --- */
.cap-strip { margin-bottom: var(--space-7); }
.dashboard-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.dashboard-section-head__link { font-size: var(--text-xs); color: var(--text-secondary); text-decoration: none; }
.dashboard-section-head__link:hover { color: var(--text-link); text-decoration: underline; }
.dashboard-section-head--quiet { opacity: 0.85; }

.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.cap-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: all var(--transition-base); position: relative; }
.cap-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; border-left-color: var(--text-link); }
.cap-card--overdue { border-left-color: var(--status-danger-text); }
.cap-card--active { background: var(--bg-subtle); border-color: var(--text-link); border-left-color: var(--text-link); }
.cap-card__top { display: flex; align-items: center; gap: var(--space-3); }
.cap-card__id { flex: 1; min-width: 0; }
.cap-card__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-card__num { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.cap-card__overdue { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--status-danger-bg); color: var(--status-danger-text); font-size: 10px; font-weight: var(--font-bold); padding: 2px 7px; border-radius: var(--radius-full); }
.cap-card__bystatus { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
.cap-card__bystatus span { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--font-semibold); color: var(--text-primary); }
.cap-card__bystatus small { color: var(--text-muted); font-weight: var(--font-normal); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.cap-card__deadlines { list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.cap-card__deadlines li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-card__dl { color: var(--text-primary); font-weight: var(--font-medium); }

/* --- Active Digest --- */
.active-digest { margin-bottom: var(--space-7); }
.active-digest__table { font-size: var(--text-sm); }

/* --- Calm Activity Strip --- */
.calm-activity { font-size: var(--text-xs); opacity: 0.85; padding-top: var(--space-5); margin-top: var(--space-4); border-top: 1px dashed var(--border-default); }
.calm-activity__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.calm-activity__row { display: flex; align-items: center; gap: var(--space-3); padding: 4px 0; }
.calm-activity__text { flex: 1; color: var(--text-secondary); }
.calm-activity__text strong { color: var(--text-primary); font-weight: var(--font-semibold); }
.calm-activity__time { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.code-mini { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: var(--bg-subtle); padding: 1px 5px; border-radius: var(--radius-xs); }

/* --- Responsive --- */
@media (max-width: 1180px) {
    .tl-lane { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tl-lane { grid-template-columns: 1fr; gap: var(--space-3); }
    .calm-greeting { flex-direction: column; padding: var(--space-4); }
    .calm-greeting__right { width: 100%; justify-content: flex-start; }
    .calm-greeting__title { font-size: var(--text-xl); }
    .calm-greeting__sync-label { display: none; }
    .cap-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   #22 — Inline delete: kebab + confirm popover + undo toast
   ============================================================ */

.row-actions {
    position: relative;
    display: inline-block;
}
.row-actions__kebab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; border: none; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
    opacity: 0.55;
    transition: all var(--transition-fast);
}
.row-actions__kebab:hover,
.row-actions__kebab:focus-visible {
    background: var(--bg-subtle); color: var(--text-primary); opacity: 1;
    outline: none;
}
.project-row:hover .row-actions__kebab,
.milestone:hover .row-actions__kebab,
.tr:hover .row-actions__kebab { opacity: 0.85; }

.row-actions__dropdown {
    position: absolute; top: calc(100% + 4px); right: 0;
    z-index: var(--z-dropdown);
    min-width: 180px;
    padding: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 2px;
}
.row-actions__item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; width: 100%;
    background: transparent; border: none; cursor: pointer;
    font: inherit; font-size: var(--text-sm); color: var(--text-primary);
    border-radius: var(--radius-sm); text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.row-actions__item:hover { background: var(--bg-subtle); }
.row-actions__item--danger { color: var(--status-danger-text); }
.row-actions__item--danger:hover { background: var(--status-danger-bg); color: var(--status-danger-text); }

/* Faza 36a: širšie popovera + word-break — pôvodne 280px + tesný padding
   spôsoboval overflow textu pri dlhšom názve projektu / meta. */
.row-actions__popover {
    position: absolute; top: calc(100% + 4px); right: 0;
    z-index: var(--z-dropdown);
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.row-actions__popover-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}
.row-actions__popover-hint {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs); color: var(--status-warning-text);
    line-height: var(--leading-snug);
}
.row-actions__popover-meta {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs); color: var(--text-muted);
    line-height: var(--leading-snug);
}
.row-actions__popover-actions {
    display: flex; gap: var(--space-2); justify-content: flex-end;
    flex-wrap: wrap;
}

/* Danger button — chýbal v Calm Aqua palete pre delete confirms */
.btn--danger { background: var(--status-danger-text); color: #fff; border-color: var(--status-danger-text); }
.btn--danger:hover { background: var(--deadline-overdue-text); border-color: var(--deadline-overdue-text); color: #fff; transform: translateY(-1px); }

/* --- Toast s action callbackom + progress barom (undo) --- */
.toast--with-action {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding-right: var(--space-2);
    overflow: hidden;
    max-width: min(420px, calc(100vw - 32px));
}
.toast__msg { flex: 1; }
.toast__action {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}
.toast__action:hover { background: rgba(255, 255, 255, 0.28); }
.toast__progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--color-blue);
    transform-origin: left center;
    transform: scaleX(1);
}
.toast--with-action.toast--success .toast__progress { background: rgba(255, 255, 255, 0.6); }
.toast--with-action.toast--error   .toast__progress { background: rgba(255, 255, 255, 0.6); }

/* Mobile — popover full-width vľavo */
@media (max-width: 640px) {
    .row-actions__popover { right: auto; left: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 32px)); }
    .row-actions__dropdown { right: auto; left: 50%; transform: translateX(-50%); }
    .toast--with-action { width: calc(100vw - 32px); max-width: none; }
}

/* ============================================================
   #24 — Faza 21 / Prompt #19: Widget-based dashboard + Settings + G fixes
   ============================================================ */

/* Greeting — adaptované z #21 calm-greeting */
.dashboard-greeting {
    background: var(--glass-surface);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}
.dashboard-greeting__meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.dashboard-greeting__main { margin-bottom: var(--space-3); }
.dashboard-greeting__title { margin: 0 0 4px; font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); letter-spacing: -0.02em; }
.dashboard-greeting__headline { margin: 0; font-size: var(--text-base); color: var(--text-secondary); }
.dashboard-greeting__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sync-indicator { display: inline-flex; align-items: center; gap: 6px; }

/* --- Widgets (collapsible details) --- */
.dashboard-widgets { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }

/* Faza 66o: ✦ divider — oddelí úlohové widgety od projektových. Decentný, brandový. */
.dashboard-task-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 calc(var(--space-1) * -1);
    user-select: none;
}
.dashboard-task-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 59, 65, 0.12), transparent);
}
.dashboard-task-divider__star {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--famivel-blue, #72E6EF);
    opacity: 0.7;
}
.dashboard-task-divider__star svg { width: 100%; height: 100%; }
.dashboard-task-divider__label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.widget {
    /* Faza 35d: glass konzistencia s rest of UI (rovnaký recept ako .glass-card) */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.04), 0 4px 12px rgba(0, 59, 65, 0.06);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform 180ms ease;
}
.widget:hover {
    border-color: rgba(0, 59, 65, 0.12);
    box-shadow: 0 2px 6px rgba(0, 59, 65, 0.06), 0 8px 20px rgba(0, 59, 65, 0.08);
}
.widget[open] { box-shadow: 0 2px 6px rgba(0, 59, 65, 0.08), 0 12px 28px rgba(0, 59, 65, 0.1); }
[data-theme="dark"] .widget {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.widget__header {
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none; list-style: none;
}
.widget__header::-webkit-details-marker { display: none; }
.widget__header::marker { content: ''; }
.widget__header:hover { background: var(--bg-subtle); }
.widget__header:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }

.widget__title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary);
}
.widget__title i[data-lucide] { color: var(--color-dark-teal-tint-2); }

.widget__badge {
    padding: 2px 8px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-bold);
}
.widget__badge--danger  { background: var(--status-danger-bg);  color: var(--status-danger-text); }
.widget__badge--warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.widget__badge--info    { background: var(--status-info-bg);    color: var(--status-info-text); }

.widget__chevron { color: var(--text-muted); transition: transform var(--transition-base); }
.widget[open] .widget__chevron { transform: rotate(180deg); }

.widget__body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }

.widget-empty { padding: var(--space-4); color: var(--text-muted); font-style: italic; text-align: center; margin: 0; }
.widget-more  { display: inline-block; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-link); text-decoration: none; }
.widget-more:hover { text-decoration: underline; }

/* --- Deadlines widget grid + G2 truncation fix --- */
.deadlines-grid { display: grid; gap: var(--space-3); }
.deadlines-grid--cols-1 { grid-template-columns: 1fr; }
.deadlines-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.deadlines-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.deadlines-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.deadlines-col {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border-top: 3px solid var(--border-default);
    min-width: 0;
}
/* Faza 35d: decentnejšie farby — apricot pre overdue (#FFD0B0 brand accent
   namiesto alarmujúcej červenej), neutral šedá pre tento týždeň/budúce. */
.deadlines-col--danger  { border-top-color: var(--color-apricot); }
.deadlines-col--warning { border-top-color: var(--border-default); }
.deadlines-col--info    { border-top-color: var(--border-default); }
.deadlines-col--neutral { border-top-color: var(--border-subtle); }

.deadlines-col__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.deadlines-col__count { background: var(--bg-surface); padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); }
.deadlines-col__empty { padding: var(--space-3); text-align: center; color: var(--text-muted); font-size: var(--text-sm); font-style: italic; }

.deadlines-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.deadline-item {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
    min-width: 0;
}
.deadline-item:hover { border-color: var(--text-link); box-shadow: var(--shadow-xs); }

.deadline-item__link {
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none; color: var(--text-primary);
    min-width: 0;
}
.deadline-item__title {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--text-sm); font-weight: var(--font-medium);
}
.deadline-item__meta { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.deadline-item__days--overdue { color: var(--status-danger-text); font-weight: var(--font-semibold); }

/* --- Attention widget compact --- */
.attention-list-compact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.attention-row { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-sm); min-width: 0; }
.attention-row--danger  { border-left-color: var(--status-danger-text); }
.attention-row--warning { border-left-color: var(--status-warning-text); }
.attention-row--info    { border-left-color: var(--status-info-text); }
.attention-row__icon { color: var(--text-muted); flex-shrink: 0; }
.attention-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); text-decoration: none; font-weight: var(--font-medium); }
.attention-row__title:hover { color: var(--text-link); }
.attention-row__detail { color: var(--text-muted); font-size: var(--text-xs); flex-shrink: 0; white-space: nowrap; }

/* --- My tasks widget --- */
.task-list-compact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.task-row { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--text-sm); min-width: 0; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.status-dot--planning    { background: var(--text-muted); }
.status-dot--in_progress { background: var(--text-link); }
.status-dot--waiting     { background: var(--status-warning-text); }
.status-dot--done        { background: var(--status-done-text); }
.task-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); text-decoration: none; }
.task-row__title:hover { color: var(--text-link); }
.task-row__project { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.task-row__due { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.task-row__due--overdue { color: var(--status-danger-text); font-weight: var(--font-semibold); }

/* --- Recent projects widget --- */
.recent-projects-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.recent-project-row { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--text-sm); min-width: 0; }
.recent-project-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); text-decoration: none; font-weight: var(--font-medium); }
.recent-project-row__title:hover { color: var(--text-link); }
.recent-project-row__when { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* --- Weekly stats widget --- */
.weekly-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.weekly-stat { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.weekly-stat__count { font-size: 32px; font-weight: var(--font-bold); color: var(--text-primary); line-height: 1; }
.weekly-stat__label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-2); }

/* --- Area pills — faza 29: hardcoded per-area selektory presunuté na single rule
   v `D: area pill` bloku vyššie (cez --area-color CSS var, injectované z DB v <head>).
   Tu zostáva len shared base ak by ho niečo používalo bez modifier triedy. --- */

.code-badge { display: inline-block; padding: 0 6px; font-family: var(--font-mono); font-size: 10px; background: var(--bg-subtle); color: var(--text-secondary); border-radius: var(--radius-xs); flex-shrink: 0; }

/* --- Settings — widget config rows --- */
.settings-section { margin-bottom: var(--space-7); }
.settings-section h2 { margin: 0 0 var(--space-2); }
.hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-3); }

.widget-config-list { display: flex; flex-direction: column; gap: var(--space-2); }
.widget-config-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); align-items: center; }
.widget-config-row__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.widget-config-row__description { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.widget-config-row__open { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.widget-config-row__order { width: 60px; padding: 4px 8px; text-align: center; font-weight: var(--font-semibold); }

.deadline-columns-config { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.checkbox-label { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); font-size: var(--text-sm); }
.checkbox-label:hover { border-color: var(--text-link); background: var(--bg-subtle); }
.checkbox-label:has(input:checked) { background: var(--bg-subtle); border-color: var(--text-link); }

.form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }

/* --- G6: Projekty tabuľka — full-width container + column widths --- */
body:has(.projects-full-width) .main-content,
.main-content:has(.projects-full-width) {
    max-width: none !important;
}
.projects-full-width .table { width: 100%; table-layout: auto; }
.projects-full-width .table th:nth-child(1),
.projects-full-width .table td:nth-child(1) { width: auto; }
.projects-full-width .table th:nth-child(2),
.projects-full-width .table td:nth-child(2) { width: 90px; white-space: nowrap; }
.projects-full-width .table th:nth-child(3),
.projects-full-width .table td:nth-child(3) { width: 160px; }
.projects-full-width .table th:nth-child(4),
.projects-full-width .table td:nth-child(4) { width: 130px; }
.projects-full-width .table th:nth-child(5),
.projects-full-width .table td:nth-child(5) { width: 180px; }
.projects-full-width .table th:nth-child(6),
.projects-full-width .table td:nth-child(6) { width: 110px; color: var(--text-muted); font-size: var(--text-xs); }
.projects-full-width .table th:last-child,
.projects-full-width .table td:last-child { width: 130px; text-align: right; white-space: nowrap; }

/* --- Responsive --- */
@media (max-width: 1100px) {
    .deadlines-grid--cols-3, .deadlines-grid--cols-4 { grid-template-columns: 1fr 1fr; }
    .weekly-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .deadlines-grid--cols-2, .deadlines-grid--cols-3, .deadlines-grid--cols-4 { grid-template-columns: 1fr; }
    .weekly-stats-grid { grid-template-columns: 1fr; }
    .widget-config-row { grid-template-columns: 24px 1fr auto; row-gap: var(--space-2); }
    .widget-config-row__order { grid-column: 3; }
    .widget-config-row__open { grid-column: 2 / span 2; }
    .dashboard-greeting { padding: var(--space-4); }
    .dashboard-greeting__actions { width: 100%; }
}

/* ============================================================
   #23 — Dashboard collapsible sections + comprehensive print/PDF
   ============================================================ */

/* Toggle sekcia (rectangle wrapper okolo Timeline/Capacity/Active/Activity) */
.dash-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.dash-section[open]    { box-shadow: var(--shadow-sm); }
.dash-section:hover    { border-color: var(--border-default); }
.dash-section--quiet   { opacity: 0.92; }

.dash-section__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--transition-fast);
}
.dash-section__head::-webkit-details-marker { display: none; }
.dash-section__head::marker { content: ''; }
.dash-section__head:hover { background: var(--bg-subtle); }
.dash-section__head:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }

.dash-section__head-main { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; flex-wrap: wrap; }
.dash-section__icon { color: var(--color-dark-teal-tint-2); flex-shrink: 0; }
.dash-section__title { margin: 0; font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary); letter-spacing: -0.01em; }
.dash-section__count {
    background: var(--bg-subtle); color: var(--text-secondary);
    font-size: var(--text-xs); font-weight: var(--font-bold);
    padding: 3px 10px; border-radius: var(--radius-full);
}
.dash-section__alert {
    background: var(--status-danger-bg); color: var(--status-danger-text);
    font-size: var(--text-xs); font-weight: var(--font-bold);
    padding: 3px 10px; border-radius: var(--radius-full);
}
.dash-section__link { font-size: var(--text-xs); color: var(--text-secondary); text-decoration: none; margin-left: auto; }
.dash-section__link:hover { color: var(--text-link); text-decoration: underline; }
.dash-section__filter-note { font-size: var(--text-xs); color: var(--text-muted); }
.dash-section__filter-note a { color: var(--text-link); }

.dash-section__chevron { color: var(--text-muted); transition: transform var(--transition-base); flex-shrink: 0; }
.dash-section[open] .dash-section__chevron { transform: rotate(180deg); }

.dash-section__body { padding: 0 var(--space-5) var(--space-5); }
.dash-section__body > section:first-child { margin-bottom: 0; }
.dash-section__body .tl-lane { margin-bottom: 0; }
.dash-section__body .cap-strip { margin-bottom: 0; }
.dash-section__body .calm-activity { padding-top: 0; margin-top: 0; border-top: 0; }

/* Active digest tabuľka v body bez double-padding */
.dash-section .active-digest { margin-bottom: 0; }

@media (max-width: 640px) {
    .dash-section__head { padding: var(--space-3) var(--space-4); }
    .dash-section__body { padding: 0 var(--space-3) var(--space-4); }
    .dash-section__title { font-size: var(--text-sm); }
}

/* Print pravidlá presunuté do public/assets/css/print.css (faza 22). */

/* =================================================================
   #28 — HIGHLIGHT SYSTEM v3 — FINAL (faza 25 / Prompt #23)
   Autoritatívny blok NA SAMOM KONCI. !important úmyselne — porazí
   všetky predchádzajúce layered rules (#18b/19/24/25/26/27).
   ================================================================= */

.chip,
.filter-chip {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    transition: all 150ms ease;
}
.chip:hover,
.filter-chip:hover {
    background: var(--bg-surface-hover);
    border-color: var(--color-dark-teal);
    color: var(--text-primary);
}
.chip--active,
.chip.is-active,
.filter-chip.is-active,
.chip[aria-pressed="true"],
.filter-chip[aria-pressed="true"] {
    background: var(--surface-inverse) !important;
    color: #fff !important;
    border-color: var(--surface-inverse) !important;
    font-weight: var(--font-semibold);
}
.chip--active [data-lucide],
.chip.is-active [data-lucide],
.filter-chip.is-active [data-lucide] {
    color: var(--color-blue) !important;
}
.chip--active .chip__count,
.chip.is-active .chip__count {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
}

/* === SIDEBAR ACTIVE — faza 39b/S3 glass akcent ===
   Sidebar má tmavý dark-teal podklad → glass white-tint sa pekne vyníma.
   Decentne — žiadny preháňaný blur, len jemný akcent + famivel-blue rail. */
.sidebar__item--active,
.sidebar-link.active,
.sidebar__item.active,
.sidebar-link.is-active {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    color: var(--color-famivel-blue) !important;
    border-left: 3px solid var(--color-famivel-blue) !important;
    font-weight: var(--font-medium);
    box-shadow: inset 0 0 20px rgba(114, 230, 239, 0.08);
}
.sidebar__item--active [data-lucide],
.sidebar__item.active [data-lucide],
.sidebar-link.active [data-lucide] {
    color: var(--color-famivel-blue) !important;
}
.sidebar__item--active::before { display: none !important; }

/* === PRIMARY BUTTONS === */
.btn--primary {
    background: var(--surface-inverse) !important;
    color: #fff !important;
    border: 1px solid var(--surface-inverse) !important;
    font-weight: var(--font-semibold);
    transition: all 150ms ease;
}
.btn--primary:hover {
    background: #1A5560 !important;
    color: #fff !important;
    border-color: #1A5560 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 59, 65, 0.25);
}
.btn--primary:active {
    transform: translateY(0);
    background: var(--surface-inverse) !important;
    color: #fff !important;
}
.btn--primary [data-lucide],
.btn--primary svg.lucide { color: var(--color-blue) !important; }
.btn--primary:hover [data-lucide],
.btn--primary:hover svg.lucide { color: #A5EEF4 !important; }

/* === CYAN BUTTONS === */
.btn--cyan {
    background: var(--color-blue) !important;
    color: var(--surface-inverse) !important;
    border: 1px solid var(--color-blue) !important;
    font-weight: var(--font-semibold);
    transition: all 150ms ease;
}
.btn--cyan:hover {
    background: #5BC7CF !important;
    color: var(--surface-inverse) !important;
    border-color: #5BC7CF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(114, 230, 239, 0.35);
}
.btn--cyan:active {
    transform: translateY(0);
    background: var(--color-blue) !important;
    color: var(--surface-inverse) !important;
}

/* === SECONDARY === */
.btn--secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    transition: all 150ms ease;
}
.btn--secondary:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--surface-inverse);
}

/* === GHOST === */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all 150ms ease;
}
.btn--ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

/* === DANGER === */
.btn--danger {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
    border: 1px solid var(--status-danger-border);
}
.btn--danger:hover {
    background: var(--status-danger-text);
    color: #fff;
    border-color: var(--status-danger-text);
}

/* === Row hover v tabuľkách === */
.projects-table tbody tr:hover,
.projects-full-width .table tbody tr:hover {
    background: var(--color-aqua-tint-1) !important;
    box-shadow: none !important;
}

/* === Text selection === */
::selection { background: var(--color-blue); color: var(--surface-inverse); }

/* === Input focus === */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--surface-inverse) !important;
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.15) !important;
}

/* === Hover odkazy === */
a:hover, .link:hover { color: var(--color-dark-teal-tint-1); }

/* =================================================================
   #32 — Quick-create project modal (faza 28 / Prompt #28)
   ================================================================= */

.modal-backdrop {
    position: fixed; inset: 0;
    z-index: 1000;
    background: rgba(0, 59, 65, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 16px 16px;
    overflow-y: auto;
    animation: modal-fade-in 200ms ease;
}
@keyframes modal-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}
body.modal-open { overflow: hidden; }

#project-create-modal .modal {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    box-shadow: 0 24px 60px rgba(0, 59, 65, 0.25),
                0 8px 20px rgba(0, 59, 65, 0.15);
    display: flex; flex-direction: column;
    max-height: 90vh;
    animation: modal-slide-up 250ms cubic-bezier(0.34, 1.16, 0.64, 1);
    overflow: hidden;
}
@keyframes modal-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#project-create-modal .modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
#project-create-modal .modal__header h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}
#project-create-modal .modal__close {
    background: transparent; border: none;
    padding: var(--space-2); cursor: pointer;
    color: var(--text-muted); border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: all 150ms ease;
}
#project-create-modal .modal__close:hover {
    background: var(--bg-subtle); color: var(--text-primary);
}
#project-create-modal .modal__body {
    padding: var(--space-5) var(--space-6);
    overflow-y: auto; flex: 1;
}
#project-create-modal .modal__footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
    flex-shrink: 0;
}
.modal__error {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
    border: 1px solid var(--status-danger-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    animation: modal-slide-up 200ms ease;
}

/* Form elements (scoped na modal aby nepoškodili existujúce formuláre) */
#project-create-modal .form-group { margin-bottom: var(--space-5); }
#project-create-modal .form-group:last-child { margin-bottom: 0; }
#project-create-modal .form-label {
    display: block;
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
#project-create-modal .form-hint {
    font-size: var(--text-xs); color: var(--text-muted);
    margin-top: var(--space-1);
}
#project-create-modal .form-input,
#project-create-modal .form-select,
#project-create-modal .form-textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit; font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-surface);
    transition: all 150ms ease;
}
#project-create-modal .form-input:focus,
#project-create-modal .form-select:focus,
#project-create-modal .form-textarea:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.12);
}
#project-create-modal .form-input--lg {
    /* Faza 66g: zmenšené na primeranú veľkosť (text-lg bolo priveľké), konzistentné s poľami. */
    font-size: var(--text-base);
    padding: var(--space-3);
}
#project-create-modal .form-textarea {
    resize: vertical; min-height: 80px;
}

/* Radio group (typ projektu) */
#project-create-modal .radio-group {
    display: flex; flex-direction: column; gap: var(--space-2);
}
#project-create-modal .radio-option {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 150ms ease;
    background: var(--bg-surface);
}
#project-create-modal .radio-option:hover {
    border-color: var(--color-dark-teal);
    background: var(--bg-surface-hover);
}
#project-create-modal .radio-option:has(input:checked) {
    border-color: var(--color-dark-teal);
    background: var(--color-aqua-white);
}
#project-create-modal .radio-option input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: var(--color-dark-teal);
    cursor: pointer; flex-shrink: 0;
}
#project-create-modal .radio-option__label {
    display: flex; align-items: center; gap: var(--space-2);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* Area picker grid */
#project-create-modal .area-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
}
#project-create-modal .area-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer; background: var(--bg-surface);
    transition: all 150ms ease;
    overflow: hidden;
}
#project-create-modal .area-option:hover {
    border-color: var(--color-dark-teal);
    background: var(--bg-surface-hover);
}
#project-create-modal .area-option:has(input:checked) {
    border-color: var(--color-dark-teal);
    background: var(--color-aqua-white);
    box-shadow: 0 0 0 2px rgba(0, 59, 65, 0.08);
}
#project-create-modal .area-option input[type="radio"] { display: none; }
#project-create-modal .area-option__pill { flex-shrink: 0; }
#project-create-modal .area-option__name {
    font-size: var(--text-xs); color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Collapsible advanced fields */
/* Faza 66g: viditeľnejší rozbaľovák deadline/popis — brand-tinted riadok (decentne)
   namiesto plochého textu, aby ho user ľahšie našiel. */
#project-create-modal .form-toggle {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 10px 14px;
    background: rgba(114, 230, 239, 0.08);
    border: 1px solid rgba(0, 59, 65, 0.12);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit; font-size: var(--text-sm);
    color: var(--color-dark-teal); font-weight: var(--font-semibold);
    width: 100%; text-align: left;
    transition: all 150ms ease;
}
#project-create-modal .form-toggle:hover {
    background: rgba(114, 230, 239, 0.16);
    border-color: var(--color-dark-teal);
}
#project-create-modal .form-toggle [data-lucide],
#project-create-modal .form-toggle svg { color: var(--color-famivel-blue); flex-shrink: 0; }
#project-create-modal .advanced-fields {
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-subtle);
    margin-top: var(--space-3);
}

/* Loading spinner v submit btn */
[data-lucide="loader"].spin,
svg.lucide-loader.spin { animation: modal-spin 1s linear infinite; }
@keyframes modal-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* E: project-dot — auto-color dot pred názvom projektu */
.project-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: var(--space-2);
    flex-shrink: 0;
    vertical-align: middle;
}

/* =================================================================
   #31 — Project↔Task sync UI (faza 27 / Prompt #27)
   ================================================================= */

/* Detail projektu — kompaktné riadky míľnikov (nahrádza sub-project-card grid) */
.milestone-rows {
    display: flex; flex-direction: column;
    gap: 4px;
    margin-top: var(--space-3);
}
.milestone-row {
    display: grid;
    grid-template-columns: 90px 1fr auto 130px 32px;
    gap: var(--space-3);
    align-items: center;
    padding: 10px var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 150ms ease;
}
.milestone-row:hover {
    border-color: var(--surface-inverse);
    box-shadow: var(--shadow-sm);
    background: var(--bg-surface-hover);
    text-decoration: none;
}
.milestone-row__code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    text-align: center;
}
.milestone-row__title {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.milestone-row__deadline {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}
.milestone-row__assignee {
    display: flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) {
    .milestone-row {
        grid-template-columns: 90px 1fr auto;
        row-gap: 6px;
    }
    .milestone-row__deadline,
    .milestone-row__assignee { grid-column: 2 / -1; text-align: left; justify-content: flex-start; }
}

/* Tasks /ulohy — hierarchické zobrazenie sub-úloh */
.task-item--child {
    margin-left: var(--space-7);
    background: var(--bg-subtle);
    border-left: 3px solid var(--text-link);
}
.task-item__source-icon {
    color: var(--text-link);
    vertical-align: -2px;
    margin-right: 4px;
}

/* =================================================================
   #30 — Admin Settings + User Management (faza 26 / Prompt #24)
   ================================================================= */

/* --- Settings landing --- */
.settings-landing { max-width: 800px; margin: 0 auto; }
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.settings-card {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 150ms ease;
}
.settings-card:hover {
    border-color: var(--surface-inverse);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}
.settings-card__icon {
    width: 48px; height: 48px;
    background: var(--color-aqua-white);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--surface-inverse);
    flex-shrink: 0;
}
.settings-card__content { flex: 1; min-width: 0; }
.settings-card__content h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 4px;
    display: flex; align-items: center; gap: var(--space-2);
}
.settings-card__content p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.settings-card__badge {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
}
.settings-card__arrow { color: var(--text-muted); transition: transform 150ms ease; }
.settings-card:hover .settings-card__arrow { transform: translateX(4px); color: var(--surface-inverse); }

/* --- Settings sub-pages shell --- */
.settings-page { max-width: 960px; margin: 0 auto; }
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); color: var(--text-muted);
    text-decoration: none;
    margin-bottom: var(--space-3);
}
.back-link:hover { color: var(--surface-inverse); }

/* --- Profile cards --- */
.profile-layout { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.profile-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.card-title {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}
.profile-form .form-group { margin-bottom: var(--space-4); }
.profile-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}
.profile-form input, .profile-form select, .profile-form textarea { width: 100%; }
.profile-form .hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.profile-form .form-actions {
    display: flex; gap: var(--space-2); justify-content: flex-end;
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* --- Avatar uploader --- */
.avatar-uploader { display: flex; gap: var(--space-5); align-items: center; }
.avatar-uploader__preview {
    width: 120px; height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-subtle);
    flex-shrink: 0;
}
/* Faza 66v: display:block ruší inline baseline medzeru → kruh sa VYPLNÍ úplne
   (žiadny sivý polmesiac zospodu); cover + center orežú neštvorcovú fotku v strede. */
.avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.avatar-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: var(--font-bold);
    background: linear-gradient(135deg, var(--text-link) 0%, var(--color-dark-teal-tint-1) 100%);
    color: #fff;
    letter-spacing: 0.05em;
}
.avatar-uploader__controls { display: flex; flex-direction: column; gap: var(--space-2); }

/* --- Password input group --- */
.password-input-group { display: flex; gap: var(--space-2); align-items: stretch; }
.password-input-group input { flex: 1; }
.password-input-group .btn { flex-shrink: 0; }

/* --- Users table --- */
.users-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-4);
}
.users-table th {
    background: var(--bg-subtle);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.users-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.users-table__row--inactive { opacity: 0.6; }

/* Faza 66v: centrálny avatar <img> — kruh sa VYPLNÍ (cover + center), bez sivého
   polmesiaca. Veľkosť dedí z .user-avatar[--mod] (helper avatar_html pridáva obe triedy).
   display:inline-block prebije inline-flex z .user-avatar (img je replaced content). */
.user-avatar-img { border-radius: 50%; object-fit: cover; object-position: center; display: inline-block; padding: 0; }
.user-avatar-img--md { width: 40px; height: 40px; }
.user-avatar-img--sm { width: 26px; height: 26px; }
.user-avatar-img--lg { width: 56px; height: 56px; }
.user-avatar--lg { width: 40px; height: 40px; font-size: var(--text-sm); }

.user-name { font-weight: var(--font-medium); color: var(--text-primary); }
.user-email { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.users-table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

.role-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.role-badge--admin  { background: var(--color-aqua-white); color: var(--surface-inverse); }
.role-badge--member { background: var(--bg-subtle); color: var(--text-secondary); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-pill--active   .status-pill__dot { background: #2D7D54; }
.status-pill--active            { color: #2D7D54; }
.status-pill--inactive .status-pill__dot { background: var(--text-muted); }
.status-pill--inactive          { color: var(--text-muted); }
.text-muted { color: var(--text-muted); font-size: var(--text-xs); }

/* --- Notion import list --- */
.notion-users-list {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-top: var(--space-3);
    max-height: 500px; overflow-y: auto;
}
.notion-user-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 150ms ease;
}
.notion-user-row:hover {
    background: var(--bg-surface-hover);
    border-color: var(--surface-inverse);
}
.notion-user-row--exists { opacity: 0.6; cursor: not-allowed; }
.notion-user-row--exists:hover { background: transparent; border-color: var(--border-subtle); }
.notion-user-row__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.notion-user-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.notion-user-row__info { flex: 1; min-width: 0; }
.notion-user-row__name { font-weight: var(--font-medium); }
.notion-user-row__email { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.badge--ok {
    background: #E8F5E9;
    color: #2D7D54;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px 8px; border-radius: var(--radius-xs);
}

/* --- Page header row layout (Users index has actions to the right) --- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-header__actions { display: flex; gap: var(--space-2); }

/* =================================================================
   #29 — Priority projects widget (faza 25 / Prompt #23)
   ================================================================= */

.priority-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 6px;
}

.priority-item {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all 150ms ease;
    /* Faza 33b: APRICOT decentný left accent — pinned priority projekt = vyznačený */
    border-left: 3px solid var(--color-apricot);
}
.priority-item:hover {
    border-color: var(--surface-inverse);
    border-left-color: var(--color-apricot-shade-1);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(90deg, rgba(255, 208, 176, 0.06) 0%, var(--bg-surface) 12%);
}

.priority-item__link {
    display: grid;
    grid-template-columns: 70px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    min-width: 0;
}

.priority-item__title {
    font-weight: var(--font-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.priority-item__deadline {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.priority-item__deadline--overdue { color: var(--status-danger-text); font-weight: var(--font-semibold); }
.priority-item__deadline--none    { color: var(--text-muted); opacity: 0.6; }

.priority-item__unpin {
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all 150ms ease;
}
.priority-item:hover .priority-item__unpin,
.priority-item:focus-within .priority-item__unpin { display: inline-flex; }
.priority-item__unpin:hover {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
    border-color: var(--status-danger-border);
}

.empty-hint {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
}
.empty-hint [data-lucide], .empty-hint svg { opacity: 0.4; margin-bottom: var(--space-2); }
.empty-hint p { margin: 0; font-size: var(--text-sm); }

@media (max-width: 640px) {
    .priority-item__link {
        grid-template-columns: 70px 1fr;
        gap: 8px;
        row-gap: 6px;
    }
    .priority-item__link > :nth-child(3),
    .priority-item__link > :nth-child(4) { grid-column: 2; }
    .priority-item__unpin { right: 4px; top: 8px; transform: none; }
}

/* =================================================================
   #33 — Areas color config + multi-assignee picker (faza 29 / Prompt #29)
   ================================================================= */

/* === AREAS GRID === */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.area-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "preview controls"
        "meta meta";
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 150ms ease;
}
.area-card:hover { border-color: var(--color-dark-teal); }
.area-card__preview {
    grid-area: preview;
    display: flex; align-items: center; gap: var(--space-3);
    min-width: 0;
}
.area-card__name {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.area-card__color-controls {
    grid-area: controls;
    display: flex; align-items: center; gap: var(--space-2);
}
.area-card__swatch {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 0 0 1px var(--border-default);
    cursor: pointer;
    transition: transform 150ms ease;
    padding: 0;
}
.area-card__swatch:hover { transform: scale(1.1); }
.area-card__hex {
    width: 90px;
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    background: var(--bg-surface);
    color: var(--text-primary);
}
.area-card__meta {
    grid-area: meta;
    display: flex; gap: var(--space-2);
}
.meta-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--bg-subtle); color: var(--text-muted);
    font-size: var(--text-xs);
    border-radius: var(--radius-xs);
}

/* === COLOR PICKER MODAL === */
.color-picker-modal {
    position: fixed; inset: 0;
    z-index: 1100;
    background: rgba(0, 59, 65, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: modal-fade-in 200ms ease;
}
.color-picker {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    width: 100%; max-width: 460px;
    box-shadow: 0 24px 60px rgba(0, 59, 65, 0.25);
    overflow: hidden;
    animation: modal-slide-up 250ms cubic-bezier(0.34, 1.16, 0.64, 1);
}
.color-picker__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.color-picker__header h3 {
    margin: 0;
    font-size: var(--text-lg); font-weight: var(--font-semibold);
}
.color-picker__body { padding: var(--space-5); }
.color-picker__body h4 {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: var(--space-4) 0 var(--space-2);
}
.color-picker__body h4:first-child { margin-top: 0; }
.color-picker__preview {
    display: flex; justify-content: center;
    padding: var(--space-4);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.color-picker__preview .area-pill {
    font-size: var(--text-base);
    padding: 6px 16px;
}
.color-picker__palette {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
.cp-swatch {
    width: 100%; aspect-ratio: 1;
    border-radius: var(--radius-xs);
    border: 2px solid transparent;
    cursor: pointer; padding: 0;
    box-shadow: 0 0 0 1px var(--border-default);
    transition: transform 100ms ease;
}
.cp-swatch:hover { transform: scale(1.15); z-index: 1; }
.cp-swatch--active {
    border-color: var(--color-dark-teal);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--color-dark-teal);
}
.color-picker__custom {
    display: flex; gap: var(--space-2); align-items: center;
}
.cp-native-input {
    width: 48px; height: 36px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    cursor: pointer; padding: 4px;
    background: var(--bg-surface);
}
.color-picker__custom .form-input {
    flex: 1;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.color-picker__footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
}

/* === ASSIGNEE PICKER (shared: modal + inline + readonly chips) === */
.assignee-picker { position: relative; }
.assignee-picker__chips {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.assignee-chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 4px 8px 4px 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: 20px;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.assignee-chip--primary {
    background: var(--color-aqua-white);
    border-color: var(--color-dark-teal);
}
.assignee-chip__name { margin-left: 4px; }
.assignee-chip__star { color: #C28A00; margin-left: 2px; }
.assignee-chip__action {
    background: transparent; border: none;
    padding: 2px; cursor: pointer;
    color: var(--text-muted);
    display: flex; align-items: center;
    border-radius: 50%;
    transition: all 100ms ease;
}
.assignee-chip__action:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
.assignee-chip__remove:hover {
    color: var(--status-danger-text);
    background: var(--status-danger-bg);
}
.assignee-chips-readonly {
    display: inline-flex; flex-wrap: wrap; gap: var(--space-2);
    align-items: center;
}

/* Faza 60q: stacked avatars — readonly zobrazenie zodpovedných osôb v atribút
   bare. Prekrývajúce sa glass krúžky v JEDNOM riadku → bar sa neroztiahne,
   "Upraviť" ostáva na mieste. Mená na hover (title). Fotka neskôr sadne do krúžku. */
.assignee-stack {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.assignee-stack .user-avatar,
.assignee-stack__more {
    width: 26px;
    height: 26px;
    font-size: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    /* biely ring oddelí prekrývajúce sa krúžky */
    box-shadow: 0 0 0 2px var(--bg-surface);
    position: relative;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0ms;
}
.assignee-stack > * + * { margin-left: -8px; } /* prekryv */
.assignee-stack > *:hover { transform: translateY(-2px); z-index: 3; }
/* vedúci (primary) — apricot ring miesto bieleho */
.assignee-stack__avatar--primary {
    box-shadow: 0 0 0 2px var(--color-apricot);
}
.assignee-stack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
}
/* Pripravené na fotky: <img> vyplní krúžok (object-fit cover). */
.assignee-stack .user-avatar img,
.assignee-stack__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
[data-theme="dark"] .assignee-stack .user-avatar,
[data-theme="dark"] .assignee-stack__more {
    box-shadow: 0 0 0 2px var(--bg-surface);
}
[data-theme="dark"] .assignee-stack__avatar--primary {
    box-shadow: 0 0 0 2px var(--color-apricot);
}

.assignee-picker__add {
    display: inline-flex; align-items: center; gap: 6px;
}
.assignee-picker__dropdown {
    position: absolute;
    top: 100%; left: 0;
    margin-top: 4px;
    width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 59, 65, 0.15);
    z-index: 100;
    overflow: hidden;
}
.assignee-picker__search {
    width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
}
.assignee-picker__list {
    list-style: none; margin: 0; padding: 0;
    max-height: 240px; overflow-y: auto;
}
.assignee-picker__item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 100ms ease;
}
.assignee-picker__item:hover { background: var(--bg-subtle); }
.assignee-picker__item-info {
    display: flex; flex-direction: column; min-width: 0;
}
.assignee-picker__item-name {
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
}
.assignee-picker__item-email {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.assignee-picker__empty {
    padding: var(--space-3);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--text-sm);
}

.user-avatar--xs { width: 22px; height: 22px; font-size: 10px; }
.user-avatar-img--xs {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

/* === INLINE ASSIGNEES EDIT POPOVER === */
/* Faza 35b: parent metadata-item--assignees musí byť position: relative aby
   assignees-edit-popover sa pozicionoval voči nej, nie voči celej page. */
.metadata-item--assignees {
    flex-wrap: wrap;
    position: relative;
}
.assignees-edit-popover {
    /* Faza 43/S1: kotvený k .metadata-item--assignees (popover je už child v markup-e).
       Padá pod celý riadok metadata, ľavý okraj. Glass štýl konzistentný s appkou. */
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 59, 65, 0.2), 0 2px 6px rgba(0, 59, 65, 0.08);
    width: 360px;
    max-width: calc(100vw - 32px);
    z-index: 200;
    padding: var(--space-4);
}
[data-theme="dark"] .assignees-edit-popover {
    background: rgba(22, 37, 40, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
}
/* Mobile + edge case — ak je veľmi blízko pravého okraja, posuň zarovnaním
   na pravý okraj rodiča. Aktivuje sa media query pre úzke obrazovky. */
@media (max-width: 640px) {
    .assignees-edit-popover {
        left: auto;
        right: 0;
    }
}
.assignees-edit-popover__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
}
.assignees-edit-popover__header h4 {
    margin: 0;
    font-size: var(--text-sm); font-weight: var(--font-semibold);
}
.assignees-edit-popover__footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}
.metadata-item--assignees { flex-wrap: wrap; }

/* =================================================================
   #34 — SETTINGS VISUAL POLISH (faza 30 / Prompt #30)
   Glassmorphism cards, iOS toggles, modern inputs, settings-card-modern,
   widget-pref-card, filter-chip-glass, page header refinement.
   ================================================================= */

/* ===== GLASS CARDS ===== */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 3px rgba(0, 59, 65, 0.04),
        0 4px 12px rgba(0, 59, 65, 0.06);
    transition: all 200ms ease;
}
[data-theme="dark"] .glass-card {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15);
}
.glass-card--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.glass-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(0, 59, 65, 0.06),
        0 12px 28px rgba(0, 59, 65, 0.12);
    border-color: rgba(114, 230, 239, 0.4);
}
.glass-card--clickable:active { transform: translateY(0); }
.glass-card--accent {
    position: relative;
    overflow: hidden;
}
.glass-card--accent::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-dark-teal) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
}
.glass-card--accent:hover::before,
.glass-card--accent.is-active::before { opacity: 1; }

/* ===== iOS-STYLE TOGGLE SWITCH ===== */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px; height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    cursor: pointer; margin: 0;
    z-index: 1;
}
.toggle-switch__track {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #C8D0D3;
    border-radius: 11px;
    transition: background 200ms ease;
}
.toggle-switch__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.toggle-switch input:checked ~ .toggle-switch__track { background: var(--color-dark-teal); }
.toggle-switch input:checked ~ .toggle-switch__thumb { transform: translateX(18px); }
.toggle-switch input:focus-visible ~ .toggle-switch__track {
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.2);
}
.toggle-switch input:disabled ~ .toggle-switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}
[data-theme="dark"] .toggle-switch__track { background: rgba(255, 255, 255, 0.2); }

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    user-select: none;
}
.toggle-label:has(input:checked) {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}
.toggle-label__text {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===== MODERN FORM INPUTS ===== */
.form-input-modern,
.form-select-modern,
.form-textarea-modern {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: all 150ms ease;
}
[data-theme="dark"] .form-input-modern,
[data-theme="dark"] .form-select-modern,
[data-theme="dark"] .form-textarea-modern {
    background: rgba(30, 50, 55, 0.5);
}
.form-input-modern:hover,
.form-select-modern:hover { border-color: rgba(0, 59, 65, 0.3); }
.form-input-modern:focus,
.form-select-modern:focus,
.form-textarea-modern:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    background: var(--bg-surface);
    box-shadow:
        0 0 0 3px rgba(0, 59, 65, 0.1),
        0 4px 12px rgba(0, 59, 65, 0.08);
}
.form-textarea-modern {
    resize: vertical;
    min-height: 80px;
}

/* ===== ENHANCED SETTINGS CARD ===== */
.settings-card-modern {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    box-shadow:
        0 1px 3px rgba(0, 59, 65, 0.04),
        0 4px 12px rgba(0, 59, 65, 0.06);
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}
.settings-card-modern::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-dark-teal) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
}
.settings-card-modern:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(0, 59, 65, 0.06),
        0 12px 28px rgba(0, 59, 65, 0.12);
}
.settings-card-modern:hover::before { opacity: 1; }
[data-theme="dark"] .settings-card-modern {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}
.settings-card-modern__icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--color-aqua-white) 0%, rgba(114, 230, 239, 0.2) 100%);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-dark-teal);
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.settings-card-modern:hover .settings-card-modern__icon {
    transform: scale(1.05) rotate(-3deg);
}
[data-theme="dark"] .settings-card-modern__icon {
    background: rgba(114, 230, 239, 0.15);
    color: var(--color-blue);
}
.settings-card-modern__content { flex: 1; min-width: 0; }
.settings-card-modern__content h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 4px;
    display: flex; align-items: center; gap: var(--space-2);
}
.settings-card-modern__content p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}
.settings-card-modern__arrow {
    color: var(--text-muted);
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.settings-card-modern:hover .settings-card-modern__arrow {
    transform: translateX(4px);
    color: var(--color-dark-teal);
}

/* ===== WIDGET PREFERENCE CARDS (settings/dashboard.phtml) ===== */
.widget-pref-list {
    display: flex; flex-direction: column;
    gap: var(--space-2);
}
.widget-pref-card {
    display: grid;
    grid-template-columns: auto 36px 1fr auto 70px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    transition: all 150ms ease;
}
.widget-pref-card:hover {
    transform: translateX(2px);
    border-color: rgba(0, 59, 65, 0.15);
    box-shadow: 0 2px 8px rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .widget-pref-card {
    background: rgba(30, 50, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
}
.widget-pref-card__icon {
    width: 36px; height: 36px;
    background: var(--color-aqua-white);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-dark-teal);
    flex-shrink: 0;
}
[data-theme="dark"] .widget-pref-card__icon {
    background: rgba(114, 230, 239, 0.15);
    color: var(--color-blue);
}
.widget-pref-card__info { min-width: 0; }
.widget-pref-card__title {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 2px;
    font-size: var(--text-sm);
}
.widget-pref-card__desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
}
.widget-pref-card__order {
    width: 64px;
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: center;
    transition: all 150ms ease;
    color: var(--text-primary);
}
.widget-pref-card__order:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.1);
}
.widget-pref-card.is-disabled {
    opacity: 0.5;
}
.widget-pref-card.is-disabled .widget-pref-card__icon { filter: grayscale(100%); }

/* ===== FILTER CHIPS — GLASS ===== */
.filter-chip-glass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: 20px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    user-select: none;
}
.filter-chip-glass:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--color-dark-teal);
    color: var(--text-primary);
}
.filter-chip-glass.is-active {
    background: var(--color-dark-teal);
    color: #FFFFFF;
    border-color: var(--color-dark-teal);
    font-weight: var(--font-medium);
}
.filter-chip-glass.is-active [data-lucide],
.filter-chip-glass.is-active svg.lucide { color: var(--color-blue); }
.filter-chip-glass__count {
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    color: inherit;
}
[data-theme="dark"] .filter-chip-glass {
    background: rgba(30, 50, 55, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===== SETTINGS PAGE HEADER ===== */
.settings-page__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(0, 59, 65, 0.08);
}
.settings-page__header h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-2) 0 var(--space-1);
    letter-spacing: -0.02em;
}
.settings-page__subtitle {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.section-divider-modern {
    margin: var(--space-6) 0 var(--space-4);
    padding-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0, 59, 65, 0.08);
}

/* ===== AVATAR UPLOADER (faza 30 polish) ===== */
.glass-card.profile-section {
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}
.glass-card .card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(0, 59, 65, 0.08);
}
.avatar-uploader--polished {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    border: 1px dashed rgba(0, 59, 65, 0.15);
}
[data-theme="dark"] .avatar-uploader--polished {
    background: rgba(30, 50, 55, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ===== USERS TABLE — GLASS WRAP ===== */
.users-table-modern {
    width: 100%;
    border-collapse: collapse;
}
.users-table-modern th {
    background: rgba(0, 59, 65, 0.04);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
[data-theme="dark"] .users-table-modern th {
    background: rgba(255, 255, 255, 0.04);
}
.users-table-modern td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(0, 59, 65, 0.06);
    vertical-align: middle;
}
[data-theme="dark"] .users-table-modern td {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.users-table-modern tbody tr {
    transition: background 100ms ease;
}
.users-table-modern tbody tr:hover {
    background: rgba(114, 230, 239, 0.06);
}

/* === Faza 30b: /projekty table actions column fix — Otvoriť/Upraviť/kebab overlap === */
.table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.table th,
.table td {
    padding: var(--space-3) var(--space-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
}

/* Faza 30f: .col-* explicit widths + .table__actions + .relative-time pravidlá
   odstránené — /projekty teraz používa list-view (.projects-list .project-row),
   nie .table. Žiadny iný template ich nepoužíva (verified grep).
   Helper .relative-time zachovaný nižšie v #34 ostatných miestach (history).
   Generický .table { padding, vertical-align } base zostal aktívny pre
   /nastavenia/uzivatelia (.users-table). */

/* Faza 30b: text-decoration nikdy pri settings/glass clickable hover (Sekcia C) */
.settings-card-modern,
.settings-card-modern:hover,
.settings-card-modern:focus,
.settings-card-modern:active,
.glass-card--clickable,
.glass-card--clickable:hover,
.glass-card--clickable:focus,
.glass-card--clickable:active,
.settings-card-modern h3,
.settings-card-modern p {
    text-decoration: none;
}

/* Faza 30b: Project milestones section (show.phtml) — vždy zobrazené s header + empty state */
.project-milestones {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 3px rgba(0, 59, 65, 0.04),
        0 4px 12px rgba(0, 59, 65, 0.06);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
[data-theme="dark"] .project-milestones {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}
.project-milestones__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(0, 59, 65, 0.08);
}
.project-milestones__header .section-title { margin: 0; }
.project-milestones__empty {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
}
.project-milestones__empty [data-lucide],
.project-milestones__empty svg.lucide {
    opacity: 0.3;
    margin-bottom: var(--space-2);
}
.project-milestones__empty p { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.project-milestones__empty .hint { font-size: var(--text-xs); }

/* === Faza 30b: areas page CRUD layout === */
/* Faza 60d: 2-riadková hlavička karty — pill + farba/hex nesúťažia o šírku
   s názvom, takže názov má celý druhý riadok a nikdy sa neoreže. */
.area-card--editable {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "pill   swatch hex"
        "name   name   name";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
    /* Glass + dýchajúci padding (base má var(--space-4)) */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    /* Spring hover */
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 150ms ease;
}
.area-card--editable:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 59, 65, 0.10);
    border-color: var(--color-famivel-blue);
}
[data-theme="dark"] .area-card--editable {
    background: rgba(30, 50, 55, 0.55);
}
/* Riadok 1: pill vľavo, swatch + hex sa odtlačia doprava (1fr na pille) */
.area-card--editable > .area-pill {
    grid-area: pill;
    justify-self: start;
    gap: 6px; /* medzera bodka ↔ kód, koniec „●OP" */
}
.area-card--editable > .area-card__swatch { grid-area: swatch; justify-self: end; }
.area-card--editable > .area-card__hex    { grid-area: hex; justify-self: end; }
/* Riadok 2: celý názov pod pillom, môže sa zalomiť, žiadny truncate */
.area-card--editable > .area-card__name-edit {
    grid-area: name;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    padding: 2px 8px;
    margin-left: -8px; /* text zarovná na ľavý okraj karty pod pillom */
}
/* Inline rename input (JS swap) tiež zaberie celý druhý riadok */
.area-card--editable > .area-card__name-input { grid-area: name; }

/* Faza 66k: zmazať oblasť — spodný full-width riadok karty (len user-vytvorené). */
.area-card__delete-row {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end;
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(0, 59, 65, 0.06);
}
.area-card__delete {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font: inherit; font-size: var(--text-xs); font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 150ms ease;
}
.area-card__delete:hover {
    background: var(--status-danger-bg, #FDEBEB);
    color: var(--status-danger-text, #B54D4D);
    border-color: var(--status-danger-border, #EF9A9A);
}
.area-card__delete:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.area-card__name-edit {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    transition: background 100ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: var(--font-medium);
}
.area-card__name-edit:hover {
    background: rgba(0, 59, 65, 0.06);
}
.area-card__name-edit::after {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 6px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378909C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 100ms ease;
    vertical-align: middle;
}
.area-card__name-edit:hover::after { opacity: 0.6; }
.area-card__name-input {
    padding: 4px 8px;
    font-size: var(--text-sm);
    width: 100%;
    border: 1px solid var(--color-dark-teal);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    font-family: inherit;
    color: var(--text-primary);
}

/* New area modal (reuse modal-backdrop z #32) */
/* Faza 66k FIX: #add-area-modal .modal nemal background/shape/flex → biely box
   neexistoval (pozadie presvitalo, nadpis/polia vytekali). Zrkadlí #project-create-modal. */
#add-area-modal .modal {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 60px rgba(0, 59, 65, 0.25), 0 8px 20px rgba(0, 59, 65, 0.15);
    display: flex; flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    animation: modal-slide-up 250ms cubic-bezier(0.34, 1.16, 0.64, 1);
}
#add-area-modal .modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
#add-area-modal .modal__header h2 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
#add-area-modal .modal__close {
    background: transparent; border: none;
    padding: var(--space-2); cursor: pointer;
    color: var(--text-muted); border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: all 150ms ease;
}
#add-area-modal .modal__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
#add-area-modal .modal__body {
    padding: var(--space-5) var(--space-6);
    overflow-y: auto; flex: 1;
}
#add-area-modal .modal__footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
    flex-shrink: 0;
}
#add-area-modal .form-group { margin-bottom: var(--space-4); }
#add-area-modal .form-group:last-child { margin-bottom: 0; }
#add-area-modal .form-label {
    display: block;
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary); margin-bottom: var(--space-2);
}
#add-area-modal .form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.add-area-color-row {
    display: flex; align-items: center; gap: var(--space-2);
}
.add-area-color-row .form-input-modern { flex: 1; }
.add-area-color-row input[type="color"] {
    width: 60px; height: 40px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 4px;
    background: var(--bg-surface);
    flex-shrink: 0;
}

/* =================================================================
   #35 — Back button + subproject-card grid + compact inline-edit
   (faza 30c / Prompt #30c)
   ================================================================= */

/* === BACK BUTTON v breadcrumbs v2 — glass pill (faza 30d) === */
.breadcrumbs-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.breadcrumb-back-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    padding: 0;

    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: var(--color-dark-teal);
    cursor: pointer;
    flex-shrink: 0;

    box-shadow:
        0 1px 3px rgba(0, 59, 65, 0.06),
        0 2px 8px rgba(0, 59, 65, 0.08);

    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

    font-family: inherit;
    font-size: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.breadcrumb-back-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(114, 230, 239, 0.0) 0%, rgba(114, 230, 239, 0.0) 100%);
    transition: background 200ms ease;
    pointer-events: none;
}
.breadcrumb-back-btn:hover {
    transform: translateX(-3px);
    background: var(--color-dark-teal);
    border-color: var(--color-dark-teal);
    color: #FFFFFF;
    box-shadow:
        0 2px 6px rgba(0, 59, 65, 0.12),
        0 8px 20px rgba(0, 59, 65, 0.15);
}
.breadcrumb-back-btn:hover::before {
    background: linear-gradient(135deg, rgba(114, 230, 239, 0.2) 0%, rgba(114, 230, 239, 0) 100%);
}
.breadcrumb-back-btn:active {
    transform: translateX(-1px);
    box-shadow:
        0 1px 2px rgba(0, 59, 65, 0.1),
        0 2px 6px rgba(0, 59, 65, 0.08);
}
.breadcrumb-back-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(0, 59, 65, 0.2),
        0 2px 8px rgba(0, 59, 65, 0.1);
}
.breadcrumb-back-btn [data-lucide],
.breadcrumb-back-btn svg {
    width: 16px; height: 16px;
    stroke-width: 2.25px;
    transition: transform 200ms ease;
    position: relative;
    z-index: 1;
}
.breadcrumb-back-btn:hover [data-lucide],
.breadcrumb-back-btn:hover svg { transform: translateX(-1px); }

[data-theme="dark"] .breadcrumb-back-btn {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-blue);
}
[data-theme="dark"] .breadcrumb-back-btn:hover {
    background: var(--color-blue);
    color: var(--color-dark-teal);
    border-color: var(--color-blue);
}

/* === SUBPROJECT-CARD GRID (replaces .milestone-rows) ===
   Faza 54b: zúžené + odlíšené od hlavných projektov.
     • Grid stĺpce 240px (predtým 280) → viac karty na riadok, kompaktnejšie
     • Padding 16 → 10/14 → vizuálne nižšie riadky
     • Jemný aqua tint pozadie cez box-shadow inset (decentné odlíšenie:
       "toto je sub-úroveň, nie hlavný projekt")
     • Border-left 3 → 4px area-color (silnejší accent)
     • Indent margin-left 8px (mierne odsadenie ako sub-položka v zozname)
     • Hover translateY -2 → -1 (jemnejšia subordinate animácia)
*/
.subprojects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2);
    margin-left: 8px;
}
.subproject-card {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 160ms ease, border-color 160ms ease;
    position: relative;
    /* Silnejší area-color accent (4px) + jemný aqua inset tint */
    border-left: 4px solid var(--area-color, var(--color-blue));
    box-shadow: inset 8px 0 16px -8px color-mix(in srgb, var(--area-color, #78909C) 18%, transparent);
}
.subproject-card:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 8px 0 16px -8px color-mix(in srgb, var(--area-color, #78909C) 24%, transparent),
        0 1px 3px rgba(0, 59, 65, 0.06),
        0 8px 20px rgba(0, 59, 65, 0.08);
    border-left-color: color-mix(in srgb, var(--area-color, var(--color-blue)) 100%, transparent);
}
/* Faza 71 FIX: osoba-picker v míľnik karte sa otváral „vľavo dole" — ďaleko od
   avatara. Príčina: Faza 62c predpokladala, že osoba je VŽDY vpravo vo footri a
   ukotvila popover k pravému okraju (right:0 → telo 240px sa ťahá DOĽAVA). Lenže
   footer má flex-wrap, takže osoba sa často zalomí na nový riadok k ľavému okraju
   (flex-start) — vtedy right:0 vystrelí popover 240px vľavo, mimo karty. Fix:
   ukotvi k ĽAVÉMU okraju triggera (left:0) — rovnako ako base .person-popover
   všade inde → popover sa otvorí PRI avatare. Šírku kapni na viewport (mobil). */
.subproject-card .person-popover {
    left: 0;
    right: auto;                           /* kotvi k avataru (ako base) → otvor doprava-dole */
    min-width: 0;
    width: 240px;
    max-width: calc(100vw - 32px);
}

/* ====================================================================
   FAZA 72 — SYSTÉMOVÝ FIX: floating prvky VŽDY nad obsahom (detail projektu)
   --------------------------------------------------------------------
   ROOT CAUSE (raz a navždy, nie ďalšia záplata na jedno miesto):
   Glass karty/popovery (.glass-card, .assignees-edit-popover, …) majú
   backdrop-filter → KAŽDÁ je vlastný stacking context. V poradí vykresľovania
   (CSS painting order, krok 6) sa „pozícionovaný z-auto popover" a „neskorší
   súrodenec so stacking contextom" maľujú spolu v PORADÍ STROMU → neskoršia
   sekcia/karta s glass efektom PREKRESLÍ skôr otvorený popover. Preto sa
   pickery (osoba/deadline/začiatok/status) schovávali pod nasledujúcou sekciou.

   JEDNO spoločné riešenie pre VŠETKY floating prvky naraz: ktorýkoľvek
   kontajner, ktorý OBSAHUJE otvorený floating prvok, dostane position:relative
   + kladný z-index → vyskočí z kroku 6 do kroku 7 (positive z-index), teda nad
   všetky glass súrodencov bez ohľadu na poradie v strome. Platí na 3 úrovniach
   vnorenia, takže pokrýva projekt AJ míľniky, osobu AJ dátumy AJ status:
     • .project-metadata  — pickery samotného projektu (status/začiatok/deadline/osoba)
     • .project-section   — celá sekcia nad nasledujúcou sekciou (napr. Míľniky)
     • .subproject-card   — karta míľnika nad susednými kartami v gridu
   Floating prvky sa kotvia ako doteraz (žiadny portál → ukladanie/výber
   nedotknuté); mení sa len stacking poradie kontajnerov. */
.project-metadata:has(.status-dropdown:not([hidden])),
.project-metadata:has(.deadline-popover:not([hidden])),
.project-metadata:has(.person-popover:not([hidden])),
.project-metadata:has(.assignees-edit-popover:not([hidden])),
.project-section:has(.status-dropdown:not([hidden])),
.project-section:has(.deadline-popover:not([hidden])),
.project-section:has(.person-popover:not([hidden])),
.project-section:has(.assignees-edit-popover:not([hidden])),
.subproject-card:has(.status-dropdown:not([hidden])),
.subproject-card:has(.deadline-popover:not([hidden])),
.subproject-card:has(.person-popover:not([hidden])) {
    position: relative;
    z-index: var(--z-dropdown);
}
.subproject-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.subproject-card__title-link {
    text-decoration: none;
    color: inherit;
    display: block;
    margin: 0;
    flex: 1;
}
.subproject-card__title-link:hover .subproject-card__title {
    color: var(--color-dark-teal);
}
.subproject-card__title {
    /* Faza 54b: text-base → text-sm pre kompaktnosť. Hlavný projekt má h1
       v text-3xl, sub-projekty teraz výrazne menšie = jasná hierarchia. */
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.subproject-card__code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-medium);
    flex-shrink: 0;
}
.subproject-card__footer {
    /* Faza 54b: kompaktný footer — padding-top --space-2 → 6px, jemnejší border. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 59, 65, 0.05);
}
.subproject-card__deadline,
.subproject-card__person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

/* === COMPACT inline-edit v subproject-card === */
.metadata-value-btn--compact {
    font-size: var(--text-xs);
    padding: 2px 6px;
    gap: 4px;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: var(--radius-xs);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    transition: all 100ms ease;
}
.metadata-value-btn--compact:hover {
    background: rgba(0, 59, 65, 0.04);
    border-color: rgba(0, 59, 65, 0.15);
}

.user-avatar--xs {
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-dark-teal) 100%);
    color: #FFFFFF;
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

/* Inline-edit status badge button — odstrániť default <button> styles */
.subproject-card .badge.inline-edit-trigger {
    /* Faza 60p: žiadny background override — necháme farbu z .badge--<status>
       (predtým var(--bg-subtle) robil status na kartách míľnikov sivý). */
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 100ms ease;
}
.subproject-card .badge.inline-edit-trigger:hover {
    border-color: rgba(0, 59, 65, 0.15);
}
.subproject-card .badge.inline-edit-trigger [data-lucide],
.subproject-card .badge.inline-edit-trigger svg.lucide {
    opacity: 0.6;
}

/* =================================================================
   #36 — NUDGE MODAL GLASS REDESIGN (faza 30e / Prompt #30e)
   Scoped na .nudge-modal-backdrop / .nudge-modal — neporušuje generický
   .modal-backdrop z #32 (Quick Create Modal).
   ================================================================= */

/* === BACKDROP === */
.nudge-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 30, 35, 0.4);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nudge-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
[data-theme="dark"] .nudge-modal-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

/* === PANEL === */
.nudge-modal {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;

    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);

    box-shadow:
        0 1px 3px rgba(0, 59, 65, 0.06),
        0 8px 24px rgba(0, 59, 65, 0.12),
        0 24px 60px rgba(0, 59, 65, 0.15);

    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition:
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 200ms ease;
}
.nudge-modal-backdrop.is-open .nudge-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}
[data-theme="dark"] .nudge-modal {
    background: rgba(22, 37, 40, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

/* === HEADER === */
.nudge-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
}
.nudge-modal__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* === CLOSE (×) === */
.nudge-modal__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 59, 65, 0.08);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    padding: 0;
}
.nudge-modal__close:hover {
    background: rgba(0, 59, 65, 0.08);
    color: var(--color-dark-teal);
    transform: rotate(90deg);
    border-color: rgba(0, 59, 65, 0.15);
}
.nudge-modal__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.2);
}

/* === BODY === */
.nudge-modal__body {
    padding: var(--space-4) var(--space-5);
}
.nudge-modal__subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}
.nudge-modal__subtitle strong {
    color: var(--text-primary);
}
.nudge-modal__section-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-2);
}

/* === PRIORITY CARDS === */
.nudge-priority-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.nudge-priority-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(0, 59, 65, 0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nudge-priority-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 59, 65, 0.18);
    box-shadow: 0 4px 12px rgba(0, 59, 65, 0.08);
}
.nudge-priority-card:has(input:checked),
.nudge-priority-card.is-selected {
    background: rgba(114, 230, 239, 0.1);
    border-color: var(--color-dark-teal);
    box-shadow:
        0 0 0 3px rgba(0, 59, 65, 0.08),
        0 4px 12px rgba(0, 59, 65, 0.1);
}
[data-theme="dark"] .nudge-priority-card {
    background: rgba(30, 50, 55, 0.45);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .nudge-priority-card:has(input:checked),
[data-theme="dark"] .nudge-priority-card.is-selected {
    background: rgba(114, 230, 239, 0.15);
    border-color: var(--color-blue);
}

/* Hide native radio (selektor priamy iba na input vnútri labelu) */
.nudge-priority-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom radio dot */
.nudge-priority-card__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    flex-shrink: 0;
    position: relative;
    transition: all 200ms ease;
    background: #FFFFFF;
}
.nudge-priority-card:has(input:checked) .nudge-priority-card__radio,
.nudge-priority-card.is-selected .nudge-priority-card__radio {
    border-color: var(--color-dark-teal);
    background: var(--color-dark-teal);
}
.nudge-priority-card:has(input:checked) .nudge-priority-card__radio::after,
.nudge-priority-card.is-selected .nudge-priority-card__radio::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
}

/* Color severity dot */
.nudge-priority-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.nudge-priority-card__dot--low    { background: #5FAE82; }
.nudge-priority-card__dot--medium { background: #C5953D; }
.nudge-priority-card__dot--high   { background: #C45757; }

.nudge-priority-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.nudge-priority-card__label {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-size: var(--text-sm);
}
.nudge-priority-card__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* === TEXTAREA === */
.nudge-modal textarea[name="message"] {
    width: 100%;
    min-height: 90px;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    resize: vertical;
    line-height: 1.5;
    transition: all 180ms ease;
}
.nudge-modal textarea[name="message"]:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 0 0 3px rgba(0, 59, 65, 0.1),
        0 2px 8px rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .nudge-modal textarea[name="message"] {
    background: rgba(30, 50, 55, 0.45);
    color: var(--text-primary);
}
.nudge-modal__char-counter {
    display: block;
    text-align: right;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* === FOOTER === */
.nudge-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid rgba(0, 59, 65, 0.06);
}

/* =================================================================
   #37 — PROJECTS LIST-VIEW (replaces .table z #30b–#30d)
   (faza 30f / Prompt #30f)
   ================================================================= */

/* Faza 30g: .projects-list / .project-row* z #30f odstránené —
   /projekty teraz používa <table class="projects-table"> (#38 layer dole).
   .project-row class na <tr> v dashboard widget active_projects.phtml
   už nemá glass-card override (regression z #30f fixnutý). */

/* .meta-btn shared button helper — používaný v inline edit popover triggers
   (deadline, person, notes) v rôznych miestach. Zachované. */
.meta-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: all 120ms ease;
}
.meta-btn:hover {
    background: rgba(0, 59, 65, 0.06);
    border-color: rgba(0, 59, 65, 0.1);
    color: var(--text-primary);
}
.meta-btn .empty,
.deadline-value--empty,
.notes-value--empty {
    color: var(--text-muted);
    font-style: italic;
}

/* Faza 43/S2: .area-pill--solid je teraz IBA alias .area-pill (rovnaký vzhľad).
   Modifier zachovaný pre backward compat — všetky templates s `area-pill--solid`
   automaticky dostanú nový vzhľad. min-width 50 → vyšší ako default 44px aby
   solid v tabuľkách bol jemne širší pre stĺpcové zarovnanie. */
.area-pill--solid {
    min-width: 50px;
    flex-shrink: 0;
}

/* Inline notes overlay editor */
.notes-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 30, 35, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.notes-editor-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 59, 65, 0.2);
}
.notes-editor-panel textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--space-3);
    border: 1.5px solid rgba(0, 59, 65, 0.12);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    resize: vertical;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
}
.notes-editor-panel textarea:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.1);
}
[data-theme="dark"] .notes-editor-panel {
    background: rgba(22, 37, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .notes-editor-panel textarea {
    background: rgba(30, 50, 55, 0.6);
}

/* Mobile responsive — meta wraps natural, actions reorder */
@media (max-width: 768px) {
    .project-row__main {
        flex-wrap: wrap;
    }
    .project-row__title-link {
        flex-basis: 100%;
        order: 1;
    }
    .project-row__status {
        order: 2;
    }
    .project-row__actions {
        order: 3;
        margin-left: auto;
    }
    .project-row__meta {
        padding-left: 0;
    }
    .meta-btn--notes,
    .meta-btn--notes .notes-value {
        max-width: 200px;
    }
}

/* =================================================================
   #38 — PROJECTS TABLE (revert z #30f list-view, faza 30g)
   <table class="projects-table"> s table-layout: fixed + <colgroup>
   pre stabilný column lock. Sub-projekty (data-parent-id) sú hidden
   default-ne, JS expand toggle cez projects-tree.js (sessionStorage).
   ================================================================= */

.projects-table-wrap {
    /* glass-card wrap kombinuje s utility inline padding:0 + overflow:hidden,
       aby table border-radius nemal zúbky pri scroll alebo hover. */
    margin-top: var(--space-4);
}

.projects-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    /* Faza 30i: cap title cell rast na širokých monitoroch — namiesto roztiahnutia
       cez 1100px container ho obmedzíme aby status/osoba zostali bližšie k názvu. */
    max-width: 1280px;
}

/* Column widths — faza 30j: deadline na konkrétny dátum (~"31. 10. 2026"
   potrebuje min 110px), poznámka icon-only, hlavičky čitateľné. */
.projects-table__col-chevron   { width: 32px;  }
.projects-table__col-area      { width: 76px;  }
.projects-table__col-title     { width: auto;  }
.projects-table__col-notes     { width: 88px;  } /* Faza 60t: aby sa "Poznámka" v hlavičke neorezalo */
.projects-table__col-deadline  { width: 124px; }
.projects-table__col-person    { width: 168px; }
.projects-table__col-status    { width: 148px; }
.projects-table__col-actions   { width: 112px; } /* Faza 67d: 76→112px — 3 ikony (nudge+detail+kebab) sa zmestia DO stĺpca, kebab neprečnieva z tabuľky */

.projects-table__head th {
    padding: var(--space-3) 10px;
    text-align: left;
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    background: rgba(0, 59, 65, 0.03);
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.projects-table__head th:first-child { padding-left: var(--space-3); }
.projects-table__head th[scope="col"][aria-label="Akcie"] { padding-right: var(--space-3); }
/* Faza 60t: hlavička Poznámka (6. stĺpec) zarovnaná doprava — sedí s "+" ikonou. */
.projects-table__head th:nth-child(6) { text-align: right; padding-right: var(--space-3); }
[data-theme="dark"] .projects-table__head th {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.projects-table__row {
    background: transparent;
    transition: background 180ms ease, box-shadow 180ms ease;
}
.projects-table__row:hover {
    background: var(--color-aqua-white);
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .projects-table__row:hover {
    background: rgba(114, 230, 239, 0.06);
}
/* Faza 30i: row rhythm — žiadna zebra, len subtle border-bottom 6% dark-teal
   na každom riadku. Posledný row bez border-bottom (clean cut na rounded corner). */
.projects-table tbody tr.projects-table__row:last-child .projects-table__cell {
    border-bottom: none;
}

/* Sub-row: rovnaký table-row grid (cells dedia colgroup), len mierne tinted
   pozadie + area-color accent v title cell cez inset box-shadow. */
.projects-table__row--child {
    background: color-mix(in srgb, var(--area-color, #78909C) 4%, transparent);
}
[data-theme="dark"] .projects-table__row--child {
    background: color-mix(in srgb, var(--area-color, #78909C) 8%, transparent);
}
.projects-table__row--child:hover {
    background: color-mix(in srgb, var(--area-color, #78909C) 10%, var(--color-aqua-white));
}

.projects-table__cell {
    padding: var(--space-3);
    border-bottom: 1px solid rgba(0, 59, 65, 0.05);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
}
[data-theme="dark"] .projects-table__cell {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

/* Chevron toggle pre parents s deťmi */
.projects-table__cell--chevron {
    padding: 0;
    text-align: center;
}
.projects-table__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
    padding: 0;
}
.projects-table__chevron:hover {
    background: rgba(0, 59, 65, 0.08);
    color: var(--color-dark-teal);
}
.projects-table__chevron [data-lucide],
.projects-table__chevron svg.lucide {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.projects-table__chevron[aria-expanded="true"] [data-lucide],
.projects-table__chevron[aria-expanded="true"] svg.lucide {
    transform: rotate(90deg);
}

/* Title cell — sub-projekt indent + corner-down-right ikona + left border accent */
.projects-table__cell--title {
    position: relative;
    display: table-cell; /* defensive — niektoré browse robia inline pri hidden toggle */
}
.projects-table__row--child .projects-table__cell--title {
    padding-left: calc(var(--space-3) + 24px);
    /* Faza 30j: stenčený 2px accent (predtým 3px var(--color-blue) → vyzeralo
       ako hrubý cyan blok), teraz iba 2px v --area-color (per sub-projekt). */
    box-shadow: inset 2px 0 0 var(--area-color, #78909C);
}

/* Faza 30j: area cell mierne menej horizontálneho padding-u aby sa pill
   bezpečne zmestil aj pri širších kódoch (PROMO, REG). */
.projects-table__cell--area {
    padding-left: 10px;
    padding-right: 8px;
}

/* Faza 33a — KRITICKÝ FIX (root cause status/person/deadline bugu z #30g-30j):
   .projects-table__cell má overflow: hidden (pre text-overflow: ellipsis na title),
   ktoré CLIPS absolute-positioned dropdown/popover vnútri inline-edit kontajnerov.
   JS funguje, dropdown sa otvorí, ale parent cell ho oreže — user ho nevidí.
   Fix: per-cell override overflow: visible pre stĺpce s inline edit dropdownmi.
   Ellipsis na person sa rieši cez inner .projects-table__person-name span. */
.projects-table__cell--area,
.projects-table__cell--status,
.projects-table__cell--person,
.projects-table__cell--deadline {
    overflow: visible;
}

/* Faza 33a → 42b/S2 — inline-edit-area (klikateľný area pill v tabuľke).
   Zachovávame override len pre hover — base border je z .area-pill--solid. */
.inline-edit-area {
    position: relative;
    display: inline-block;
}
.inline-edit-area .area-pill.inline-edit-trigger {
    cursor: pointer;
    transition: filter 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.inline-edit-area .area-pill.inline-edit-trigger:hover {
    filter: brightness(0.96);
    border-color: color-mix(in srgb, var(--area-color, #78909C) 65%, rgba(0, 59, 65, 0.15));
    transform: translateY(-1px);
}
.area-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 59, 65, 0.12);
    z-index: var(--z-dropdown, 100);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
[data-theme="dark"] .area-dropdown {
    background: rgba(22, 37, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}
.area-option {
    display: grid;
    grid-template-columns: 10px 50px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: left;
    border-radius: var(--radius-xs);
    transition: background 120ms ease;
}
.area-option:hover {
    background: var(--color-aqua-white);
}
.area-option[aria-current="true"] {
    background: var(--color-aqua-white);
    font-weight: var(--font-semibold);
}
.area-option__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--area-color, #78909C);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.area-option__code {
    /* Faza 66f: Satoshi (brand) namiesto monospace — konzistentné s appkou. */
    font-family: inherit;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
}
.area-option__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.area-option--clear {
    grid-template-columns: auto 1fr;
    border-top: 1px solid rgba(0, 59, 65, 0.06);
    margin-top: 4px;
    padding-top: 8px;
    color: var(--text-muted);
}
.area-option--clear:hover { color: var(--text-primary); }
.area-option i[data-lucide="check"],
.area-option svg.lucide-check { color: var(--status-success-text); justify-self: end; }
.projects-table__hierarchy {
    color: var(--area-color, var(--text-muted));
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.projects-table__title-link {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: color 120ms ease;
}
.projects-table__title-link:hover {
    color: var(--color-dark-teal);
    text-decoration: none;
}
.projects-table__row--child .projects-table__title-link {
    font-weight: var(--font-normal);
    color: var(--text-secondary);
}

.projects-table__code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Faza 30i: notes column ako icon-only (50px). Empty = jemná + ikona,
   filled = aktívna farba sticky-note. Klik → existujúci overlay editor. */
.projects-table__cell--notes {
    /* Faza 60t: "+" posunutá doprava, nech nelepí na status (predtým center). */
    text-align: right;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
}
.projects-table__notes-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: all 140ms ease;
    padding: 0;
}
.projects-table__notes-icon-btn:hover {
    opacity: 1;
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
    border-color: rgba(0, 59, 65, 0.12);
}
.projects-table__notes-icon-btn.is-filled {
    opacity: 1;
    color: var(--color-apricot);
    background: rgba(255, 208, 176, 0.18);
    border-color: rgba(255, 208, 176, 0.35);
}
.projects-table__notes-icon-btn.is-filled:hover {
    background: rgba(255, 208, 176, 0.3);
    color: #8B5A3C;
}
.projects-table__notes-icon-btn.is-readonly {
    cursor: default;
    pointer-events: none;
}
.projects-table__row:hover .projects-table__notes-icon-btn:not(.is-filled) {
    opacity: 0.7;
}

/* Cell-fit meta-btn (deadline, person cells) — ber celú výšku cell-u */
.meta-btn--cell {
    width: 100%;
    justify-content: flex-start;
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Person cell: name truncate */
.projects-table__person-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Actions cell — icon-only buttons (žiaden text overlap možný) */
.projects-table__cell--actions {
    padding: var(--space-1);
    text-align: right;
    overflow: visible; /* pre kebab dropdown */
    position: relative;
    white-space: nowrap; /* Faza 67d: ikony na jednom riadku, držia sa v stĺpci */
}
.projects-table__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all 180ms cubic-bezier(0.34, 1.16, 0.64, 1);
    padding: 0;
    flex-shrink: 0;
}
/* Faza 33b: APRICOT glass hover (Sekcia 3 — decentný akcent) */
.projects-table__action-icon:hover {
    background: rgba(255, 208, 176, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #8B5A3C;
    border-color: rgba(255, 208, 176, 0.6);
    text-decoration: none;
    transform: translateX(1px);
}
[data-theme="dark"] .projects-table__action-icon:hover {
    background: rgba(255, 208, 176, 0.25);
    color: var(--color-apricot);
}
.projects-table__cell--actions .row-actions {
    display: inline-block;
    position: relative;
}
.projects-table__cell--actions .row-actions__kebab {
    opacity: 0;
    transition: opacity 150ms ease;
}
.projects-table__row:hover .row-actions__kebab,
.projects-table__cell--actions .row-actions:has(.row-actions__dropdown:not([hidden])) .row-actions__kebab,
.projects-table__cell--actions .row-actions:has(.row-actions__popover:not([hidden])) .row-actions__kebab {
    opacity: 1;
}

/* Status badge button vnútri tabuľky — faza 30i: ZACHOVAJ farebné pozadie
   z .badge--planning/in_progress/done/etc (predtým bg-subtle override-oval). */
.projects-table__cell--status .badge.inline-edit-trigger {
    cursor: pointer;
    border: 1px solid transparent;
    padding: 2px 8px; /* Faza 60t: kompaktnejšie (predtým 4px 10px) */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-weight: var(--font-semibold);
    transition: all 140ms ease;
    /* Žiadny background override — necháme badge--<status> farbu z #base layer */
}
.projects-table__cell--status .badge.inline-edit-trigger:hover {
    border-color: rgba(0, 59, 65, 0.18);
    filter: brightness(0.96);
}
.projects-table__cell--status .badge.inline-edit-trigger [data-lucide],
.projects-table__cell--status .badge.inline-edit-trigger svg.lucide {
    opacity: 0.6;
}

/* Faza 30i: row density polish — vertikálne padding kompaktnejšie aby riadky
   nedýchali príliš (cieľ 44-46px row height). Horizontálne padding zostáva. */
.projects-table__cell {
    padding-top: 8px;
    padding-bottom: 8px;
}
.projects-table__row .projects-table__cell {
    border-bottom-color: rgba(0, 59, 65, 0.05);
}

/* Mobile responsive — table sa scroll-uje horizontálne na úzkych obrazovkách */
@media (max-width: 900px) {
    .projects-table-wrap { overflow-x: auto; }
    .projects-table { min-width: 760px; }
}

/* =================================================================
   #39 — TASKS REDESIGN (faza 31 / Prompt #31)
   Area sections + glass detail modal. Scoped .task-section / .task-modal*
   — neporušuje .nudge-modal* (#30e) ani #project-create-modal (#28).
   ================================================================= */

/* ===== TASK SECTIONS — group by area ===== */
.task-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.task-section {
    padding: 0;
    overflow: hidden;
    /* Subtle accent — left border v --area-color, definovaná inline na sekcii */
    border-left: 3px solid var(--area-color, #78909C);
}
.task-section__header {
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--area-color, #78909C) 8%, transparent);
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .task-section__header {
    background: color-mix(in srgb, var(--area-color, #78909C) 12%, transparent);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.task-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.task-section__name {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.task-section__count {
    margin-left: auto;
    padding: 2px 8px;
    background: rgba(0, 59, 65, 0.08);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .task-section__count {
    background: rgba(255, 255, 255, 0.08);
}

/* Task list vnútri sekcie — odstránenie default ul styling */
.task-section .task-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Klik na task-item (mimo action button) → otvor modal */
.task-item[data-open-task-detail] {
    cursor: pointer;
}
.task-item[data-open-task-detail]:hover {
    background: var(--color-aqua-white);
}
[data-theme="dark"] .task-item[data-open-task-detail]:hover {
    background: rgba(114, 230, 239, 0.06);
}

/* ===== TASK DETAIL MODAL — glass v strede, spring entrance ===== */
.task-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 30, 35, 0.4);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.task-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
[data-theme="dark"] .task-modal-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.task-modal {
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 3px rgba(0, 59, 65, 0.06),
        0 8px 24px rgba(0, 59, 65, 0.12),
        0 24px 60px rgba(0, 59, 65, 0.15);
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition:
        transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 200ms ease;
}
.task-modal-backdrop.is-open .task-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}
[data-theme="dark"] .task-modal {
    background: rgba(22, 37, 40, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

.task-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
}
.task-modal__header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.task-modal__priority-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.task-modal__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 59, 65, 0.08);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    /* Faza 64d: spring prechod pre jemný brand hover (apricot). */
    transition: all 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    padding: 0;
}
.task-modal__close:hover {
    /* Faza 64d: plynulý spring prechod na apricot. */
    background: var(--color-apricot);
    color: var(--color-dark-teal);
    transform: rotate(90deg) scale(1.06);
    border-color: var(--color-apricot);
}
.task-modal__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.2);
}

.task-modal__body {
    padding: var(--space-4) var(--space-5);
}
.task-modal__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.task-modal__loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: var(--space-4) 0;
}
.task-modal__field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
}
.task-modal__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.task-modal__field--full {
    grid-column: 1 / -1;
}
.task-modal__label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.task-modal__value {
    font-size: var(--text-base);
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.4;
}
.task-modal__value--danger {
    color: var(--status-danger-text, #C45757);
    font-weight: var(--font-semibold);
}
/* Faza 33b: výraznejšia farba aby projekt link bol viditeľne klikateľný (ako .task-project-link) */
.task-modal__link {
    color: var(--text-link);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: color 140ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.task-modal__link::before {
    content: '↗';
    opacity: 0.5;
    font-size: 0.85em;
}
.task-modal__link:hover {
    color: var(--color-dark-teal);
    text-decoration: underline;
}
.task-modal__description {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.55;
    white-space: pre-wrap;
}
.task-modal__error {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(196, 87, 87, 0.1);
    color: var(--status-danger-text, #C45757);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.task-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: 1px solid rgba(0, 59, 65, 0.06);
}

/* Spinner loader animácia (recyklujem z modal #32) */
.task-modal__loading [data-lucide],
.task-modal__loading svg.lucide-loader {
    animation: modal-spin 1s linear infinite;
}

/* Mobile responsive — task modal field grid 1 col */
@media (max-width: 600px) {
    .task-modal__field-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   #40 — TASKS LAYOUT + AREA SIDEBAR NAV + FULL EDITABLE MODAL
   (faza 31 complete / Prompt #31 dokončenie)
   ================================================================= */

/* === LAYOUT: sidebar (220px) + main content (faza 40b/S5: širšie na veľkých obrazovkách)
   max-width 1320 → 1600px aby zoznam využil prázdne miesto vpravo na 1920px+
   monitoroch. Na menších obrazovkách auto-shrink (min-width na main column je 0). */
.tasks-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--space-5);
    /* Faza 67: 1600 → 1800px (vrátane 248px sidebar) — viac plochy pre zoznam úloh
       na širokom monitore, stále rozumný strop. Responzívne caps nedotknuté. */
    max-width: 1800px;
    margin: 0 auto;
    align-items: start;
}
.tasks-main {
    min-width: 0;
    max-width: none; /* faza 35d: predtým cap 880px — odstránené aby zoznam dýchal */
}

/* === AREA SIDEBAR NAV — faza 31d polish === */
.task-area-nav {
    padding: var(--space-3) 0;
    position: sticky;
    top: var(--space-3);
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
}
.task-area-nav__header {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
    margin-bottom: var(--space-2);
}
.task-area-nav__title {
    margin: 0;
    font-size: 11px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
}
.task-area-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-3) 11px calc(var(--space-3) + 1px);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--text-base);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    border-left: 3px solid transparent;
    position: relative;
}
.task-area-nav__item:hover {
    background: var(--color-aqua-white);
    color: var(--text-primary);
    text-decoration: none;
    border-left-color: color-mix(in srgb, var(--area-color, #78909C) 40%, transparent);
}
.task-area-nav__item:hover .task-area-nav__icon {
    background: color-mix(in srgb, var(--area-color, #78909C) 25%, transparent);
    color: var(--area-color, var(--color-dark-teal));
}
.task-area-nav__item.is-active {
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
    font-weight: var(--font-semibold);
    border-left-color: var(--area-color, var(--color-dark-teal));
}
.task-area-nav__item.is-active .task-area-nav__icon {
    background: color-mix(in srgb, var(--area-color, #78909C) 35%, transparent);
    color: var(--area-color, var(--color-dark-teal));
}
[data-theme="dark"] .task-area-nav__item.is-active {
    background: rgba(114, 230, 239, 0.12);
    color: var(--text-primary);
}

/* Faza 60c: locked area v sidebar — span (nie anchor), 🔒 namiesto count.
   Vidno že oblasť existuje, ale obsah nie je dostupný (Todoist štýl). */
.task-area-nav__item--locked {
    cursor: not-allowed;
    opacity: 0.62;
    color: var(--text-muted);
}
.task-area-nav__item--locked:hover {
    background: transparent;
    border-left-color: transparent;
    color: var(--text-muted);
}
.task-area-nav__item--locked .task-area-nav__icon {
    background: rgba(0, 59, 65, 0.04);
    color: var(--text-muted);
}
.task-area-nav__item--locked .task-area-nav__label-short {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 59, 65, 0.25);
    text-decoration-thickness: 1px;
}
.task-area-nav__handle--locked {
    color: var(--color-apricot-shade-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    cursor: not-allowed;
}
.task-area-nav__count--lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-apricot-shade-1);
    background: rgba(255, 208, 176, 0.18);
    border-radius: var(--radius-xs);
    padding: 2px 5px;
}
[data-theme="dark"] .task-area-nav__item--locked {
    color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .task-area-nav__count--lock {
    background: rgba(255, 208, 176, 0.1);
    color: var(--color-apricot);
}

/* ════════════════════════════════════════════════════════════════════════════
   Faza 60c — Admin: area permissions panel v /nastavenia/oblasti
   ════════════════════════════════════════════════════════════════════════════ */
.area-permissions {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed rgba(0, 59, 65, 0.12);
}
.area-permissions__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-2);
}
.area-permissions__sensitive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(0, 59, 65, 0.12);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    transition: all 160ms ease;
}
.area-permissions__sensitive-toggle.is-sensitive {
    background: rgba(255, 208, 176, 0.16);
    border-color: var(--color-apricot);
    color: var(--color-apricot-shade-1);
}
.area-permissions__sensitive-toggle.is-open {
    background: rgba(114, 230, 239, 0.14);
    border-color: var(--color-famivel-blue);
    color: var(--color-dark-teal);
}
.area-permissions__sensitive-toggle:hover {
    transform: translateY(-1px);
}
.area-permissions__members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-2);
}
.area-permissions__member {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    border: 1px solid rgba(0, 59, 65, 0.12);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    transition: all 160ms ease;
}
.area-permissions__member.is-granted {
    background: rgba(114, 230, 239, 0.16);
    border-color: var(--color-famivel-blue);
    color: var(--color-dark-teal);
}
.area-permissions__member.is-blocked {
    background: rgba(0, 59, 65, 0.04);
    color: var(--text-muted);
    opacity: 0.7;
}
.area-permissions__member.is-blocked:hover {
    background: rgba(114, 230, 239, 0.1);
    border-color: var(--color-famivel-blue);
    color: var(--color-dark-teal);
    opacity: 1;
}
.area-permissions__member.is-granted:hover {
    background: rgba(239, 168, 120, 0.16);
    border-color: var(--color-apricot);
    color: var(--color-apricot-shade-1);
}
.area-permissions__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
[data-theme="dark"] .area-permissions { border-top-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .area-permissions__member { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .area-permissions__sensitive-toggle { border-color: rgba(255, 255, 255, 0.12); }

/* Ikona oblasti — 28x28 farebný štvorček s area tintom */
.task-area-nav__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--area-color, #78909C) 12%, transparent);
    color: color-mix(in srgb, var(--area-color, #78909C) 70%, #000);
    transition: all 160ms ease;
}
[data-theme="dark"] .task-area-nav__icon {
    background: color-mix(in srgb, var(--area-color, #78909C) 20%, transparent);
    color: color-mix(in srgb, var(--area-color, #78909C) 60%, #FFF);
}
.task-area-nav__icon [data-lucide],
.task-area-nav__icon svg.lucide {
    width: 15px;
    height: 15px;
    stroke-width: 2.1px;
}

.task-area-nav__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Glass count pill */
.task-area-nav__count {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding: 2px 9px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 59, 65, 0.06);
    border-radius: 10px;
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}
.task-area-nav__item:hover .task-area-nav__count {
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-primary);
}
.task-area-nav__item.is-active .task-area-nav__count {
    background: var(--color-dark-teal);
    color: #FFFFFF;
    border-color: var(--color-dark-teal);
}
[data-theme="dark"] .task-area-nav__count {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .task-area-nav__item.is-active .task-area-nav__count {
    background: var(--color-blue);
    color: var(--color-dark-teal);
    border-color: var(--color-blue);
}

/* Skryť scrollbar v sidebar-i ak nie je potreba (subtle) */
.task-area-nav::-webkit-scrollbar { width: 4px; }
.task-area-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 59, 65, 0.15);
    border-radius: 2px;
}

/* === MODAL WIDE — dvojstĺpcový layout (faza 40a/S3: bigger + modern) === */
.task-modal--wide {
    max-width: 960px;
}
.task-modal__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
}
.task-modal__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
/* Decentné oddelenie sekcií v hlavnom stĺpci — jemný horný border po prvej. */
.task-modal__main > .task-modal__field-block + .task-modal__field-block {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .task-modal__main > .task-modal__field-block + .task-modal__field-block {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.task-modal__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .task-modal__sidebar {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.task-modal__sidebar-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* === EDITABLE FIELDS — faza 40a/S3: bigger fonts + glass selecty === */
.task-modal__title--editable {
    margin: 0;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: text;
    transition: all 120ms ease;
    /* Faza 64d: výraznejší názov úlohy (text-2xl → text-3xl) — v hierarchii nad metadátami. */
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.015em;
    outline: none;
}
.task-modal__title--editable:hover {
    background: rgba(0, 59, 65, 0.04);
}
.task-modal__title--editable:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.08);
}

.task-modal__field-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Faza 65a: STABILNÉ pole popisu — geometria (výška/padding/border-box) je
   IDENTICKÁ vo všetkých stavoch (prázdny / hover / vyplnený / focus). Stavy sa
   líšia LEN pozadím, farbou borderu a tieňom → prechod prázdny↔editácia je
   plynulý (spring), placeholder nikdy neposkočí a box sa neobjaví s posunom.
   (Predtým mal prázdny stav inú výšku+padding → odskakovalo to.) */
.task-modal__textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--space-3);
    box-sizing: border-box;
    /* border je VŽDY prítomný (v prázdnom stave transparentný) → nemení box-model */
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: transparent;   /* prázdny stav: žiadny biely box, len placeholder */
    backdrop-filter: blur(8px);      /* prejaví sa až pri nepriehľadnom pozadí (focus/obsah) */
    -webkit-backdrop-filter: blur(8px);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    resize: vertical;
    line-height: 1.55;
    cursor: text;
    /* spring prechod LEN pre vizuál — nikdy nie pre layout (výška/padding sa nemenia) */
    transition: background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-modal__textarea::placeholder { color: var(--text-muted); opacity: 0.9; }
/* hover nad prázdnym poľom — jemné naznačenie boxu, BEZ posunu obsahu */
.task-modal__textarea:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(0, 59, 65, 0.1);
}
/* vyplnený popis (má obsah) — pokojný glass box, rovnaká geometria */
.task-modal__textarea:not(:placeholder-shown) {
    background-color: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 59, 65, 0.1);
}
/* editácia (focus) — plný glass box + spring zvýraznenie, rovnaká geometria */
.task-modal__textarea:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.95);
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.08);
}

/* Glass selecty — custom šípka cez SVG background namiesto native (faza 40a/S3) */
.task-modal__select,
.task-modal__input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 140ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.task-modal__select {
    /* Custom chevron — dark-teal SVG, žiadne native */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23003B41' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.task-modal__select:hover,
.task-modal__input:hover {
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 59, 65, 0.2);
}
.task-modal__select:focus,
.task-modal__input:focus {
    outline: none;
    border-color: var(--color-dark-teal);
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.08);
}
[data-theme="dark"] .task-modal__textarea,
[data-theme="dark"] .task-modal__select,
[data-theme="dark"] .task-modal__input {
    background-color: rgba(30, 50, 55, 0.45);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .task-modal__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2372E6EF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* === SUBTASKS === */
.task-modal__subtasks-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.task-modal__subtasks-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.task-modal__subtasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.task-modal__subtask {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-2);
    border-radius: var(--radius-xs);
    transition: background 100ms ease;
}
.task-modal__subtask:hover {
    background: rgba(0, 59, 65, 0.03);
}
.task-modal__subtask-check {
    cursor: pointer;
    accent-color: var(--color-dark-teal);
    flex-shrink: 0;
}
.task-modal__subtask-title {
    font-size: var(--text-base);
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.task-modal__subtask.is-done .task-modal__subtask-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
.task-modal__subtask-add {
    margin-top: var(--space-1);
}
.task-modal__subtask-input {
    width: 100%;
    padding: 9px var(--space-3);
    background: rgba(255, 255, 255, 0.4);
    border: 1px dashed rgba(0, 59, 65, 0.15);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: all 120ms ease;
}
.task-modal__subtask-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    border-style: solid;
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.08);
}
.task-modal__subtask-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* === SAVE INDICATOR === */
.task-modal__save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: #5FAE82;
    padding: 4px 8px;
    background: rgba(95, 174, 130, 0.08);
    border-radius: var(--radius-xs);
    align-self: flex-start;
    animation: task-save-fade 1500ms ease;
}
@keyframes task-save-fade {
    0% { opacity: 0; transform: translateY(-4px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* === MOBILE: stack vertikálne === */
@media (max-width: 900px) {
    .tasks-layout {
        grid-template-columns: 1fr;
    }
    .task-area-nav {
        position: static;
        max-height: 220px;
    }
    .tasks-main {
        max-width: none;
    }
}
@media (max-width: 700px) {
    .task-modal__body--split {
        grid-template-columns: 1fr;
    }
    .task-modal--wide {
        max-width: 100%;
    }
}

/* =================================================================
   #41 — TASK COMMENTS (faza 31c / Prompt #31 dokončenie + komentáre)
   Scoped .task-comment-* — žiadna kolízia s project .comment-* z faza 13.
   ================================================================= */

.task-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 280px;
    overflow-y: auto;
}
.task-comment-list__empty {
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    font-style: italic;
}
.task-comment {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(0, 59, 65, 0.05);
    transition: background 140ms ease;
}
.task-comment:hover {
    background: rgba(255, 255, 255, 0.75);
}
[data-theme="dark"] .task-comment {
    background: rgba(30, 50, 55, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .task-comment:hover {
    background: rgba(30, 50, 55, 0.65);
}
.task-comment__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-dark-teal) 100%);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: var(--font-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.task-comment__body {
    flex: 1;
    min-width: 0;
}
.task-comment__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}
.task-comment__author {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.task-comment__time {
    font-size: 11px;
    color: var(--text-muted);
}
.task-comment__delete {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: all 140ms ease;
}
.task-comment:hover .task-comment__delete {
    opacity: 0.6;
}
.task-comment__delete:hover {
    opacity: 1 !important;
    color: var(--status-danger-text, #C45757);
    background: rgba(196, 87, 87, 0.1);
}
.task-comment__text {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Comment form (under list) */
.task-comment-form {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.task-comment-form__input {
    width: 100%;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    resize: vertical;
    min-height: 68px;
    line-height: 1.5;
    transition: all 140ms ease;
}
.task-comment-form__input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.08);
}
.task-comment-form__input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}
[data-theme="dark"] .task-comment-form__input {
    background: rgba(30, 50, 55, 0.45);
}
.task-comment-form__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

/* Faza 66u: prílohy komentárov — attach button, vybrané súbory, thumbnaily, doc čipy. */
.task-comment-form__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}
.task-comment-form__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 59, 65, 0.12);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-dark-teal);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.task-comment-form__attach:hover {
    background: var(--color-aqua-white);
    border-color: var(--color-famivel-blue);
    transform: translateY(-1px);
}
.task-comment-form__files {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Obrázkové prílohy — thumbnaily */
.task-comment__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.task-comment__thumb {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(0, 59, 65, 0.1);
    background: rgba(255, 255, 255, 0.5);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.task-comment__thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 59, 65, 0.12);
}
.task-comment__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dokumentové prílohy — glass čipy */
.task-comment__files {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.task-comment__file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 320px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 59, 65, 0.12);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.task-comment__file:hover {
    background: var(--color-aqua-white);
    border-color: var(--color-famivel-blue);
}
.task-comment__file-icon {
    display: inline-flex;
    color: var(--color-dark-teal);
    flex-shrink: 0;
}
.task-comment__file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.task-comment__file-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-comment__file-size {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.task-comment__file-dl {
    margin-left: auto;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* =================================================================
   #42 — EDITOR.JS WYSIWYG GLASS STYLING (faza 32 / Prompt #32)
   Štýluje Editor.js bloky, popup, inline toolbar, table do FamiPro palety.
   Scoped na .description-editorjs (mount point) — neporušuje rest of UI.
   ================================================================= */

.description-editorjs {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 59, 65, 0.08);
    border-radius: var(--radius-md);
    /* Faza 54a (4. kolo): VLASTNÝ explicit gutter 44px vľavo.
       3 predchádzajúce kolá zlyhávali pretože sme nechávali Editor.js
       heuristiku (centered max-width, --narrow modifier) rozhodovať —
       a tá závisí od šírky editora / vnútorných modifierov ktoré sa
       menia. Teraz: definujeme priestor sami, "+" pinujeme explicitne. */
    padding: var(--space-3) var(--space-4) var(--space-3) 44px;
    min-height: 200px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    overflow: visible;
}

/* Faza 32a — mutual exclusion mode-switch cez container class (defenzívne):
   Predtým: [hidden] attribute spoľahlivo, ale CSS class .description-editorjs
   mala backdrop-filter ktorý v niektorých stack-context combos rendroval
   element napriek hidden. Class-based fallback je explicit a istý. */
.description-container.is-editing .description-rendered {
    display: none !important;
}
.description-container:not(.is-editing) .description-editorjs {
    display: none !important;
}
.description-editorjs:focus-within {
    border-color: var(--color-dark-teal);
    box-shadow: 0 0 0 3px rgba(0, 59, 65, 0.08);
}
[data-theme="dark"] .description-editorjs {
    background: rgba(30, 50, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Editor.js global overrides — scoped */
.description-editorjs .codex-editor {
    color: var(--text-primary);
    font-family: inherit;
}
/* Faza 55 (5. pokus) — DIAGNÓZA z Editor.js 2.30 JS source bundle:
   Skutočný DOM:
     .ce-toolbar
       .ce-toolbar__content
         .ce-toolbar__actions       ← flex row, RODIČ pre obe deti
           .ce-toolbar__plus         ← "+" tlačidlo VNÚTRI actions
           .ce-toolbar__settings-btn  ← settings VNÚTRI actions

   ROOT CAUSE prečo #54a zlyhalo:
     `.ce-toolbar__actions { right: -4px }` posunul RODIČA doprava;
     plus (flex child) sa automaticky preplo doprava s rodičom.
     `left: -36px` na samotnom .ce-toolbar__plus nemalo efekt (plus je
     position:static vnútri actions, left/right ignored).

   NOVÁ stratégia — SKRY natívne "+", VLASTNÉ tlačidlo cez JS API:
     1) Natívne .ce-toolbar__plus → display: none (skry).
     2) Vlastné .famipro-add-block button v .description-editorjs (CSS nižšie).
     3) Klik → simulate click na natívne (.click()) → Editor.js otvorí toolbox
        pre aktuálne aktívny blok cez vnútorný click handler.
     4) .ce-toolbar__actions VRÁTENÉ na DEFAULT — žiadny right:-4px override
        (to bol vinnik 4. kola).
     5) Settings (block tunes) zostane natívne, Editor.js si ho umiestni sám. */
.description-editorjs .ce-block__content,
.description-editorjs .ce-toolbar__content {
    max-width: none !important;
    margin: 0 !important;
}

/* Skry natívne "+" tlačidlo Editor.js (riešime vlastným nižšie). */
.description-editorjs .ce-toolbar__plus {
    display: none !important;
}

/* Vlastné "+" tlačidlo — fixne v ľavom gutteri popisu, vždy viditeľné.
   .description-editorjs má position: relative (anchor) — pridané v CSS
   v hlavnej deklarácii .description-editorjs (faza 51 padding 44px gutter). */
.description-editorjs { position: relative; }
.famipro-add-block {
    position: absolute;
    left: 8px;
    top: 14px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
    border: 1px solid rgba(0, 59, 65, 0.12);
    border-radius: var(--radius-xs);
    cursor: pointer;
    padding: 0;
    transition: all 140ms ease;
    z-index: 5;
}
.famipro-add-block:hover {
    background: var(--color-dark-teal);
    color: #fff;
    border-color: var(--color-dark-teal);
    transform: scale(1.05);
}
.famipro-add-block svg,
.famipro-add-block [data-lucide] {
    width: 16px; height: 16px;
}
[data-theme="dark"] .famipro-add-block {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-famivel-blue);
    border-color: rgba(255, 255, 255, 0.12);
}
.description-editorjs .ce-paragraph {
    line-height: 1.55;
    color: var(--text-primary);
}
.description-editorjs .ce-header {
    color: var(--color-dark-teal);
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
    padding: 6px 0;
}

/* Plus button (block add) */
.description-editorjs .ce-toolbar__plus,
.description-editorjs .ce-toolbar__settings-btn {
    background: var(--color-aqua-white);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-xs);
    color: var(--color-dark-teal);
    transition: all 140ms ease;
}
.description-editorjs .ce-toolbar__plus:hover,
.description-editorjs .ce-toolbar__settings-btn:hover {
    background: var(--color-dark-teal);
    color: #FFFFFF;
    border-color: var(--color-dark-teal);
}

/* Popup menu (toolbox + block-tunes) */
.description-editorjs .ce-popover {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 12px rgba(0, 59, 65, 0.08),
        0 16px 40px rgba(0, 59, 65, 0.12);
}
/* Faza 76 (KROK 1): „Convert to" podmenu (.ce-popover--nested) trhalo, lebo sa
   vykresľovalo ako 2. backdrop-filter blur NAD už rozmazaným rodičom → dvojitý
   blur = drahý repaint pri nábehu. Nested popover preto NEMÁ vlastný blur (sedí
   nad sklom rodiča) + má plynulý spring nábeh. */
.description-editorjs .ce-popover--nested {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
}
.description-editorjs .ce-popover {
    transition: opacity 150ms ease,
                transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}
.description-editorjs .ce-popover-item {
    color: var(--text-primary);
    border-radius: var(--radius-xs);
    transition: background 120ms ease;
}
.description-editorjs .ce-popover-item:hover,
.description-editorjs .ce-popover-item--active {
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
}
.description-editorjs .ce-popover-item__icon {
    background: rgba(0, 59, 65, 0.04);
    color: var(--color-dark-teal);
    border-radius: var(--radius-xs);
}
[data-theme="dark"] .description-editorjs .ce-popover {
    background: rgba(22, 37, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Inline toolbar (bold/italic/link) */
.description-editorjs .ce-inline-toolbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 59, 65, 0.1);
}
.description-editorjs .ce-inline-tool {
    color: var(--text-primary);
}
.description-editorjs .ce-inline-tool:hover {
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
}
.description-editorjs .ce-inline-tool--active {
    color: var(--color-dark-teal);
}

/* Table block */
.description-editorjs .tc-wrap {
    --color-background: rgba(255, 255, 255, 0.7);
    --color-text-secondary: var(--text-secondary);
    --color-border: rgba(0, 59, 65, 0.1);
    --cell-size: 36px;
    --toolbox-icon-size: 18px;
}
.description-editorjs .tc-table {
    border-color: rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.5);
}
.description-editorjs .tc-row {
    border-bottom-color: rgba(0, 59, 65, 0.08);
}
.description-editorjs .tc-cell {
    color: var(--text-primary);
    border-color: rgba(0, 59, 65, 0.08);
}
.description-editorjs .tc-cell--selected {
    background: var(--color-aqua-white);
}

/* ====================================================================
   FAZA 75 — Editor.js popis: vizuálne ladenie (LEN CSS/UX vrstva).
   Plynulejší drag feedback + výrazná drop čiara + typografia / rytmus /
   čistý gutter. ŽIADNA zmena logiky (autosave/drag-drop/save/cancel).
   ==================================================================== */

/* — KROK 3: vertikálny rytmus + jemné zaoblenie blokov (plynulé prechody) — */
.description-editorjs .ce-block {
    border-radius: 6px;
    transition: background 160ms ease,
                box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.description-editorjs .ce-block__content {
    position: relative;          /* kotva pre drop čiaru (::before) */
    padding-top: 3px;
    padding-bottom: 3px;
}

/* — KROK 3: typografia nadpisov (Satoshi) — konzistentné veľkosti + rytmus — */
.description-editorjs .ce-header { margin: 12px 0 4px; line-height: 1.25; }
.description-editorjs h1.ce-header { font-size: 26px; }
.description-editorjs h2.ce-header { font-size: 22px; }
.description-editorjs h3.ce-header { font-size: 18px; }
.description-editorjs h4.ce-header { font-size: 16px; }
.description-editorjs .ce-paragraph { font-size: 15px; line-height: 1.65; }

/* — KROK 3: placeholder / prázdny blok — nenápadný, kultivovaný — */
.description-editorjs .ce-paragraph[data-placeholder]:empty::before {
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.7;
}

/* — KROK 1: jemný „lift" pri uchopení drag handle (6 bodiek), spring easing — */
.description-editorjs .ce-toolbar__settings-btn {
    cursor: grab;
    /* Faza 79 (KROK 2): decentné, utlmené; zvýrazní sa pri hoveri editora/handle. */
    opacity: 0.32;
    transition: opacity 160ms ease,
                transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 160ms ease, background 140ms ease;
}
/* Hover na editor → handle jemne vystúpi; priamy hover na handle → plná viditeľnosť. */
.description-editorjs:hover .ce-toolbar__settings-btn {
    opacity: 0.6;
}
.description-editorjs .ce-toolbar__settings-btn:hover {
    opacity: 1;
}
.description-editorjs .ce-toolbar__settings-btn:active {
    cursor: grabbing;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 59, 65, 0.22);
}
/* Pozn. (Faza 76): drop indikátor NIE je .ce-block--drop-target::before — plugin
   v1.1.16 tú triedu nepridáva, kreslí inline border-top/bottom na blok. Štýl čiary
   sa preto rieši v JS cez 2. param konštruktora DragDrop ('2px solid #72E6EF'). */

/* — KROK 3: čistý gutter bez prekrytia „+" a drag handle.
     Vlastné „+" je absolútne (voči holderu) úplne vľavo; natívny drag handle je
     content-relatívny → širší ľavý gutter ho posunie vpravo od „+", takže sa
     neprekrývajú. (Žiadny krehký margin hack na natívnom toolbare.) */
.description-editorjs { padding-left: 58px; }
.famipro-add-block { left: 4px; }

/* === Faza 82: DIVIDER zjednotený na vzhľad dashboard-task-divider (čiara — ✦ — čiara).
   • Read-only render (.editorjs-delimiter) a /projekty používajú PRIAMO triedy
     .dashboard-task-divider (reálne <span>-y + brand SVG hviezda) — jeden zdroj štýlu.
   • Editor LIVE view (.ce-delimiter) je prázdny div riadený pluginom (nevieme doň
     vložiť <span>-y) → ten istý vzhľad mimikujeme cez background: brand SVG hviezda
     (data URI, Famivel modrá, opacity 0.7) v strede + dve doľava/doprava miznúce
     gradient čiary (rgba 0,59,65,0.12 ako na dashboarde). === */
.description-editorjs .ce-delimiter {
    height: 18px;
    margin: 18px 0;
    border: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%2372E6EF' fill-opacity='0.7' aria-hidden='true'%3E %3Cpath d='M 48.78,2.09 c -1.16,0.33 -2.25,1.14 -3,2.24 c -0.35,0.52 -0.51,0.86 -1.05,2.2 c -5.18,12.84 -13.43,23.4 -23.97,30.69 c -4.55,3.14 -9.9,5.92 -14.98,7.77 c -3.56,1.3 -4.91,5.04 -2.69,7.46 c 0.67,0.73 1.23,1.07 2.77,1.71 c 18.91,7.85 31.68,20.75 38.93,39.33 c 0.3,0.77 0.64,1.56 0.76,1.76 c 1.84,3.05 5.17,3.66 7.54,1.35 c 0.77,-0.75 1.17,-1.41 1.71,-2.82 c 7.36,-18.99 20.34,-32.03 39.76,-39.91 c 2.29,-0.93 3.45,-2.33 3.45,-4.17 c -0.01,-2.16 -1.45,-3.71 -4.6,-4.91 c -17.97,-6.83 -31.07,-19.96 -38.63,-38.72 c -0.84,-2.1 -2,-3.36 -3.56,-3.9 c -0.56,-0.19 -1.88,-0.24 -2.42,-0.09 z'/%3E %3C/svg%3E") center center / 15px 15px no-repeat,
        linear-gradient(90deg, transparent, rgba(0, 59, 65, 0.12), transparent) left center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(0, 59, 65, 0.12), transparent) right center / calc(50% - 16px) 1px no-repeat;
}
/* zruš default „***" z @editorjs/delimiter v editore */
.description-editorjs .ce-delimiter::before { content: ""; display: none; }
[data-theme="dark"] .description-editorjs .ce-delimiter {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%2372E6EF' fill-opacity='0.7' aria-hidden='true'%3E %3Cpath d='M 48.78,2.09 c -1.16,0.33 -2.25,1.14 -3,2.24 c -0.35,0.52 -0.51,0.86 -1.05,2.2 c -5.18,12.84 -13.43,23.4 -23.97,30.69 c -4.55,3.14 -9.9,5.92 -14.98,7.77 c -3.56,1.3 -4.91,5.04 -2.69,7.46 c 0.67,0.73 1.23,1.07 2.77,1.71 c 18.91,7.85 31.68,20.75 38.93,39.33 c 0.3,0.77 0.64,1.56 0.76,1.76 c 1.84,3.05 5.17,3.66 7.54,1.35 c 0.77,-0.75 1.17,-1.41 1.71,-2.82 c 7.36,-18.99 20.34,-32.03 39.76,-39.91 c 2.29,-0.93 3.45,-2.33 3.45,-4.17 c -0.01,-2.16 -1.45,-3.71 -4.6,-4.91 c -17.97,-6.83 -31.07,-19.96 -38.63,-38.72 c -0.84,-2.1 -2,-3.36 -3.56,-3.9 c -0.56,-0.19 -1.88,-0.24 -2.42,-0.09 z'/%3E %3C/svg%3E") center center / 15px 15px no-repeat,
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent) left center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent) right center / calc(50% - 16px) 1px no-repeat;
}
/* read-only render: nesie triedy .dashboard-task-divider (vizuál odtiaľ) — tu len
   normálny blokový rytmus (override tesného dashboard marginu). */
.editorjs-delimiter { margin: 10px 0 var(--space-3); }

/* === Faza 77: inline formátovanie — inline kód + zvýraznenie (marker).
   Editor view + read-only render, Famivel ladenie. (Tagy <code>/<mark> prejdú
   cez EditorjsRenderer whitelist; class sa odstráni → štýlujeme holé tagy.) === */
.description-editorjs code,
.description-editorjs .inline-code {
    background: rgba(0, 59, 65, 0.06);
    color: var(--color-dark-teal);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.92em;
}
.description-editorjs mark,
.description-rendered mark {
    background: rgba(255, 208, 176, 0.5);   /* apricot tint — decentné zvýraznenie */
    color: inherit;
    padding: 0 3px;
    border-radius: 3px;
}

/* === Faza 78 (KROK 1): Checklist (zoznam úloh) — read-only render + Famivel
   checkbox. Odškrtnuté = Famivel Blue výplň + dark-teal ✓. === */
.editorjs-checklist {
    list-style: none;
    padding-left: 2px;
    margin: 6px 0 var(--space-3);
}
.editorjs-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 5px 0;
    line-height: 1.55;
}
.editorjs-checklist__box {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 2px;
    border: 1.5px solid rgba(0, 59, 65, 0.3);
    border-radius: 5px;
    position: relative;
    transition: background 140ms ease, border-color 140ms ease;
}
.editorjs-checklist__item--checked .editorjs-checklist__box {
    background: var(--color-famivel-blue);
    border-color: var(--color-famivel-blue);
}
.editorjs-checklist__item--checked .editorjs-checklist__box::after {
    content: "";
    position: absolute; left: 5px; top: 1px;
    width: 5px; height: 9px;
    border: solid var(--color-dark-teal);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.editorjs-checklist__item--checked .editorjs-checklist__text {
    color: var(--text-muted);
    text-decoration: line-through;
}
/* Editor view: odškrtnutý checkbox = Famivel akcent (zladenie s renderom). */
.description-editorjs .cdx-checklist__item--checked .cdx-checklist__checkbox {
    background: var(--color-famivel-blue) !important;
    border-color: var(--color-famivel-blue) !important;
}

/* === Faza 78 (KROK 2): Callout (zvýraznenie) — box s jemným aqua pozadím + Lucide
   ikona vľavo. Editor (.editorjs-callout v holderi) aj read-only render. === */
.editorjs-callout,
.description-editorjs .editorjs-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 10px 0 var(--space-3);
    background: var(--color-aqua-tint-1, rgba(114, 230, 239, 0.10));
    border: 1px solid rgba(114, 230, 239, 0.35);
    border-left: 3px solid var(--color-famivel-blue);
    border-radius: 8px;
}
.editorjs-callout__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-dark-teal);
}
.editorjs-callout__text {
    flex: 1;
    min-width: 0;
    line-height: 1.6;
    color: var(--text-primary);
}
.editorjs-callout__text:focus { outline: none; }
[data-theme="dark"] .editorjs-callout,
[data-theme="dark"] .description-editorjs .editorjs-callout {
    background: rgba(114, 230, 239, 0.08);
    border-color: rgba(114, 230, 239, 0.22);
}

/* === Faza 78 (KROK 3): Citát — ľavý Famivel border, kurzíva, decentná caption. === */
.editorjs-quote {
    margin: 10px 0 var(--space-3);
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--color-famivel-blue);
}
.editorjs-quote__text {
    display: block;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-primary);
}
.editorjs-quote__caption {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.editorjs-quote__caption::before { content: "— "; }

/* === Faza 78 (KROK 4): Kód — monospace, jemné pozadie (editor textarea aj render). === */
.editorjs-code {
    margin: 10px 0 var(--space-3);
    padding: 12px 14px;
    background: rgba(0, 59, 65, 0.05);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: 8px;
    overflow-x: auto;
}
.editorjs-code code {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-dark-teal);
    white-space: pre;
    background: none;
    padding: 0;
}
.description-editorjs .ce-code__textarea,
.description-editorjs .cdx-input.ce-code__textarea {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    background: rgba(0, 59, 65, 0.05);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: 8px;
    color: var(--color-dark-teal);
}

/* === Faza 79 (KROK 1): označený blok — jemný Famivel highlight (override natívnej
   modrej Editor.js selekcie). Platí pre všetky bloky vrátane divideru/callout/kódu. === */
.description-editorjs .ce-block--selected .ce-block__content {
    background: rgba(114, 230, 239, 0.16) !important;
    border-radius: 6px;
}

/* === Description toolbar (Cancel / Save / Convert buttons) === */
.description-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(0, 59, 65, 0.06);
    flex-wrap: wrap;
}
#description-convert-btn {
    margin-right: auto; /* prilípne convert vľavo */
    background: rgba(255, 208, 176, 0.15); /* apricot tint */
    color: #8B5A3C;
    border: 1px solid rgba(255, 208, 176, 0.4);
}
#description-convert-btn:hover {
    background: rgba(255, 208, 176, 0.3);
    border-color: rgba(255, 208, 176, 0.6);
}

.description-format-badge {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 8px;
    background: rgba(120, 144, 156, 0.15);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 10px;
    vertical-align: middle;
}

/* === EditorjsRenderer output (read-only render mimo editácie) === */
.description-rendered .editorjs-block {
    margin-bottom: var(--space-3);
}
.description-rendered .editorjs-paragraph {
    line-height: 1.55;
    color: var(--text-primary);
}
.description-rendered .editorjs-header {
    color: var(--color-dark-teal);
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
    margin: var(--space-4) 0 var(--space-2);
}
.description-rendered .editorjs-header--h1 { font-size: var(--text-2xl); }
.description-rendered .editorjs-header--h2 { font-size: var(--text-xl); }
.description-rendered .editorjs-header--h3 { font-size: var(--text-lg); }
.description-rendered .editorjs-header--h4 { font-size: var(--text-base); }
.description-rendered .editorjs-list {
    padding-left: var(--space-5);
    color: var(--text-primary);
    line-height: 1.55;
}
.description-rendered .editorjs-list li {
    margin-bottom: 4px;
}
.description-rendered .editorjs-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.5);
}
.description-rendered .editorjs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.description-rendered .editorjs-table th,
.description-rendered .editorjs-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
    border-right: 1px solid rgba(0, 59, 65, 0.06);
}
.description-rendered .editorjs-table th {
    background: rgba(0, 59, 65, 0.04);
    color: var(--color-dark-teal);
    font-weight: var(--font-semibold);
}
.description-rendered .editorjs-table tr:last-child td {
    border-bottom: none;
}
[data-theme="dark"] .description-rendered .editorjs-table th {
    background: rgba(255, 255, 255, 0.04);
}

/* =================================================================
   #43 — PROJECT TASKS SEKCIA (faza 34b / Sekcia 3)
   Sekcia s úlohami v detaile projektu pod komentármi/popis.
   ================================================================= */
.project-tasks__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(0, 59, 65, 0.06);
}
.project-tasks__empty {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
}
.project-tasks__empty [data-lucide],
.project-tasks__empty svg.lucide {
    opacity: 0.3;
    margin-bottom: var(--space-2);
}
.project-tasks__empty p {
    margin: 0;
    font-size: var(--text-sm);
}
.project-tasks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.project-tasks__list--done {
    margin-top: var(--space-2);
}
.project-task-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 140ms ease;
    background: transparent;
}
.project-task-item:hover {
    background: var(--color-aqua-white);
}
[data-theme="dark"] .project-task-item:hover {
    background: rgba(114, 230, 239, 0.05);
}
.project-task-item--done .project-task-item__title {
    text-decoration: line-through;
    color: var(--text-muted);
}
.project-task-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.project-task-item__title {
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-task-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-wrap: wrap;
}
.project-task-item__meta [data-lucide],
.project-task-item__meta svg.lucide {
    opacity: 0.7;
}
.project-tasks__done-wrap {
    margin-top: var(--space-3);
    border-top: 1px dashed rgba(0, 59, 65, 0.06);
    padding-top: var(--space-2);
}
.project-tasks__done-toggle {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-muted);
    list-style: none;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.project-tasks__done-toggle::-webkit-details-marker { display: none; }
.project-tasks__done-toggle:hover { color: var(--text-primary); }

/* =================================================================
   #44 — DRAG & DROP oblastí sidebar (faza 34b → 37/S0 handle pattern)
   Drag handle (grip-vertical) + cursor obmedzený LEN na handle, klik na
   zvyšok položky ostáva normálna navigácia.
   ================================================================= */
.task-area-nav__item {
    user-select: none;
    /* Default — žiadny grab kurzor; klik = otvor oblasť */
    cursor: pointer;
}
.task-area-nav__item.is-dragging {
    opacity: 0.4;
}
.task-area-nav__item.is-drag-over {
    border-top: 2px solid var(--color-dark-teal);
    box-shadow: inset 0 2px 0 var(--color-aqua-white);
}

/* Drag handle — viditeľný len pri hover na položku, full opacity nad samotným handle. */
.task-area-nav__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 24px;
    margin-right: var(--space-1);
    color: var(--text-muted);
    opacity: 0;
    cursor: grab;
    transition: opacity 160ms ease, color 140ms ease;
    flex-shrink: 0;
}
.task-area-nav__item:hover .task-area-nav__handle {
    opacity: 0.55;
}
.task-area-nav__handle:hover {
    opacity: 1 !important;
    color: var(--color-dark-teal);
}
.task-area-nav__handle:active {
    cursor: grabbing;
}
/* "Všetky oblasti" handle nemá (template ho nevykresľuje), ale fallback istota. */
.task-area-nav__item[data-area-key="__all__"] .task-area-nav__handle {
    display: none;
}
[data-theme="dark"] .task-area-nav__handle {
    color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .task-area-nav__handle:hover {
    color: var(--color-famivel-blue);
}

/* =================================================================
   #45 — Sekcia 2 polish (faza 35b)
   ================================================================= */

/* 2B: chevron inline pred názvom (predtým vlastný stĺpec) */
.projects-table__chevron--inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-right: 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    border-radius: var(--radius-xs);
    transition: all 140ms ease;
}
.projects-table__chevron--inline:hover {
    background: rgba(0, 59, 65, 0.08);
    color: var(--color-dark-teal);
}
.projects-table__chevron--inline [data-lucide],
.projects-table__chevron--inline svg.lucide {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.projects-table__chevron--inline[aria-expanded="true"] [data-lucide],
.projects-table__chevron--inline[aria-expanded="true"] svg.lucide {
    transform: rotate(90deg);
}

/* Faza 35b → 48: starý border-top separator ODSTRÁNENÝ (úplný group header
   <tr class="projects-table__group-header"> ho nahradil — žiadne duplikovanie).
   Tu zachovávame iba jemný top padding pre vzdušnosť po hlavičke. */
.projects-table__row.is-area-start:not(:first-child) td {
    padding-top: 14px;
}

/* === Faza 48: group header riadok pre zoskupenie podľa oblasti ===
   Full-width <tr> ponad stĺpce. Decentný, tenký, nie krikľavý — nech
   oddeľovač nepretláča projekty. Area-color cez bodku + jemnú rule line. */
.projects-table__group-header td {
    /* žiadny border, žiadne padding-top od is-area-start neaplikuje */
    padding: 0 !important;
    background: transparent;
}
.projects-table__group-header-cell {
    /* override default table cell paddingu */
    border: none !important;
}
.projects-table__group-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-2);
    margin-top: var(--space-2);
}
.projects-table__group-header:first-child .projects-table__group-header-inner {
    /* Prvá oblasť — bez horného odsadenia (sedí pod thead) */
    padding-top: var(--space-3);
    margin-top: 0;
}
.projects-table__group-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--area-color, #78909C);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-color, #78909C) 25%, transparent);
    flex-shrink: 0;
}
.projects-table__group-code {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-dark-teal);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.projects-table__group-sep {
    color: var(--text-muted);
    font-weight: var(--font-normal);
}
.projects-table__group-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}
.projects-table__group-count {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    padding: 1px 8px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 999px;
    margin-left: 4px;
}
.projects-table__group-star {
    width: 12px; height: 12px;
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: var(--space-2);
}
/* Jemná farebná rule line s gradientom od area farby — decentné, nie pás. */
.projects-table__group-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--area-color, #78909C) 35%, transparent) 0%,
        rgba(0, 59, 65, 0.06) 60%,
        transparent 100%
    );
    margin-left: var(--space-2);
    min-width: 40px;
}
[data-theme="dark"] .projects-table__group-code { color: var(--text-on-dark); }
[data-theme="dark"] .projects-table__group-name { color: var(--text-secondary); }
[data-theme="dark"] .projects-table__group-rule {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--area-color, #78909C) 45%, transparent) 0%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 100%
    );
}

/* === Faza 60g/60h/60i: inline "+" pridať projekt — okrúhle area-color tlačítko
   na KONCI skupiny oblasti (pôvodný vzhľad z hlavičky, len umiestnený dole). === */
.projects-table__add-row td {
    border: none !important;
    /* Faza 60j: decentný priestor NAD pluskom nech dýcha (predtým nalepené na
       poslednom projekte); zarovnané pod ľavý okraj riadkov. */
    padding: var(--space-3) var(--space-3) var(--space-3) !important;
    background: transparent;
}
/* Decentné okrúhle plusko v štýle oblasti (area-color accent), glass, spring hover. */
.projects-table__group-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--area-color, #78909C) 38%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--area-color, #78909C) 12%, rgba(255, 255, 255, 0.6));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: color-mix(in srgb, var(--area-color, #78909C) 60%, var(--color-dark-teal));
    cursor: pointer;
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 160ms ease, border-color 160ms ease;
}
.projects-table__group-add:hover {
    transform: scale(1.14);
    background: color-mix(in srgb, var(--area-color, #78909C) 24%, rgba(255, 255, 255, 0.7));
    border-color: var(--area-color, #78909C);
}
.projects-table__group-add:active { transform: scale(1.02); }
.projects-table__group-add:focus-visible {
    outline: 2px solid var(--area-color, var(--color-blue));
    outline-offset: 2px;
}
[data-theme="dark"] .projects-table__group-add {
    background: color-mix(in srgb, var(--area-color, #78909C) 22%, rgba(30, 50, 55, 0.5));
    color: color-mix(in srgb, var(--area-color, #78909C) 70%, #FFFFFF);
}

/* Faza 60j: "+" míľnika pri hlavnom projekte — malé, decentné, area-color.
   Nedotieravé: tlmené, plné až pri hoveri riadku / fokuse (nech neruší riadok). */
.projects-table__milestone-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0;
    flex-shrink: 0;
    vertical-align: middle;
    border: 1px solid color-mix(in srgb, var(--area-color, #78909C) 34%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--area-color, #78909C) 10%, transparent);
    color: color-mix(in srgb, var(--area-color, #78909C) 58%, var(--color-dark-teal));
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 160ms ease, border-color 160ms ease;
}
.projects-table__row:hover .projects-table__milestone-add,
.projects-table__row:focus-within .projects-table__milestone-add {
    opacity: 0.85;
}
.projects-table__milestone-add:hover {
    opacity: 1;
    transform: scale(1.16);
    background: color-mix(in srgb, var(--area-color, #78909C) 22%, transparent);
    border-color: var(--area-color, #78909C);
}
.projects-table__milestone-add:focus-visible {
    opacity: 1;
    outline: 2px solid var(--area-color, var(--color-blue));
    outline-offset: 2px;
}
[data-theme="dark"] .projects-table__milestone-add {
    color: color-mix(in srgb, var(--area-color, #78909C) 70%, #FFFFFF);
}

/* Draft riadok — názov ako inline input, jemné zvýraznenie že je rozpísaný. */
.projects-table__row--new {
    background: color-mix(in srgb, var(--area-color, #78909C) 6%, transparent);
}
.inline-add__title-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-blue, #72E6EF);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.inline-add__title-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue, #72E6EF) 30%, transparent);
}
/* Faza 60k FIX (root cause): míľnik draft je --child → title cell má extra
   ľavý indent (padding-left: space-3 + 24px) a navyše pred názvom ↳ ikonu.
   V úzkom title stĺpci (table-layout:fixed, ostatné stĺpce 648px fixné) to
   input "Názov…" stlačí natoľko, že vidno len "…" z placeholderu — kým projekt
   draft (bez indentu aj ikony) má dosť miesta. Fix: pri DRAFTE míľnika vráť
   normálny ľavý padding (input dostane rovnakú šírku ako projekt draft) a ↳
   ikonu posuň do absolútnej pozície, nech needuje šírku inputu. Nesting ostáva
   čitateľný cez ↳, ľavý accent (box-shadow) a tint. Po uložení (--just-added,
   bez --new) sa plný míľnik indent vráti. */
.projects-table__row--new.projects-table__row--child .projects-table__cell--title {
    padding-left: var(--space-3);
}
.projects-table__row--new.projects-table__row--child .projects-table__hierarchy {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
}
.projects-table__row--new.projects-table__row--child .inline-add__title-input {
    width: 100%;
}
/* Krátky flash po uložení — spring fade z area-color do normálu. */
.projects-table__row--just-added {
    animation: projects-row-just-added 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes projects-row-just-added {
    0%   { background: color-mix(in srgb, var(--area-color, #78909C) 22%, transparent); }
    100% { background: transparent; }
}

/* 2D: sidebar oblasti — skrátiť na kód, label dlhý do title.
   Faza 35d: monospace ODSTRÁNENÝ — Satoshi (inherit) je konzistentný s rest of UI. */
.task-area-nav__item .task-area-nav__label-short {
    flex: 1;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =================================================================
   #46 — Recurring tasks (faza 37 / S1)
   ================================================================= */
.recurring-section {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.04);
}
[data-theme="dark"] .recurring-section {
    background: rgba(30, 50, 55, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}
.recurring-section__header {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.recurring-section__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.recurring-section__title [data-lucide],
.recurring-section__title svg.lucide {
    color: var(--color-famivel-blue);
}
.recurring-section__count {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    padding: 2px 8px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 999px;
}
.recurring-list {
    /* Faza 56b: rovnaký gap a layout ako .task-list, konzistencia */
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.recurring-item {
    /* Faza 56b: BIELY card konzistentný s .task-item (default bg-surface,
       border, padding). Rozlíšenie typu cez ↻ ikonu + famivel-blue left
       accent border. */
    display: flex; align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--color-famivel-blue);
    border-radius: var(--radius-md);
    transition: background 140ms ease, border-color 140ms ease;
}
.recurring-item:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    border-left-color: var(--color-famivel-blue);
}
.recurring-item__main { flex: 1; min-width: 0; }
.recurring-item__title {
    /* Bigger font + dark-teal hover, zladene s .task-item__title */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 4px;
}
.recurring-item__title .task-item__source-icon {
    flex-shrink: 0;
}
.recurring-item__title:hover { color: var(--color-dark-teal); }
.recurring-item__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    font-size: var(--text-sm); color: var(--text-muted);
}
.recurring-item__pattern { font-style: italic; }
.recurring-item__next {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--color-dark-teal);
}
.recurring-item__pending {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--status-warning-text);
    background: var(--status-warning-bg);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
}

/* Faza 38a/S1: vypnúť tlačidlo — viditeľné len pri hover na položku (rovnaký
   pattern ako drag handle), nepôsobí destruktívne pri kliku omylom (confirm JS). */
.recurring-item__actions {
    display: flex; align-items: center;
    margin-left: var(--space-3);
    opacity: 0;
    transition: opacity 160ms ease;
}
.recurring-item:hover .recurring-item__actions { opacity: 1; }
.recurring-item__actions form { margin: 0; }
.recurring-item__disable {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 140ms ease;
}
.recurring-item__disable:hover {
    color: var(--status-danger-text);
    border-color: var(--status-danger-text);
    background: var(--status-danger-bg);
}
.form-label-hint {
    font-weight: var(--font-normal);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* =================================================================
   #48 — Command palette (Ctrl+K) — faza 38c / S3
   ================================================================= */

/* Header search trigger — glass look-alike input (faza 39b/S3).
   Predtým placatý šedý rgba 0.04 — nudný a nečitateľný na svetlom pozadí.
   Teraz glass s blur + saturate + jemný famivel akcent pri hover/focus. */
.header-search {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 38px;
    padding: 0 var(--space-3);
    margin-right: var(--space-3);
    min-width: 280px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
    box-shadow: 0 1px 2px rgba(0, 59, 65, 0.04);
}
.header-search:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(114, 230, 239, 0.5);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0, 59, 65, 0.06), 0 0 0 3px rgba(114, 230, 239, 0.08);
}
.header-search:focus-visible,
.header-search:active {
    outline: none;
    border-color: var(--color-famivel-blue);
    box-shadow: 0 0 0 3px rgba(114, 230, 239, 0.18);
    background: rgba(255, 255, 255, 0.85);
}
.header-search [data-lucide],
.header-search svg.lucide { color: var(--color-dark-teal); flex-shrink: 0; }
.header-search__placeholder {
    flex: 1; text-align: left;
    font-weight: var(--font-medium);
}
.header-search__kbd {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px;
    font-family: inherit; font-size: 11px; font-weight: var(--font-semibold);
    color: var(--color-dark-teal);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: 6px;
    letter-spacing: 0.04em;
}
[data-theme="dark"] .header-search {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .header-search:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(114, 230, 239, 0.4);
}
[data-theme="dark"] .header-search__kbd {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-famivel-blue);
}
[data-theme="dark"] .header-search [data-lucide],
[data-theme="dark"] .header-search svg.lucide { color: var(--color-famivel-blue); }
@media (max-width: 720px) {
    .header-search { min-width: 0; padding: 0 var(--space-2); }
    .header-search__placeholder { display: none; }
    .header-search__kbd { display: none; }
}

/* === Modal === */
.cmd-palette {
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    pointer-events: none;
}
.cmd-palette[hidden] { display: none; }
.cmd-palette__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 59, 65, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: auto;
}
.cmd-palette.is-open .cmd-palette__backdrop { opacity: 1; }

.cmd-palette__panel {
    /* Faza 40b/S4: bigger — 640 → 760px, max-height 70 → 75vh. */
    position: relative;
    width: min(760px, calc(100vw - 32px));
    max-height: 75vh;
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 59, 65, 0.25), 0 4px 16px rgba(0, 59, 65, 0.12);
    overflow: hidden;
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease;
    pointer-events: auto;
}
.cmd-palette.is-open .cmd-palette__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
[data-theme="dark"] .cmd-palette__panel {
    background: rgba(20, 40, 45, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
}

.cmd-palette__search {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.cmd-palette__search-icon { color: var(--text-muted); flex-shrink: 0; }
.cmd-palette__input {
    flex: 1;
    background: transparent;
    border: none; outline: none;
    font-size: var(--text-lg);
    color: var(--text-primary);
    font-family: inherit;
    padding: 4px 0;
}
.cmd-palette__input::placeholder { color: var(--text-muted); }
.cmd-palette__esc {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px;
    font-family: inherit; font-size: 11px; font-weight: var(--font-medium);
    color: var(--text-muted);
    background: rgba(0, 59, 65, 0.06);
    border-radius: 6px;
}

.cmd-palette__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}
.cmd-palette__section { padding: var(--space-2) 0; }
.cmd-palette__section + .cmd-palette__section {
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-1);
    padding-top: var(--space-2);
}
.cmd-palette__section-label {
    padding: 0 var(--space-4) var(--space-1);
    font-size: 11px; font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.cmd-palette__item {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%;
    padding: 10px var(--space-5);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    transition: background 100ms ease;
}
.cmd-palette__item:hover,
.cmd-palette__item.is-selected {
    background: rgba(114, 230, 239, 0.18);
}
.cmd-palette__item.is-selected {
    box-shadow: inset 3px 0 0 var(--color-dark-teal);
}
.cmd-palette__item-icon {
    color: var(--color-dark-teal);
    flex-shrink: 0;
}
.cmd-palette__item-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    overflow: hidden;
}
.cmd-palette__item-title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.cmd-palette__item-context {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cmd-palette__empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.cmd-palette__loading {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.cmd-palette__spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--color-aqua-white);
    border-top-color: var(--color-dark-teal);
    border-radius: 50%;
    animation: cmd-palette-spin 0.6s linear infinite;
}
@keyframes cmd-palette-spin { to { transform: rotate(360deg); } }

.cmd-palette__footer {
    display: flex; gap: var(--space-3); justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    color: var(--text-muted);
}
.cmd-palette__footer kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: inherit; font-size: 11px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 4px;
    margin-right: 4px;
}

/* mark v snippet z FTS5 snippet() — apricot tint + dark-teal text (faza 40a/S1). */
.cmd-palette__item-context mark {
    background: rgba(255, 208, 176, 0.5);
    color: var(--color-dark-teal);
    font-weight: var(--font-semibold);
    padding: 0 2px;
    border-radius: 2px;
}

/* =================================================================
   #49 — POHĽAD "DNES" (faza 39 / S1)
   Časová rovina — čo ma dnes čaká. Glass sekcie, apricot pre overdue.
   ================================================================= */
.today-page {
    /* Faza 72c: šírka odvodená od SAMOTNÉHO zoznamu to-do úloh na /ulohy
       (BEZ ľavého panela oblastí). Scopnuté výlučne na .today-page → iné nedotknuté.

       OPRAVA REFERENCIE: predtým sme merali celé vnútro main-content (~1084px),
       ale to zahŕňa aj panel oblastí (248px) + gap (20px). Reálny zoznam to-do
       úloh (pravý stĺpec .tasks-main, kde sú karty bežných úloh) je:
         .main-content (auto-margin → zmrští sa na obsah ~1084px na širokom monitore)
         /ulohy .tasks-layout = grid [248px panel oblastí | gap 20 | 1fr zoznam]
           → ZOZNAM TO-DO ÚLOH = 1084 − 248 − 20 = 816px   (referencia Z)
         /dnes today-page = 660px (Y) → ešte užšie (Dominik chcel zúžiť),
           citeľne pod úrovňou samotného zoznamu to-do úloh (~816px).

       POZOR (prečo predošlé max-width „nič nerobili"): na ≥1441px má .main-content
       `margin-left/right:auto`. Auto inline-margin na GRID iteme VYPNE jeho stretch
       → main-content sa zmrští na obsah. Keďže .today-page nemala definitívnu šírku,
       celá reťaz skolabovala. Fix: na ≥1441 dať .today-page definitívnu šírku. */
    max-width: 660px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: var(--space-5);
}
/* ≥1441: main-content má auto-margin (vypína stretch) → today-page musí mať
   definitívnu šírku, inak skolabuje na obsah. min(660, 100vw − 540) drží 660px
   strop a zároveň zabráni preteku pri breakpointe. */
@media (min-width: 1441px) {
    .today-page { width: min(660px, calc(100vw - 540px)); }
}
/* Toggle (segment) je inline-flex = kompaktný segmented control; ako flex-item v
   stĺpci by sa však roztiahol na celú (teraz širšiu) today-page → prázdny pretiahnutý
   pill. align-self:flex-start ho drží kompaktný. Len desktop (≥769) — na mobile
   ostáva pôvodné správanie (full width), nech sa nič nerozbije. */
@media (min-width: 769px) {
    .today-segment { align-self: flex-start; }
}
.today-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.today-header__date {
    margin: 4px 0 0;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    /* Faza 67c: informačný riadok dátum · počty — lowercase (predtým uppercase samostatný dátum). */
    letter-spacing: 0.01em;
}
.today-header__title {
    margin: 0 0 4px;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.today-header__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.today-header__counts {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: 4px;
}
.today-count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}
.today-count--overdue {
    color: var(--deadline-overdue-text, #B25C2D);
    background: rgba(255, 208, 176, 0.35);
    border-color: rgba(255, 208, 176, 0.6);
}
.today-count--today { color: var(--color-dark-teal); }
.today-count--meetings { color: var(--text-secondary); }
/* Faza 47: count chip pre Nadchádzajúce sekciu */
.today-count--upcoming {
    color: var(--color-dark-teal);
    background: rgba(114, 230, 239, 0.12);
    border-color: rgba(114, 230, 239, 0.35);
}

/* Faza 47: Nadchádzajúce sekcia v rámci /dnes — day-block headers */
.today-section--upcoming {
    /* Zachová default glass; deň bloky pod ním majú vlastné separátory. */
}
.upcoming-day-block {
    padding: var(--space-3) 0;
}
.upcoming-day-block + .upcoming-day-block {
    border-top: 1px solid var(--border-subtle);
}
.upcoming-day-block__header {
    display: flex; align-items: baseline; gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.upcoming-day-block__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.upcoming-day-block__date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: lowercase;
}
.upcoming-day-block__count {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    padding: 1px 8px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 999px;
}

/* Empty stav */
.today-empty {
    text-align: center;
    padding: var(--space-7) var(--space-5);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
}
.today-empty__icon { color: var(--color-famivel-blue); margin-bottom: var(--space-3); }
.today-empty__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.today-empty__hint { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.today-empty__link {
    color: var(--color-dark-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sekcia */
.today-section {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4) var(--space-4);
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.04), 0 4px 12px rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .today-section {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}
.today-section--overdue { border-color: rgba(255, 208, 176, 0.65); }

.today-section__header {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}
.today-section__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: var(--space-1);
}
.today-section--overdue .today-section__title { color: var(--deadline-overdue-text, #B25C2D); }
.today-section__count {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    padding: 2px 8px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 999px;
}
.today-section--overdue .today-section__count {
    background: rgba(255, 208, 176, 0.4);
    color: var(--deadline-overdue-text, #B25C2D);
}

/* Položka */
.today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.today-item {
    display: grid;
    grid-template-columns: 4px 20px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.today-item:hover {
    background: rgba(114, 230, 239, 0.1);
    transform: translateX(2px);
}
.today-item__bar {
    width: 4px; height: 36px;
    border-radius: 2px;
    background: var(--area-color, var(--border-default));
}
.today-item--overdue .today-item__bar { background: var(--color-apricot, #FFD0B0); }
.today-item--meeting { cursor: default; }
.today-item--meeting:hover { transform: none; }

.today-item__main { min-width: 0; }
.today-item__title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    line-height: 1.3;
}
.today-item__title-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.today-item__title-link:hover { color: var(--color-dark-teal); }
.today-item__recurring { color: var(--color-famivel-blue); flex-shrink: 0; }
.today-item__icon { color: var(--text-muted); }
.today-item__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin-top: 4px;
    font-size: var(--text-xs); color: var(--text-muted);
}
.today-item__delay {
    color: var(--deadline-overdue-text, #B25C2D);
    font-weight: var(--font-semibold);
}
.today-item__project {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--color-dark-teal);
    text-decoration: none;
    font-weight: var(--font-medium);
    padding: 1px 6px;
    background: rgba(0, 59, 65, 0.05);
    border-radius: var(--radius-xs);
    transition: background 140ms ease;
}
.today-item__project:hover { background: rgba(114, 230, 239, 0.2); }
.today-item__project-code { color: var(--text-muted); font-weight: var(--font-normal); }
.today-item__assignee { display: inline-flex; align-items: center; gap: 3px; }
.today-item__status {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-semibold);
    font-size: 10px;
}
.today-item__hint {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 140ms ease;
}
.today-item:hover .today-item__hint { opacity: 1; }

/* Faza 79b: pravý stĺpec riadku (4. grid bunka) — drží „Preplánovať" hint AJ
   ikonku koša pod sebou, zarovnané vpravo (kôš tak nepretečie do nového riadku). */
.today-item__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
/* Faza 79b: ikonka koša pri úlohe na Dnes — rovnaký štýl ako /ulohy
   (.task-action--danger button), zjaví sa na hover riadku (mobil: vždy). */
.today-item__delete {
    margin: 0;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.today-item:hover .today-item__delete { opacity: 1; }
@media (max-width: 768px) {
    .today-item__delete { opacity: 1; }
}

.today-item .task-checkbox-toggle { margin: 0; }

/* === Faza 66e: segment Úlohy / Projekty / Oboje === */
.today-segment {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: var(--space-4);
    background: var(--glass-bg-strong, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
}
.today-segment__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 150ms ease, background 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.today-segment__btn [data-lucide], .today-segment__btn svg { opacity: 0.7; }
.today-segment__btn:hover { color: var(--text-primary); text-decoration: none; }
.today-segment__btn.is-active {
    background: var(--color-dark-teal);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 59, 65, 0.18);
}
.today-segment__btn.is-active [data-lucide], .today-segment__btn.is-active svg { opacity: 1; }
[data-theme="dark"] .today-segment__btn.is-active { background: var(--color-blue); color: var(--color-dark-teal); }

/* Projektová položka v Dnes (read-only link na detail) */
.today-item--project { text-decoration: none; color: inherit; }
.today-item--project:hover { text-decoration: none; }
.today-item__proj-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--area-color, var(--color-dark-teal));
}
.today-item__goicon { color: var(--text-muted); opacity: 0; transition: opacity 140ms ease; }
.today-item--project:hover .today-item__goicon { opacity: 1; }
.today-item__due { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--font-semibold); }

/* Faza 66o: jemný konkrétny dátum vedľa relatívneho deadline textu — tichý doplnok. */
.today-item__exact-date {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    opacity: 0.85;
}

/* Oddeľovač "Projekty" vo view Oboje */
.today-projects-divider {
    display: flex; align-items: center; gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--color-dark-teal); text-transform: uppercase; letter-spacing: 0.06em;
}
.today-projects-divider span { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.today-projects-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }

/* Faza 66q: ✦ divider vnútri časovej sekcie — oddelí PROJEKTY od ÚLOH (view=both).
   Rovnaký vizuál ako dashboard-task-divider. */
.today-task-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-2);
    user-select: none;
}
.today-task-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 59, 65, 0.12), transparent);
}
.today-task-divider__star {
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: var(--color-famivel-blue, #72E6EF);
    opacity: 0.7;
}
.today-task-divider__star svg { width: 100%; height: 100%; }
.today-task-divider__label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* ↻ ikona inštancie v hlavnom zozname */
.task-item__source-icon--recurring {
    color: var(--color-famivel-blue);
}

/* Recurrence fieldset v /ulohy/nova */
.recurrence-fieldset {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    background: rgba(230, 248, 248, 0.4);
}
.recurrence-fieldset__legend {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}
.recurrence-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}
.recurrence-toggle input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--color-dark-teal);
    margin: 0;
}
.recurrence-toggle [data-lucide],
.recurrence-toggle svg.lucide {
    color: var(--color-famivel-blue);
}
.recurrence-fields {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-3);
}
.form-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 4px 0 0;
}

/* =================================================================
   #50 — Pohľad NADCHÁDZAJÚCE (faza 46) — časová rovina, ďalších 7 dní
   Recykluje .today-item, .today-list, .area-pill. Pridáva day-skupiny.
   ================================================================= */
.upcoming-page {
    max-width: 1280px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: var(--space-5);
}
.upcoming-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.upcoming-header__date {
    margin: 0 0 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.upcoming-header__title {
    margin: 0 0 4px;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.upcoming-header__subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.upcoming-header__counts {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: 4px;
}

/* Sekcia jeden deň — glass panel s nadpisom (relatívny + konkrétny dátum) */
.upcoming-day {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4) var(--space-4);
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.04), 0 4px 12px rgba(0, 59, 65, 0.06);
}
[data-theme="dark"] .upcoming-day {
    background: rgba(30, 50, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}
.upcoming-day--today {
    /* Jemný famivel akcent na dnešnom paneli (kotvíme orientáciu).
       Iné dni majú default glass — dnes mierne svetlejšie obvodom. */
    border-color: rgba(114, 230, 239, 0.45);
    box-shadow: 0 1px 3px rgba(0, 59, 65, 0.04), 0 4px 16px rgba(114, 230, 239, 0.12);
}

.upcoming-day__header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}
.upcoming-day__title-block {
    display: flex; align-items: baseline; gap: var(--space-2);
    flex-wrap: wrap;
}
.upcoming-day__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.upcoming-day--today .upcoming-day__title {
    color: var(--color-dark-teal);
}
.upcoming-day__date {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: lowercase;
}
.upcoming-day__count {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    padding: 2px 8px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 999px;
    flex-shrink: 0;
}
.upcoming-day__empty {
    margin: 0;
    padding: var(--space-2) 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

/* List nedeklarujem znova — používa .today-list + .today-item z faza 39 */

/* =================================================================
   #47 — Task drag & drop reorder (faza 37 / S2)
   ================================================================= */
.task-item[data-task-draggable="1"] {
    grid-template-columns: 14px 20px 1fr auto;
}
.task-item__handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 24px;
    color: var(--text-muted);
    opacity: 0;
    cursor: grab;
    transition: opacity 160ms ease, color 140ms ease;
    flex-shrink: 0;
    margin-top: 2px;
}
.task-item:hover .task-item__handle { opacity: 0.5; }
.task-item__handle:hover { opacity: 1 !important; color: var(--color-dark-teal); }
.task-item__handle:active { cursor: grabbing; }

.task-item.is-dragging {
    opacity: 0.4;
    border-color: var(--color-famivel-blue);
    background: rgba(114, 230, 239, 0.05);
}
.task-item.is-drop-target {
    border-top: 2px solid var(--color-famivel-blue);
    box-shadow: inset 0 2px 0 var(--color-aqua-white);
}
[data-theme="dark"] .task-item__handle { color: rgba(255, 255, 255, 0.45); }
[data-theme="dark"] .task-item__handle:hover { color: var(--color-famivel-blue); }

/* =================================================================
   #51 — PROJECT FILES (faza 49b) — upload zóna + zoznam súborov
   ================================================================= */
.project-files-upload {
    margin-bottom: var(--space-4);
}
.project-files-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-4);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1.5px dashed rgba(0, 59, 65, 0.18);
    border-radius: var(--radius-md);
    transition: background 160ms ease, border-color 160ms ease;
    text-align: center;
}
.project-files-dropzone.is-dragover {
    background: rgba(114, 230, 239, 0.18);
    border-color: var(--color-famivel-blue);
    border-style: solid;
}
.project-files-dropzone__icon { color: var(--color-dark-teal); opacity: 0.6; }
.project-files-dropzone__title {
    margin: 4px 0 0;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}
.project-files-dropzone__hint {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.project-files-dropzone__btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-link);
    font: inherit;
    font-weight: var(--font-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.project-files-dropzone__btn:hover { color: var(--text-link-hover); }
.project-files-dropzone__types {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.project-files-progress {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--space-2);
    padding: 4px 10px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: rgba(114, 230, 239, 0.12);
    border-radius: var(--radius-sm);
}
.project-files-progress .spin {
    animation: famipro-star-spin 1s linear infinite;
}
.project-files-errors {
    margin-top: var(--space-2);
}
.project-files-errors__row {
    margin-bottom: 4px;
    padding: 6px 10px;
    background: rgba(196, 87, 87, 0.08);
    color: var(--status-danger-text, #C45757);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

/* Empty stav */
.project-files-empty {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.project-files-empty__star {
    width: 16px; height: 16px;
    opacity: 0.6;
}

/* Zoznam súborov */
.project-files-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2);
}
.project-file {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(0, 59, 65, 0.08);
    border-radius: var(--radius-md);
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.project-file:hover {
    border-color: rgba(0, 59, 65, 0.18);
    background: rgba(255, 255, 255, 0.85);
}
.project-file__thumb-link {
    display: block;
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 59, 65, 0.04);
}
.project-file__thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.project-file__icon-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(0, 59, 65, 0.05);
    color: var(--color-dark-teal);
    flex-shrink: 0;
    text-decoration: none;
}
.project-file__main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden;
}
.project-file__name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.project-file__name:hover { color: var(--text-link-hover); text-decoration: underline; }
.project-file__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.project-file__delete {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: all 140ms ease;
    flex-shrink: 0;
}
.project-file:hover .project-file__delete { opacity: 0.7; }
.project-file__delete:hover {
    opacity: 1 !important;
    color: var(--status-danger-text, #C45757);
    background: rgba(196, 87, 87, 0.1);
}

[data-theme="dark"] .project-files-dropzone {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .project-files-dropzone.is-dragover {
    background: rgba(114, 230, 239, 0.12);
}
[data-theme="dark"] .project-file {
    background: rgba(30, 50, 55, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Faza 49c → 52: rendered inline image z Editor.js Image bloku.
   Default rozumná veľkosť (max-width 720px) — neroztiahnutý obrázok
   sa nezobrazí ako fullwidth gigant. Stretched modifier dá fullwidth
   ak ho user explicitne zapne v block tunes. */
.description-rendered .editorjs-image {
    margin: var(--space-3) 0;
}
.description-rendered .editorjs-image img {
    /* Faza 55: 720→480 default — obrázky nech NIE SÚ vždy obrovské.
       User môže prepnúť stretched cez block tunes pre fullwidth. */
    max-width: min(100%, 480px);
    height: auto;
    border-radius: var(--radius-md);
    display: block;
}
.description-rendered .editorjs-image img[data-with-border] {
    border: 1px solid var(--border-default);
}
.description-rendered .editorjs-image img[data-with-background] {
    background: var(--bg-subtle);
    padding: var(--space-3);
    max-width: 100%; /* with-background prepíše default — rámček vyplní šírku */
}
.description-rendered .editorjs-image img[data-stretched] {
    width: 100%;
    max-width: 100%;
}
.description-rendered .editorjs-image figcaption {
    margin-top: 6px;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Faza 52: edit-mode obrázok v Editor.js — rovnaký rozumný default size,
   aby user pri vkladaní nedostal hneď fullwidth gigant. Editor.js Image
   tool sám pridáva .image-tool--stretched ak user toggle-uje stretched,
   ten náš max-width potom override-uje. */
.description-editorjs .image-tool__image-picture {
    /* Faza 55: 720→480 default rovnako ako rendered. */
    max-width: min(100%, 480px);
    margin: 0 auto;
    display: block;
}
.description-editorjs .image-tool--stretched .image-tool__image-picture,
.description-editorjs .image-tool--filled .image-tool__image-picture {
    max-width: 100%;
}

/* =================================================================
   #52 — TASKS 3-SECTIONS (faza 55a) — Bežné / Opakované / Projekty
   ================================================================= */
.tasks-section {
    margin: 0 0 var(--space-5);
}
/* Faza 71/KROK3: sekcia s otvoreným glass pickerom (osoba/oblasť/frekvencia) musí
   byť NAD neskoršími sekciami (najmä Projekty). .tasks-add__form má backdrop-filter
   → vlastný stacking context, takže menu (z-index) ostáva uväznené v sekcii a
   neskorší súrodenec ho prekrýva. Lift len kým je picker otvorený (JS toggle). */
.tasks-section.has-picker-open {
    position: relative;
    z-index: 50;
}
.tasks-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-2);
    margin-bottom: var(--space-2);
}
.tasks-section__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-dark-teal);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tasks-section__count {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    padding: 1px 8px;
    background: rgba(0, 59, 65, 0.06);
    border-radius: 999px;
    flex-shrink: 0;
}
.tasks-section__star {
    width: 12px; height: 12px;
    color: var(--color-aqua-shade-2);
    opacity: 0.55;
    margin-left: var(--space-2);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.tasks-section__star .star-icon,
.tasks-section__star svg {
    width: 12px; height: 12px;
    fill: currentColor;
}
.tasks-section__rule {
    flex: 1;
    height: 1px;
    margin-left: var(--space-2);
    background: linear-gradient(
        to right,
        rgba(0, 59, 65, 0.12) 0%,
        rgba(0, 59, 65, 0.04) 60%,
        transparent 100%
    );
    min-width: 40px;
}

/* Quick-add inline form (Bežné úlohy) + link variant (Opakované, Projekty) */
.tasks-quick-add {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    margin-bottom: var(--space-2);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px dashed rgba(0, 59, 65, 0.18);
    border-radius: var(--radius-md);
    cursor: text;
    transition: border-color 140ms ease, background 140ms ease;
    text-decoration: none;
    color: inherit;
}
.tasks-quick-add:hover,
.tasks-quick-add:focus-within {
    border-color: var(--color-famivel-blue);
    border-style: solid;
    background: rgba(255, 255, 255, 0.75);
}
.tasks-quick-add__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: rgba(0, 59, 65, 0.06);
    color: var(--color-dark-teal);
    border: none;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}
.tasks-quick-add:hover .tasks-quick-add__icon {
    background: var(--color-dark-teal);
    color: #fff;
}
.tasks-quick-add__input {
    flex: 1;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    outline: none;
    padding: 2px 0;
}
.tasks-quick-add__input::placeholder { color: var(--text-muted); }
.tasks-quick-add--link { cursor: pointer; }
.tasks-quick-add__hint {
    flex: 1;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Faza 56b: projekty v sekcii Projekty — BIELY card konzistentný s Bežnými.
   Rozlíšenie typu cez ikonu + ľavý area-color accent border, NIE cez sivé
   pozadie. */
.task-list--projects .task-item--project {
    background: var(--bg-surface);
    border-left: 4px solid var(--area-color, var(--color-dark-teal));
}
.task-list--projects .task-item--project:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    border-left-color: var(--area-color, var(--color-dark-teal));
}
.task-list--projects .task-item--milestone {
    margin-left: 24px;
    /* Rovnaký biely card ako project, len indent + jemnejší border-left */
    border-left-width: 3px;
}
.task-project-link--strong {
    font-weight: var(--font-semibold);
    color: var(--color-dark-teal);
}
.task-item__project-code {
    color: var(--text-muted);
    font-weight: var(--font-normal);
    margin-right: 4px;
}

[data-theme="dark"] .tasks-quick-add {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tasks-quick-add:hover,
[data-theme="dark"] .tasks-quick-add:focus-within {
    background: rgba(255, 255, 255, 0.08);
}

/* ════════════════════════════════════════════════════════════════════════════
   Faza 57 — Todoist-style quick-add: okrúhle apricot "+" + inline glass form
   s chip selectami (deadline / osoba / oblasť, plus recurring frekvencia).
   Apricot pozadie (#FFD0B0 → #EFA878) + dark-teal ikona pre silný kontrast.
   ════════════════════════════════════════════════════════════════════════════ */
/* Faza 58: presun pod zoznam → quick-add ide na koniec sekcie, takže margin-top
   namiesto bottom. Decentný odstup od posledného itemu. */
.tasks-add {
    margin-top: var(--space-3);
}
.tasks-add__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Faza 59b: celý bar je klikateľná zóna (JS forward-ne click trigger-u). */
    cursor: pointer;
    padding: 4px 0;
    margin: -4px 0;
}

/* Faza 58: decentný default — dashed apricot outline (32×32) ktorý ožije na hover.
   V pokoji: priehľadné pozadie, apricot ikona, dashed apricot border.
   Na hover: full gradient + dark-teal ikona + spring scale, ako pôvodný #57. */
.tasks-add__trigger {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(239, 168, 120, 0.55);
    border-radius: 50%;
    background: transparent;
    color: var(--color-apricot-shade-1);
    cursor: pointer;
    box-shadow: none;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 180ms ease,
                color 180ms ease,
                border-color 180ms ease,
                border-style 0ms ease 60ms;
    padding: 0;
}
.tasks-add__bar:hover .tasks-add__trigger,
.tasks-add__trigger:hover,
.tasks-add__trigger:focus-visible {
    background: linear-gradient(135deg, var(--color-apricot) 0%, var(--color-apricot-shade-1) 100%);
    color: var(--color-dark-teal);
    border-color: transparent;
    border-style: solid;
    box-shadow: 0 4px 12px rgba(239, 168, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: scale(1.08) rotate(6deg);
}
.tasks-add__trigger:active {
    transform: scale(0.96);
}
.tasks-add__trigger:focus-visible {
    outline: 2px solid var(--color-dark-teal);
    outline-offset: 3px;
}
.tasks-add.is-open .tasks-add__trigger,
.tasks-add.is-open .tasks-add__bar:hover .tasks-add__trigger,
.tasks-add.is-open .tasks-add__trigger:hover {
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--color-apricot-shade-1) 0%, var(--color-apricot) 100%);
    border-color: transparent;
    border-style: solid;
    color: var(--color-dark-teal);
    box-shadow: 0 4px 12px rgba(239, 168, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.tasks-add.is-open .tasks-add__trigger:hover {
    transform: rotate(45deg) scale(1.06);
}
.tasks-add__hint {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    user-select: none;
    cursor: pointer;
}
.tasks-add__bar:hover .tasks-add__hint {
    color: var(--text-secondary);
}

/* Inline form — glass card, slide+fade entry. */
.tasks-add__form {
    margin-top: 10px;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 59, 65, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: tasks-add-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tasks-add-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tasks-add__title {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    outline: none;
    padding: 4px 0;
}
.tasks-add__title::placeholder { color: var(--text-muted); font-weight: var(--font-normal); }
.tasks-add__desc {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    outline: none;
    padding: 2px 0;
    resize: vertical;
    min-height: 38px;
    line-height: 1.5;
    font-family: inherit;
}
.tasks-add__desc::placeholder { color: var(--text-muted); }
.tasks-add__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

/* Chip = label wrapping skrytý input/select. Default neutralna, .is-set svetlý apricot tint. */
.tasks-add__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 59, 65, 0.04);
    border: 1px solid rgba(0, 59, 65, 0.1);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.tasks-add__chip:hover {
    background: rgba(0, 59, 65, 0.08);
    border-color: rgba(0, 59, 65, 0.18);
    color: var(--color-dark-teal);
    transform: translateY(-1px);
}
.tasks-add__chip.is-set {
    background: var(--color-aqua-white);
    border-color: var(--color-famivel-blue);
    color: var(--color-dark-teal);
}
.tasks-add__chip--required {
    background: rgba(255, 208, 176, 0.25);
    border-color: var(--color-apricot);
    color: var(--color-dark-teal);
}
.tasks-add__chip--required.is-set {
    background: var(--color-aqua-white);
    border-color: var(--color-famivel-blue);
}
.tasks-add__chip svg,
.tasks-add__chip [data-lucide] { flex-shrink: 0; }
.tasks-add__chip-label {
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Skry natívny widget — celý chip je klikateľný, native UI sa otvorí po klike. */
.tasks-add__chip-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
}
.tasks-add__chip-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.tasks-add__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 59, 65, 0.08);
}

/* ════════════════════════════════════════════════════════════════════════════
   Faza 59c — Custom glass picker pre chip (osoba, oblasť — nie native select).
   ════════════════════════════════════════════════════════════════════════════ */
.tasks-add__chip[data-chip-picker] {
    position: relative;
    padding: 0;
    overflow: visible;
}
.tasks-add__chip-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
    width: 100%;
    text-align: left;
}
.tasks-add__chip-caret {
    opacity: 0.5;
    margin-left: 2px;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tasks-add__chip.is-picker-open .tasks-add__chip-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.tasks-add__chip.is-picker-open {
    background: var(--color-aqua-white);
    border-color: var(--color-famivel-blue);
    color: var(--color-dark-teal);
}

/* Glass popup menu — appearance/animation. */
.tasks-add__chip-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 59, 65, 0.12);
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 12px rgba(0, 59, 65, 0.08),
        0 16px 40px rgba(0, 59, 65, 0.14);
    z-index: 20;
    animation: tasks-add-picker-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tasks-add-picker-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tasks-add__chip-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background 140ms ease, color 140ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tasks-add__chip-option:hover {
    background: var(--color-aqua-white);
    color: var(--color-dark-teal);
}
.tasks-add__chip-option.is-selected {
    background: rgba(114, 230, 239, 0.18);
    color: var(--color-dark-teal);
    font-weight: var(--font-semibold);
}
.tasks-add__chip-option.is-selected::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: auto;
    background: var(--color-famivel-blue);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Avatar bubble (osoba picker). */
.tasks-add__chip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: linear-gradient(135deg, var(--color-famivel-blue) 0%, var(--color-dark-teal) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-bold);
    border-radius: 50%;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.tasks-add__chip-option-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tasks-add__chip-me {
    color: var(--text-muted);
    font-weight: var(--font-normal);
    font-size: 11px;
    margin-left: 4px;
}

/* Faza 59d: area picker — area pill v menu options + "Bez oblasti" dot. */
.tasks-add__chip-area-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--area-color, var(--text-muted));
    border: 1.5px dashed currentColor;
    color: var(--text-muted);
    flex-shrink: 0;
    margin: 0 6px;
}
.tasks-add__chip-menu .area-pill {
    /* Menšie kompaktnejšie pills v dropdown menu (matchuje výške row-u). */
    font-size: 10px;
    padding: 2px 7px;
    flex-shrink: 0;
    min-width: 38px;
    text-align: center;
}

/* Dark mode */
[data-theme="dark"] .tasks-add__chip-menu {
    background: rgba(20, 30, 35, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .tasks-add__chip-option {
    color: var(--text-secondary);
}
[data-theme="dark"] .tasks-add__chip-option:hover {
    background: rgba(114, 230, 239, 0.12);
    color: var(--color-famivel-blue);
}
[data-theme="dark"] .tasks-add__chip-option.is-selected {
    background: rgba(114, 230, 239, 0.18);
    color: var(--color-famivel-blue);
}

/* Dark mode */
[data-theme="dark"] .tasks-add__form {
    background: rgba(20, 30, 35, 0.78);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .tasks-add__chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}
[data-theme="dark"] .tasks-add__chip:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-famivel-blue);
}
[data-theme="dark"] .tasks-add__chip.is-set {
    background: rgba(114, 230, 239, 0.12);
    border-color: var(--color-famivel-blue);
    color: var(--color-famivel-blue);
}
[data-theme="dark"] .tasks-add__chip--required {
    background: rgba(255, 208, 176, 0.12);
    border-color: var(--color-apricot);
    color: var(--color-apricot-tint-1);
}
[data-theme="dark"] .tasks-add__actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Faza 61 / 1a — Správa notifikácií (per-user preferencie)
   Glass riadky typov + admin monitoring segment/area picker.
   Recykluje .toggle-switch, .toggle-label, .filter-chip-glass.
   ============================================================ */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.notif-row:hover { border-color: color-mix(in srgb, var(--color-blue) 40%, var(--border-subtle)); }
[data-theme="dark"] .notif-row { background: rgba(30, 50, 55, 0.5); }
.notif-row__info { min-width: 0; flex: 1 1 240px; }
.notif-row__title { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.notif-row__desc  { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.notif-row__channels { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.notif-soon {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    font-size: 9px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-apricot-shade-1, #8B5A3C);
    background: rgba(255, 208, 176, 0.22);
    border-radius: 999px;
    vertical-align: middle;
}

/* Admin monitoring blok */
.notif-admin-block {
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
[data-theme="dark"] .notif-admin-block { background: rgba(30, 50, 55, 0.45); }
.notif-admin-block__title {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.notif-segment { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notif-areas { margin-top: var(--space-3); }
.notif-areas__hint { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.notif-areas__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.notif-areas__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--area-color, #78909C);
    flex-shrink: 0;
}

/* ============================================================
   Faza 62b — inline draft míľnika v detaile (subproject-card draft)
   ============================================================ */
.subproject-card__title-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-blue, #72E6EF);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}
.subproject-card__title-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue, #72E6EF) 30%, transparent);
}
.subproject-card__cancel {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.subproject-card__cancel:hover { background: rgba(0, 59, 65, 0.08); color: var(--text-primary); }
.subproject-card--new { background: color-mix(in srgb, var(--area-color, #78909C) 6%, var(--bg-surface)); }
.subproject-card--just-added {
    animation: subproject-just-added 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes subproject-just-added {
    0%   { box-shadow: 0 0 0 2px color-mix(in srgb, var(--area-color, #78909C) 40%, transparent); }
    100% { box-shadow: none; }
}

/* ============================================================
   Faza 62d — inline draft úlohy v detaile projektu
   ============================================================ */
.project-task-item--new { align-items: flex-start; }
.task-checkbox-toggle--placeholder {
    display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
    border: 1px dashed var(--border-default); border-radius: var(--radius-xs);
    margin-top: 2px;
}
.project-task-item__title-input {
    width: 100%;
    margin-bottom: var(--space-2);
}
.taskdraft-controls { flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.taskdraft-field { position: relative; display: inline-flex; }
.taskdraft-deadline {
    width: auto; padding: 4px 8px; font-size: var(--text-xs);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
.taskdraft-prio { display: inline-flex; gap: 4px; }
.taskdraft-prio__chip {
    padding: 2px 8px; font-size: var(--text-xs); font-weight: var(--font-medium);
    border: 1px solid var(--border-default); border-radius: 999px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    transition: all 140ms ease;
}
.taskdraft-prio__chip:hover { border-color: var(--color-blue); }
.taskdraft-prio__chip.is-active {
    background: rgba(114, 230, 239, 0.16);
    border-color: var(--color-blue);
    color: var(--color-dark-teal);
    font-weight: var(--font-semibold);
}
.taskdraft-cancel {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-left: auto; padding: 0;
    border: none; border-radius: 50%; background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.taskdraft-cancel:hover { background: rgba(0, 59, 65, 0.08); color: var(--text-primary); }
.project-task-item--just-added { animation: subproject-just-added 1.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ============================================================
   Faza 64 — redizajn detailu úlohy: glass metadáta pickery
   (žiadne native <select>; reuse status-dropdown/area-dropdown/
   person-popover/deadline-popover vizuálu, hooky data-task-*).
   ============================================================ */
.task-meta { position: relative; display: flex; flex-direction: column; gap: 6px; }
.task-meta__label {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
.task-meta__value { font-size: var(--text-sm); color: var(--text-primary); word-break: break-word; }
.task-meta__trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 7px 10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    cursor: pointer; font: inherit; font-size: var(--text-sm); text-align: left;
    color: var(--text-primary);
    transition: border-color 140ms ease, background 140ms ease;
}
.task-meta__trigger:hover { border-color: color-mix(in srgb, var(--color-blue) 45%, var(--border-subtle)); background: rgba(255, 255, 255, 0.82); }
.task-meta__trigger:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 1px; }
.task-meta__chev { color: var(--text-muted); flex-shrink: 0; }
.task-meta__person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .task-meta__trigger { background: rgba(30, 50, 55, 0.45); border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .task-meta__trigger:hover { background: rgba(30, 50, 55, 0.6); }
/* tall menus v sidebare — vlastný scroll, neorezáva sa */
.task-meta__menu.area-dropdown { max-height: 300px; overflow-y: auto; }

/* badge--todo do centrálnej status mapy (task "Čaká") — decentná žltá ako planning. */
.badge--todo { background: var(--badge-planning-bg); color: var(--badge-planning-text); }

/* priority dropdown options — farebný bod priority */
.task-prio-option::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.task-prio-option--urgent::before { background: #9A2929; }
.task-prio-option--high::before   { background: #C45757; }
.task-prio-option--medium::before { background: #C5953D; }
.task-prio-option--low::before    { background: #5FAE82; }
/* doplň status dots pre task statusy todo/blocked (in_progress/done už majú z 60p) */
.status-option--todo::before    { background: var(--badge-planning-text); }
.status-option--blocked::before { background: var(--status-blocked-text, #C45757); }

/* === Responzívne: na úzkom okne metadáta POD obsah === */
@media (max-width: 720px) {
    .task-modal__body--split { grid-template-columns: 1fr; gap: var(--space-4); }
    .task-modal__sidebar { order: 2; }
    .task-modal__main { order: 1; }
}

/* Faza 64c: inline task draft — glass tvar triggerom (osoba/deadline), zladenie
   s draftom míľnika. Bez native widgetov (deadline = glass popover). */
.taskdraft-trigger {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-radius: var(--radius-sm);
    gap: 6px;
}
.taskdraft-trigger:hover {
    border-color: color-mix(in srgb, var(--color-blue) 45%, var(--border-subtle));
    background: rgba(255, 255, 255, 0.82);
}
[data-theme="dark"] .taskdraft-trigger {
    background: rgba(30, 50, 55, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}
.taskdraft-field { position: relative; }
.taskdraft-field .deadline-popover,
[data-taskdraft-person] .person-popover { z-index: var(--z-dropdown); }

/* =================================================================
   #66 (commit 2) — Responzívnosť obrazoviek (mobil ≤768).
   Vrstva navrch; desktop nezmenený. Breakpoint podľa layout.css bloku #66.
   ================================================================= */
@media (max-width: 768px) {

    /* ---- DNES: karty úloh čitateľné a klikateľné prstom ---- */
    .today-item {
        grid-template-columns: 4px 24px 1fr;   /* skryjeme hover-hint stĺpec */
        gap: var(--space-2);
        padding: var(--space-3) var(--space-2);
    }
    .today-item__hint,
    .today-item__goicon { display: none; }      /* hover-only affordance → na mobile preč */
    .today-item .task-checkbox-toggle { width: 22px; height: 22px; }
    .today-item__title { font-size: var(--text-base); }
    .today-item__meta { gap: 4px 8px; }

    /* ---- PROJEKTY: zložitá tabuľka → na mobile skryjeme menej dôležité
       stĺpce (Deadline / Osoba / Poznámka), ostáva Oblasť · Názov · Status ·
       Akcie. table-layout:auto nech sa zmestí bez horizontálneho scrollu.
       Pickery (status, akcie kebab), inline "+" a hierarchia ostávajú funkčné
       (wrap má naďalej overflow:visible — dropdowny sa neorezávajú).
       Deadline/osobu na mobile nastavíš cez detail projektu. ---- */
    /* min-width:0 prebíja starší blok @media(max-width:900px){min-width:760px},
       inak by tabuľka držala 760px a pretekala (horizontálny scroll). */
    .projects-table { table-layout: auto !important; width: 100%; min-width: 0; }
    /* všetky colgroup šírky → auto (fixed col widths by inak držali 680px+ aj
       pri skrytých bunkách, lebo group-header colspan=7 drží všetky stĺpce). */
    .projects-table > colgroup > col { width: auto; }
    .projects-table__head th:nth-child(3),   /* Deadline */
    .projects-table__head th:nth-child(4),   /* Osoba */
    .projects-table__head th:nth-child(6),   /* Poznámka */
    .projects-table__cell--deadline,
    .projects-table__cell--person,
    .projects-table__cell--notes { display: none; }
    .projects-table__head th,
    .projects-table__cell { padding-left: var(--space-2); padding-right: var(--space-2); }
    /* názov nech sa zalamuje (desktop má nowrap+ellipsis → na úzkom by držal
       šírku a tabuľka by pretekala). */
    .projects-table__cell--title { white-space: normal; }
    .projects-table__title-link { font-size: var(--text-sm); overflow-wrap: anywhere; }

    /* ---- DETAIL ÚLOHY (modal): dvojstĺpec → pod seba, takmer celoobrazovkový ---- */
    .task-modal { max-width: 100%; max-height: 92vh; }
    .task-modal--wide { max-width: 100%; }
    .task-modal-backdrop { padding: var(--space-2); }
    .task-modal__body--split {
        grid-template-columns: minmax(0, 1fr);   /* 1 stĺpec */
        gap: var(--space-4);
        padding: var(--space-4);
    }
    .task-modal__sidebar { width: 100%; }

    /* ---- Touch: glass pickery / triggery dosť veľké na prst ---- */
    .task-meta__trigger,
    .status-option,
    .person-option { min-height: 40px; }

    /* ---- Notifikácie: riadok info + kanály pod seba (už wrap, doladenie) ---- */
    .notif-row__channels { width: 100%; justify-content: flex-start; gap: var(--space-5); }
}

/* =================================================================
   #66c (commit 2) — /notifikacie: vzdušnejšia, substantívnejšia stránka.
   Scoped pod .notifications-page → ostatné empty-state/zoznamy nezmenené.
   ================================================================= */
.notifications-page { width: 100%; }

/* Zoznam — väčšie, substantívnejšie položky (ikona v tinted kruhu, viac priestoru) */
.notifications-page .notification-list { gap: var(--space-3); }
.notifications-page .notification-link {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
    align-items: center;
}
.notifications-page .notification-item__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-aqua-tint-1);
    color: var(--color-dark-teal);
}
.notifications-page .notification-item.is-unread .notification-item__icon {
    background: rgba(114, 230, 239, 0.25);
}
.notifications-page .notification-item__title { font-size: var(--text-base); }
.notifications-page .notification-item__meta { margin-top: 4px; }

/* Prázdny stav — decentný ale väčší/vzdušnejší (nie stiesnený) */
.notifications-page .empty-state {
    padding: var(--space-13) var(--space-6);
    gap: var(--space-3);
}
.notifications-page .empty-state .star-icon.empty-state__icon {
    width: 84px; height: 84px;
    opacity: 0.4;
    margin-bottom: var(--space-2);
}
.notifications-page .empty-state__title { font-size: var(--text-xl); }
.notifications-page .empty-state__text { font-size: var(--text-base); max-width: 420px; }

/* =================================================================
   #66h — STÍŠENÁ TYPOGRAFIA ZOZNAMOV (Úlohy / Dnes / Projekty)
   ------------------------------------------------------------
   3-úrovňová hierarchia, konzistentne naprieč 3 stránkami:
     • Nadpisy sekcií + počty = TICHÉ (weight ≤500, sivé) — len rozdeľovače.
     • Názvy úloh/projektov = OBSAH (weight 500, primary) — ostáva, nesie oko.
     • Metadáta = TICHÉ (už sú small/muted) — ostáva.
   Žiadne 700 bold v zoznamoch. Deadline/status/area farby ZACHOVANÉ
   (tie nesú význam — meníme len weight/size/neutrálnu farbu textu).
   ================================================================= */

/* — Nadpisy sekcií (rozdeľovače) → tenšie, sivkasté — */
.today-section__title { font-weight: var(--font-medium); }
.upcoming-day-block__title { font-weight: var(--font-medium); color: var(--text-secondary); }
.task-section__name { font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--text-secondary); }
.section-divider-modern { font-weight: var(--font-medium); }
.projects-table__head th { font-weight: var(--font-medium); }
.projects-table__group-code { font-weight: var(--font-medium); }
.projects-table__group-name { font-weight: var(--font-normal); }

/* — Počty pri sekciách (badge „5") → tiché, nie bold — */
.today-section__count,
.upcoming-day-block__count,
.task-section__count,
.projects-table__group-count,
.task-tab__count {
    font-weight: var(--font-normal);
}

/* =================================================================
   #66l — STÍŠENIE v2 (root-cause fix). Predošlé 66h MINULO skutočné triedy:
   /ulohy nadpisy sú .tasks-section__title (700 bold dark-teal), nie
   .section-divider-modern. Deadliny a area neboli riešené vôbec.
   Over v COMPUTED style (nie lint). Farby (deadline význam) ZACHOVANÉ.
   ================================================================= */

/* (1) Nadpisy sekcií — tiché (weight 500, sivkasté). Skutočné triedy zoznamov. */
.tasks-section__title       { font-weight: var(--font-medium); color: var(--text-secondary); }
.tasks-section__count       { font-weight: var(--font-normal); }
.today-section__title       { font-weight: var(--font-medium); color: var(--text-secondary); }
.today-section__count       { font-weight: var(--font-normal); }
.upcoming-day-block__title  { font-weight: var(--font-medium); color: var(--text-secondary); }
.upcoming-day-block__count  { font-weight: var(--font-normal); }

/* (2) Deadliny — weight 400 (NIE bold). Root cause: --overdue-soft/hard mali 600,
   .today-item__delay/__due mali 600. Farby (po termíne červená atď.) PONECHANÉ. */
.task-due,
.task-due--overdue-soft,
.task-due--overdue-hard,
.today-item__delay,
.today-item__due { font-weight: var(--font-normal); }

/* (3) Area v zoznamoch = len FAREBNÉ PÍSMO kódu (žiadny box/pozadie/border/tieň).
   Tmavší odtieň area-color (mix s dark-teal) pre čitateľnosť na bielom.
   Špecificita 0,2,0 prebíja .area-pill (0,1,0) aj .area-pill--solid — bez !important.
   Scoped na RIADKY zoznamov: NEDOTÝKA quick-add chip picker (.tasks-add__chip-option)
   ani area management karty (.area-card). */
.today-item .area-pill,
.task-item__meta .area-pill,
.projects-table .area-pill {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    min-width: 0;
    border-radius: 0;
    font-weight: var(--font-semibold);
    /* 50/50 mix s dark-teal → tmavší čitateľný odtieň aj pre svetlé area (žltá/apricot). */
    color: color-mix(in srgb, var(--area-color, #78909C) 50%, var(--color-dark-teal));
}

/* =================================================================
   #66m — Nudge ikonka na riadkoch (projekty / dashboard / úlohy).
   Decentná Lucide bell, jemný apricot accent na hover (pripomienka),
   spring (dedí z action-icon). Konzistentne naprieč zoznamami.
   ================================================================= */
.action-icon--nudge { color: var(--text-muted); }
.action-icon--nudge:hover {
    color: var(--color-apricot-shade-1, #8B5A3C);
    background: color-mix(in srgb, var(--color-apricot, #FFD0B0) 32%, transparent);
}
[data-theme="dark"] .action-icon--nudge:hover { color: var(--color-apricot, #FFD0B0); }

/* =================================================================
   Faza 66x — CROP profilovej fotky (pan + zoom na fixný kruh).
   Vanilla JS (avatar-crop.js). Scoped STRIKTNE na .crop-* — nezasahuje
   iné modaly ani avatar (.avatar-img / .user-avatar-img sú iná vrstva).
   ================================================================= */
.crop-modal__backdrop {
    position: fixed; inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 59, 65, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.crop-modal__backdrop[hidden] { display: none; }
.crop-modal {
    width: 100%; max-width: 360px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 59, 65, 0.18);
    padding: var(--space-4) var(--space-5) var(--space-5);
    animation: crop-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes crop-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .crop-modal { background: rgba(20, 38, 42, 0.9); border-color: rgba(255,255,255,0.1); }
.crop-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.crop-modal__title { margin: 0; font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--space-2); }
.crop-modal__title .star-icon { width: 16px; height: 16px; color: var(--color-famivel-blue, #72E6EF); }
.crop-modal__title .star-icon svg { width: 100%; height: 100%; }
.crop-modal__close { display: inline-flex; padding: 4px; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.crop-modal__close:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.crop-stage {
    position: relative;
    width: 280px; height: 280px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #0d1f22;
    cursor: grab;
    touch-action: none; /* pan rieši JS cez pointer */
    user-select: none;
}
.crop-stage.is-grabbing { cursor: grabbing; }
.crop-stage__img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; will-change: left, top, width, height; }
.crop-stage__mask {
    position: absolute;
    left: 50%; top: 50%;
    width: 280px; height: 280px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(13, 31, 34, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.crop-zoom { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--text-muted); }
.crop-zoom__slider { flex: 1; accent-color: var(--color-famivel-blue, #72E6EF); cursor: pointer; }
.crop-modal__hint { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
.crop-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* ──────────────────────────────────────────────────────────────────────────
   Faza 68 — odovzdávací workflow (review/hand-off)
   Pill = stav odovzdania. NIKDY nie cyan; recykluje theme-aware status tokeny
   (apricot pre "na kontrole", červená pre "vrátené"), draft = neutrálny.
   ────────────────────────────────────────────────────────────────────────── */
.wf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.45;
    white-space: nowrap;
}
.wf-pill i, .wf-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.wf-pill--draft     { background: rgba(120, 140, 150, 0.14); color: var(--text-muted); }
.wf-pill--submitted { background: var(--badge-planning-bg);   color: var(--badge-planning-text); }   /* apricot/žltá — čaká na kontrolu */
.wf-pill--returned  { background: var(--status-blocked-bg);   color: var(--status-blocked-text); }    /* (legacy) */
.wf-pill__due { font-weight: var(--font-medium); opacity: 0.9; }
.wf-pill__due--overdue { font-weight: var(--font-bold); opacity: 1; }

/* Faza 68 (KROK 2): naliehavosť termínu dopracovania — zelená → apricot → červená (NIE cyan). */
.wf-pill--rework-ok      { background: var(--badge-done-bg);    color: var(--badge-done-text); }      /* >1 deň — decentná zelená */
.wf-pill--rework-soon    { background: #FFE0C7;                 color: #8A4B1E; }                     /* dnes/zajtra — apricot */
.wf-pill--rework-overdue { background: var(--status-blocked-bg); color: var(--status-blocked-text); font-weight: var(--font-semibold); } /* po termíne — červená */
[data-theme="dark"] .wf-pill--rework-soon { background: #3A2A1A; color: #FFC79A; }
/* compact variant (karty / zoznamy) */
.wf-pill--compact { padding: 2px 8px; font-size: var(--text-xs); }
.subproject-card__rework { margin: 6px 0 2px; }

/* Faza 68 (KROK 3): sekcia "Na dopracovanie" na Dnes — accent (apricot, nie cyan). */
.today-section--rework .today-section__title i { color: var(--color-apricot-shade-1); }
.today-item--rework .today-item__proj-icon i { color: var(--color-apricot-shade-1); }

/* Return modal — polia (lehota / poznámka / súbor). */
.handoff-field { margin-bottom: var(--space-4); }
.handoff-field:last-child { margin-bottom: 0; }
.handoff-field__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.handoff-field__optional { font-weight: var(--font-normal); color: var(--text-muted); }
.handoff-days-row { display: inline-flex; align-items: center; gap: 8px; }
.handoff-days-row .input { width: 88px; }
.handoff-days-suffix { font-size: var(--text-sm); color: var(--text-muted); }
.handoff-due-preview { margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* Glass modal "Vrátiť na dopracovanie" — scoped (ostatné modaly nech sú ako boli). */
#handoff-return-modal.modal[open] { max-width: 460px; }
#handoff-return-modal .modal__dialog {
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    animation: modal-slide-up 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#handoff-return-modal .modal__header { border-bottom-color: rgba(0, 59, 65, 0.10); }
#handoff-return-modal .modal__footer { background: transparent; border-top-color: rgba(0, 59, 65, 0.10); }
/* spring na tlačidlách */
#handoff-return-modal .modal__footer .btn {
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background var(--transition-fast), box-shadow var(--transition-fast);
}
#handoff-return-modal .modal__footer .btn:hover { transform: translateY(-1px); }
[data-theme="dark"] #handoff-return-modal .modal__dialog {
    background: rgba(18, 38, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.10);
}

/* Glass upload — recyklovaný vzor príloh komentárov (.task-comment-form__attach). */
.handoff-upload { display: inline-flex; align-items: center; gap: 10px; }
.handoff-upload__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 59, 65, 0.12);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-dark-teal);
    font-size: var(--text-sm); font-weight: var(--font-medium);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.handoff-upload__btn:hover {
    background: var(--color-aqua-white);
    border-color: var(--color-famivel-blue);
    transform: translateY(-1px);
}
.handoff-upload__btn svg, .handoff-upload__btn i { color: var(--color-dark-teal); }
.handoff-upload__name {
    font-size: var(--text-xs); color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}

/* Faza 68 fix: ▶ začiatok (a deadline) ikona presne vertikálne na stred s dátumom.
   Lucide po replace stráca [data-lucide]{vertical-align:middle}; vystrelí na baseline. */
.inline-edit-start  [data-start-trigger],
.inline-edit-deadline [data-deadline-trigger] { align-items: center; line-height: 1; }
.inline-edit-start  [data-start-trigger]  > svg,
.inline-edit-start  [data-start-trigger]  > i,
.inline-edit-deadline [data-deadline-trigger] > svg,
.inline-edit-deadline [data-deadline-trigger] > i { display: block; align-self: center; }

/* ──────────────────────────────────────────────────────────────────────────
   Faza 68b — filtre na stránke Notifikácie (glass pills, client-side show/hide)
   Aktívny = dark-teal (NIE cyan ako text). Spring hover.
   ────────────────────────────────────────────────────────────────────────── */
.notif-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-4) 0 var(--space-5); }
.notif-filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(0, 59, 65, 0.12);
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    color: var(--text-secondary);
    font-size: var(--text-sm); font-weight: var(--font-medium);
    cursor: pointer;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.notif-filter:hover { background: var(--color-aqua-white); border-color: var(--color-famivel-blue); transform: translateY(-1px); }
.notif-filter.is-active { background: var(--color-dark-teal); border-color: var(--color-dark-teal); color: #fff; }
.notif-filter__count {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 1px 7px; border-radius: var(--radius-full);
    background: rgba(0, 59, 65, 0.08); color: var(--text-muted);
}
.notif-filter.is-active .notif-filter__count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.notif-filter-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-5) 0; }

/* Dark theme: cyan fill + dark-teal text (brand dark-mode active; text nikdy cyan). */
[data-theme="dark"] .notif-filter { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .notif-filter.is-active { background: var(--color-famivel-blue); border-color: var(--color-famivel-blue); color: var(--color-dark-teal); }
[data-theme="dark"] .notif-filter.is-active .notif-filter__count { background: rgba(0, 59, 65, 0.22); color: var(--color-dark-teal); }

.notification-item.notif-hide { display: none; }
@keyframes notif-pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
.notification-item.notif-pop { animation: notif-pop 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ============================================================
   FAZA 85 — GANTT (frappe-gantt) — page layout + brand override
   ============================================================ */
.gantt-page { display: flex; flex-direction: column; gap: var(--space-4); }

/* KROK 1: prepínač režimu (glass tabs) */
.gantt-modes { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-aqua-tint-1); border-radius: var(--radius-md); align-self: flex-start; }
.gantt-mode {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
    transition: background 160ms cubic-bezier(0.34,1.56,0.64,1), color 140ms ease;
}
.gantt-mode:hover { color: var(--color-dark-teal); }
.gantt-mode.is-active { background: #fff; color: var(--color-dark-teal); font-weight: var(--font-semibold); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .gantt-mode.is-active { background: rgba(255,255,255,0.1); }

/* KROK 3: filter typu (Projekty / Úlohy / Oboje) */
.gantt-filter { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-aqua-tint-1); border-radius: var(--radius-md); align-self: flex-start; }
.gantt-filter-btn {
    padding: 6px 14px; border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}
.gantt-filter-btn:hover { color: var(--color-dark-teal); }
.gantt-filter-btn.is-active { background: #fff; color: var(--color-dark-teal); font-weight: var(--font-semibold); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .gantt-filter-btn.is-active { background: rgba(255,255,255,0.1); }
.gantt-picker { display: inline-flex; flex-direction: column; gap: 4px; max-width: 420px; }
.gantt-picker__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.gantt-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 48px 20px; text-align: center;
    color: var(--text-muted); background: var(--color-aqua-tint-1);
    border: 1px dashed var(--color-aqua-shade-1); border-radius: var(--radius-lg);
}
.gantt-empty i { color: var(--color-dark-teal-tint-2); }
.gantt-empty .hint { font-size: var(--text-sm); opacity: 0.8; }

.gantt-wrap { padding: var(--space-4); overflow-x: auto; }
.gantt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.gantt-toolbar__title { font-weight: var(--font-semibold); color: var(--color-dark-teal); }
.gantt-toolbar__zoom { display: inline-flex; gap: 2px; background: var(--color-aqua-tint-1); padding: 3px; border-radius: var(--radius-md); }
.gantt-zoom-btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 12px; border-radius: var(--radius-sm);
    font: inherit; font-size: var(--text-sm); color: var(--text-secondary);
    transition: background 140ms ease, color 140ms ease;
}
.gantt-zoom-btn:hover { color: var(--color-dark-teal); }
.gantt-zoom-btn.is-active { background: #fff; color: var(--color-dark-teal); font-weight: var(--font-semibold); box-shadow: var(--shadow-xs); }

/* frappe-gantt SVG — Famivel ladenie (cyan NIKDY ako text; používame ho len na pruhy). */
/* Faza 87 (KROK 2): jemný pastel fallback (JS prefarbí podľa oblasti); tmavý čitateľný
   text na svetlom pruhu, prípadne mimo pruhu (.big) — cyan NIKDY ako text. */
.gantt-wrap .gantt .bar { fill: var(--color-aqua-shade-1); stroke: rgba(0,59,65,0.18); stroke-width: 1px; }
.gantt-wrap .gantt .bar-progress { fill: var(--color-dark-teal); opacity: 0.10; }
.gantt-wrap .gantt .bar-label { fill: var(--color-dark-teal); font-family: inherit; font-size: 12px; font-weight: 600; }
.gantt-wrap .gantt .bar-label.big { fill: var(--color-dark-teal); font-weight: 600; }
/* Faza 87 (KROK 3): typografia osi — Satoshi (inherit), hlavička dni/mesiace
   odlíšená od denných čísel; čitateľné, zladené s appkou. */
.gantt-wrap .gantt-container,
.gantt-wrap .gantt text { font-family: inherit; }
.gantt-wrap .gantt .upper-text { fill: var(--color-dark-teal); font-size: 12px; font-weight: 600; }
.gantt-wrap .gantt .lower-text { fill: var(--text-muted); font-size: 11px; }
.gantt-wrap [data-gantt] { display: block; }
.gantt-wrap .gantt .bar-wrapper:not(.gantt-dot):hover .bar { filter: brightness(0.97); }
.gantt-wrap .gantt .today-highlight { fill: var(--color-apricot); opacity: 0.18; }
.gantt-wrap .gantt .grid-header { fill: var(--color-aqua-tint-1); }
.gantt-wrap .gantt .row-line, .gantt-wrap .gantt .tick { stroke: rgba(0, 59, 65, 0.07); }
.gantt-wrap .gantt .tick.thick { stroke: rgba(0, 59, 65, 0.14); }
.gantt-wrap .gantt .arrow { stroke: var(--color-dark-teal-tint-1); stroke-width: 1.4; }
.gantt-wrap .gantt .handle { fill: var(--color-dark-teal); opacity: 0; transition: opacity 140ms ease; }
.gantt-wrap .gantt .bar-wrapper:hover .handle { opacity: 0.5; }
.gantt-wrap .gantt .bar-wrapper { cursor: pointer; }

/* KROK 2: úloha = bodka/marker (0-dňový bar → úzky zaoblený marker na deadline).
   Vizuálne odlíšené od míľnikov-pruhov. Farbu (area) dopĺňa JS (colorBars). */
.gantt-wrap .gantt .bar-wrapper.gantt-dot .bar {
    width: 11px !important;
    rx: 5px !important;
    ry: 5px !important;
    transform: translateX(-5.5px); /* vycentruj na dátum deadline */
}
.gantt-wrap .gantt .bar-wrapper.gantt-dot .bar-progress,
.gantt-wrap .gantt .bar-wrapper.gantt-dot .handle { display: none !important; }
.gantt-wrap .gantt .bar-wrapper.gantt-dot { cursor: default; }

/* popup (glass, Famivel) */
.gantt-wrap .gantt-container .popup-wrapper {
    background: var(--glass-bg-strong, rgba(255,255,255,0.95));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); color: var(--text-primary); padding: 0;
}
.gantt-wrap .gantt-container .popup-wrapper .pointer { display: none; }
.gantt-popup { padding: 8px 12px; font-size: var(--text-sm); }
.gantt-popup__title { font-weight: var(--font-semibold); color: var(--color-dark-teal); margin-bottom: 2px; }
.gantt-popup__dates { color: var(--text-muted); font-size: var(--text-xs); }
[data-theme="dark"] .gantt-zoom-btn.is-active { background: rgba(255,255,255,0.1); }

/* Závislosti (KROK 3) — panel pod grafom */
.gantt-deps { margin-top: var(--space-4); padding: var(--space-4); }
.gantt-deps__title { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: var(--text-base); color: var(--color-dark-teal); }
.gantt-deps__form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
/* Faza 88: pridanie míľnika z Ganttu */
.gantt-ms-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.gantt-ms-form input[type="text"] { flex: 1; min-width: 200px; }
.gantt-ms-form input[type="date"] { max-width: 170px; }
.gantt-deps__form .form-input { max-width: 280px; }
.gantt-deps__arrow { color: var(--text-muted); font-size: var(--text-sm); }
.gantt-deps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gantt-deps__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-aqua-tint-1); font-size: var(--text-sm); color: var(--text-primary); }
.gantt-deps__item strong { color: var(--color-dark-teal); font-weight: var(--font-semibold); }
.gantt-deps__empty { color: var(--text-muted); font-size: var(--text-sm); font-style: italic; }

/* ============================================================
   FAZA 89 — WISDOM (AI asistent, chat). Glass, Satoshi, ✦ akcenty.
   Cyan #72E6EF len ako akcent/pozadie/border — NIKDY ako čitateľný text.
   [skill recommendation]: atmosférický gradient, staggered load reveal,
   spring micro-interactions, čitateľný type-scale v odpovediach.
   ============================================================ */
.wisdom-page {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* jemná aqua atmosféra v pozadí (depth, nie plochá farba) */
    background:
        radial-gradient(1200px 380px at 15% -10%, rgba(114, 230, 239, 0.10), transparent 60%),
        radial-gradient(900px 320px at 100% 0%, rgba(255, 208, 176, 0.08), transparent 55%);
}
.wisdom-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; animation: wisdom-reveal 420ms cubic-bezier(0.34,1.56,0.64,1) both; }
.wisdom-header__brand { display: flex; align-items: center; gap: var(--space-3); }
.wisdom-star { color: var(--color-famivel-blue); font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(114,230,239,0.5)); }
.wisdom-header__title { font-size: 26px; font-weight: var(--font-bold); color: var(--color-dark-teal); margin: 0; line-height: 1.1; }
.wisdom-header__lede { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.wisdom-header { position: relative; }
/* Pri otvorenom pickeri vynes hlavičku NAD chips/chat (.glass-card má backdrop-filter
   → vlastný stacking context, inak by glass menu zapadlo pod chat). */
.wisdom-header.has-picker-open { z-index: 70; }
.wisdom-header__actions { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.wisdom-focus { display: inline-flex; flex-direction: column; gap: 4px; position: relative; }
.wisdom-focus__label { font-size: 11px; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.wisdom-focus__select { min-width: 240px; }

/* „Nový chat" — glass pill, spring micro-interaction. */
.wisdom-newchat {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(0, 59, 65, 0.12);
    background: var(--glass-bg, rgba(255,255,255,0.6));
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    color: var(--color-dark-teal);
    font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold);
    padding: 8px 15px; border-radius: var(--radius-full); cursor: pointer;
    transition: transform 160ms cubic-bezier(0.34,1.56,0.64,1), background 140ms ease, border-color 140ms ease, box-shadow 160ms ease;
}
.wisdom-newchat:hover { transform: translateY(-2px); border-color: var(--color-famivel-blue); box-shadow: 0 6px 16px rgba(0,59,65,0.10); }
.wisdom-newchat:active { transform: translateY(0); }
.wisdom-newchat i { color: var(--color-dark-teal); }

/* Glass picker (focus na projekt). */
.wisdom-picker__trigger {
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 240px; max-width: 320px;
    border: 1px solid rgba(0, 59, 65, 0.14);
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--color-dark-teal);
    font: inherit; font-size: var(--text-sm);
    padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; text-align: left;
    transition: border-color 140ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(0.34,1.56,0.64,1);
}
.wisdom-picker__trigger:hover { border-color: var(--color-famivel-blue); box-shadow: 0 4px 14px rgba(0,59,65,0.08); }
.wisdom-picker.is-open .wisdom-picker__trigger,
.wisdom-focus.is-open .wisdom-picker__trigger { border-color: var(--color-famivel-blue); box-shadow: 0 0 0 3px rgba(114,230,239,0.18); }
.wisdom-picker__trigger-icon { color: var(--color-dark-teal); opacity: 0.65; flex-shrink: 0; }
.wisdom-picker__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-medium); }
.wisdom-picker__caret { color: var(--text-muted); flex-shrink: 0; transition: transform 200ms cubic-bezier(0.34,1.56,0.64,1); }
.wisdom-focus.is-open .wisdom-picker__caret { transform: rotate(180deg); }

.wisdom-picker__menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    width: min(320px, 86vw);
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 18px 44px rgba(0,59,65,0.18);
    padding: 8px; overflow: hidden;
    animation: wisdom-picker-in 200ms cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes wisdom-picker-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.wisdom-picker__search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 6px; border: 1px solid rgba(0,59,65,0.12); border-radius: var(--radius-md); background: #fff; }
.wisdom-picker__search i { color: var(--text-muted); flex-shrink: 0; }
.wisdom-picker__search-input { flex: 1; border: 0; outline: none; font: inherit; font-size: var(--text-sm); color: var(--text-primary); background: transparent; }

.wisdom-picker__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.wisdom-picker__option {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer;
    color: var(--color-dark-teal); font-size: var(--text-sm);
    transition: background 120ms ease;
}
.wisdom-picker__option:hover { background: rgba(114,230,239,0.12); }
.wisdom-picker__option.is-selected { background: rgba(114,230,239,0.18); font-weight: var(--font-semibold); }
.wisdom-picker__option-icon { color: var(--text-muted); flex-shrink: 0; }
.wisdom-picker__code {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-bold);
    letter-spacing: 0.02em; color: var(--color-dark-teal);
    background: rgba(0,59,65,0.08); padding: 2px 7px; border-radius: var(--radius-full);
}
.wisdom-picker__opt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wisdom-picker__empty { padding: 14px 10px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); list-style: none; }

[data-theme="dark"] .wisdom-picker__trigger { background: rgba(30,50,55,0.6); color: var(--text-primary); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .wisdom-picker__menu { background: rgba(24,40,44,0.92); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .wisdom-picker__search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .wisdom-picker__option { color: var(--text-primary); }
[data-theme="dark"] .wisdom-newchat { background: rgba(30,50,55,0.6); color: var(--text-primary); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .wisdom-newchat i { color: var(--text-primary); }

.wisdom-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); animation: wisdom-reveal 420ms cubic-bezier(0.34,1.56,0.64,1) 80ms both; }
.wisdom-chips__group { display: contents; }
.wisdom-chip {
    border: 1px solid rgba(0, 59, 65, 0.12);
    background: var(--glass-bg, rgba(255,255,255,0.6));
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: var(--color-dark-teal);
    font: inherit; font-size: var(--text-sm);
    padding: 7px 14px; border-radius: var(--radius-full); cursor: pointer;
    transition: transform 160ms cubic-bezier(0.34,1.56,0.64,1), background 140ms ease, border-color 140ms ease, box-shadow 160ms ease;
}
.wisdom-chip:hover { transform: translateY(-2px); border-color: var(--color-famivel-blue); box-shadow: 0 6px 16px rgba(0,59,65,0.08); }
.wisdom-chip:active { transform: translateY(0); }

.wisdom-chat {
    display: flex; flex-direction: column;
    min-height: 420px; max-height: calc(100vh - 320px);
    padding: 0; overflow: hidden;
    animation: wisdom-reveal 460ms cubic-bezier(0.34,1.56,0.64,1) 150ms both;
}
.wisdom-messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

.wisdom-empty { margin: auto; text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; }
.wisdom-empty__star { color: var(--color-famivel-blue); font-size: 34px; line-height: 1; opacity: 0.9; }
.wisdom-empty__title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-dark-teal); margin: 4px 0 0; }
.wisdom-empty__hint { font-size: var(--text-sm); max-width: 460px; }

.wisdom-msg { display: flex; animation: wisdom-bubble-in 280ms cubic-bezier(0.34,1.56,0.64,1) both; }
.wisdom-msg--user { justify-content: flex-end; }
.wisdom-msg--assistant, .wisdom-msg--error { justify-content: flex-start; }
.wisdom-bubble { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); }
.wisdom-bubble--user {
    background: linear-gradient(135deg, rgba(255,208,176,0.45), rgba(230,248,248,0.85));
    border: 1px solid rgba(255,208,176,0.5);
    border-bottom-right-radius: 4px; color: var(--color-dark-teal);
}
.wisdom-bubble--assistant {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.6);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,59,65,0.06);
    color: var(--color-dark-teal);
}
.wisdom-bubble--error { background: var(--status-danger-bg); color: var(--status-danger-text); border: 1px solid rgba(178,92,45,0.25); border-bottom-left-radius: 4px; font-size: var(--text-sm); }

/* Markdown vnútri odpovede — čitateľný tmavý text (nie cyan), príjemný rytmus. */
.wisdom-bubble--assistant h1, .wisdom-bubble--assistant h2, .wisdom-bubble--assistant h3 { color: var(--color-dark-teal); margin: 10px 0 6px; line-height: 1.25; font-weight: var(--font-bold); }
.wisdom-bubble--assistant h1 { font-size: 18px; }
.wisdom-bubble--assistant h2 { font-size: 16px; }
.wisdom-bubble--assistant h3 { font-size: 15px; }
.wisdom-bubble--assistant p { margin: 6px 0; }
.wisdom-bubble--assistant ul, .wisdom-bubble--assistant ol { margin: 6px 0; padding-left: 20px; }
.wisdom-bubble--assistant li { margin: 3px 0; }
.wisdom-bubble--assistant strong { color: var(--color-dark-teal); font-weight: var(--font-bold); }
.wisdom-bubble--assistant a { color: var(--text-link); text-decoration: underline; }
.wisdom-bubble--assistant code { background: rgba(0,59,65,0.06); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.92em; color: var(--color-dark-teal); }
.wisdom-bubble--assistant > :first-child { margin-top: 0; }
.wisdom-bubble--assistant > :last-child { margin-bottom: 0; }
.wisdom-bubble--assistant table { border-collapse: collapse; margin: 8px 0; font-size: var(--text-sm); }
.wisdom-bubble--assistant th, .wisdom-bubble--assistant td { border: 1px solid rgba(0,59,65,0.12); padding: 4px 8px; text-align: left; }

.wisdom-loading { display: flex; align-items: center; gap: 8px; padding: 4px var(--space-4) 0; color: var(--text-muted); font-size: var(--text-sm); }
.wisdom-star--pulse { animation: wisdom-pulse 1.1s cubic-bezier(0.34,1.56,0.64,1) infinite; }

.wisdom-composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid rgba(0,59,65,0.08); background: rgba(255,255,255,0.4); }
.wisdom-input { flex: 1; resize: none; border: 1px solid rgba(0,59,65,0.12); border-radius: var(--radius-md); padding: 9px 12px; font: inherit; font-size: var(--text-base); color: var(--text-primary); background: #fff; line-height: 1.5; max-height: 160px; }
.wisdom-input:focus { outline: none; border-color: var(--color-famivel-blue); box-shadow: 0 0 0 3px rgba(114,230,239,0.18); }
.wisdom-send {
    flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: var(--radius-md); cursor: pointer;
    background: var(--color-famivel-blue); color: var(--color-dark-teal);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 160ms cubic-bezier(0.34,1.56,0.64,1), background 140ms ease;
}
.wisdom-send:hover { background: var(--color-blue-shade-1, #5ed3dd); transform: scale(1.06); }
.wisdom-send:active { transform: scale(1); }

@keyframes wisdom-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wisdom-bubble-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes wisdom-pulse { 0%,100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }

[data-theme="dark"] .wisdom-bubble--assistant { background: rgba(30,50,55,0.6); border-color: rgba(255,255,255,0.08); color: var(--text-primary); }
[data-theme="dark"] .wisdom-bubble--assistant h1, [data-theme="dark"] .wisdom-bubble--assistant h2, [data-theme="dark"] .wisdom-bubble--assistant h3, [data-theme="dark"] .wisdom-bubble--assistant strong { color: var(--text-primary); }
[data-theme="dark"] .wisdom-input { background: rgba(255,255,255,0.06); color: var(--text-primary); }
@media (max-width: 768px) {
    .wisdom-chat { max-height: none; }
    .wisdom-focus__select { min-width: 0; }
    .wisdom-header__actions { width: 100%; justify-content: space-between; }
    .wisdom-focus { flex: 1; }
    .wisdom-picker__trigger { min-width: 0; width: 100%; max-width: none; }
}

/* ============================================================
   Floating Fami Wisdom — bublina + slide-up panel (na všetkých stránkach okrem /wisdom)
   z-index 850 = nad sticky (header/bottom-nav 200), pod modalmi (900/1000) a toastmi (2000).
   ============================================================ */
.wisdom-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 850;
    width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-famivel-blue), #5ed3dd);
    color: var(--color-dark-teal);
    box-shadow: 0 8px 24px rgba(0,59,65,0.22), 0 2px 8px rgba(114,230,239,0.4);
    transition: transform 200ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 200ms ease;
}
.wisdom-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(0,59,65,0.26), 0 3px 12px rgba(114,230,239,0.55); }
.wisdom-fab:active { transform: translateY(0) scale(1); }
.wisdom-fab__star { display: none; } /* fab používa Lucide sparkles; ✦ ostáva pre header/loading */
.wisdom-fab__icon { color: var(--color-dark-teal); }
.wisdom-float.is-open .wisdom-fab { transform: scale(0.92); } /* jemný „stlačený" feedback pri otvorenom paneli */

.wisdom-panel {
    position: fixed; right: 24px; bottom: 92px; z-index: 850;
    display: flex; flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    height: min(600px, calc(100vh - 140px));
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,59,65,0.24), 0 4px 16px rgba(0,59,65,0.10);
    overflow: hidden;
    /* slide-up spring: default skrytý stav (root nemá .is-open) */
    opacity: 0; transform: translateY(18px) scale(0.97); transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 200ms ease, transform 240ms cubic-bezier(0.34,1.56,0.64,1);
}
.wisdom-float.is-open .wisdom-panel { opacity: 1; transform: none; pointer-events: auto; }

.wisdom-panel__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 12px 14px; border-bottom: 1px solid rgba(0,59,65,0.08);
    background: rgba(255,255,255,0.35);
}
.wisdom-panel__brand { display: flex; align-items: center; gap: 8px; }
.wisdom-panel__brand .wisdom-star { font-size: 18px; }
.wisdom-panel__title { font-weight: var(--font-bold); color: var(--color-dark-teal); font-size: var(--text-base); }
.wisdom-panel__actions { display: flex; align-items: center; gap: 6px; }
.wisdom-newchat--sm { padding: 6px 11px; font-size: var(--text-xs); }
.wisdom-panel__close {
    width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
    background: rgba(0,59,65,0.06); color: var(--color-dark-teal);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 140ms ease, transform 160ms cubic-bezier(0.34,1.56,0.64,1);
}
.wisdom-panel__close:hover { background: rgba(0,59,65,0.12); transform: rotate(90deg); }

/* Focus picker v paneli — full width, menu nad messages (panel je vlastný stacking layer). */
.wisdom-panel__focus { display: block; position: relative; z-index: 3; padding: 10px 14px 0; }
.wisdom-panel__focus .wisdom-picker__trigger { width: 100%; min-width: 0; max-width: none; }
.wisdom-panel__focus .wisdom-picker__menu { left: 14px; right: 14px; width: auto; z-index: 30; }

.wisdom-panel__messages { flex: 1; min-height: 0; padding: 14px; }
.wisdom-panel__chips { padding: 0 14px 8px; gap: 6px; }
.wisdom-panel__chips .wisdom-chip { font-size: var(--text-xs); padding: 6px 11px; }
.wisdom-panel__composer { border-top: 1px solid rgba(0,59,65,0.08); }

/* Mobile: bublina nad bottom-nav, panel takmer celoobrazovkový. */
@media (max-width: 768px) {
    .wisdom-fab { right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 76px); }
    .wisdom-panel {
        right: 10px; left: 10px; width: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 76px);
        height: min(72vh, calc(100vh - 180px));
    }
}

[data-theme="dark"] .wisdom-panel { background: rgba(24,40,44,0.92); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .wisdom-panel__header { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .wisdom-panel__close { background: rgba(255,255,255,0.08); color: var(--text-primary); }