/**
 * Alista — App Shell layout (iOS / Android / PWA)
 * Safe area global: static/safe-area.css
 * Hierarquia: app-shell → safe-area-container → app-header + main-content → bottom-navigation
 */

:root {
    --app-header-height: 56px;
    --app-token-bar-height: 28px;
    --app-bottom-bar-height: 64px;
    --app-spacing: 16px;
    --app-spacing-sm: 8px;
    --app-spacing-lg: 24px;
    --app-radius: 16px;
    --app-icon-size: 24px;
    --app-btn-min-height: 48px;
    --app-title-size: clamp(20px, 4.6vw, 24px);
    --app-text-size: clamp(14px, 3.6vw, 16px);

    --app-content-bottom-inset: calc(var(--app-bottom-bar-height) + var(--app-safe-bottom) + var(--app-spacing));
    --app-edge-inset: 2px;
    --app-edge-inset-x: 10px;
    --app-section-gap: 2px;
}

/* ===== App Shell ===== */
.app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

.safe-area-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding-left: var(--app-safe-left);
    padding-right: var(--app-safe-right);
}

.app-shell > .safe-area-container > .container,
.app-shell .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100dvh;
    min-height: 0;
    width: 100%;
    max-width: 100%;
}

/* ===== Header / Toolbar ===== */
.app-header,
.app-toolbar,
.app-shell .header {
    flex-shrink: 0;
}

.app-header .header-title,
.app-shell .header .header-title {
    font-size: var(--app-title-size);
    font-weight: 700;
    line-height: 1.2;
}

.app-header .header-subtitle,
.app-shell .header .header-subtitle {
    font-size: var(--app-text-size);
}

.app-header .header-btn,
.app-toolbar .header-btn,
.app-shell .header .header-btn {
    min-height: var(--app-btn-min-height);
    min-width: var(--app-btn-min-height);
    padding: 0 12px;
    border-radius: 12px;
}

.app-header .menu-toggle svg,
.app-shell .header .menu-toggle svg {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
}

body.alista-token-bar-visible .app-shell .safe-area-container {
    padding-top: calc(var(--app-token-bar-height) + env(safe-area-inset-top, 0px));
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ===== Bottom Navigation / Total Bar ===== */
.bottom-navigation,
.bottom-tab-bar,
.app-shell .total-bar {
    z-index: 90;
}

.bottom-navigation,
.bottom-tab-bar {
    position: fixed;
    min-height: var(--app-bottom-bar-height);
    padding-top: var(--app-spacing-sm);
    padding-left: var(--app-edge-inset-x);
    padding-right: var(--app-edge-inset-x);
}

.app-shell .total-bar {
    position: fixed;
    border-radius: var(--app-radius);
}

.app-shell .total-bar .btn-fechar-compra {
    min-height: var(--app-btn-min-height);
}

/* ===== FAB ===== */
.floating-action-button,
.app-shell .action-btn {
    min-width: var(--app-btn-min-height);
    min-height: var(--app-btn-min-height);
    border-radius: 50%;
}

.receitas-fab.floating-action-button,
.receitas-fab {
    min-height: var(--app-btn-min-height);
    min-width: var(--app-btn-min-height);
}

/* ===== Overlays (posicionamento base) ===== */
.modal-overlay,
.panel-overlay,
.confirm-overlay,
.side-menu-overlay,
.photo-viewer-overlay,
.scanner-overlay {
    position: fixed;
    inset: 0;
}

.modal-sheet,
.app-shell .panel-sheet {
    border-radius: var(--app-radius) var(--app-radius) 0 0;
}

/* ===== Snackbar / Toast ===== */
.snackbar-message,
.toast-container {
    z-index: 950;
}

.snackbar-message .toast,
.toast-container .toast {
    font-size: var(--app-text-size);
    border-radius: var(--app-radius);
    min-height: var(--app-btn-min-height);
    display: flex;
    align-items: center;
}

/* ===== Loading Overlay ===== */
.loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 20, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.loading-overlay.open,
.loading-overlay.is-visible {
    display: flex;
}

.loading-overlay__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent, #2563eb);
    border-radius: 50%;
    animation: app-shell-spin 0.75s linear infinite;
}

