/* ============================================================
   TEMA DO PAINEL — claro e escuro no mesmo arquivo
   ============================================================

   Como funciona, em uma frase: nenhuma cor está escrita nas telas; todas
   saem de "apelidos" (as variáveis --c-*) definidos aqui. Trocar de tema é
   só trocar o valor dos apelidos — o HTML das telas não muda NADA.

   Por que assim: as telas usam classes do Tailwind (bg-gray-800/50,
   text-gray-400...). O `tema.js` manda o Tailwind montar essas classes
   apontando para as variáveis daqui. Resultado: um `bg-gray-800/50` que
   escrevemos uma vez funciona nos dois temas, e ninguém precisa escrever
   "dark:" em coisa alguma.

   O valor das cores vai em NÚMEROS SEPARADOS POR ESPAÇO (ex.: 31 41 55),
   e não em #hex, porque é isso que deixa o Tailwind aplicar transparência
   por cima: bg-gray-800/50 vira rgb(31 41 55 / 0.5).

   O tema escuro é o padrão (é o visual original do painel). O claro entra
   quando o <html> ganha data-tema="claro" — quem faz isso é o tema.js.
   ============================================================ */

/* ---------- TEMA ESCURO (o padrão) ---------- */
:root {
  color-scheme: dark;          /* faz o navegador desenhar select, barra de
                                  rolagem e calendário na cor certa */

  --c-white: 255 255 255;      /* "text-white" = o texto mais forte da tela */
  --c-black: 0 0 0;

  --c-gray-50: 249 250 251;
  --c-gray-100: 243 244 246;
  --c-gray-200: 229 231 235;
  --c-gray-300: 209 213 219;
  --c-gray-400: 156 163 175;   /* texto secundário (o mais usado) */
  --c-gray-500: 107 114 128;   /* dica, placeholder */
  --c-gray-600: 75 85 99;
  --c-gray-700: 55 65 81;      /* linhas e bordas */
  --c-gray-800: 31 41 55;      /* fundo de campo e de botão neutro */
  --c-gray-900: 17 24 39;      /* fundo do menu e da barra de cima */
  --c-gray-950: 3 7 18;

  --c-indigo-50: 238 242 255;
  --c-indigo-100: 224 231 255;
  --c-indigo-200: 199 210 254;
  --c-indigo-300: 165 180 252;
  --c-indigo-400: 129 140 248;
  --c-indigo-500: 99 102 241;
  --c-indigo-600: 79 70 229;
  --c-indigo-700: 67 56 202;
  --c-indigo-800: 55 48 163;
  --c-indigo-900: 49 46 129;
  --c-indigo-950: 30 27 75;

  --c-red-50: 254 242 242;
  --c-red-100: 254 226 226;
  --c-red-200: 254 202 202;
  --c-red-300: 252 165 165;
  --c-red-400: 248 113 113;
  --c-red-500: 239 68 68;
  --c-red-600: 220 38 38;
  --c-red-700: 185 28 28;
  --c-red-800: 153 27 27;
  --c-red-900: 127 29 29;
  --c-red-950: 69 10 10;

  --c-green-50: 240 253 244;
  --c-green-100: 220 252 231;
  --c-green-200: 187 247 208;
  --c-green-300: 134 239 172;
  --c-green-400: 74 222 128;
  --c-green-500: 34 197 94;
  --c-green-600: 22 163 74;
  --c-green-700: 21 128 61;
  --c-green-800: 22 101 52;
  --c-green-900: 20 83 45;
  --c-green-950: 5 46 22;

  --c-amber-50: 255 251 235;
  --c-amber-100: 254 243 199;
  --c-amber-200: 253 230 138;
  --c-amber-300: 252 211 77;
  --c-amber-400: 251 191 36;
  --c-amber-500: 245 158 11;
  --c-amber-600: 217 119 6;
  --c-amber-700: 180 83 9;
  --c-amber-800: 146 64 14;
  --c-amber-900: 120 53 15;
  --c-amber-950: 69 26 5;

  --c-blue-50: 239 246 255;
  --c-blue-100: 219 234 254;
  --c-blue-200: 191 219 254;
  --c-blue-300: 147 197 253;
  --c-blue-400: 96 165 250;
  --c-blue-500: 59 130 246;
  --c-blue-600: 37 99 235;
  --c-blue-700: 29 78 216;
  --c-blue-800: 30 64 175;
  --c-blue-900: 30 58 138;
  --c-blue-950: 23 37 84;
  /* Peças que não são "uma cor do Tailwind" e sim um material */
  --fundo-painel: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  --fundo-login: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  --vidro-fundo: rgba(30, 41, 59, 0.7);
  --vidro-borda: rgba(255, 255, 255, 0.08);
  --vidro-sombra: none;
  --menu-hover: rgba(255, 255, 255, 0.05);
  --nav-texto: #9ca3af;
  --nav-texto-hover: #ffffff;
  --nav-ativo-fundo: rgba(99, 102, 241, 0.15);
  --nav-ativo-texto: #ffffff;
  --nav-ativo-icone: #818cf8;
  --cartao-linha-fundo: rgba(30, 41, 59, 0.4);
  --cartao-linha-borda: rgba(255, 255, 255, 0.08);
  --cartao-linha-divisor: rgba(255, 255, 255, 0.05);
  --modal-fundo: rgba(0, 0, 0, 0.7);
}

