/* =============================================================
   FLOWLY — WEEK VIEW
   Grid de 7 dias, full-width. Zero Tailwind.
   Depende de: _tokens.css, _components.css
   ============================================================= */

/* ---- WEEK GRID (container principal) ---- */
.week-grid {
    display: grid;
    grid-template-columns: repeat(var(--week-column-count, 7), minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-height: calc(100vh - 132px);
    min-height: calc(100dvh - 132px);
    padding: 0 0 28px;
    overflow-x: auto;
    align-items: stretch;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
    /* 1ª linha = faixa de resumo; 2ª = colunas dos dias, esticando até o fim da tela. */
    grid-template-rows: auto 1fr;
}

/* ---- RESUMO DA SEMANA (componente .an-stats das Análises) ---- */
.week-stats-row {
    grid-column: 1 / -1;
    padding: 0 28px;
    border-bottom: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.12));
}
.week-stats-row .an-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 0;
}
.week-stats-row .an-stat { padding-block: 12px; }

/* ---- DAY COLUMN ---- */
.day-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 420px;
    border-right: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.12));
    background: transparent;
    /* visible (não hidden) pra não clipar o painel de expansão flutuante
       (position:absolute) das tarefas no fim da coluna. O clip horizontal da
       coluna é do .week-grid (overflow-x:auto); o ellipsis do texto vem dos
       filhos (.task-content-span/.task-label têm overflow+ellipsis próprios). */
    overflow: visible;
    position: relative;
    scroll-snap-align: start;
    transition: background 140ms ease;
}

.day-column:last-child {
    border-right: 0;
}

/* Hover sutil na coluna */
.day-column:hover {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.008));
}

body.no-week-hover .day-column,
body.no-week-hover .day-column:hover {
    transition: none;
    background: transparent;
}

/* Hoje: destaque com borda no topo */
.day-column.today-active {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.018);
}

.day-column.today-active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--flowly-accent-primary), color-mix(in srgb, var(--flowly-accent-primary) 40%, transparent));
    box-shadow: 0 0 12px rgb(var(--flowly-accent-primary-rgb) / 0.4);
    z-index: 2;
}

/* Dia selecionado (não hoje) — borda-accent sutil dentro */
.day-column.is-selected:not(.today-active) {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.035);
    box-shadow: inset 0 0 0 1px rgb(var(--flowly-accent-primary-rgb) / 0.18);
}

/* Dia vazio (passado ou futuro sem tarefas) — mais espaço respira */
.day-column.is-empty:not(.today-active) {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.012));
}

/* Quando passa o mouse sobre uma coluna vizinha, o selected "afunda" pra hierarquia ficar clara */
.day-column.is-selected:not(.today-active):hover {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.05);
}

/* Dias passados: ligeiramente mais apagados (light vs dark) */
.day-column.past-day {
    opacity: var(--flowly-past-day-opacity, 0.72);
}

/* ---- DAY HEADER (sticky, sem Tailwind) ---- */
.day-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 11px;
    border-bottom: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.12));
    background: transparent;
    z-index: 4;
    flex-shrink: 0;
    position: relative;
}

.day-column.today-active .day-col-header {
    background: transparent;
}

.day-col-name {
    font-size: calc(11px * var(--flowly-text-k));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.56));
    line-height: 1;
}

.day-col-num {
    font-size: calc(21px * var(--flowly-text-k));
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--flowly-text-primary, rgba(255, 255, 255, 0.78));
    line-height: 1;
    font-family: var(--flowly-font-display);
}

.day-col-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Régua do dia: "feitas/total" + barra fina colada no fio de baixo do cabeçalho */
.day-col-count {
    font-size: calc(12px * var(--flowly-text-k));
    font-weight: 600;
    line-height: 1;
    color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.56));
    font-variant-numeric: tabular-nums;
}
.day-col-count small {
    font-size: calc(11px * var(--flowly-text-k));
    font-weight: 500;
    color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.36));
}
.day-col-count.is-done { color: var(--flowly-accent-success, #22c55e); }

.day-col-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
    pointer-events: none;
}
.day-col-bar > span {
    display: block;
    height: 100%;
    background: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.28));
    transition: width 240ms var(--flowly-ease-out);
}
.day-column.today-active .day-col-bar > span { background: var(--flowly-accent-primary); }

.day-column.today-active .day-col-name {
    color: var(--flowly-accent-primary);
}

.day-column.today-active .day-col-num {
    color: var(--flowly-accent-primary);
}

.day-column.past-day .day-col-name,
.day-column.past-day .day-col-num {
    color: var(--flowly-past-day-text, var(--flowly-text-tertiary, rgba(255, 255, 255, 0.28)));
}

/* ---- TASK ITEMS na semana ---- */
.day-column .task-item {
    padding: calc(6px + var(--flowly-density-pad)) 12px;
    margin: 2px 8px;
    /* O .task-item global tem width:100%; somado às margens de 8px estourava a
       coluna em 8px (a grade ganhava scroll horizontal e a última coluna era
       cortada no limite da viewport). */
    width: auto;
    border-radius: calc(7px * var(--flowly-radius-k));
    min-width: 0;
    /* visible pra o painel flutuante não ser cortado; o ellipsis do texto vem
       dos filhos (.task-content-span/.task-label). */
    overflow: visible;
    gap: 10px;
    align-items: flex-start !important;
    position: relative;
}

/* Drag-handle fora do fluxo: revelado no hover, sem reservar os ~26px
   (14px + margin 2px + gap 10px) que empurravam o checkbox pra direita. */
