/* ─── EstoqueSorveteria — estilos globais ─────────────────────────────── */

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

/* ─── Public layout (Landing, Termos, Privacidade, Contato) ────────────── */
.public-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-container {
    width: 100%;
}

.landing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.landing-logo {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mud-palette-primary, #594ae2);
}

.landing-nav {
    display: flex;
    gap: 0.5rem;
}

.landing-hero {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.landing-features {
    background: white;
}

.landing-pricing {
    background: #fafafa;
}

.landing-footer {
    background: #1a1a1a;
    color: white;
    margin-top: auto;
}

.landing-footer .mud-link {
    color: white;
}

/* ─── Validation summary ──────────────────────────────────────────────── */
.validation-message {
    color: var(--mud-palette-error, #f44336);
    font-size: 0.875rem;
}

/* ─── Mobile (Fase 5.6) ─────────────────────────────────────────────────
 *
 * Regras globais que melhoram o app em telas pequenas sem precisar mexer
 * em cada Razor individualmente. Breakpoint Md do MudBlazor = 960px;
 * usamos 600px (Sm) para diferenciar mobile real de tablet.
 *
 * MOBILE = < 600px (Sm)
 */

/* Header de página (título + ação) que quebra em mobile.
 * Usado nas listagens de Produtos, Lojas, Usuários, Locais, etc.
 * Em desktop fica lado-a-lado com o título à esquerda e botão à direita.
 * Em mobile empilha: título primeiro, botão depois com width 100%. */
.page-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.page-header .page-header-info {
    flex: 1 1 auto;
    min-width: 0;  /* permite ellipsis em filhos */
}
.page-header .page-header-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

@media (max-width: 600px) {
    .page-header {
        flex-direction: column;
        gap: 12px;
    }
    .page-header .page-header-actions {
        width: 100%;
    }
    .page-header .page-header-actions .mud-button {
        width: 100%;
    }
}

@media (max-width: 600px) {

    /* ── Dialogs viram fullscreen no mobile ───────────────────────────────
     * MudDialog renderiza dentro de .mud-dialog-container > .mud-dialog.
     * Ajustando o .mud-dialog para 100vw/100vh em mobile substitui o
     * "card flutuante" por uma tela inteira, evitando scroll dentro de scroll
     * e perdas de área útil em forms longos (LojaFormulario, ProdutoFormulario,
     * FeedbackDialog etc.). 29 call sites se beneficiam sem mudar 1 linha. */
    .mud-dialog-container .mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* DialogContent ocupa o resto do espaço vertical e rola se preciso */
    .mud-dialog-container .mud-dialog .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    /* ── AppBar mais enxuta no mobile ─────────────────────────────────────
     * Esconde label "EstoqueSorveteria" no AppBar (já está em d-none d-sm-flex
     * em MainLayout), reduz padding lateral. */
    .mud-appbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ── Tabelas com scroll horizontal preservado ─────────────────────────
     * Listagens (Lojas, Produtos, Usuários, Auditoria) usam MudTable.
     * Em vez de quebrar, deixamos rolar horizontalmente preservando colunas.
     * Indica visualmente o scroll com gradiente direito sutil. */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── FAB Feedback: ajusta posição p/ não chocar com barra navegação iOS */
    .mud-fab {
        bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
        touch-action: manipulation;  /* remove delay de 300ms em iOS */
    }

    /* ── Containers (MudContainer) com padding lateral menor ─────────────
     * MainLayout já passa "px-3 py-3 px-md-6", mas algumas páginas usam
     * MudContainer próprio (Perfil, MeuPerfil etc.). */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ── Cookie banner: empilha botões em vez de lado-a-lado ─────────────*/
    .cookie-banner-actions {
        flex-direction: column;
        gap: 8px;
    }
    .cookie-banner-actions .mud-button {
        width: 100%;
    }
}

/* ─── Tablet/Desktop pequeno (600-960px) ────────────────────────────────
 * Refina mas não fullscreen. */
@media (min-width: 600px) and (max-width: 960px) {
    .mud-dialog-container .mud-dialog {
        max-width: 90vw !important;
    }
}

/* ─── Print (Fase 5.6 bônus) ───────────────────────────────────────────
 * Garantir que ao imprimir uma tela direta (sem PDF), tudo passa em A4
 * sem AppBar/Drawer/FAB. */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-fab,
    .mud-snackbar-container {
        display: none !important;
    }
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}