/* =========================================================================
   Atendevet Fármacias — estilos globais
   Tokens + utilitários. Cores vêm do tema MudBlazor (var(--mud-palette-*)),
   então tudo abaixo respeita light/dark automaticamente.
   ========================================================================= */

:root {
    --fx-gap-xs: 4px;
    --fx-gap-sm: 8px;
    --fx-gap-md: 16px;
    --fx-gap-lg: 24px;
    --fx-radius: 12px;
    --fx-radius-lg: 18px;
    --fx-border: 1px solid var(--mud-palette-lines-default);
    --fx-shadow-soft: 0 1px 2px rgba(16, 27, 31, 0.04), 0 4px 16px rgba(16, 27, 31, 0.06);
}

/* Fonte de corpo padrão. */
body {
    font-family: "Nunito", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fonte de exibição (Sulphur Point) nos títulos e botões — feito via CSS para não
   depender de sobrescrever cada Typography no tema (fonte de NRE no GenerateTheme). */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-button-label,
.mud-button-root {
    font-family: "Sulphur Point", "Nunito", sans-serif;
    letter-spacing: .2px;
}

.mud-button-root {
    text-transform: none;
}

/* Quebra de texto — antes duplicada inline em Dismiss/Dismissed/NoResult. */
.text-wrap {
    white-space: normal !important;
    word-break: break-word;
}

/* ---- Superfícies -------------------------------------------------------- */
.fx-surface {
    background: var(--mud-palette-surface);
    border: var(--fx-border);
    border-radius: var(--fx-radius-lg);
}

.fx-surface-soft {
    box-shadow: var(--fx-shadow-soft);
    border: var(--fx-border);
    border-radius: var(--fx-radius-lg);
}

/* ---- App bar superior --------------------------------------------------- */
.fx-appbar-avatar {
    width: 38px;
    height: 38px;
    background: var(--mud-palette-primary) !important;
}

/* O INVÓLUCRO do app mudou de arquivo: app bars (.fx-appbar/.fx-bottombar),
   menu inferior (.farmacia-nav*) e cabeçalho de página (.fx-page-header) agora
   vivem em native.css, junto do recorte do notch, da transição de tela e do
   feedback de toque — o que evita duas fontes de verdade para a mesma barra. */

/* ---- Login -------------------------------------------------------------- */
.fx-login-card {
    width: 100%;
    max-width: 420px;
}

/* ---- Acesso assistido (Login: farmácia → farmacêutico) ------------------ */
.fx-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 4px 0 20px;
}

.fx-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    gap: 6px;
    text-align: center;
}

.fx-step__dot {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    transition: all .2s ease;
}

.fx-step__label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.fx-step__bar {
    flex: 1 1 auto;
    height: 2px;
    margin-top: 17px;
    background: var(--mud-palette-lines-default);
}

.fx-step.is-active .fx-step__dot {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.fx-step.is-active .fx-step__label {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.fx-step.is-done .fx-step__dot {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fx-step__bar.is-done {
    background: var(--mud-palette-primary);
}

/* ---- Página de erro / 404 (NoResult) ------------------------------------ */
.fx-error-container {
    width: 80vw;
    max-width: 900px;
}

.fx-display-buttons {
    display: flex;
    gap: var(--fx-gap-md);
}

@media (max-width: 900px) {
    .fx-error-container {
        width: 92vw;
    }

    .fx-display-buttons {
        flex-direction: column;
    }
}