/* ---------- TEMA CLARO ---------- */
/* A régua de cinzas é a MESMA, só de cabeça para baixo: o que era fundo
   escuro vira fundo claro, e o que era texto claro vira texto escuro.
   É isso que permite reaproveitar as classes das telas sem tocar nelas. */
:root[data-tema="claro"] {
  color-scheme: light;

  --c-white: 15 23 42;         /* o texto forte agora é quase preto */
  --c-black: 15 23 42;

  --c-gray-50: 2 6 23;
  --c-gray-100: 15 23 42;
  --c-gray-200: 30 41 59;
  --c-gray-300: 51 65 85;
  --c-gray-400: 71 85 105;   /* texto secundário (o mais usado) */
  --c-gray-500: 100 116 139;   /* dica, placeholder */
  --c-gray-600: 148 163 184;
  --c-gray-700: 203 213 225;      /* linhas e bordas */
  --c-gray-800: 226 232 240;      /* fundo de campo e de botão neutro */
  --c-gray-900: 241 245 249;      /* fundo do menu e da barra de cima */
  --c-gray-950: 248 250 252;

  --c-indigo-50: 49 46 129;
  --c-indigo-100: 49 46 129;
  --c-indigo-200: 55 48 163;
  --c-indigo-300: 67 56 202;
  --c-indigo-400: 79 70 229;
  --c-indigo-500: 99 102 241;
  --c-indigo-600: 79 70 229;
  --c-indigo-700: 67 56 202;
  --c-indigo-800: 55 48 163;
  --c-indigo-900: 49 46 129;
  --c-indigo-950: 30 27 75;

  --c-red-50: 127 29 29;
  --c-red-100: 127 29 29;
  --c-red-200: 153 27 27;
  --c-red-300: 185 28 28;
  --c-red-400: 220 38 38;
  --c-red-500: 239 68 68;
  --c-red-600: 220 38 38;
  --c-red-700: 185 28 28;
  --c-red-800: 153 27 27;
  --c-red-900: 127 29 29;
  --c-red-950: 69 10 10;

  --c-green-50: 20 83 45;
  --c-green-100: 20 83 45;
  --c-green-200: 22 101 52;
  --c-green-300: 22 101 52;   /* dois degraus: verde claro some no branco */
  --c-green-400: 21 128 61;   /* idem — é a cor da etiqueta "ativo" */
  --c-green-500: 34 197 94;
  --c-green-600: 22 163 74;
  --c-green-700: 21 128 61;
  --c-green-800: 22 101 52;
  --c-green-900: 20 83 45;
  --c-green-950: 5 46 22;

  --c-amber-50: 120 53 15;
  --c-amber-100: 120 53 15;
  --c-amber-200: 146 64 14;
  --c-amber-300: 146 64 14;
  --c-amber-400: 180 83 9;
  --c-amber-500: 245 158 11;
  --c-amber-600: 217 119 6;
  --c-amber-700: 180 83 9;
  --c-amber-800: 146 64 14;
  --c-amber-900: 120 53 15;
  --c-amber-950: 69 26 5;

  --c-blue-50: 30 58 138;
  --c-blue-100: 30 58 138;
  --c-blue-200: 30 64 175;
  --c-blue-300: 29 78 216;
  --c-blue-400: 37 99 235;
  --c-blue-500: 59 130 246;
  --c-blue-600: 37 99 235;
  --c-blue-700: 29 78 216;
  --c-blue-800: 30 64 175;
  --c-blue-900: 30 58 138;
  --c-blue-950: 23 37 84;
  --fundo-painel: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  --fundo-login: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 50%, #f8fafc 100%);
  --vidro-fundo: rgba(255, 255, 255, 0.85);
  --vidro-borda: rgba(15, 23, 42, 0.08);
  --vidro-sombra: 0 1px 3px rgba(15, 23, 42, 0.06);
  --menu-hover: rgba(15, 23, 42, 0.04);
  --nav-texto: #475569;
  --nav-texto-hover: #0f172a;
  --nav-ativo-fundo: rgba(99, 102, 241, 0.12);
  --nav-ativo-texto: #312e81;
  --nav-ativo-icone: #4f46e5;
  --cartao-linha-fundo: rgba(255, 255, 255, 0.75);
  --cartao-linha-borda: rgba(15, 23, 42, 0.08);
  --cartao-linha-divisor: rgba(15, 23, 42, 0.06);
  --modal-fundo: rgba(15, 23, 42, 0.45);
}

