/* ══════════════════════════════════════════════════════════════════
   MATERIALS — camada de vidro (Liquid Glass, família Regular) do
   redesign Apple HIG. Carregado DEPOIS de design-tokens.css e ANTES
   de design-system.css (ver base.html).

   Regra de ouro (P2): "container que segura conteúdo = opaco.
   Elemento que flutua/persiste sobre o conteúdo = vidro." Vidro entra
   em TODO o chrome — sidebar, navbar, cabeçalho de página, barras de
   filtro, abas, cabeçalho de tabela sticky, tiles de KPI, modais/
   sheets/popovers/menus, drawers/FAB/toasts — nunca em corpo de card,
   linha de tabela, campo de formulário ou bloco de texto. O conteúdo
   continua sendo conteúdo.

   Cada variante é um PAPEL funcional, não um efeito genérico
   ".glass" aplicado a tudo — a intensidade (blur/opacidade/borda/
   sombra) muda por papel, a FAMÍLIA (Regular) nunca muda.

   Escala de espessura (WWDC25 "Meet Liquid Glass": superfície maior
   simula material mais espesso, com sombra mais funda):
     thin    → .material-tab, .material-thead   (superfície pequena/fina)
     regular → .material-nav, .material-bar, .material-control,
               .material-popover, .material-sheet (pequeno/médio),
               .material-toolbar, .material-tile, .material-group
     thick   → .material-header, .material-sheet-lg (superfície grande)

   Uma superfície por GRUPO, não por elemento (GlassEffectContainer):
   `.material-group` é o contêiner de uma barra de ferramentas/filtro/
   abas — UM backdrop-filter no grupo, os controles filhos em fill por
   cima, nunca um `.material-*` por botão.

   Contexto de empilhamento — CUIDADO: backdrop-filter cria stacking
   context. Estas classes só vão em elemento que NÃO é ancestral de
   `.modal` (sidebar, navbar, header, toolbar, overlay de raiz). Nunca
   em `.content-wrapper`/`.main-content`/`.app-shell`/`body` — motivo
   documentado em design-system.css, bloco `pt-fade-in`.
   ══════════════════════════════════════════════════════════════════ */

/* ── Base compartilhada — highlight especular + sombra adaptativa ──
   Todo `.material-*` herda isto via classe auxiliar interna
   (`--material-role` não existe; cada seletor declara os 4 aspectos
   explicitamente, porque cada papel tem intensidade própria). O que
   É compartilhado entre todos é a MECÂNICA: fallback sólido primeiro,
   promoção via @supports depois, guardas de acessibilidade por cima. */

.material-nav,
.material-bar,
.material-control,
.material-popover,
.material-sheet,
.material-toolbar,
.material-tile,
.material-group,
.material-header,
.material-thead,
.material-tab {
    background: var(--material-bg-solid);
    border: 1px solid var(--material-border);
    box-shadow: var(--material-shadow-over-plain);
    /* Highlight especular — a linha clara de 1px no topo é a fonte
       PRIMÁRIA de dimensionalidade do material (Apple HIG). Sem ela
       o vidro lê como blur chapado, não como superfície com "corpo". */
    background-image: linear-gradient(to bottom, var(--material-highlight), transparent 40%);
    background-blend-mode: overlay;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .material-nav,
    .material-bar,
    .material-control,
    .material-popover,
    .material-sheet,
    .material-toolbar,
    .material-tile,
    .material-group,
    .material-header,
    .material-thead,
    .material-tab {
        background-color: var(--material-bg);
        backdrop-filter: blur(var(--material-blur-regular)) saturate(var(--material-saturate));
        -webkit-backdrop-filter: blur(var(--material-blur-regular)) saturate(var(--material-saturate));
    }

    /* Thin — superfície pequena/fina: abas e cabeçalho de tabela
       sticky. Blur menor por dois motivos que apontam pro mesmo lado:
       é a superfície mais fina da escala (HIG) E é a que mais roda
       dentro de contêiner com scroll (custo de repintura por frame —
       ver risco de performance no plano). */
    .material-thead,
    .material-tab {
        backdrop-filter: blur(var(--material-blur-thin)) saturate(var(--material-saturate));
        -webkit-backdrop-filter: blur(var(--material-blur-thin)) saturate(var(--material-saturate));
    }

    /* Thick — superfície grande: cabeçalho de página (barra cheia,
       maior presença visual da tela) e sheet grande opcional. */
    .material-header,
    .material-sheet-lg {
        backdrop-filter: blur(var(--material-blur-thick)) saturate(var(--material-saturate));
        -webkit-backdrop-filter: blur(var(--material-blur-thick)) saturate(var(--material-saturate));
    }
}

/* ── .material-nav — sidebar ─────────────────────────────────────── */
.material-nav {
    box-shadow: none; /* a sidebar separa por borda, não por sombra flutuante */
}

/* ── .material-bar — navbar sticky / toolbar ─────────────────────── */
.material-bar {
    box-shadow: var(--material-shadow-over-content);
}

