/**
 * Espaçamento uniforme: 10px nas laterais, 2px no topo/base e entre seções.
 */
:root {
    --app-edge-inset: 2px;
    --app-edge-inset-x: 10px;
    --app-section-gap: 2px;
}

/* ===== Colunas com gap entre filhos ===== */
.panel-body,
.auth-viewport--scroll,
.side-menu-body,
.simple-page-shell {
    display: flex;
    flex-direction: column;
    gap: var(--app-section-gap);
}

.auth-viewport--scroll .container {
    padding: var(--app-edge-inset);
    box-sizing: border-box;
}

.simple-page-shell > .card {
    padding: var(--app-edge-inset);
    box-sizing: border-box;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: var(--app-section-gap);
}

/* ===== App principal (#main-content) ===== */
.main-content > .search-bar {
    padding: var(--app-edge-inset) var(--app-edge-inset-x) 0;
    position: relative;
}

.main-content > .top-actions {
    padding: 0 var(--app-edge-inset-x);
}

.main-content > .lc-main-banner {
    margin-left: var(--app-edge-inset-x);
    margin-right: var(--app-edge-inset-x);
}

.main-content > .product-list {
    padding: 0 var(--app-edge-inset-x) var(--app-content-bottom-inset, 140px);
}

.main-content > .empty-state,
.main-content > .no-results {
    padding-left: var(--app-edge-inset-x);
    padding-right: var(--app-edge-inset-x);
}

.category-card {
    margin-bottom: var(--app-section-gap);
}

.category-card:last-child {
    margin-bottom: 0;
}

/* ===== Lista de produtos (divs internas) ===== */
.category-card-header {
    padding: var(--app-edge-inset);
    gap: var(--app-section-gap);
}

.category-card-body {
    padding: 0 var(--app-edge-inset-x) var(--app-edge-inset);
    display: flex;
    flex-direction: column;
    gap: var(--app-section-gap);
}

.product-item {
    padding: var(--app-edge-inset);
    gap: var(--app-section-gap);
    box-sizing: border-box;
}

.product-center {
    gap: var(--app-section-gap);
}

.product-name-row {
    gap: var(--app-section-gap);
}

.product-right {
    gap: var(--app-section-gap);
}

.product-actions {
    gap: var(--app-section-gap);
    margin-top: var(--app-section-gap);
}

.product-details,
.product-meta {
    margin-top: var(--app-section-gap);
}

.incomplete-product::before {
    top: var(--app-edge-inset);
    bottom: var(--app-edge-inset);
}

/* ===== Painéis / modais ===== */
.panel-header,
.modal-header {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--app-edge-inset-x);
    padding-right: var(--app-edge-inset-x);
    margin-top: var(--app-section-gap);
    margin-bottom: var(--app-section-gap);
    margin-left: var(--app-edge-inset-x);
    margin-right: var(--app-edge-inset-x);
}

.panel-body {
    padding-top: var(--app-edge-inset);
    padding-left: var(--app-edge-inset-x);
    padding-right: var(--app-edge-inset-x);
    padding-bottom: max(var(--app-edge-inset), var(--app-safe-bottom));
}

.panel-body:has(#locais-compra-body.locais-saved-mode) {
    padding-top: var(--app-edge-inset);
    padding-left: var(--app-edge-inset-x);
    padding-right: var(--app-edge-inset-x);
    padding-bottom: var(--app-edge-inset);
}

/* Painel Locais de Compra — altura total da área útil (abaixo da status bar) */
.panel-overlay.panel-overlay--fullscreen {
    align-items: stretch;
}

.panel-overlay.panel-overlay--fullscreen .panel-sheet {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    border-radius: 0;
}

html.capacitor-native.capacitor-status-no-overlay .panel-overlay.panel-overlay--fullscreen .panel-sheet {
    max-height: none;
}

.modal-sheet {
    padding-left: var(--app-edge-inset-x);
    padding-right: var(--app-edge-inset-x);
    padding-bottom: max(var(--app-spacing-lg, 24px), var(--app-safe-bottom));
}

.confirm-dialog {
    margin: var(--app-edge-inset);
}

/* ===== Auth (login, cadastro, privacidade) ===== */
.auth-viewport:not(.auth-viewport--fill) {
    padding: max(var(--app-edge-inset), var(--app-safe-top))
        max(var(--auth-edge-inset-x, var(--app-edge-inset-x)), var(--app-safe-right))
        max(var(--app-edge-inset), var(--app-safe-bottom))
        max(var(--auth-edge-inset-x, var(--app-edge-inset-x)), var(--app-safe-left));
    gap: var(--app-section-gap);
}

.auth-viewport--fill {
    gap: var(--app-section-gap);
}

.auth-viewport--fill .card {
    padding-top: max(clamp(20px, 6dvh, 56px), var(--app-safe-top));
    padding-bottom: max(clamp(28px, 8dvh, 64px), calc(var(--app-safe-bottom) + 24px));
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    border-right-width: 0;
}

