/* Flowly — Task Item */

/* =============================================================
   4. FLOWLY-TASK-ITEM — item de tarefa unificado
   ============================================================= */

.task-item.is-done {
    opacity: var(--flowly-task-done-opacity, 0.5);
}

/* Painel de detalhes aberto numa tarefa concluída: o painel é FILHO do item (position:
   absolute) e herdava o esmaecimento — opacity é de grupo, filho não escapa — então
   abria translúcido com a lista vazando por trás. Com o painel aberto (.is-expanded)
   o item volta a 1 e o esmaecimento desce pros filhos da linha, menos o painel. */
.task-item.is-done.is-expanded {
    opacity: 1;
}
.task-item.is-done.is-expanded > :not(.task-expansion) {
    opacity: var(--flowly-task-done-opacity, 0.5);
}

.task-item.is-done .task-label {
    /* BUG FIX: line-through aqui pegava TUDO dentro do label, incluindo
       o badge de horário (.task-time), o botão de timer e o ícone de
       prioridade. Como text-decoration se propaga pra descendentes inline,
       o text-decoration:none do .task-time era ignorado. Movemos o risco
       pra CIMA (só no .task-content-span com .task-completed) e deixamos
       o .task-label neutro pros filhos não-riscados. */
    color: var(--flowly-task-done-text, inherit);
}

.task-item.is-done .task-label .task-content-span.task-completed {
    text-decoration: line-through;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1.5px;
}

/* Cores de categoria (Notion-style) */

/* =============================================================
   4.1. TASK EXPANSION — detalhes inline de uma tarefa
   ============================================================= */
/* ── Task expansion panel ─────────────────────────────────────────────────── */
.task-expansion {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 32px;
    z-index: 60;
    width: calc(100% - 36px);
    max-width: 420px;
    margin-top: 4px;
    padding: 0;
    opacity: 0;
    background: linear-gradient(var(--flowly-bg-overlay, rgba(11, 12, 17, 0.97)), var(--flowly-bg-overlay, rgba(11, 12, 17, 0.97))), var(--flowly-bg-body, #08090e);
    border: 1px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.09));
    border-radius: calc(14px * var(--flowly-radius-k));
    color: var(--flowly-text-secondary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform-origin: 24px top; /* nasce da própria linha */
    transition: opacity var(--flowly-duration-fast) var(--flowly-ease-out),
                transform var(--flowly-duration-base) var(--flowly-ease-out);
}

/* Quando não cabe abaixo (tarefa perto do fim da tela), abre pra cima. */
.task-expansion--above {
    transform-origin: 24px bottom;
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}
.task-expansion--minimal { background: linear-gradient(var(--flowly-bg-overlay, rgba(11, 12, 17, 0.97)), var(--flowly-bg-overlay, rgba(11, 12, 17, 0.97))), var(--flowly-bg-body, #08090e); }

/* Título */
.task-expansion-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.task-expansion-title-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--flowly-text-primary);
    font: inherit;
    font-size: var(--flowly-text-sm);
    font-weight: var(--flowly-weight-semibold);
    letter-spacing: var(--flowly-letter-snug);
    line-height: 1.4;
    outline: none;
}
.task-expansion-title-input:focus { background: transparent; }

/* Grid de propriedades */
.task-expansion-grid {
    display: flex;
    flex-direction: column;
    padding: 6px 0 4px;
    gap: 0;
}

.task-expansion-property-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    min-height: 34px;
    padding: 4px 14px;
    transition: background 100ms ease;
    position: relative;
}
.task-expansion-property-row + .task-expansion-property-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: rgba(255,255,255,0.04);
}
.task-expansion-property-row:hover { background: rgba(255, 255, 255, 0.025); }

/* Projeto sem valor */
.task-expansion-property-row--empty .task-expansion-property-label {
  opacity: 0.55;
}
.task-expansion-property-row--empty .task-expansion-select {
    color: var(--flowly-text-tertiary);
    opacity: 0.55;
}

/* Label col — ícone só */
.task-expansion-property-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    flex-shrink: 0;
    color: var(--flowly-text-tertiary);
    opacity: 0.8;
    user-select: none;
    gap: 6px;
    font-size: calc(10.5px * var(--flowly-text-k));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.task-expansion-property-label i,
