/*
 * Ajustes responsivos do painel admin (Filament).
 * Carregado pelo AdminPanelProvider (render hook HEAD_END).
 * Breakpoints seguem os do Filament/Tailwind: sm 640 · md 768 · lg 1024.
 */

/* ---------- Banco de imagens (escolher foto já usada) ---------- */
.cc-banco { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; max-height: 24rem; overflow-y: auto; }
.cc-banco__item { display: flex; flex-direction: column; gap: .25rem; padding: .25rem; text-align: start; border: 2px solid transparent; border-radius: .5rem; cursor: pointer; background: transparent; }
.cc-banco__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .375rem; background: #fff; }
.cc-banco__item span { font-size: .75rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-banco__item.is-on { border-color: var(--primary-600); background: var(--primary-50); }
.dark .cc-banco__item.is-on { background: rgba(255, 255, 255, .08); }
.cc-banco__vazio { grid-column: 1 / -1; font-size: .875rem; color: var(--gray-500); }

/* ---------- Células de resumo (colunas "só celular" das tabelas) ---------- */
.cc-resumo { display: flex; flex-direction: column; gap: .125rem; min-width: 0; line-height: 1.3; white-space: normal; text-align: start; }
.cc-resumo__titulo { font-weight: 600; }
.cc-resumo__sub { font-size: .8125rem; color: var(--gray-500); overflow-wrap: anywhere; }
.dark .cc-resumo__sub { color: var(--gray-400); }
.cc-resumo__valor { font-size: .875rem; font-weight: 600; }

/* ---------- Widgets simples (listas) ---------- */
.cc-lista-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem 1rem; padding: .35rem 0; }
.cc-lista-item__valor { white-space: nowrap; }

/* ---------- Celular e tablet pequeno (< 1024px) ---------- */
@media (max-width: 1023.98px) {
    /* Gaveta do menu: não ocupa a tela toda e rola se o menu for grande. */
    .fi-sidebar { max-width: 85vw; }
    .fi-sidebar-nav { overscroll-behavior: contain; }
}

/* ---------- Celular (< 768px) ---------- */
@media (max-width: 767.98px) {
    .fi-main { padding-inline: .75rem; }
    .fi-page > section,
    .fi-page-content { row-gap: 1rem; }

    /* Títulos e textos um pouco menores. */
    .fi-header-heading { font-size: 1.375rem; line-height: 1.75rem; }
    .fi-section-header-heading { font-size: .9375rem; }
    .fi-breadcrumbs { display: none; }

    /* Botões do cabeçalho da página ocupam a linha toda e quebram bem. */
    .fi-header .fi-ac { width: 100%; }
    .fi-header .fi-ac > .fi-btn { flex: 1 1 auto; justify-content: center; }

    /* Cartões/seções mais compactos. */
    .fi-section-content,
    .fi-section-header { padding: .875rem; }

    /* Tabelas: menos respiro, nada de overflow lateral. */
    .fi-ta-header-toolbar { padding: .5rem .75rem; gap: .5rem; }
    .fi-ta-cell:first-of-type,
    .fi-ta-header-cell:first-of-type { padding-inline-start: .5rem; }
    .fi-ta-cell .fi-ta-text { padding-inline: .375rem; padding-block: .5rem; }
    .fi-ta-cell > .fi-ta-col,
    .fi-ta-cell > a > .fi-ta-col,
    .fi-ta-cell > div > .fi-ta-col { padding-inline: .25rem; padding-block: .25rem; }
    .fi-ta-header-cell { padding-inline: .5rem; }
    .fi-ta-text-item { font-size: .875rem; line-height: 1.25rem; }
    .fi-ta-actions { gap: .25rem; }
    .fi-ta-table { width: 100%; }

    /* Linhas de totais ficam vazias quando as colunas somadas estão escondidas. */
    .fi-ta-summary-header-row,
    .fi-ta-summary-row { display: none; }

    /* Rodapé da tabela (paginação) empilhado e centralizado. */
    .fi-pagination { flex-wrap: wrap; justify-content: center; row-gap: .5rem; }

    /* Cards de estatísticas: valores menores para caber em 2 colunas. */
    .fi-wi-stats-overview-stat { padding: .875rem; }
    .fi-wi-stats-overview-stat-value { font-size: 1.375rem; line-height: 1.75rem; }
    .fi-wi-stats-overview-stat-label { font-size: .75rem; }
    .fi-wi-stats-overview-stat-description { font-size: .75rem; }

    /* Janelas (modais) quase em tela cheia e com rodapé empilhado. */
    .fi-modal-window { max-width: calc(100vw - 1rem); }
    .fi-modal-footer-actions { flex-direction: column-reverse; align-items: stretch; }
    .fi-modal-footer-actions > .fi-btn { width: 100%; justify-content: center; }

    /* Formulários: botões de submit largos. */
    .fi-form-actions .fi-ac { width: 100%; }
    .fi-form-actions .fi-btn { flex: 1 1 auto; justify-content: center; }

    /* Notificações cabem na tela. */
    .fi-no { padding-inline: .5rem; }
}

/* ---------- Telas de toque: alvos de pelo menos 44px ---------- */
@media (pointer: coarse) {
    .fi-icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
    .fi-btn { min-height: 2.5rem; }
    .fi-dropdown-list-item { min-height: 2.75rem; }
    .fi-sidebar-item-btn { min-height: 2.75rem; }
    .fi-input-wrp input, .fi-input-wrp select, .fi-input-wrp textarea { font-size: 1rem; } /* evita zoom automático no iOS */
}

/* ---------- Telas largas ---------- */
@media (min-width: 1536px) {
    .fi-main { padding-inline: 2.5rem; }
}