/* =========================================================
   Zadania — LifeCenter OS
   ========================================================= */

.lc-tasks {
    background: #f8fafc;
    min-height: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .lc-tasks { padding: 2rem; }
}

/* =========================================================
   Header
   ========================================================= */
.lc-tasks__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

@media (min-width: 768px) {
    .lc-tasks__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.lc-tasks__title-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.lc-tasks__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1e293b;
    margin: 0;
}

.lc-gtd-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #6366f1;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
}

.lc-tasks__subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.125rem 0 0;
}

/* =========================================================
   Toolbar (search + filters)
   ========================================================= */
.lc-tasks__toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .lc-tasks__toolbar {
        flex-direction: row;
        align-items: center;
    }
}

.lc-tasks__search-wrap {
    position: relative;
    flex: 1;
}

.lc-tasks__search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    pointer-events: none;
}

.lc-tasks__search {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.875rem 0 2.375rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
    font-family: inherit;
}

.lc-tasks__search::placeholder { color: #94a3b8; }

.lc-tasks__search:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.lc-tasks__filters {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Shared button overrides for sm size */
.lc-btn--sm {
    padding: 0 0.875rem;
    height: 2.5rem;
    font-size: 0.8125rem;
}

/* =========================================================
   Task cards
   ========================================================= */
.lc-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 2rem;
}

.lc-task-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow 200ms, transform 200ms;
    overflow: hidden;
}

.lc-task-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.lc-task-card__inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

/* Checkbox */
.lc-task-card__check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1.5px solid #cbd5e1;
    flex-shrink: 0;
    margin-top: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, border-color 150ms;
    cursor: pointer;
}

.lc-task-card__check--checked {
    background: #4f46e5;
    border-color: #4f46e5;
}

/* Content */
.lc-task-card__body {
    flex: 1;
    min-width: 0;
}

.lc-task-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lc-task-card__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    transition: color 150ms;
}

.lc-task-card__title--done {
    color: #94a3b8;
    text-decoration: line-through;
}

/* Priority badges */
.lc-task-prio {
    font-size: 0.5625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    line-height: 1rem;
    flex-shrink: 0;
}

.lc-task-prio--high {
    background: #fee2e2;
    color: #dc2626;
    border-color: rgba(220,38,38,.15);
}

.lc-task-prio--medium {
    background: #fef3c7;
    color: #d97706;
    border-color: rgba(217,119,6,.15);
}

.lc-task-prio--low {
    background: #d1fae5;
    color: #059669;
    border-color: rgba(5,150,105,.15);
}

/* Meta row */
.lc-task-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
}

.lc-task-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lc-task-card__meta-item svg {
    stroke: #cbd5e1;
    flex-shrink: 0;
}

/* More button */
.lc-task-card__more {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.375rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, color 150ms;
    flex-shrink: 0;
}

.lc-task-card__more:hover {
    background: #f1f5f9;
    color: #475569;
}

/* =========================================================
   Empty state
   ========================================================= */
.lc-task-list--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
    border: 2px dashed #e2e8f0;
    border-radius: 0.75rem;
    color: #94a3b8;
    gap: 0.75rem;
    text-align: center;
}

.lc-task-list--empty svg {
    width: 3rem;
    height: 3rem;
    opacity: 0.2;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lc-task-list--empty p {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* =========================================================
   Modal
   ========================================================= */
.lc-task-card__desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.lc-tasks__flash {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.lc-tasks__flash--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.lc-tasks__flash--info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

.lc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.lc-modal-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

.lc-modal {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    transform: translateY(8px) scale(.98);
    transition: transform 200ms ease;
}

.lc-modal-overlay--visible .lc-modal {
    transform: translateY(0) scale(1);
}

.lc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.lc-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.lc-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.375rem;
    transition: background 150ms, color 150ms;
}

.lc-modal__close:hover {
    background: #f1f5f9;
    color: #475569;
}

.lc-modal__body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lc-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

/* Fields */
.lc-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lc-field__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
}

.lc-field__input,
.lc-field__select {
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
    font-family: inherit;
    width: 100%;
}

.lc-field__input:focus,
.lc-field__select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.lc-field__input--error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important;
    animation: lc-shake .3s ease;
}

@keyframes lc-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}


/* =========================================================
   GTD — Quick Capture Bar
   ========================================================= */
.lc-capture-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: #fff;
    border: 2px solid #6366f1;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}