.day-column .task-item .drag-handle {
    position: absolute;
    left: 0;
    top: 7px;
    margin-right: 0;
}

.day-column .task-item:hover {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.04));
}

/* Texto legível na coluna estreita: o nome quebra em até 2 linhas (antes cortava em
   "Oração e S") e a meta (versículo, horário, projeto, tempo) desce pra linha de baixo. */
.day-column .task-item .task-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 1px;
    font-size: calc(12.5px * var(--flowly-text-k));
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    padding-top: 1px;
}

.day-column .task-item .task-content-span {
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
}

.day-column .task-item .task-daily-word,
.day-column .task-item .task-time,
.day-column .task-item .task-project-meta,
.day-column .task-item .task-timer-meta {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: 0 !important;
    font-size: calc(11px * var(--flowly-text-k));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.6 !important;
}

/* Projeto: nome em até 2 linhas, "em 9d 0/4" embaixo */
.day-column .task-item--project-header .task-project-header-name-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}
.day-column .task-item--project-header .task-project-header-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.day-column .task-item--project-header .task-project-header-meta {
    font-size: calc(11px * var(--flowly-text-k));
    margin-left: 0;
}

.day-column .task-item .checkbox-custom {
    margin-top: 3px;
}

/* Cronômetro fora do fluxo (aparece no hover, no canto): antes ocupava largura fixa
   em toda linha e roubava espaço do texto. Rodando, fica sempre visível. */
.day-column .task-item .task-item-timer-btn {
    position: absolute;
    top: 5px;
    right: 6px;
    margin-left: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    opacity: 0;
    border-radius: calc(6px * var(--flowly-radius-k));
    background: var(--flowly-bg-elevated, #16171d);
    transition: opacity 120ms ease;
}
.day-column .task-item:hover .task-item-timer-btn,
.day-column .task-item:focus-within .task-item-timer-btn,
.day-column .task-item .task-item-timer-btn.is-running {
    opacity: 1;
}

.day-column .task-item .task-collapse-btn {
    margin-left: 6px !important;
    opacity: 0.58;
}

/* ---- EXPANSÃO INLINE na semana ---- */
.day-column .task-expansion {
    width: calc(100% - 16px);
    margin: 2px 8px 6px;
    padding-left: 9px;
}

.day-column .task-expansion-grid {
    grid-template-columns: 1fr;
    gap: 4px;
}

.day-column .task-expansion-property-row {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 7px;
}

.day-column .task-expansion-property-content {
    overflow: hidden;
}

.day-column .task-expansion-title-input {
    height: 26px;
    font-size: calc(12px * var(--flowly-text-k));
}

.day-column .task-expansion-select,
.day-column .task-prio-trigger {
    flex: 1 1 auto;
    min-width: 0;
}

.day-column .task-expansion-move-row,
.day-column .task-expansion-actions,
.day-column .task-expansion-days {
    row-gap: 5px;
}

.day-column .task-choice-chip {
    padding-inline: 7px;
}

/* ---- DROP ZONE ---- */
.task-drop-zone.week-end-dropzone {
    flex: 1 1 auto;
    min-height: 52px;
    margin: 1px 8px 8px;
    border: 1px dashed transparent;
    border-radius: calc(6px * var(--flowly-radius-k));
    background: transparent;
    transition: background 140ms ease, border-color 140ms ease, min-height 140ms ease;
}

.day-column:hover .task-drop-zone.week-end-dropzone {
    border-color: var(--flowly-border, rgba(255, 255, 255, 0.04));
    background: transparent;
}

.task-drop-zone.week-end-dropzone.show,
.task-drop-zone.week-end-dropzone:hover {
    min-height: 68px;
    border-color: rgb(var(--flowly-accent-primary-rgb) / 0.2);
    background: rgb(var(--flowly-accent-primary-rgb) / 0.025);
}

/* ---- QUICK ADD STUB ---- */
.quick-task-stub {
    margin: 4px 8px;
    flex-shrink: 0;
    border-color: transparent;
    background: transparent;
    color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.42));
}

.day-column:hover .quick-task-stub {
    border-color: var(--flowly-border, rgba(255, 255, 255, 0.09));
    color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.62));
}

/* ---- CABEÇALHO (padrão da Hoje: navegação no centro, seletor à direita) ---- */
#weekNav .today-datenav__label:disabled { cursor: default; }
#weekNav .today-datenav__label:disabled:hover { background: transparent; }

/* ---- RESPONSIVE ---- */
/* --- Mobile: empilha os dias verticalmente (lista por dia) ---
   A largura das colunas é setada inline pelo JS (week.js), o que vence o CSS.
   Trocando para display:flex, o grid-template-columns inline é ignorado e os
   dias empilham um sob o outro — cada dia legível, sem scroll horizontal. */
@media (max-width: 768px) {
    .week-grid,
    .week-grid.smart-week-5 {
        display: flex;
        flex-direction: column;
        min-height: auto;
        overflow-x: visible;
        padding: 0 0 calc(var(--flowly-mobile-nav-height, 64px) + 24px);
        gap: 0;
    }

    .day-column {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.08));
    }
    .day-column:last-child { border-bottom: 0; }

    /* Cabeçalho do dia vira divisória de seção e gruda no topo ao rolar */
    .day-col-header {
        position: sticky;
        top: 0;
        padding: 10px 16px 9px;
        background: rgba(11, 12, 17, 0.94);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .day-column.today-active .day-col-header {
        background: rgba(11, 12, 17, 0.94);
    }

    .day-col-num  { font-size: 20px; }
    .day-col-name { font-size: 10px; }
    .day-column .task-item .task-label { font-size: 14px; }
}