/**
 * Overlays — modais (com bottom-sheet em mobile), toasts e loading.
 */

/* ==================== Modais (base) ==================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 55, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-1-back);
    padding: 1rem;
}

.modal-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0 1.5rem 1.5rem;       /* top:0 → header sangra; bottom mantém para footer sangrar via margin negativa */
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: var(--z-modal-1);
}

/* Variantes de largura — usadas em modais que precisam acomodar tabelas
   ou conteudo mais largo que o default de 720px. */
.modal-card.modal-card-lg { max-width: 960px; }
.modal-card.modal-card-xl { max-width: 1280px; }

/* Overlay confinado a faixa entre topbar e footer — o backdrop nao cobre o
   header principal nem o rodape. O card tambem tem a altura maxima reduzida
   para caber nessa faixa (so o body rola). */
.modal-overlay.modal-overlay-inset {
    inset: var(--topbar-height) 0 var(--footer-height) 0;
}
.modal-overlay-inset .modal-card,
.modal-overlay-inset .modal-card.modal-card-flex {
    max-height: calc(100dvh - var(--topbar-height) - var(--footer-height) - 2rem);
}

/* Modais de nivel 2 (empilhados sobre outro modal). Backdrop + card
   sobem para a faixa de z-index 2 definida em variables.css, ficando
   acima de qualquer .modal-overlay padrao (nivel 1). */
.modal-overlay.modal-overlay-2 {
    z-index: var(--z-modal-2-back);
}
.modal-overlay.modal-overlay-2 .modal-card {
    z-index: var(--z-modal-2);
}

/* Nivel 3 — usado quando um modal de edicao precisa abrir sobre um modal
   nv2 ja aberto (ex.: editar data dentro do historico do projeto). */
.modal-overlay.modal-overlay-3 {
    z-index: var(--z-modal-3-back);
}
.modal-overlay.modal-overlay-3 .modal-card {
    z-index: var(--z-modal-3);
}

/* Nivel 4 — drill-downs profundos (ex.: Consolidado, grafico diario ->
   objetos do dia -> classes de custo do objeto). */
.modal-overlay.modal-overlay-4 {
    z-index: var(--z-modal-4-back);
}
.modal-overlay.modal-overlay-4 .modal-card {
    z-index: var(--z-modal-4);
}

/* Nivel 5 — um passo alem do nv4 (ex.: no drill de classes de custo,
   clicar na contagem de fornecedores abre a lista de fornecedores). */
.modal-overlay.modal-overlay-5 {
    z-index: var(--z-modal-5-back);
}
.modal-overlay.modal-overlay-5 .modal-card {
    z-index: var(--z-modal-5);
}

/* Modal coberto por outro — a pilha (app.js) esconde com .is-sob-modal
   todos os overlays abertos exceto o do topo, pra o de baixo nao vazar
   atras do backdrop. `visibility` (nao display) de proposito: o
   abrir/fechar de cada pagina continua sendo display (.hidden/style),
   sem conflito. Nao e' animacao — some/aparece instantaneo. */
.modal-overlay.is-sob-modal {
    visibility: hidden;
}

/* Header dos modais — destacado com o azul Pantone 2945 C (logo CCCC).
   Cor escolhida pra diferenciar do navy --brand-primary usado no topbar
   e sidebar, deixando os modais com identidade visual propria. */
.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -1.5rem 1.25rem;
    padding: 0.9rem 1.5rem;
    background: var(--concremat-azul-cccc);
    color: var(--text-on-dark);
    border-bottom: 3px solid var(--brand-accent);
}

.modal-header-row h2 {
    margin: 0;
    font-size: var(--sigefc-fs-xl);
    color: var(--text-on-dark);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.modal-close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Footer (botões) — fundo cinza-azulado para se destacar do corpo */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.7rem;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 0.85rem 1.25rem;
    background: #E5E9EE;
    border-top: 1px solid var(--border-strong);
}

