/* =========================================================================
   native.css — camada de "app nativo" do Dispensador (farmácia).

   Carregado DEPOIS de app.css. Aqui mora o INVÓLUCRO (shell) e o
   COMPORTAMENTO: recorte do notch, respiro do conteúdo sob a app bar, troca de
   tela com transição, feedback de pressão no dedo, modal que sobe do rodapé,
   menu inferior e toast acima dele.

   Regra de convívio: cor e superfície de CONTEÚDO continuam em app.css e nas
   páginas. Tudo aqui sai dos tokens do tema (var(--mud-palette-*)), então
   claro/escuro acompanham sem regra duplicada.
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
    /* Fallbacks: sem @supports de env(), todo calc() que usasse env() direto
       viraria declaração inválida e derrubaria o padding inteiro. */
    --fx-safe-top: 0px;
    --fx-safe-bottom: 0px;
    --fx-safe-left: 0px;
    --fx-safe-right: 0px;

    /* Altura da barra inferior (a mesma do --mud-appbar-height do MudBlazor).
       É o que o conteúdo precisa reservar embaixo para nada ficar coberto. */
    --fx-nav-height: 64px;

    /* Respiro entre a app bar e a primeira linha do conteúdo. Era zero: a
       página encostava na barra e lia como documento web, não como tela. */
    --fx-page-top: 20px;

    /* Curva de bottom sheet do iOS — sobe rápido e assenta sem repique. */
    --fx-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --fx-ease-press: cubic-bezier(0.2, 0, 0.2, 1);
}

@supports (padding: env(safe-area-inset-top)) {
    :root {
        --fx-safe-top: env(safe-area-inset-top);
        --fx-safe-bottom: env(safe-area-inset-bottom);
        --fx-safe-left: env(safe-area-inset-left);
        --fx-safe-right: env(safe-area-inset-right);
    }
}

@media (min-width: 960px) {
    :root {
        --fx-page-top: 28px;
    }
}

/* ── Comportamento de toque ─────────────────────────────────────────────── */

html {
    /* Mata o retângulo azul que pisca em todo toque no Android/Chrome. */
    -webkit-tap-highlight-color: transparent;
    /* Impede o Safari de reflowar a fonte ao girar o aparelho. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* Sem isto o app inteiro balança no fim do scroll (bounce do iOS) e o
       Chrome dispara o próprio pull-to-refresh por cima do nosso. */
    overscroll-behavior-y: none;
}

/* O long-press abre "Abrir link em nova aba / Copiar link" — o que denuncia o
   navegador na hora. Vale só para o invólucro: token da receita, endereço e
   observação ao tutor continuam selecionáveis e copiáveis de propósito. */