/* ── .material-control — controle flutuante, segmented, pill ────── */
.material-control {
    border-radius: var(--radius-full);
    box-shadow: var(--material-shadow-over-plain);
}

/* ── .material-popover — dropdown, menu de contexto ──────────────── */
.material-popover {
    border-radius: var(--radius-lg);
    box-shadow: var(--material-shadow-over-content);
}

/* ── .material-sheet — modal / sheet ─────────────────────────────── */
.material-sheet {
    border-radius: var(--radius-lg);
    box-shadow: var(--material-shadow-over-content);
}

/* ── .material-sheet-lg — sheet/modal grande (thick) ──────────────── */
.material-sheet-lg {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* ── .material-toolbar — barra de filtro / ações de página ────────── */
.material-toolbar {
    border-radius: var(--radius-md);
    box-shadow: var(--material-shadow-over-plain);
}

/* ── .material-tile — tile de KPI/estatística ─────────────────────── */
.material-tile {
    border-radius: var(--radius-md);
    box-shadow: var(--material-shadow-over-plain);
}

/* ── .material-group — GlassEffectContainer: UMA superfície de vidro
   para um GRUPO de controles (abas, filtros, ações). Os filhos (botão,
   ícone, texto) usam fill/transparente — nunca um `.material-*` por
   filho. Apple: "combine multiple glass shapes into one" — aqui é o
   equivalente de layout: um único backdrop-filter no contêiner. ───── */
.material-group {
    border-radius: var(--radius-md);
    box-shadow: var(--material-shadow-over-plain);
}

/* ── .material-header — cabeçalho de página (thick) ───────────────── */
.material-header {
    box-shadow: var(--shadow-md);
    border-left: none;
    border-right: none;
    border-top: none;
}

/* ── .material-thead — cabeçalho de tabela sticky (thin) ──────────── */
.material-thead {
    box-shadow: var(--shadow-xs);
    border-left: none;
    border-right: none;
    border-top: none;
}

/* ── .material-tab — aba / segmented / pill nav (thin) ────────────── */
.material-tab {
    border-radius: var(--radius-full);
    box-shadow: none;
}

/* ── .material-scrim — backdrop de modal/drawer ──────────────────── */
.material-scrim {
    background: rgba(9, 9, 11, .5);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .material-scrim {
        background: rgba(9, 9, 11, .32);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ── .material-on-material — regra "nunca vidro sobre vidro" ─────────
   Elemento que fica EM CIMA de uma superfície de material (ex.: um
   menu aberto dentro da toolbar de vidro, uma barra de filtro dentro
   do cabeçalho de página) usa fill/transparência, nunca um segundo
   `.material-*`. Com vidro em todo o chrome este aninhamento é a
   REGRA, não a exceção — Apple HIG: "when placing elements on top of
   Liquid Glass, avoid applying the material to both layers" — o de
   cima fica fino e integrado ao de baixo. ──────────────────────────── */
.material-on-material {
    background: color-mix(in srgb, var(--material-bg-solid) 88%, transparent);
    border: 1px solid var(--material-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── .scroll-edge — scroll edge effect ────────────────────────────
   Apple: "dissolve o conteúdo no fundo, erguendo o vidro visualmente
   acima do conteúdo em movimento e mantendo contraste e legibilidade"
   — uma DISSOLUÇÃO do conteúdo que passa por baixo, não um filete de
   borda (era o que a v1 deste arquivo fazia, com --material-border).
   Aproximação em CSS puro sem máscara no conteúdo scrollável: um
   degradê da cor OPACA de fundo do tema (--material-bg-solid) para
   transparente, sobreposto por baixo da barra — o conteúdo que sobe
   é "coberto" gradualmente antes de sumir de vez sob o vidro, em vez
   de cortar de forma abrupta na borda. Vai na barra `sticky`/`fixed`
   em si (`.scroll-edge` mantém `position: relative` para ancorar). */
.scroll-edge {
    position: relative;
}

.scroll-edge::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    height: 22px;
    background: linear-gradient(to bottom,
        var(--material-bg-solid) 0%,
        color-mix(in srgb, var(--material-bg-solid) 55%, transparent) 45%,
        transparent 100%);
    pointer-events: none;
}

/* ── Acessibilidade — requisito, não cortesia ─────────────────────
   Redução de transparência e alto contraste tornam TODO material
   opaco; sem isso o fallback pareceria defeito, não intenção. Com
   vidro em todo o chrome (P2), esta é praticamente uma segunda pele
   completa do produto, não um detalhe. ───────────────────────────── */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .material-nav,
    .material-bar,
    .material-control,
    .material-popover,
    .material-sheet,
    .material-sheet-lg,
    .material-toolbar,
    .material-tile,
    .material-group,
    .material-header,
    .material-thead,
    .material-tab,
    .material-on-material {
        background-color: var(--material-bg-solid) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-image: none !important;
    }

    .material-scrim {
        background: rgba(9, 9, 11, .72) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .scroll-edge::after {
        background: var(--material-border) !important;
        height: 1px !important;
        bottom: -1px !important;
    }
}