/* Facilities Theme */
:root {
    --sidebar-width: 260px;
    --header-height: 70px;
    /* Marca Ipê Digital: o ciano oficial é #35B5E8, claro demais para carregar texto
       branco (2,35:1). Estes dois são o ciano escurecido — matiz e saturação travadas
       (H 197,09 / S 79,6%), só a luminosidade HSL desce. Ver --primary-text abaixo. */
    --primary: #137BA5;        /* L 36% — primeiro degrau acima de 4,5:1 com branco */
    --primary-hover: #116E93;  /* L 32% */

    /* O projeto nunca definiu --bs-primary, então o Bootstrap servia o #0d6efd default
       para ~50 usos: o ipefy consome var(--bs-primary) direto (board, dashboard,
       dropzone, view-switcher) e as utilitárias text-/bg-/border-primary compõem por
       --bs-primary-rgb. Sem estas três linhas o rebranding pararia na borda do tema.
       app.css carrega depois do bootstrap.min.css, então estes valores vencem. */
    --bs-primary: #137BA5;
    --bs-primary-rgb: 19, 123, 165;
    --bs-primary-bg-subtle: rgba(53, 181, 232, 0.15); /* tinta: compõe certo nos dois temas */
}

[data-bs-theme="dark"] {
    /* Os neutros eram todos matiz 240° (azul-violeta), escolhidos para casar com o
       índigo antigo — com o destaque em ciano (197°) eles passavam a ler como roxo.
       Reancorados no grafite oficial da marca (#2F2E2F, praticamente acromático). */
    --bs-body-bg: #1A191A;
    --bs-body-color: #CBC8CB;
    --sidebar-bg: #2F2E2F;  /* grafite OFICIAL */
    --header-bg: #2F2E2F;   /* grafite OFICIAL */
    --card-bg: #2F2E2F;     /* grafite OFICIAL */
    --border-subtle: rgba(255, 255, 255, 0.09); /* superfície mais clara pede borda mais forte */
    --text-heading: #F7F7F8;
    --input-bg: #242324;
    --input-border: rgba(255, 255, 255, 0.14);
    /* `--primary` é fundo de texto branco, então é escuro demais para SER texto.
       Aqui entra o ciano OFICIAL, sem retoque: no tema escuro (o padrão) a marca
       aparece literal. */
    --primary-text: #35B5E8;
    /* Tinta do chip de módulo. Mais fraca que a do tema claro de propósito: sobre
       o grafite, cada ponto de tinta clareia o fundo e come o contraste do texto
       ciano. Em 10% o chip fica em 4,8:1; em 15% (o --bs-primary-bg-subtle) cairia
       para 4,45:1 e reprovaria no texto pequeno. */
    --module-chip-bg: rgba(53, 181, 232, 0.10);
    --module-chip-border: rgba(53, 181, 232, 0.28);
}

[data-bs-theme="light"] {
    --bs-body-bg: #F8F7F8;
    --bs-body-color: #474347;
    --sidebar-bg: #fff;
    --header-bg: #fff;
    --card-bg: #fff;
    --border-subtle: #E7E4E7;
    --text-heading: #2F2E2F; /* grafite OFICIAL como cor de título */
    --input-bg: #fff;
    --input-border: #D3CFD3;
    --primary-text: #106789; /* mesma matiz, L 30% — o ciano literal não passa em fundo claro */
    --module-chip-bg: rgba(53, 181, 232, 0.14);
    --module-chip-border: rgba(19, 123, 165, 0.22);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    /* Exo é a face da marca nova. Medida contra os contornos do logotipo no vetor:
       x-height/cap 0,725 contra 0,710 do original (a Montserrat erra o dobro). Tem
       x-height maior que a Nunito (0,531 vs 0,484 do em), então lê maior no mesmo
       font-size; e é só 7% mais larga, contra 13% da Montserrat.
       Quem carrega este arquivo TEM de carregar a Exo, senão cai em sans-serif. */
    font-family: 'Exo', sans-serif;
    overflow-x: hidden;
}

/* Sidebar */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-subtle);
    z-index: 1000;
    transition: all 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* A goteira é reservada SEMPRE, e a barra é fina.
       Sem isto, abrir um submenu fazia o conteúdo passar da altura da tela, a
       barra de rolagem clássica aparecia por dentro da sidebar e comia 16px —
       e "Gestão de Pessoas", que ocupa 137,7px num espaço de 137,6px, passava
       a quebrar em duas linhas. O menu inteiro pulava a cada clique.
       Com a goteira estável a largura útil não muda mais entre rolando e não
       rolando; com a barra fina sobram 3,9px de folga para o título. É pouco:
       quem for mexer em padding, fonte ou no texto deste item aqui, meça. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