.mud-appbar,
.mud-toolbar,
.farmacia-nav-tile,
.fx-page-header,
.mud-button-root,
.mud-icon-button,
.mud-chip,
.mud-dialog .mud-dialog-title {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Imagem arrastável é reflexo de página; em app, imagem não sai do lugar. */
img,
.mud-avatar {
    -webkit-user-drag: none;
    user-select: none;
}

/* Scroll com inércia dentro de qualquer área rolável. */
.mud-dialog-content,
.mud-main-content {
    -webkit-overflow-scrolling: touch;
}

/* ── App bars: vidro e safe area ────────────────────────────────────────── */
/* O index.html declara viewport-fit=cover; sem as regras abaixo o conteúdo
   passa POR BAIXO do notch e da barra de gestos do iPhone. Em desktop e em
   aparelho sem recorte, env() vale 0 e nada disto tem efeito. */

.mud-appbar.mud-appbar-fixed-top {
    padding-top: var(--fx-safe-top);
    padding-left: var(--fx-safe-left);
    padding-right: var(--fx-safe-right);
}

.mud-appbar.mud-appbar-fixed-bottom {
    padding-bottom: var(--fx-safe-bottom);
    padding-left: var(--fx-safe-left);
    padding-right: var(--fx-safe-right);
}

/* Barra translúcida com desfoque: o conteúdo passa por baixo dela ao rolar,
   que é o sinal de profundidade que app tem e página opaca não. */
.fx-appbar,
.fx-bottombar {
    background: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
}

.fx-appbar {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
}

.fx-bottombar {
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
}

/* Sem desfoque, a barra translúcida deixaria o texto do conteúdo aparecer
   através dela — aí a superfície volta a ser opaca. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .fx-appbar,
    .fx-bottombar {
        background: var(--mud-palette-surface) !important;
    }
}

/* ── Conteúdo ───────────────────────────────────────────────────────────── */

.mud-main-content {
    /* padding-top do .mud-main-content já é a altura da app bar (MudBlazor);
       a margem soma o recorte do topo em vez de disputar com ela. */
    margin-top: var(--fx-safe-top);

    /* Espaço do menu inferior + barra de gestos. Antes isto era `mb-16 pb-4`
       no container do MainLayout, que ignorava o recorte do aparelho. */
    padding-bottom: calc(var(--fx-nav-height) + var(--fx-safe-bottom) + 16px);

    /* A PÁGINA PREENCHE A TELA. Sem isto, tela curta (equipe com um
       farmacêutico, dispensador sem busca) termina no meio do aparelho e a
       barra inferior — corretamente fixa em bottom:0 — lê como se estivesse
       flutuando sobre um vazio.

       `dvh` e não `vh`: no navegador do celular a barra de endereço entra e
       sai, e 100vh é a altura SEM ela — o que gera um pedaço a mais e faz a
       tela balançar ao rolar. `vh` fica de fallback.

       box-sizing garante que o padding de baixo caiba DENTRO da altura, em vez
       de somar e criar barra de rolagem numa tela que cabia. */
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Transição de página ────────────────────────────────────────────────── */
/* Trocar de rota sem transição é o que faz a navegação parecer clique de link.
   O @key da rota no MainLayout recria o nó e replica a animação. */

.fx-page {
    /* O respiro que faltava: sem ele o cabeçalho da página nasce encostado na
       app bar. Fica aqui (e não num `Class` do container) para valer em toda
       tela, incluindo as que não usam PageHeader. */
    padding-top: var(--fx-page-top);
    animation: fxPageIn 0.26s var(--fx-ease-sheet) both;
}

@keyframes fxPageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Feedback de pressão ────────────────────────────────────────────────── */
/* Em touch não existe hover: o estado "gruda" no último elemento tocado e o
   alvo fica aceso depois que o dedo já saiu. O sinal nativo é o oposto — o
   alvo AFUNDA enquanto o dedo está nele e volta ao soltar. */

@media (hover: none), (pointer: coarse) {

    .farmacia-nav-tile:active {
        transform: scale(0.94);
        transition: transform 0.10s var(--fx-ease-press);
    }

    .mud-button-root:active:not(.mud-disabled),
    .mud-icon-button:active:not(.mud-disabled) {
        transform: scale(0.94);
        transition: transform 0.10s var(--fx-ease-press);
    }

    /* Alvo de toque de 44px (mínimo do HIG da Apple e do Material). Vários
       botões da tela usam Size.Small e caíam para ~28px. */
    .mud-button-root:not(.mud-icon-button) {
        min-height: 44px;
    }

    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Volta ao tamanho ao soltar, sem tranco. */
.farmacia-nav-tile,
.mud-button-root,
.mud-icon-button {
    transition: transform 0.18s var(--fx-ease-press),
                color .15s ease,
                background-color .15s ease,
                box-shadow 0.2s ease;
}

/* ── Menu inferior ──────────────────────────────────────────────────────── */

.farmacia-nav {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100%;
    gap: var(--fx-gap-xs);
}

.farmacia-nav-tile {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    max-width: 132px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.farmacia-nav-tile .mud-icon-root {
    font-size: 22px;
    /* O ícone da aba ativa cresce um tico — leitura periférica, sem depender
       só da cor. */
    transition: transform 0.18s var(--fx-ease-press);
}

.farmacia-nav-label {
    font-size: 10px;
    line-height: 1.1;
    font-weight: 500;
    white-space: nowrap;
    color: inherit;
}

.farmacia-nav-tile.active {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.farmacia-nav-tile.active .farmacia-nav-label {
    font-weight: 700;
}

.farmacia-nav-tile.active .mud-icon-root {
    transform: translateY(-1px) scale(1.06);
}

@media (hover: hover) and (pointer: fine) {
    .farmacia-nav-tile:hover {
        color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    }
}

/* ── Cabeçalho de página ────────────────────────────────────────────────── */

.fx-page-header {
    display: flex;
    align-items: center;
    gap: var(--fx-gap-md);
    margin: 0 0 var(--fx-gap-lg);
}

/* Squircle no lugar do círculo: é a forma de ícone de app (Material 3 / iOS) e
   separa o ícone da TELA dos avatares redondos de pessoa da equipe. */
.fx-page-header__icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
    color: var(--mud-palette-primary) !important;
}

.fx-page-header__title {
    line-height: 1.15;
}

/* ── Bottom sheets ──────────────────────────────────────────────────────── */
/* Modal de app sobe de baixo, com alça de arrasto e cantos de cima
   arredondados. No desktop (>= 768px) nada disto vale e o MudDialog continua
   centralizado como sempre.

   Vale para TODO .mud-dialog de propósito: o DialogOptions do MudBlazor 8 não
   aceita classe no diálogo, e aqui não existe modal que deva continuar
   flutuando no meio da tela do celular. A exceção é o wizard de cadastro da
   farmácia, que abre FullScreen (.mud-dialog-fullscreen). */

@media (max-width: 767.98px) {

    .mud-dialog-container .mud-dialog {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
        border-radius: 22px 22px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 34px rgba(14, 27, 31, 0.28);
        animation: fxSheetIn 0.30s var(--fx-ease-sheet) both;
        /* Enquanto o dedo arrasta, o native.js escreve --fx-sheet-drag. */
        transform: translateY(var(--fx-sheet-drag, 0px));
    }

    /* Sheet "cheio" — o wizard de cadastro da farmácia, fluxo longo que não
       deve competir com o que está atrás. */
    .mud-dialog-container .mud-dialog.mud-dialog-fullscreen {
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    /* Alça de arrasto. */
    .mud-dialog-container .mud-dialog::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: var(--mud-palette-lines-inputs);
        z-index: 3;
        pointer-events: none;
    }

    .mud-dialog-container .mud-dialog.mud-dialog-fullscreen::before {
        display: none;
    }

    /* Abre espaço para a alça e separa o cabeçalho do conteúdo rolável. */
    .mud-dialog .mud-dialog-title {
        padding: 20px 24px 12px;
        border-bottom: 1px solid var(--mud-palette-divider);
        border-radius: 0;
        flex: 0 0 auto;
    }

    .mud-dialog-fullscreen .mud-dialog-title {
        padding-top: calc(14px + var(--fx-safe-top));
    }

    /* Sheet sem título: o conteúdo é que precisa desviar da alça. Não dá para
       usar `> .mud-dialog-content:first-child` — o MudBlazor embrulha o
       conteúdo num mud-focus-trap, então ele nunca é filho direto. */
    .mud-dialog:not(:has(.mud-dialog-title)) .mud-dialog-content {
        padding-top: 26px;
    }

    .mud-dialog .mud-dialog-content {
        overscroll-behavior: contain;
        padding-bottom: 12px;
    }

    /* Rodapé de ações respeitando a barra de gestos, com a ação principal
       ocupando a largura — o polegar não precisa mirar num canto. */
    .mud-dialog .mud-dialog-actions {
        flex: 0 0 auto;
        padding: 12px 16px;
        padding-bottom: calc(12px + var(--fx-safe-bottom));
        border-top: 1px solid var(--mud-palette-divider);
        border-radius: 0;
        gap: 10px;
    }

    .mud-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 auto;
        min-height: 48px;
        border-radius: 14px;
    }

    /* O botão de fechar do MudBlazor fica a 8px do topo e brigaria com a alça;
       desce um pouco e ganha alvo de 44px pela regra de pointer:coarse. */
    .mud-dialog .mud-dialog-title .mud-button-close {
        top: 14px;
        right: 10px;
    }
}

@keyframes fxSheetIn {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Arrasto em curso: sem transição, o painel tem que colar no dedo. */
.mud-dialog.fx-sheet--dragging {
    animation: none;
    transition: none;
}

/* Soltou sem fechar: volta assentando. */
.mud-dialog.fx-sheet--settling {
    animation: none;
    transition: transform 0.24s var(--fx-ease-sheet);
}

/* ── Snackbar ───────────────────────────────────────────────────────────── */
/* Toast de app aparece no rodapé, acima da navegação — não por cima dela. */

.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-right {
    padding-bottom: calc(var(--fx-nav-height) + var(--fx-safe-bottom) + 8px);
}

.mud-snackbar {
    border-radius: 14px;
}

/* ── Puxar para atualizar ───────────────────────────────────────────────── */

.fx-ptr {
    position: fixed;
    top: calc(var(--fx-safe-top) + 56px);
    left: 50%;
    z-index: 1200;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 10px rgba(14, 27, 31, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
}

.fx-ptr__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    border-top-color: var(--mud-palette-primary);
}

.fx-ptr--spinning .fx-ptr__spinner {
    animation: fxPtrSpin 0.7s linear infinite;
}

@keyframes fxPtrSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Acessibilidade ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .fx-page,
    .mud-dialog-container .mud-dialog {
        animation: none !important;
    }

    .farmacia-nav-tile:active,
    .mud-button-root:active,
    .mud-icon-button:active {
        transform: none;
    }
}