/* Última camada do Diário em celular.
   Arquivo próprio para que uma PWA que tenha CSS legado em cache recupere
   imediatamente a composição correta do registro rápido. */
@media (max-width: 620px) {
    /* O tema antigo alternava este painel por animação. Em telas pequenas isso
       produzia um bloco vazio durante parte do ciclo; mantemos a referência
       escolhida sempre visível. */
    .diary-top-categories {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .diary-quick-form.diary-quick-form--outside {
        gap: 4px !important;
        grid-template-rows: 23px 31px !important;
        padding: 7px 9px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-head {
        gap: 6px !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        grid-template-columns: 23px minmax(0, 1fr) auto !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-icon {
        height: 23px !important;
        width: 23px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-copy strong {
        font-size: 11px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-month-count {
        font-size: 7px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-fields {
        gap: 6px !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-fields .quick-pick {
        align-content: center !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        display: grid !important;
        gap: 1px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 8px 13px !important;
        height: 31px !important;
        min-height: 31px !important;
        padding: 3px 6px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-fields .quick-pick span {
        font-size: 7px !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        line-height: 8px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-fields .quick-pick select {
        font-size: 9px !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-height: 13px !important;
        padding-right: 12px !important;
    }

    .diary-quick-form.diary-quick-form--outside .diary-quick-submit.action-icon-control {
        grid-column: 3 !important;
        grid-row: 1 !important;
        height: 31px !important;
        min-width: 31px !important;
        width: 31px !important;
    }
}

/* Referência aprovada em celular na horizontal/tablet compacto. Nesta largura
   há espaço para os três indicadores e para a ação rápida ao lado das abas. */
@media (min-width: 621px) and (max-width: 900px) {
    .diary-page-head {
        margin: 6px 0 18px !important;
        text-align: left !important;
    }

    .diary-page-head h1 {
        font-size: 26px !important;
        justify-content: flex-start !important;
    }

    .diary-page-head p {
        display: block !important;
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    .diary-top-strip {
        align-items: stretch !important;
        display: grid !important;
        gap: 14px !important;
        grid-template-columns: 80px 255px 274px !important;
        justify-content: start !important;
        margin: 0 0 14px !important;
    }

    .diary-top-strip > .diary-top-summary,
    .diary-top-strip > .diary-top-categories,
    .diary-top-strip > .diary-top-moods {
        display: grid !important;
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 148px !important;
    }

    .diary-top-summary {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .diary-top-summary .diary-mini-stat {
        gap: 3px !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        padding: 8px 7px !important;
    }

    .diary-top-summary .diary-mini-stat + .diary-mini-stat {
        border-left: 0 !important;
        border-top: 1px solid #e4edf2 !important;
    }

    .diary-top-summary .diary-mini-stat strong {
        font-size: 22px !important;
    }

    .diary-top-summary .diary-mini-stat span {
        font-size: 8px !important;
        line-height: 1.1 !important;
    }

    .diary-top-categories,
    .diary-top-moods {
        overflow: hidden !important;
        padding: 14px 15px !important;
    }

    .diary-top-categories .category-meter,
    .diary-top-moods .category-meter {
        gap: 6px !important;
        grid-template-columns: 20px minmax(72px, .9fr) minmax(78px, 1fr) 14px !important;
        margin-top: 6px !important;
    }

    .diary-top-categories .category-meter-icon,
    .diary-top-moods .category-meter-icon {
        height: 20px !important;
        width: 20px !important;
    }

    .diary-top-categories .category-meter-name,
    .diary-top-categories .category-meter strong,
    .diary-top-moods .category-meter-name,
    .diary-top-moods .category-meter strong {
        font-size: 10px !important;
    }

    .diary-quick-outside-wrap {
        display: none !important;
    }

    .diary-main-panel {
        padding: 11px 12px !important;
    }

    .diary-tabs-row {
        align-items: center !important;
        column-gap: 10px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        row-gap: 8px !important;
    }

    .diary-tabs-row .diary-tabs {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .diary-tabs-row .diary-tabs a {
        font-size: 10px !important;
        min-height: 30px !important;
        padding: 6px 10px !important;
    }

    .diary-quick-form--inline {
        align-items: center !important;
        background: linear-gradient(105deg, #e7f9f5 0%, #f8fffd 100%) !important;
        border: 1px solid #bde7df !important;
        border-radius: 8px !important;
        display: grid !important;
        gap: 7px !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        grid-template-columns: auto 128px 128px 30px !important;
        justify-self: end !important;
        box-sizing: border-box !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 2px 6px 2px 9px !important;
        width: min(100%, 430px) !important;
    }

    .diary-quick-form--inline .diary-quick-head,
    .diary-quick-form--inline .diary-quick-fields {
        display: contents !important;
    }

    .diary-quick-form--inline .diary-quick-icon,
    .diary-quick-form--inline .diary-quick-subtitle,
    .diary-quick-form--inline .diary-quick-month-count {
        display: none !important;
    }

    .diary-quick-form--inline .diary-quick-copy {
        display: block !important;
        grid-column: 1 !important;
        white-space: nowrap !important;
    }

    .diary-quick-form--inline .diary-quick-copy strong {
        font-size: 11px !important;
    }

    .diary-quick-form--inline .diary-quick-fields .quick-pick {
        border: 0 !important;
        border-left: 1px solid #c5e7e0 !important;
        border-radius: 0 !important;
        grid-template-columns: 31px minmax(0, 1fr) !important;
        min-height: 30px !important;
        padding: 3px 6px !important;
    }

    .diary-quick-form--inline .diary-quick-fields .quick-pick.weather {
        grid-column: 2 !important;
    }

    .diary-quick-form--inline .diary-quick-fields .quick-pick.mood {
        grid-column: 3 !important;
    }

    .diary-quick-form--inline .diary-quick-submit.action-icon-control {
        grid-column: 4 !important;
        height: 30px !important;
        min-width: 30px !important;
        width: 30px !important;
    }

    .diary-tabs-row .diary-filter-inline {
        display: grid !important;
        gap: 8px !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(130px, .9fr) minmax(145px, 1fr) 80px !important;
    }

    .diary-tabs-row .diary-filter-inline,
    .diary-tabs-row .diary-filter-inline select,
    .diary-tabs-row .diary-filter-inline input {
        height: 28px !important;
        min-height: 28px !important;
    }

    .diary-filter-inline select[name="period"],
    .diary-filter-inline select[name="category"],
    .diary-filter-inline .diary-filter-mood,
    .diary-filter-inline .diary-filter-search,
    .diary-filter-inline .diary-filter-submit {
        grid-row: 1 !important;
    }

    .diary-filter-inline select[name="period"] { grid-column: 1 !important; }
    .diary-filter-inline select[name="category"] { grid-column: 2 !important; }
    .diary-filter-inline .diary-filter-mood { grid-column: 3 !important; }
    .diary-filter-inline .diary-filter-search { grid-column: 4 !important; }
    .diary-filter-inline .diary-filter-submit {
        grid-column: 5 !important;
        height: 28px !important;
        min-height: 28px !important;
        width: 80px !important;
    }
}

/* Em desktop os indicadores preservam a escala compacta: crescem até o
   limite da referência e, depois disso, a área restante continua livre. */
@media (min-width: 901px) {
    .diary-top-strip {
        align-items: stretch !important;
        display: grid !important;
        gap: 14px !important;
        grid-template-columns: clamp(72px, 7vw, 80px) clamp(220px, 22vw, 255px) clamp(235px, 24vw, 274px) !important;
        justify-content: start !important;
        margin-bottom: 16px !important;
    }

    .diary-top-strip > .diary-top-summary,
    .diary-top-strip > .diary-top-categories,
    .diary-top-strip > .diary-top-moods {
        display: grid !important;
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 148px !important;
    }

    .diary-top-summary {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .diary-top-summary .diary-mini-stat {
        gap: 3px !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        padding: 8px 7px !important;
    }

    .diary-top-summary .diary-mini-stat + .diary-mini-stat {
        border-left: 0 !important;
        border-top: 1px solid #e4edf2 !important;
    }

    .diary-top-summary .diary-mini-stat strong {
        font-size: 22px !important;
    }

    .diary-top-summary .diary-mini-stat span {
        font-size: 8px !important;
        line-height: 1.1 !important;
    }

    .diary-top-categories,
    .diary-top-moods {
        overflow: hidden !important;
        padding: 14px 15px !important;
    }

    .diary-top-categories .category-meter,
    .diary-top-moods .category-meter {
        gap: 6px !important;
        grid-template-columns: 20px minmax(72px, .9fr) minmax(78px, 1fr) 14px !important;
        margin-top: 6px !important;
    }

    .diary-top-categories .category-meter-icon,
    .diary-top-moods .category-meter-icon {
        height: 20px !important;
        width: 20px !important;
    }

    .diary-top-categories .category-meter-name,
    .diary-top-categories .category-meter strong,
    .diary-top-moods .category-meter-name,
    .diary-top-moods .category-meter strong {
        font-size: 10px !important;
    }

    .diary-quick-form--inline {
        grid-template-columns: auto 128px 128px 30px !important;
        width: auto !important;
    }
}

/* O resumo visual foi concentrado na aba "Indicadores". A tela principal
   fica focada no novo registro, filtros e cronologia, sem cartões vazios. */
.diary-top-strip {
    display: none !important;
    margin: 0 !important;
}

/* Em uma janela intermediária, a barra não pode tentar comprimir abas,
   formulário e filtros na mesma faixa. O formulário sobe para sua própria
   linha, preservando cada campo inteiro e sem rolagem horizontal. */
@media (min-width: 621px) {
    .diary-main-panel {
        container-name: diary-main;
        container-type: inline-size;
    }

    @container diary-main (max-width: 720px) {
        .diary-tabs-row {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        .diary-tabs-row .diary-quick-form--inline {
            grid-column: 1 / -1 !important;
            grid-row: 1 !important;
            grid-template-columns: minmax(0, 1fr) minmax(108px, 128px) minmax(108px, 128px) 30px !important;
            justify-self: stretch !important;
            width: 100% !important;
        }

        .diary-tabs-row .diary-tabs {
            grid-column: 1 !important;
            grid-row: 2 !important;
            justify-self: start !important;
        }

        .diary-tabs-row .diary-filter-inline {
            grid-row: 3 !important;
        }
    }
}