@keyframes app-shell-spin {
    to { transform: rotate(360deg); }
}

/* ===== Side menu ===== */
.side-menu {
    position: fixed;
    left: 0;
    display: flex;
    flex-direction: column;
}

.side-menu-header {
    flex-shrink: 0;
}

.auth-app-shell .btn,
.auth-app-shell .submit-btn {
    min-height: var(--app-btn-min-height);
    font-size: var(--app-text-size);
    border-radius: 12px;
}

/* ===== Auth screens ===== */
.auth-app-shell {
    min-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.auth-app-shell .safe-area-container {
    flex: 1;
    min-height: 100dvh;
    padding-left: var(--app-safe-left);
    padding-right: var(--app-safe-right);
    overflow: visible;
}

html.capacitor-native .auth-app-shell .safe-area-container,
html.capacitor-status-no-overlay .auth-app-shell .safe-area-container {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== Buttons & cards (touch targets) ===== */
.app-shell .submit-btn,
.app-shell .panel-btn:not(.secondary):not(.danger):not(.success),
.app-shell .btn-fechar-compra,
.app-shell .confirm-primary:not(.confirm-warning),
.modal-sheet .submit-btn,
.panel-sheet .panel-btn:not(.secondary):not(.danger):not(.success) {
    background: var(--accent, #2563eb);
    color: #fff;
    border: none;
    opacity: 1;
}

.app-shell .panel-btn.success,
.panel-sheet .panel-btn.success {
    background: var(--success, #22c55e);
    color: #fff;
    border: none;
    opacity: 1;
}

.app-shell .submit-btn:disabled,
.app-shell .panel-btn:not(.secondary):not(.danger):disabled {
    background: var(--accent, #2563eb);
    color: #fff;
    opacity: 0.55;
}

.app-shell .panel-btn,
.app-shell .submit-btn {
    min-height: var(--app-btn-min-height);
    font-size: var(--app-text-size);
    border-radius: 12px;
}

.modal-sheet .submit-btn {
    min-height: 48px;
    height: 48px;
    max-height: 48px;
    padding: 0 16px;
    font-size: 15px;
}

.app-shell .top-action-btn {
    min-height: 52px;
    padding: 6px 2px;
    font-size: 10px;
    line-height: 1.15;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.app-shell .top-action-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.app-shell .top-action-btn span {
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.app-shell .category-card,
.app-shell .receitas-card {
    border-radius: var(--app-radius);
}

.app-shell #search-input {
    min-height: var(--app-btn-min-height);
    font-size: var(--app-text-size);
    border-radius: 12px;
}

/* ===== Capacitor native ===== */
html.capacitor-native {
    height: 100%;
    overflow: hidden;
}

html.capacitor-native body {
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

html.capacitor-native .app-shell {
    height: 100dvh;
    max-height: 100dvh;
}

html.capacitor-native .main-content {
    overscroll-behavior-y: contain;
}

/* ===== Responsividade (larguras comuns) ===== */
@media (max-width: 430px) {
    :root {
        --app-spacing: 16px;
    }
}

@media (max-width: 390px) {
    .app-shell .header-subtitle {
        font-size: 13px;
    }
}

@media (max-width: 375px) {
    :root {
        --app-spacing: 14px;
        --app-header-height: 52px;
    }

    .app-header .header-title,
    .app-shell .header .header-title {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    :root {
        --app-spacing: 12px;
    }
}

@media (min-height: 844px) {
    .app-shell .empty-state {
        padding-top: 100px;
    }
}

@media (min-height: 915px) {
    .main-content {
        padding-bottom: calc(var(--app-content-bottom-inset) + var(--app-spacing-sm));
    }
}