#sidebar .sidebar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#sidebar .sidebar-brand {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

#sidebar .sidebar-menu {
    padding: 0 1rem;
    flex: 1;
}

#sidebar .sidebar-menu .menu-header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #999499;
    font-weight: 600;
    letter-spacing: 0.5px;
}

#sidebar .sidebar-menu .sidebar-item {
    list-style: none;
}

#sidebar .sidebar-menu .sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #ADA8AD;
    text-decoration: none;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

#sidebar .sidebar-menu .sidebar-link:hover,
#sidebar .sidebar-menu .sidebar-link.active {
    /* 0.10 e não 0.15: sobre a sidebar grafite (mais clara que o #1e1e2d antigo) a
       tinta a 0.15 derrubava o ciano para 4,45:1. A 0.10 volta para 4,82:1. */
    background-color: rgba(53, 181, 232, 0.10);
    color: var(--primary-text);
}

#sidebar .sidebar-menu .sidebar-link i {
    font-size: 1.2rem;
    margin-right: 0.75rem;
}

#sidebar .sidebar-menu .sidebar-link i.submenu-arrow {
    font-size: 0.7rem;
    margin-right: 0;
    transition: transform 0.2s ease;
}

#sidebar .sidebar-menu .sidebar-submenu-toggle.collapsed i.submenu-arrow {
    transform: rotate(-90deg);
}

/* Submenu items */
#sidebar .sidebar-submenu {
    list-style: none;
    padding: 0 0 0.25rem 0;
    margin: 0;
}

#sidebar .sidebar-submenu li {
    list-style: none;
}

#sidebar .sidebar-sublink {
    display: block;
    padding: 0.4rem 1rem 0.4rem 3rem;
    color: #999499;
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 0.4rem;
    transition: all 0.15s ease;
}

#sidebar .sidebar-sublink:hover,
#sidebar .sidebar-sublink.active {
    color: var(--primary-text);
    background-color: rgba(53, 181, 232, 0.1);
}

#sidebar .sidebar-sublink.active {
    font-weight: 600;
}

/* Terceiro nível: as telas de cada centro dentro da Central de Ajuda.
   O `.sidebar-submenu` de fora já é escondido inteiro na sidebar minimizada
   (display:none), e o aninhado herda isso — nada a fazer lá. */
#sidebar .sidebar-submenu-nested .sidebar-sublink {
    padding-left: 4.25rem;
    font-size: 0.83rem;
}

/* O item do centro é sublink e toggle ao mesmo tempo: a seta precisa caber na
   linha sem empurrar o rótulo. A rotação quando fechado já vem da regra do
   `.sidebar-submenu-toggle.collapsed`. */
#sidebar .sidebar-sublink.sidebar-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#sidebar .sidebar-sublink.sidebar-submenu-toggle i.submenu-arrow {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

/* Main Content */
#main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 0;
    transition: all 0.3s ease;
}

/* Header */
.page-header {
    background-color: var(--header-bg);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
}

.page-header h3 {
    margin: 0;
    color: var(--text-heading);
    font-weight: 600;
}

/* Page Content */
.page-content {
    padding: 2rem;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.5rem;
}