/* Texto do botão colorido: no tema claro o "text-white" viraria quase
   preto, e preto sobre índigo não se lê. Estes botões guardam o branco. */
:root[data-tema="claro"] .bg-indigo-600,
:root[data-tema="claro"] .bg-indigo-500,
:root[data-tema="claro"] .bg-red-500,
:root[data-tema="claro"] .bg-green-500 {
  color: #ffffff;
}

/* Caixa de marcar e radio: o "accent-color" é o que faz o quadradinho
   marcado sair no índigo do sistema nos DOIS temas — sem isso o navegador
   escolhe um azul dele. */
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--c-indigo-500)); }

/* ---------- materiais do painel ---------- */
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.gradient-bg { background: var(--fundo-painel); }
.gradient-login { background: var(--fundo-login); }

.glass-panel {
  background: var(--vidro-fundo);
  backdrop-filter: blur(12px);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra);
}

/* Modal: nasce escondido e só aparece quando ganha a classe "active". */
.modal {
  display: none;
  position: fixed;
  z-index: 50;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: var(--modal-fundo);
}
.modal.active { display: flex; }

.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.875rem; border-radius: 0.625rem;
  color: var(--nav-texto); font-size: 0.875rem; font-weight: 500;
  transition: background-color .15s, color .15s;
}
.nav-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.nav-link:hover { background: var(--menu-hover); color: var(--nav-texto-hover); }
.nav-link.nav-active { background: var(--nav-ativo-fundo); color: var(--nav-ativo-texto); }
.nav-link.nav-active svg { color: var(--nav-ativo-icone); }

/* Tabelas: viram cards empilhados abaixo de lg (mesma quebra da sidebar).
   Cada <td> precisa de data-label="Coluna" para mostrar o rótulo. */
@media (max-width: 1023px) {
  .responsive-table thead { display: none; }
  .responsive-table tr {
    display: block;
    background: var(--cartao-linha-fundo);
    border: 1px solid var(--cartao-linha-borda);
    border-radius: 0.625rem;
    margin-bottom: 0.625rem;
    padding: 0.25rem 0;
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem !important;
    text-align: right;
    border: none;
    max-width: none !important;
  }
  .responsive-table td + td { border-top: 1px solid var(--cartao-linha-divisor); }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgb(var(--c-gray-400));
    text-align: left;
    flex: 0 0 auto;
  }
  .responsive-table td .flex { flex-wrap: wrap; justify-content: flex-end; }
  .responsive-table td[colspan] { justify-content: center; text-align: center; }
  .responsive-table td[colspan]::before { display: none; }
}

/* No celular, campo com letra menor que 16px faz o iPhone dar zoom
   sozinho ao tocar — o que desalinha a tela toda. */
@media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } }

/* Trava: nada empurra a página para os lados.
   É `clip`, não `hidden`, DE PROPÓSITO: com `hidden` o navegador cria uma
   caixa de rolagem escondida no <body>, e isso QUEBRA o "sticky" — foi o
   defeito de 28/08/2026, em que a barra de cima e o menu subiam junto com
   a página. O `clip` corta o que passa dos lados sem criar essa caixa. */
