/**
 * Layout mobile global — Capacitor iOS/Android, PWA e Web.
 * Complementa: no-zoom.css, safe-area.css, app-shell.css
 * Ver: docs/mobile-layout-safe-area.md
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100dvh;
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-break: break-word;
}

th,
td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Flex/grid: filhos encolhem em telas estreitas */
.flex-row,
.receitas-form-row,
.receitas-toolbar,
.locais-mode-btns,
.lc-member-form,
.top-actions,
.hist-detail-actions,
.panel-filters,
.receitas-filters {
    min-width: 0;
    max-width: 100%;
}

.flex-row > *,
.receitas-form-row > *,
.locais-mode-btns > *,
.lc-member-form > * {
    min-width: 0;
}

/* Tipografia fluida */
h1 { font-size: clamp(1.35rem, 4.5vw, 1.75rem); }
h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); }
h3 { font-size: clamp(1.05rem, 3.6vw, 1.25rem); }

/* Cards e listas */
.category-card,
.product-card,
.receitas-card,
.default-list-card,
.lc-member-card,
.panel-sheet,
.modal-sheet,
.confirm-dialog,
.card {
    max-width: 100%;
    min-width: 0;
}

/* Mapas Leaflet */
.locais-map,
#locais-map,
.leaflet-container {
    width: 100% !important;
    max-width: 100%;
    touch-action: none;
    overscroll-behavior: none;
}

/* Toasts — não estourar em 320px */
.toast-container {
    width: min(380px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px));
    min-width: 0 !important;
    max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px);
}

.toast {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Botões em linha (locais, receitas) */
.locais-mode-btns .locais-mode-btn,
.locais-route-btn,
.receitas-card-actions button {
    min-width: 0;
    flex: 1 1 auto;
}

.lc-member-form input,
.lc-member-form select {
    min-width: 0;
    flex: 1 1 120px;
}

/* Header alinhado ao side-menu-header (safe-area.css + layout-spacing.css) */
html.capacitor-native.capacitor-status-no-overlay .app-shell .header.app-header,
html.capacitor-native.capacitor-status-no-overlay .app-shell .app-header {
    padding-top: var(--app-edge-inset, 2px);
}

/* Bottom bar / total bar */
.app-shell .total-bar.bottom-navigation {
    width: min(560px, calc(100% - var(--app-safe-left) - var(--app-safe-right) - 16px));
    max-width: calc(100% - var(--app-safe-left) - var(--app-safe-right) - 16px);
}

/* Breakpoints de revisão */
@media (max-width: 430px) {
    .top-actions {
        gap: 4px;
    }

    .app-shell .top-action-btn span {
        font-size: 9px;
    }
}

@media (max-width: 390px) {
    .header-subtitle {
        font-size: 12px;
        max-width: 140px;
    }
}

@media (max-width: 375px) {
    .panel-sheet,
    .modal-sheet {
        border-radius: 12px 12px 0 0;
    }
}

@media (max-width: 360px) {
    .receitas-fab {
        padding: 8px 10px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 320px) {
    .app-shell .total-bar {
        padding: 10px 12px;
    }

    .toast {
        font-size: 13px;
        padding: 10px 12px;
    }
}