.task-expansion-property-label svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
    color: currentColor !important;
    stroke: currentColor !important;
}
/* Hover: icon fica um pouco mais visível */
.task-expansion-property-row:hover .task-expansion-property-label {
  opacity: 1;
}

/* Value col */
.task-expansion-property-content {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;
}

/* Responsive: em telas pequenas, expande ao máximo disponível */
@media (max-width: 600px) {
    .task-expansion {
        max-width: calc(100% - 36px);
    }
}

.task-expansion-select {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: 20px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: calc(4px * var(--flowly-radius-k));
    background: transparent;
    color: var(--flowly-text-primary);
    font: inherit;
    font-size: calc(11px * var(--flowly-text-k));
    outline: none;
    transition: background 80ms ease;
    flex: 1 1 80px;
}
.task-expansion-select:hover { background: rgba(255,255,255,0.04); }
.task-expansion-select:focus {
    border-color: rgb(var(--flowly-accent-primary-rgb) / 0.2);
    background: rgba(255,255,255,0.03);
}

/* Timer — display monospace proeminente */
.task-expansion-timer-value {
    font-family: var(--flowly-font-mono) !important;
    font-size: calc(13px * var(--flowly-text-k)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: var(--flowly-text-primary);
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
}

/* Move row — linha única sem wrap */
.task-expansion-move-row {
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow: hidden;
    width: 100%;
}

.task-expansion-actions,
.task-expansion-move-row,
.task-expansion-days {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Day chips — compactos, espaçados uniformemente */
.task-expansion-inline-button,
.task-choice-chip,
.task-day-chip,
.task-prio-trigger,
.task-expansion-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: calc(4px * var(--flowly-radius-k));
    background: transparent;
    color: var(--flowly-text-tertiary);
    font: inherit;
    font-size: calc(10.5px * var(--flowly-text-k));
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 100ms ease, color 100ms ease;
}

/* depois do grupo: o chip de dia é mais alto (24px) e mais apertado */
.task-day-chip {
    flex: 1 0 0;
    font-size: calc(10.5px * var(--flowly-text-k)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    padding: 0 2px !important;
    text-align: center;
    height: 24px;
}

.task-expansion-inline-button:hover,
.task-choice-chip:hover,
.task-day-chip:hover,
.task-prio-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--flowly-text-primary);
}

.task-expansion-inline-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.task-timer-toggle {
    background: transparent;
    border-color: transparent;
    color: var(--flowly-accent-primary);
    opacity: 0.9;
}
.task-timer-toggle:hover {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.12) !important;
    opacity: 1;
}

/* Data sem ano — estilo chip */

.task-choice-chip.is-active,
.task-day-chip.is-active {
    border-color: transparent;
    background: rgb(var(--flowly-accent-primary-rgb) / 0.1);
    color: var(--flowly-accent-primary);
}

.task-prio-picker {
    position: relative;
    min-width: 0;
}

.task-prio-trigger {
    max-width: 100%;
    justify-content: flex-start;
}

.task-prio-label,
.task-prio-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-prio-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    transition: box-shadow 140ms ease;
}

.task-prio-chevron {
    margin-left: auto;
    opacity: 0.6;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.task-prio-trigger.is-open .task-prio-chevron {
    transform: rotate(180deg);
}
.task-prio-trigger.is-open.has-color {
    background: color-mix(in srgb, var(--prio-color, transparent) 14%, transparent);
    border-color: color-mix(in srgb, var(--prio-color, white) 32%, transparent);
}

.task-prio-menu {
    position: absolute;
    z-index: 9500;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    min-width: 200px;
    max-width: min(280px, 86vw);
    padding: 6px;
    border: 1px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.1));
    border-radius: calc(10px * var(--flowly-radius-k));
    background: linear-gradient(180deg, var(--flowly-bg-overlay, rgba(20, 22, 28, 0.98)) 0%, var(--flowly-bg-overlay, rgba(14, 15, 20, 0.98)) 100%), var(--flowly-bg-body, #08090e);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    backdrop-filter: blur(12px);
    transform-origin: top left;
    transform: scale(0.96);
    opacity: 0;
    transition: opacity 140ms ease, transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.task-prio-menu.is-open {
    transform: scale(1);
    opacity: 1;
}

.task-prio-menu[hidden] {
    display: none;
}

.task-prio-menu__sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 4px;
}