html, body { max-width: 100%; overflow-x: clip; }
select, input, textarea { max-width: 100%; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Os dois ícones do botão de tema: o do sol aparece no escuro (é para onde
   o clique leva), o da lua aparece no claro. */
:root[data-tema="claro"] .so-escuro { display: none; }
.so-claro { display: none; }
:root[data-tema="claro"] .so-claro { display: inline; }

/* ------------------------------------------------------------
   SEÇÃO: título fora, grupo dentro, explicação embaixo
   ------------------------------------------------------------
   Estas quatro classes existem porque o visual da Apple põe o TÍTULO DA
   SEÇÃO FORA da caixa, e o `.glass-panel` guarda o título dentro. Não dá
   para mudar isso só no CSS: é onde a etiqueta está escrita no HTML.

   Então a tela passa a escrever assim:

	<section class="secao">
	  <h2 class="titulo-de-secao">Cotação usada nesta conta</h2>
	  <div class="grupo"> ...as linhas... </div>
	  <p class="rodape-de-secao">A explicação que antes ficava no meio.</p>
	</section>

   AQUI, no visual original, elas ficam parecidas com o que já existia — o
   título é um texto forte e o grupo é o mesmo painel de vidro. Quem muda a
   cara delas de verdade é o `apple.css`, e só quando o projeto liga
   `VISUAL=apple`.

   Assim a mesma tela serve aos dois visuais, sem `{{if}}` no template.
   ------------------------------------------------------------ */
.secao { margin-bottom: 1.5rem; }

.titulo-de-secao {
  font-weight: 600;
  color: rgb(var(--c-white));
  margin-bottom: 0.5rem;
}

.grupo {
  background: var(--vidro-fundo);
  backdrop-filter: blur(12px);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-sombra);
  border-radius: 0.75rem;
  overflow: hidden;
}

.rodape-de-secao {
  font-size: 0.8125rem;
  color: rgb(var(--c-gray-500));
  margin-top: 0.5rem;
}

/* A LINHA da lista.

   O FILETE FICA NO TOPO DE TODA LINHA, E SOME NA PRIMEIRA — e não "entre
   irmãos vizinhos". O motivo é prático: uma linha que é um botão precisa de
   um <form> em volta, e aí ela deixa de ser irmã das outras. Com a regra de
   vizinhança, o filete daquela linha sumia sem explicação. Assim funciona
   esteja ela solta ou embrulhada. */
.grupo .linha {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  min-height: 44px;
  border-top: 1px solid var(--vidro-borda);
}

.grupo > .linha:first-child,
.grupo > :first-child .linha {
  border-top: none;
}

/* ------------------------------------------------------------
   A BARRA DE ABAS, NO CELULAR
   ------------------------------------------------------------
   As telas do módulo em que a pessoa está, embaixo, sempre visíveis. No
   computador ela não aparece: lá o menu lateral já faz o serviço.

   O desenho fica aqui, e não só no apple.css, porque a navegação não é
   enfeite: sem ela, quem abre o sistema pelo telefone entra numa tela de
   manutenção e não acha o caminho de volta. Isso vale para os três sistemas
   que rodam este core, com ou sem o visual da Apple.
   ------------------------------------------------------------ */
.barra-de-abas { display: none; }

@media (max-width: 767px) {
  .barra-de-abas {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--vidro-fundo);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--vidro-borda);
    /* A FAIXA DO IPHONE. Sem isto, a última aba fica embaixo da barrinha
       de "arrastar para fechar" e o toque vai para o sistema, não para nós. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .barra-de-abas .aba {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px 4px;
    min-height: 49px;
    font-size: 10px;
    line-height: 13px;
    color: rgb(var(--c-gray-500));
    text-align: center;
    /* Rótulo que quebra em duas linhas some numa barra de 49px de altura. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .barra-de-abas .aba svg {
    width: 24px;
    height: 24px;
    flex: none;
  }

  .barra-de-abas .aba-atual { color: rgb(var(--c-indigo-400)); }

  /* O conteúdo precisa de espaço para não ficar embaixo da barra. Sem isto,
     o último item da tela existe mas mora atrás dos botões. */
  /* O ESPAÇO NÃO É SÓ PARA O CONTEÚDO CABER — É PARA ELE RESPIRAR.

     Com 60px, o último botão da tela ficava encostado na barra de baixo,
     dando a impressão de que os dois eram a mesma faixa. O Kaique circulou
     o "Salvar configuração" nessa situação.

     Agora são 60 da barra mais 24 de folga. É a mesma distância que separa
     uma seção da outra, então o fim da tela parece o fim da tela. */
  body:has(.barra-de-abas) main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* O RODAPÉ DA SEÇÃO QUANDO ALGO DEU ERRADO.
   Mesmo lugar e mesmo tamanho do rodapé comum — só a cor muda. É de
   propósito: o recado explica AQUELE campo, então ele mora onde a
   explicação daquele campo já morava. */
.rodape-de-secao.deu-errado { color: rgb(var(--c-red-400)); }

