#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.app-load {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

    .app-load > div {
        background-color: #333;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .app-load .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .app-load .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .app-load .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .app-load .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


.dropzone {
    position: relative;
    overflow: hidden;
    border: 2px dotted rgba(0,0,0,.2);
    background-color: rgba(0,0,0,.09);
    margin-bottom: 20px;
    border-radius: 5px;
}

    .dropzone.dropzone-active {
        background-color: #999;
    }

    .dropzone label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

.fileProgress {
    vertical-align: middle !important;
}

.text-icon-light {
    color: #e9ecef;
}

/* ==========================================================================
   IDENTIDADE VISUAL BIANCHINI (Material 3) — compartilhada entre Web e Mobile.
   Sobrescreve as variáveis raízes do Bootstrap/AdminLTE para a paleta da marca.
   ========================================================================== */
:root {
    /* Cores - Primárias e Secundárias */
    --primary: #835400;
    --on-primary: #ffffff;
    --primary-container: #eb9d1d;
    --on-primary-container: #5c3a00;
    --inverse-primary: #ffb957;
    --secondary: #77574d;
    --on-secondary: #ffffff;
    --secondary-container: #fed3c7;
    --on-secondary-container: #795950;
    /* Cores - Terciárias e Erro */
    --tertiary: #ba1a20;
    --on-tertiary: #ffffff;
    --tertiary-container: #ff8d84;
    --on-tertiary-container: #88000e;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    /* Cores - Superfícies e Fundos (Backgrounds) */
    --background: #fbf9f5;
    --on-background: #1b1c1a;
    --surface: #fbf9f5;
    --on-surface: #1b1c1a;
    --surface-variant: #e4e2de;
    --on-surface-variant: #4f4634;
    --inverse-surface: #30312e;
    --inverse-on-surface: #f2f0ed;
    --surface-tint: #835400;
    /* Variações de Superfície (Containers) */
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f5f3ef;
    --surface-container: #efeeea;
    --surface-container-high: #eae8e4;
    --surface-container-highest: #e4e2de;
    --surface-bright: #fbf9f5;
    --surface-dim: #dbdad6;
    /* Linhas e Contornos */
    --outline: #817662;
    --outline-variant: #d3c5ae;
    /* Variações Fixas (Dim/Variants) */
    --primary-fixed: #ffddb5;
    --primary-fixed-dim: #ffb957;
    --on-primary-fixed: #2a1800;
    --on-primary-fixed-variant: #643f00;
    --secondary-fixed: #ffdbd0;
    --secondary-fixed-dim: #e7bdb1;
    --on-secondary-fixed: #2c160e;
    --on-secondary-fixed-variant: #5d4037;
    --tertiary-fixed: #ffdad6;
    --tertiary-fixed-dim: #ffb3ac;
    --on-tertiary-fixed: #410003;
    --on-tertiary-fixed-variant: #930010;
    /* ==========================================================================
       TIPOGRAFIA
       ========================================================================== */
    --font-headline: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --font-label: 'Work Sans', sans-serif;
    /* ==========================================================================
       ARREDONDAMENTO DE BORDAS (Border Radius)
       ========================================================================== */
    --radius-default: 0.25rem; /* 4px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-full: 9999px; /* Redondo perfeito */
}

/* ==========================================================================
   IDENTIDADE VISUAL BIANCHINI (Material 3) — variante escura.
   "data-theme" e "data-bs-theme" ficam sempre em sincronia (ver index.html e
   themeInterop.js), então os componentes Material 3 seguem o mesmo claro/escuro
   que o próprio AdminLTE já aplica na casca (navbar/sidebar/body).
   Os tons neutros (superfície/contorno/texto) usam os MESMOS cinzas do tema
   escuro nativo do Bootstrap 5.3/AdminLTE v4 (--bs-body-bg, --bs-tertiary-bg,
   --bs-secondary-bg, --bs-border-color...) em vez de uma paleta inventada —
   assim os cards ficam no mesmo tom da navbar/sidebar, não um preto à parte.
   As cores de marca (âmbar) continuam vindas dos pares "fixed"/"inverse" do
   Material 3, já que o Bootstrap não tem equivalente pra elas.
   ========================================================================== */
[data-theme="dark"] {
    --primary: var(--inverse-primary);
    --on-primary: var(--on-primary-fixed-variant);
    --primary-container: #5c3a00;
    --on-primary-container: var(--primary-fixed);
    --inverse-primary: #835400;
    --secondary: var(--secondary-fixed-dim);
    --on-secondary: var(--on-secondary-fixed-variant);
    --secondary-container: #5d4037;
    --on-secondary-container: var(--secondary-fixed);
    --tertiary: var(--tertiary-fixed-dim);
    --on-tertiary: var(--on-tertiary-fixed-variant);
    --tertiary-container: #930010;
    --on-tertiary-container: var(--tertiary-fixed);
    --error: #ea868f;
    --on-error: #2c0b0e;
    --error-container: #58151c;
    --on-error-container: #f1aeb5;

    --background: #212529;
    --on-background: #dee2e6;
    --surface: #212529;
    --on-surface: #dee2e6;
    --surface-variant: #343a40;
    --on-surface-variant: rgba(222, 226, 230, .75);
    --inverse-surface: #dee2e6;
    --inverse-on-surface: #212529;
    --surface-tint: var(--inverse-primary);

    --surface-container-lowest: #1a1d20;
    --surface-container-low: #212529;
    --surface-container: #2b3035;
    --surface-container-high: #343a40;
    --surface-container-highest: #3d444b;
    --surface-bright: #3d444b;
    --surface-dim: #1a1d20;

    --outline: #6c757d;
    --outline-variant: #495057;
}

/* ==========================================================================
   RESKIN DO BOOTSTRAP/ADMINLTE PARA A MARCA (âmbar).
   As classes utilitárias do Bootstrap (.text-primary, .bg-primary,
   .border-primary, .alert-primary) já são dinâmicas — usam var(--bs-primary-rgb)
   etc. internamente — então basta redefinir essas variáveis aqui, uma vez,
   pros componentes nativos do AdminLTE (que não sabem nada sobre os tokens
   Material 3) usarem a cor certa. Só .btn-primary/.btn-outline-primary têm
   cor fixa embutida pelo Sass do Bootstrap, por isso são sobrescritos à parte.
   Isso substitui os remendos que antes viviam espalhados por página
   (Cart.razor.css, Catalog.razor.css etc.) por uma fonte única. */
:root {
    --bs-primary: #835400;
    --bs-primary-rgb: 131, 84, 0;
    --bs-primary-text-emphasis: #5c3a00;
    --bs-primary-bg-subtle: #ffddb5;
    --bs-primary-border-subtle: #eb9d1d;
}

[data-bs-theme="dark"] {
    --bs-primary: #ffb957;
    --bs-primary-rgb: 255, 185, 87;
    --bs-primary-text-emphasis: #ffddb5;
    --bs-primary-bg-subtle: #5c3a00;
    --bs-primary-border-subtle: #835400;
}

.btn-primary {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary-container);
    --bs-btn-hover-bg: var(--primary-container);
    --bs-btn-hover-border-color: var(--primary-container);
    --bs-btn-active-color: var(--on-primary-container);
    --bs-btn-active-bg: var(--primary-container);
    --bs-btn-active-border-color: var(--primary-container);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.card-primary,
.text-bg-primary {
    --lte-card-variant-bg: var(--primary);
    --lte-card-variant-color: var(--on-primary);
}

.alert-info {
    --bs-alert-color: var(--on-secondary-container);
    --bs-alert-bg: var(--secondary-container);
    --bs-alert-border-color: var(--secondary);
}

body {
    font-family: var(--font-body);
    background-color: var(--background);
    color: var(--on-background);
}

.font-headline {
    font-family: var(--font-headline);
}

.font-label {
    font-family: var(--font-label);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

h1, h2, h3, h4, h5, h6, .brand-text {
    font-family: var(--font-headline);
    font-weight: 700;
}

/* Forçando o AdminLTE a usar as cores da marca nas classes primárias
   (bg-primary, btn-primary) com o degradê configurado. */
.bg-primary,
.bg-gradient-primary {
    background: var(--primary) !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%) !important;
    color: var(--on-primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

    .btn-primary:hover {
        background-color: var(--primary-container);
        border-color: var(--primary-container);
    }

/* Card customizado com arredondamento 2xl */
.card-bianchini {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* A NavBarBottomBar (Mobile) é fixa por cima do conteúdo (position:fixed, z-index alto) —
   sem esse respiro embaixo, o fim de cada página (últimas seções, listas) renderia por
   baixo dela em vez de acima. Guardado por ":has(nav.bottom-nav)" pra só afetar páginas
   que realmente renderizam a barra (MobileLayout) — o Web não tem esse elemento.
   O botão elevado do meio ainda "empina" ~22px acima do topo da barra, então a folga
   cobre a barra inteira + essa saliência + a safe-area do home indicator em iPhones reais. */
body:has(nav.bottom-nav) .app-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Configuração base para os ícones Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}