.task-prio-item {
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    min-width: 0;
    border-radius: calc(6px * var(--flowly-radius-k));
    position: relative;
    transition: background 120ms ease;
}
.task-prio-item__main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 32px;
    padding: 4px 10px;
    border: 0;
    border-radius: calc(6px * var(--flowly-radius-k));
    background: transparent;
    color: var(--flowly-text-secondary);
    font: inherit;
    font-size: calc(13px * var(--flowly-text-k));
    text-align: left;
    cursor: pointer;
}
.task-prio-item__main:hover {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--prio-color, white) 12%, transparent) 0%,
        transparent 75%);
    color: var(--flowly-text-primary);
}
.task-prio-item.is-active .task-prio-item__main {
    background: color-mix(in srgb, var(--prio-color, white) 14%, transparent);
    color: var(--flowly-text-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--prio-color);
}
.task-prio-item.is-legacy .task-prio-item__main {
    opacity: 0.72;
    font-style: italic;
}

.task-prio-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-prio-check {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--prio-color, var(--flowly-accent-primary));
}

.task-prio-item__actions {
    display: flex;
    gap: 1px;
    align-items: center;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.task-prio-item:hover .task-prio-item__actions {
    opacity: 1;
}
.task-prio-item__edit,
.task-prio-item__delete {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: calc(4px * var(--flowly-radius-k));
    color: var(--flowly-text-tertiary);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.task-prio-item__edit:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--flowly-text-primary);
}
.task-prio-item__delete:hover {
    background: rgba(255, 92, 77, 0.12);
    color: var(--flowly-accent-danger, #FF5C4D);
}

.task-prio-menu__footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
    padding-top: 4px;
}
.task-prio-menu__add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 4px 10px;
    background: transparent;
    border: 0;
    border-radius: calc(6px * var(--flowly-radius-k));
    color: var(--flowly-text-tertiary);
    font: inherit;
    font-size: calc(12px * var(--flowly-text-k));
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.task-prio-menu__add:hover {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.08);
    color: var(--flowly-accent-primary);
}

/* Inline edit/add form */
.task-prio-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
}
.task-prio-form__input {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: calc(6px * var(--flowly-radius-k));
    color: var(--flowly-text-primary);
    font: inherit;
    font-size: calc(13px * var(--flowly-text-k));
}
.task-prio-form__input:focus {
    outline: none;
    border-color: rgb(var(--flowly-accent-primary-rgb) / 0.5);
    background: rgba(255, 255, 255, 0.06);
}
.task-prio-form__palette {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.task-prio-form__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 120ms ease, border-color 120ms ease;
}
.task-prio-form__swatch:hover {
    transform: scale(1.12);
}
.task-prio-form__swatch.is-active {
    border-color: var(--flowly-text-primary);
    transform: scale(1.12);
}
.task-prio-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.task-prio-form__cancel,
.task-prio-form__save {
    padding: 6px 12px;
    border: 0;
    border-radius: calc(6px * var(--flowly-radius-k));
    font: inherit;
    font-size: calc(12px * var(--flowly-text-k));
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.task-prio-form__cancel {
    background: transparent;
    color: var(--flowly-text-tertiary);
}
.task-prio-form__cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--flowly-text-primary);
}
.task-prio-form__save {
    background: var(--flowly-accent-primary);
    color: white;
}
.task-prio-form__save:hover {
    background: color-mix(in srgb, var(--flowly-accent-primary) 90%, white);
}

/* Keep .task-section-item rules separate (untouched) */

.task-expansion-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 1px;
    flex-wrap: wrap;
}

/* v2 era só o ícone (width: 25px). No v3 o botão tem texto ("Excluir") e a largura vem do
   conteúdo: o width fixo ficava por baixo do padding do v3 e o rótulo vazava do botão. */