.card-header h4 {
    margin: 0;
    color: var(--text-heading);
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

/* Stats Cards */
.stats-card {
    /* A ponta clara não pode chegar ao ciano oficial: lá o branco dá 2,35:1. */
    background: linear-gradient(135deg, var(--primary) 0%, #1690C0 100%);
    border: none;
    color: #fff;
}

.stats-card.success {
    background: linear-gradient(135deg, #198754 0%, #28a745 100%);
}

.stats-card.warning {
    background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
    color: #212529;
}

.stats-card.danger {
    background: linear-gradient(135deg, #dc3545 0%, #e15361 100%);
}

.stats-card.info {
    background: linear-gradient(135deg, #0dcaf0 0%, #17a2b8 100%);
}

.stats-card .stats-icon {
    font-size: 2.5rem;
    opacity: 0.7;
}

.stats-card .stats-number {
    font-size: 2rem;
    font-weight: 700;
}

.stats-card .stats-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Tables */
.table {
    color: var(--bs-body-color);
}

.table thead th {
    background-color: rgba(53, 181, 232, 0.1);
    color: var(--text-heading);
    font-weight: 600;
    border-bottom: none;
    padding: 1rem;
}

.table tbody td {
    padding: 1rem;
    border-color: var(--border-subtle);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(53, 181, 232, 0.05);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

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

/* O Bootstrap usa um token só para fundo e para texto. Aqui são cores diferentes: o
   primary é feito para receber texto branco, então COMO texto ele dá 3,41:1 no card
   escuro. Estas duas regras mandam o texto para o token claro. */
.text-primary {
    color: var(--primary-text) !important;
}

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

/* Mesma armadilha do primary, agora no neutro: o `secondary` do Bootstrap
   (#6c757d) COMO texto dá ~2,6:1 sobre o grafite dos cards e some. O efeito
   colateral era de hierarquia, não só de leitura — numa linha de tabela o
   "Editar" ficava menos visível que o "Desligar" em vermelho, ou seja, a ação
   principal apagada e a destrutiva gritando. O rótulo passa a usar a cor do
   corpo (9:1 no escuro) e o preenchimento só aparece no hover. */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--input-border);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-color: var(--text-heading);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--text-heading);
    --bs-btn-active-border-color: var(--bs-secondary-color);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 0.75rem 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(53, 181, 232, 0.25);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Code Badge */
.code-badge {
    background-color: rgba(53, 181, 232, 0.2);
    /* O rosa não sobrevive à tinta ciano (2,99:1) e já reprovava no tema claro (2,87:1). */
    color: var(--text-heading);
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: monospace;
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

/* Pilha de badges numa célula de tabela.

   Badge é inline e o padding vertical do tema (0.5rem) não empurra a linha
   seguinte: a caixa de linha é a do texto (~18px) contra ~34px de badge
   desenhado. Numa pilha que quebra, a segunda fileira sobe por baixo da
   primeira — era o que acontecia na coluna "Acesso" da gestão de usuários.
   Flex + gap dá espaço real nos dois eixos, e `me-1` some junto. */
.badge-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Chip de estado.

   Nasceu como chip de módulo na gestão de usuários e passou a servir também o
   cadastro de colaboradores — a forma é a mesma, então o nome genérico `.chip`
   entra ao lado do antigo em vez de duplicar as regras. `.badge-module`
   continua valendo para não mexer na marcação que já está em produção. */
.badge-module,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.badge-module i,
.chip i {
    font-size: 0.875em;
}

/* Variante da marca.

   O `bg-info` sólido punha texto branco sobre o ciano claro do Bootstrap
   (1,9:1, reprova em qualquer nível) e transformava a tabela numa parede de
   blocos saturados — os acentos que decidem ação (Status, Super admin)
   perdiam a vez. Aqui a marca entra como tinta, com o ciano de leitura que
   o tema já valida nos dois modos: 4,8:1 no escuro, 5,6:1 no claro. */
.badge-module,
.chip-brand {
    background-color: var(--module-chip-bg);
    border: 1px solid var(--module-chip-border);
    color: var(--primary-text);
}

/* Sem cor: "sem módulos", "sem conta vinculada" — é ausência, não destaque. */
.badge-module.is-empty,
.chip-muted {
    background-color: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--bs-secondary-color, var(--bs-body-color));
}

/* Pendência que alguém precisa resolver, como desligamento sem motivo. Os
   tokens do Bootstrap já viram os dois temas sozinhos. */
.chip-warn {
    background-color: transparent;
    border: 1px solid var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* Pagination */
.pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-subtle);
    color: var(--bs-body-color);
}

.pagination .page-link:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Vote Button */
.btn-vote {
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary-text);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.btn-vote:hover,
.btn-vote.voted {
    background-color: var(--primary);
    color: #fff;
}

.btn-vote .vote-count {
    font-weight: 700;
    font-size: 1.25rem;
}

/* Suggestion Card */
.suggestion-card {
    border-left: 4px solid var(--primary);
    transition: all 0.2s ease;
}

.suggestion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}

.suggestion-card.complaint {
    border-left-color: #ffc107;
}

/* Alert Banner */
.alert-banner {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
    color: #212529;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.alert-banner i {
    font-size: 1.5rem;
}

/* Sidebar Collapsed */
:root {
    --sidebar-collapsed-width: 68px;
}

#sidebar .sidebar-collapse-btn {
    background: none;
    border: none;
    color: #ADA8AD;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

#sidebar .sidebar-collapse-btn:hover {
    background-color: rgba(53, 181, 232, 0.10);
    color: var(--primary-text);
}

#sidebar .sidebar-collapse-btn i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width);
    overflow-x: hidden;
    /* Minimizada, o trilho tem 68px e só mostra ícones centralizados: reservar
       a goteira ali tiraria 12px de um lado só e jogaria os ícones para a
       esquerda. Aqui não há texto para quebrar, então não há o que proteger. */
    scrollbar-gutter: auto;
}