.auth-viewport--fill .card > * {
    padding-left: max(var(--auth-edge-inset-x, var(--app-edge-inset-x, 10px)), var(--app-safe-left));
    padding-right: max(var(--auth-edge-inset-x, var(--app-edge-inset-x, 10px)), var(--app-safe-right));
    box-sizing: border-box;
}

.auth-viewport--scroll {
    padding:
        max(var(--app-edge-inset), var(--app-safe-top))
        max(var(--auth-edge-inset-x, var(--app-edge-inset-x)), var(--app-safe-right))
        max(var(--app-edge-inset), var(--app-safe-bottom))
        max(var(--auth-edge-inset-x, var(--app-edge-inset-x)), var(--app-safe-left));
}

.auth-viewport--scroll .card,
.auth-viewport--scroll .container {
    margin-top: 0;
    margin-bottom: var(--app-section-gap);
}

/* ===== Páginas simples ===== */
.simple-page-shell {
    padding:
        max(var(--app-edge-inset), var(--app-safe-top))
        max(var(--app-edge-inset-x), var(--app-safe-right))
        max(var(--app-edge-inset), var(--app-safe-bottom))
        max(var(--app-edge-inset-x), var(--app-safe-left));
    min-height: 100dvh;
    box-sizing: border-box;
}

.simple-page-shell > .card {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* ===== Menu lateral ===== */
.side-menu-header {
    padding:
        max(var(--app-edge-inset), var(--app-safe-top))
        max(var(--app-edge-inset-x), var(--app-safe-right))
        max(var(--app-edge-inset), var(--app-safe-bottom))
        max(var(--app-edge-inset-x), var(--app-safe-left));
    align-items: center;
}

.side-menu-body {
    padding-bottom: max(var(--app-edge-inset), var(--app-safe-bottom));
}

.side-menu-section {
    padding-left: calc(var(--app-edge-inset-x) + 14px);
    padding-right: var(--app-edge-inset-x);
}

.side-menu-item {
    padding-left: calc(var(--app-edge-inset-x) + 16px);
    padding-right: calc(var(--app-edge-inset-x) + 16px);
}

/* ===== Header toolbar (laterais) — mesma altura do side-menu-header ===== */
.app-header,
.app-shell .header {
    padding: var(--app-edge-inset) var(--app-edge-inset-x);
    padding-bottom: var(--app-spacing);
    min-height: 0;
}

html.capacitor-native.capacitor-status-no-overlay .app-header,
html.capacitor-native.capacitor-status-no-overlay .app-shell .header {
    padding: var(--app-edge-inset) var(--app-edge-inset-x);
    padding-bottom: var(--app-spacing);
    min-height: 0;
}

/* Capacitor nativo: auth sem safe-area duplicada no topo */
html.capacitor-native.capacitor-status-no-overlay .auth-viewport:not(.auth-viewport--fill) {
    padding: var(--app-edge-inset) var(--auth-edge-inset-x, var(--app-edge-inset-x));
}

html.capacitor-native.capacitor-status-no-overlay .auth-viewport--fill .card {
    padding-top: max(clamp(20px, 6dvh, 56px), var(--app-safe-top));
    padding-bottom: max(clamp(28px, 8dvh, 64px), calc(var(--app-safe-bottom) + 24px));
}

html.capacitor-native.capacitor-status-no-overlay .auth-viewport--scroll {
    padding: var(--app-edge-inset) var(--auth-edge-inset-x, var(--app-edge-inset-x));
}

html.capacitor-native.capacitor-status-no-overlay .simple-page-shell {
    padding: var(--app-edge-inset) var(--app-edge-inset-x);
}

html.capacitor-native.capacitor-status-no-overlay .side-menu-header {
    padding: var(--app-edge-inset) var(--app-edge-inset-x);
    align-items: center;
}

/* Capacitor: painéis/modais sem safe-top duplicado */
html.capacitor-native.capacitor-status-no-overlay .modal-overlay,
html.capacitor-native.capacitor-status-no-overlay .panel-overlay,
html.capacitor-native.capacitor-status-no-overlay .confirm-overlay {
    padding-top: 0;
}

html.capacitor-native.capacitor-status-no-overlay .panel-sheet {
    max-height: calc(100dvh - var(--app-safe-bottom));
}

html.capacitor-native.capacitor-status-no-overlay .modal-sheet {
    max-height: calc(100dvh - var(--app-safe-bottom));
}

/* Capacitor: faixa superior azul + conteúdo do app abaixo */
html.capacitor-native.capacitor-status-overlay {
    background: var(--app-status-bar-color, var(--accent, #2563eb));
}

html.capacitor-native.capacitor-status-overlay body {
    background: var(--bg, #070b14);
}

html.capacitor-native.capacitor-status-overlay .app-header,
html.capacitor-native.capacitor-status-overlay .app-shell .header {
    color: #fff;
}