.task-expansion-delete {
    color: var(--flowly-text-tertiary);
}

.task-expansion-delete:hover {
    background: rgb(var(--flowly-accent-danger-rgb) / 0.12);
    border-color: rgb(var(--flowly-accent-danger-rgb) / 0.26);
    color: var(--flowly-accent-danger);
}

/* Repetir (tarefa comum): dia selecionado mas ainda não confirmado */
.task-day-chip.is-pending {
    border-color: rgb(var(--flowly-accent-primary-rgb) / 0.55) !important;
    border-style: dashed !important;
    color: var(--flowly-accent-primary) !important;
    background: rgb(var(--flowly-accent-primary-rgb) / 0.08) !important;
}
.task-expansion-repeat-confirm {
    margin-left: 4px;
    white-space: nowrap;
    padding-inline: 8px !important;
}
.task-expansion-repeat-confirm[hidden] { display: none !important; }
/* Mover: chip do dia atual é indicador, não ação */
.task-choice-chip[disabled] { cursor: default; opacity: 0.9; }
.task-choice-chip[disabled]:hover { filter: none; }

/* ═══ Painel de expansão v3 — layout com rótulos, cabeçalho com contexto/fechar, ações com texto ═══ */
.task-expansion-head-row { display: flex; align-items: center; gap: 8px; }
.task-expansion-head-row .task-expansion-title-input { flex: 1; font-size: calc(14px * var(--flowly-text-k)); }
.task-expansion-close {
    flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: calc(8px * var(--flowly-radius-k));
    background: transparent; color: var(--flowly-text-tertiary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.task-expansion-close:hover { background: var(--flowly-bg-glass-hover, rgba(255, 255, 255, 0.08)); color: var(--flowly-text-primary); }
.task-expansion-context {
    margin-top: 3px; font-size: calc(11px * var(--flowly-text-k)); color: var(--flowly-text-tertiary); letter-spacing: 0.01em;
}
.task-expansion-context.is-late { color: var(--flowly-accent-danger); }
.task-expansion-label-text { white-space: nowrap; }

.task-expansion-inline-button,
.task-choice-chip,
.task-prio-trigger,
.task-expansion-delete { height: 24px; padding: 0 8px; font-size: calc(11px * var(--flowly-text-k)); border-radius: calc(6px * var(--flowly-radius-k)); gap: 5px; }
.task-choice-chip { border-color: var(--flowly-border-muted); }
.task-timer-toggle.is-running { background: rgb(var(--flowly-accent-primary-rgb) / 0.12); }
.task-expansion-pick { position: relative; overflow: hidden; cursor: pointer; }
.task-expansion-pick-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
    color-scheme: light dark;
}
.task-expansion-pick-input::-webkit-calendar-picker-indicator { width: 100%; height: 100%; cursor: pointer; }
.task-expansion-pick:focus-within { border-color: var(--flowly-border-strong); color: var(--flowly-text-primary); }
.task-expansion-footer-btn { color: var(--flowly-text-secondary); }
.task-expansion-footer .task-expansion-delete { margin-left: auto; color: var(--flowly-text-tertiary); }
.task-expansion-footer .task-expansion-delete:hover { color: var(--flowly-accent-danger); background: rgb(var(--flowly-accent-danger-rgb) / 0.1); }

/* Semana (coluna estreita): só o ícone do rótulo, e o painel usa a largura da coluna */
.day-column .task-expansion { max-width: none; }
.day-column .task-expansion-property-row { grid-template-columns: 22px minmax(0, 1fr); }
.day-column .task-expansion-label-text { display: none; }
.task-expansion-done-time {
    margin-left: 2px; padding: 0 4px; height: 20px; border: 1px solid var(--flowly-border-muted);
    border-radius: calc(5px * var(--flowly-radius-k)); background: transparent;
    color: var(--flowly-text-secondary); font: inherit; color-scheme: light dark; cursor: pointer;
}
.task-expansion-done-time:hover,
.task-expansion-done-time:focus { border-color: var(--flowly-text-tertiary); color: var(--flowly-text-primary); outline: none; }