body.sidebar-collapsed #sidebar .sidebar-brand span,
body.sidebar-collapsed #sidebar .sidebar-link span,
body.sidebar-collapsed #sidebar .sidebar-link .submenu-arrow,
body.sidebar-collapsed #sidebar .sidebar-submenu,
body.sidebar-collapsed #sidebar .sidebar-collapse-btn span {
    display: none;
}

body.sidebar-collapsed #sidebar .sidebar-header {
    padding: 1.5rem 0;
    justify-content: center;
}

body.sidebar-collapsed #sidebar .sidebar-brand {
    justify-content: center;
}

body.sidebar-collapsed #sidebar .sidebar-brand .me-2 {
    margin-right: 0 !important;
}

body.sidebar-collapsed #sidebar .sidebar-menu {
    padding: 0 0.5rem;
}

body.sidebar-collapsed #sidebar .sidebar-link {
    justify-content: center;
    padding: 0.75rem;
}

body.sidebar-collapsed #sidebar .sidebar-link i {
    margin-right: 0;
    font-size: 1.3rem;
}

body.sidebar-collapsed #sidebar .sidebar-collapse-btn {
    justify-content: center;
}

body.sidebar-collapsed #sidebar .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

body.sidebar-collapsed #main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Tooltip for collapsed sidebar */
body.sidebar-collapsed #sidebar .sidebar-link {
    position: relative;
}

body.sidebar-collapsed #sidebar .sidebar-item:hover .sidebar-link::after {
    content: attr(data-title);
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) - 8px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-subtle);
    color: var(--bs-body-color);
    padding: 0.4rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 992px) {
    #sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }

    #sidebar.show {
        transform: translateX(0);
    }

    #main-content {
        margin-left: 0 !important;
    }

    body.sidebar-collapsed #sidebar .sidebar-brand span,
    body.sidebar-collapsed #sidebar .sidebar-link span,
    body.sidebar-collapsed #sidebar .sidebar-link .submenu-arrow,
    body.sidebar-collapsed #sidebar .sidebar-submenu,
    body.sidebar-collapsed #sidebar .sidebar-collapse-btn span {
        display: initial;
    }

    body.sidebar-collapsed #sidebar .sidebar-link {
        justify-content: initial;
        padding: 0.75rem 1rem;
    }

    body.sidebar-collapsed #sidebar .sidebar-link i {
        margin-right: 0.75rem;
        font-size: 1.2rem;
    }

    .sidebar-collapse-btn {
        display: none !important;
    }
}

/* Auth Pages */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-logo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2rem;
    text-align: center;
}

/* User Dropdown */
.user-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
    text-decoration: none;
}

.user-dropdown .dropdown-toggle:hover {
    color: #fff;
}

.user-dropdown .dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-subtle);
}

.user-dropdown .dropdown-item {
    color: var(--bs-body-color);
}

.user-dropdown .dropdown-item:hover {
    background-color: rgba(53, 181, 232, 0.1);
    color: #fff;
}

/* Filters Card */
.filters-card {
    background-color: rgba(53, 181, 232, 0.05);
}

/* Status Colors */
.status-new { color: #6c757d; }
.status-analyzing { color: #0dcaf0; }
.status-planned { color: #0d6efd; }
.status-in_development { color: #ffc107; }
.status-completed { color: #198754; }
.status-denied { color: #dc3545; }

/* Theme-aware text utilities */
.text-heading { color: var(--text-heading) !important; }

/* Light theme sidebar adjustments */
[data-bs-theme="light"] #sidebar .sidebar-brand { color: #212529; }
[data-bs-theme="light"] #sidebar .sidebar-menu .sidebar-link { color: #595459; }
[data-bs-theme="light"] #sidebar .sidebar-menu .sidebar-link:hover,
[data-bs-theme="light"] #sidebar .sidebar-menu .sidebar-link.active { color: var(--primary-text); }
[data-bs-theme="light"] #sidebar .sidebar-sublink { color: #6D6E6E; } /* cinza de apoio OFICIAL */
[data-bs-theme="light"] #sidebar .sidebar-sublink:hover,
[data-bs-theme="light"] #sidebar .sidebar-sublink.active { color: var(--primary-text); }
[data-bs-theme="light"] .page-header { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-bs-theme="light"] .user-dropdown .dropdown-toggle { color: #555; }
[data-bs-theme="light"] .user-dropdown .dropdown-toggle:hover { color: #212529; }
[data-bs-theme="light"] .user-dropdown .dropdown-item { color: #555; }

/* Loading Spinner */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 25, 26, 0.9); /* = --bs-body-bg do tema escuro */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}