/* ========================================================================
   Modal flex column — header e footer FIXOS, somente o body rola.
   Padrao para TODOS os modais do sistema. Estrutura esperada:

       <div class="modal-card modal-card-flex">
         <div class="modal-header-row">...</div>
         <form>                                  <!-- ou um <div> -->
           <div class="modal-body">...</div>     <!-- unica regiao com scroll -->
           <div class="modal-actions">...</div>
         </form>
       </div>

   Para modais com tabs entre o header e o body, use a variante
   `.modal-card-tabbed` da pagina de administracao.
   ======================================================================== */

.modal-card.modal-card-flex {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    max-height: calc(100vh - 2rem);
}
.modal-card-flex > .modal-header-row {
    margin: 0;
    flex-shrink: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* O wrapper imediato (form ou div) vira o flex-container que distribui
   body (1fr) e footer (auto). */
.modal-card-flex > form,
.modal-card-flex > .modal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}
.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.25rem 1.5rem;
}
.modal-card-flex > form > .modal-actions,
.modal-card-flex > .modal-content > .modal-actions,
.modal-card-flex > .modal-actions {
    margin: 0;
    flex-shrink: 0;
    padding: 0.85rem 1.25rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (max-width: 640px) {
    .modal-card.modal-card-flex { max-height: 90dvh; }
    .modal-card-flex > .modal-header-row,
    .modal-card-flex > form > .modal-actions,
    .modal-card-flex > .modal-content > .modal-actions,
    .modal-card-flex > .modal-actions {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
    .modal-body { padding: 1rem; }
}

/* ==================== Modais como bottom-sheet em mobile ==================== */

@media (max-width: 640px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .modal-card {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-width: 100%;
        width: 100%;
        max-height: 90dvh;
        animation: modal-slide-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* Header e footer do modal sangram corretamente em mobile (mantem horizontal) */
    .modal-header-row,
    .modal-actions {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}

@keyframes modal-slide-up {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1;   }
}

/* Modais no desktop abrem/fecham no natural, sem animacao — flip 3D e
   fade+escala ja foram tentados e removidos (davam trancos nas maquinas
   do cliente). Nao reintroduzir. (O bottom-sheet do mobile, acima, fica.) */

/* Em telas muito estreitas, botoes do modal viram empilhados (primario em cima) */
@media (max-width: 480px) {
    .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .modal-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Toasts ==================== */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: var(--z-loading);
}
.toast {
    min-width: 280px;
    background: var(--bg-surface);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-md);
    padding: 0.8rem 1rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    animation: toast-in 0.18s ease-out;
}
.toast.toast-success { border-left-color: var(--brand-success); }
.toast.toast-error   { border-left-color: var(--brand-danger); }
.toast.toast-warn    { border-left-color: var(--brand-warning); }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ==================== Loading overlay ==================== */

.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(23, 53, 87, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-loading);
}
.loading-spinner {
    width: 48px; height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Modal de alerta (window.alerta) — generico
   ============================================================ */
.app-alerta-card {
    max-width: 440px;
}

.app-alerta-card .modal-header-row h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.app-alerta-card .modal-header-row i {
    color: var(--brand-accent);
}

.app-alerta-mensagem {
    font-size: var(--sigefc-fs-md);
    line-height: 1.45;
    color: var(--text-primary);
}

/* ============================================================
   Modal de novidades (release notes da versao)
   ============================================================ */
.app-novidades-card {
    max-width: 600px;
}
.app-novidades-card .modal-header-row h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.app-novidades-card .modal-header-row i {
    color: var(--brand-accent);
}
.app-novidades-titulo {
    font-size: var(--sigefc-fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.app-novidades-data {
    font-size: var(--sigefc-fs-sm);
    color: var(--text-muted);
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.app-novidades-lista {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text-primary);
}
.app-novidades-lista li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    font-size: var(--sigefc-fs-md);
}
.app-novidades-lista li:last-child {
    margin-bottom: 0;
}