/* ------------------------------------------------------------
   AS AÇÕES DA TELA, NO CELULAR
   ------------------------------------------------------------
   Os mesmos botões do cabeçalho, desenhados de novo logo abaixo dele. No
   computador esta faixa não existe e os botões ficam em cima, como sempre.

   O motivo é medido, não de gosto: num cabeçalho de 390px os botões comem o
   espaço do título, e a tela de "Envios" vira "E".
   ------------------------------------------------------------ */
.acoes-no-celular { display: none; }

@media (max-width: 767px) {
  .acoes-no-celular {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    /* ELA GRUDA LOGO ABAIXO DO CABEÇALHO, E NÃO SAI ROLANDO.
       O Kaique viu: "esses botões ali voando, quando dou scroll some". O
       cabeçalho é grudado (sticky) e ela não era — então a pessoa rolava um
       pouco e a ação da tela ia embora, enquanto o título ficava.
       Os 64px são a altura do cabeçalho (a classe h-16). */
    position: sticky;
    top: 64px;
    z-index: 29;
    /* ROLA DE LADO EM VEZ DE ESPREMER. Com três botões numa tela estreita,
       espremer corta o último pela metade; rolar deixa ele alcançável. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .acoes-no-celular::-webkit-scrollbar { display: none; }
  /* BARRA SEM BOTÃO NENHUM NÃO EXISTE.

     `:empty` não resolve: o bloco do template deixa espaços e comentários
     dentro da div, e para o CSS isso já é "conteúdo" — sobrava uma faixa de
     17px em nove telas, com nada dentro. `:not(:has(*))` pergunta o que
     importa: "não tem nenhum ELEMENTO aqui dentro?". */
  .acoes-no-celular:empty,
  .acoes-no-celular:not(:has(*)) { display: none; }
  /* ...E NEM QUANDO TODOS OS BOTÕES ESTÃO ESCONDIDOS AQUI.

     A regra de cima pergunta se existe elemento dentro. Não basta: uma tela
     cujo único botão é `hidden md:inline-flex` — porque no celular a barra de
     abas já leva àquele lugar — TEM um elemento, que não aparece. A faixa de
     17px vazia voltou por essa porta, na tela de um levantamento guardado.

     Esta pergunta o que interessa: "não tem nenhum filho que apareça?". */
  .acoes-no-celular:not(:has(> :not(.hidden))) { display: none; }
  .acoes-no-celular > * { flex: none; }

  /* E somem de cima, para o título ter a linha inteira. */
  header .acoes-do-topo { display: none; }
}

/* ------------------------------------------------------------
   O GRUPO LADO A LADO (só no computador)
   ------------------------------------------------------------
   Três números curtos empilhados desperdiçam a largura de uma tela grande,
   e empilhados no celular é justamente o que se quer. Então: lista no
   telefone, colunas no computador.

   O detalhe que a primeira versão errou: as linhas continuavam com o filete
   EM CIMA, e lado a lado isso vira um risco solto sobre a segunda e a
   terceira coluna. Deitado, o filete tem de ficar ENTRE as colunas.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .grupo-lado-a-lado {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .grupo-lado-a-lado > .linha { border-top: none; }
  .grupo-lado-a-lado > .linha + .linha { border-left: 1px solid var(--vidro-borda); }
}

/* ------------------------------------------------------------
   A BARRA DE FERRAMENTAS, NO CELULAR
   ------------------------------------------------------------
   As ações da tela, embaixo, nas telas que NÃO têm barra de abas — as da
   plataforma (Usuários, Acessos, Meu perfil), que não pertencem a módulo
   nenhum.

   Por que embaixo e não em cima: é onde o polegar alcança. E porque a
   documentação da Apple define a toolbar como "controls arranged
   horizontally along the top or bottom edge of the view" — nas telas com
   abas, a base já está ocupada e as ações sobem; aqui a base está livre.
   ------------------------------------------------------------ */
.barra-de-ferramentas { display: none; }

@media (max-width: 767px) {
  .barra-de-ferramentas {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.5rem 1rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--vidro-fundo);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--vidro-borda);
    /* Com muitos botões ela rola, em vez de espremer. */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .barra-de-ferramentas::-webkit-scrollbar { display: none; }
  /* Mesmo caso da faixa de cima: sem botão, ela não existe. */
  .barra-de-ferramentas:empty,
  .barra-de-ferramentas:not(:has(*)) { display: none; }
  .barra-de-ferramentas > * { flex: none; }

  /* O conteúdo precisa de espaço, senão o último item mora atrás dela. */
  body:has(.barra-de-ferramentas:has(*)) main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}