.lc-capture-bar__icon { color: #6366f1; flex-shrink: 0; }

.lc-capture-bar__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9375rem;
    color: #1e293b;
    font-family: inherit;
    background: transparent;
}
.lc-capture-bar__input::placeholder { color: #94a3b8; }

/* =========================================================
   GTD — Tabs
   ========================================================= */
.lc-gtd-tabs {
    display: flex;
    gap: 0.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.375rem;
    overflow-x: auto;
}

.lc-gtd-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms, color 150ms;
}

.lc-gtd-tab:hover { background: #f1f5f9; color: #334155; }

.lc-gtd-tab--active {
    background: #6366f1;
    color: #fff;
}
.lc-gtd-tab--active:hover { background: #4f46e5; }

.lc-gtd-tab__count {
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.0625rem 0.375rem;
    min-width: 1.25rem;
    text-align: center;
}
.lc-gtd-tab:not(.lc-gtd-tab--active) .lc-gtd-tab__count {
    background: #e2e8f0;
    color: #475569;
}

/* =========================================================
   GTD — Panels
   ========================================================= */
.lc-gtd-section-hint {
    font-size: 0.8125rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.lc-gtd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #94a3b8;
    text-align: center;
}
.lc-gtd-empty svg { opacity: 0.35; }
.lc-gtd-empty p { margin: 0; font-size: 0.875rem; }

/* =========================================================
   GTD — Task card (updated layout)
   ========================================================= */
.lc-task-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    transition: box-shadow 150ms, opacity 200ms, transform 200ms;
}

.lc-task-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lc-task-card--done { opacity: 0.6; }

.lc-task-card__left { flex-shrink: 0; padding-top: 0.125rem; }

.lc-task-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lc-task-card__top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lc-task-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* =========================================================
   GTD — Task action buttons
   ========================================================= */
.lc-task-act {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    background: #f1f5f9;
    color: #475569;
    transition: background 150ms, color 150ms;
    white-space: nowrap;
}
.lc-task-act:hover { background: #e2e8f0; color: #1e293b; }

.lc-task-act--next    { color: #6366f1; background: #eef2ff; }
.lc-task-act--next:hover { background: #e0e7ff; }

.lc-task-act--done    { color: #10b981; background: #d1fae5; }
.lc-task-act--done:hover { background: #a7f3d0; }

.lc-task-act--waiting { color: #f59e0b; background: #fef3c7; }
.lc-task-act--waiting:hover { background: #fde68a; }

.lc-task-act--someday { color: #64748b; background: #f1f5f9; }

.lc-task-act--inbox   { color: #64748b; background: #f1f5f9; }

.lc-task-act--edit    { color: #6366f1; background: transparent; padding: 0.25rem; }
.lc-task-act--edit:hover { background: #eef2ff; }
.lc-task-act--delete  { color: #f43f5e; background: transparent; padding: 0.25rem; }
.lc-task-act--delete:hover { background: #fff1f2; }

/* =========================================================
   GTD — Context badge
   ========================================================= */
.lc-ctx-badge {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--ctx-color, #6366f1);
    background: color-mix(in srgb, var(--ctx-color, #6366f1) 12%, transparent);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

/* =========================================================
   GTD — Context filter
   ========================================================= */
.lc-ctx-filter {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.lc-ctx-filter__btn {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.lc-ctx-filter__btn:hover { background: #f1f5f9; }
.lc-ctx-filter__btn--active {
    background: var(--ctx-color, #6366f1);
    border-color: var(--ctx-color, #6366f1);
    color: #fff;
}

/* =========================================================
   GTD — Context groups (Next Actions)
   ========================================================= */
.lc-ctx-group { margin-bottom: 1.5rem; }

.lc-ctx-group__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.lc-ctx-group__label--none { color: #94a3b8; }
.lc-ctx-group__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* =========================================================
   GTD — Task meta row
   ========================================================= */
.lc-task-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lc-task-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #94a3b8;
}
.lc-task-meta__item--overdue { color: #f43f5e; }

/* =========================================================
   Modal — two-column field row
   ========================================================= */
.lc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Nowa karta — animacja wejścia */
.lc-task-card--new {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 250ms ease, transform 250ms ease;
}

.lc-task-card--visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   Mobile (< 640px)
   ========================================================= */
@media (max-width: 639px) {
    .lc-tasks { padding: 1rem; }

    .lc-tasks__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .lc-capture-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .lc-capture-bar__input {
        min-width: 0;
        width: 100%;
    }

    .lc-capture-bar__btn,
    #lc-capture-btn {
        width: 100%;
        justify-content: center;
    }

    .lc-field-row {
        grid-template-columns: 1fr;
    }
}