/* =========================================================================
   custom.css — identidade visual do painel (grafite neutro + accent pink)
   Carregado DEPOIS de tabler.min.css: sobrescreve as CSS vars do Tabler.
   Fontes e ícones vendorizados (offline, sem CDN).

   Paleta (derivada da escala "pink" do Tailwind — combinação testada):
     accent   #ec4899 (hover #f472b6 · pressed #db2777)
     fundo    #171a1f · superfície #1e222a · borda #2c313c (cinzas neutros)
     sucesso  #2fb344 · atenção #f59f00 (defaults do Tabler, mantidos)
   ========================================================================= */

/* ---------- Fonte display (títulos, marca, números de indicador) -------- */
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/chakra-petch-500.woff2") format("woff2");
}
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/chakra-petch-600.woff2") format("woff2");
}
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/chakra-petch-700.woff2") format("woff2");
}

/* ---------- Paleta ------------------------------------------------------- */
:root {
    --painel-accent: #ec4899;
    --painel-accent-rgb: 236, 72, 153;
    --painel-accent-hover: #f472b6;
    --painel-accent-pressed: #db2777;
    --painel-tinta: #ffffff;          /* texto sobre superfícies accent */
    --painel-fundo: #171a1f;          /* fundo da página (grafite neutro) */
    --painel-superficie: #1e222a;     /* cards, topbar */
    --painel-superficie-2: #262b35;   /* hover / secundária */
    --painel-sidebar: #14161b;        /* sidebar um passo mais escura */
    --painel-borda: #2c313c;
    --painel-fonte-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
    --painel-sidebar-mini: 4.25rem;   /* largura do menu lateral encolhido */
}

/* ---------- Tema escuro: superfícies e primário --------------------------- */
[data-bs-theme="dark"] {
    --tblr-primary: var(--painel-accent);
    --tblr-primary-rgb: var(--painel-accent-rgb);
    --tblr-primary-fg: var(--painel-tinta);
    --tblr-primary-darken: var(--painel-accent-pressed);
    --tblr-primary-lt: rgba(var(--painel-accent-rgb), 0.12);
    --tblr-primary-text-emphasis: var(--painel-accent-hover);

    --tblr-body-bg: var(--painel-fundo);
    --tblr-body-bg-rgb: 23, 26, 31;
    --tblr-body-color: #d6dae2;
    --tblr-bg-surface: var(--painel-superficie);
    --tblr-bg-surface-secondary: var(--painel-superficie-2);
    --tblr-bg-surface-tertiary: var(--painel-superficie-2);
    --tblr-bg-forms: #1a1e25;
    --tblr-border-color: var(--painel-borda);
    --tblr-border-color-translucent: rgba(255, 255, 255, 0.06);

    --tblr-link-color: var(--painel-accent-hover);
    --tblr-link-color-rgb: 244, 114, 182;
    --tblr-link-hover-color: #f9a8d4;
    --tblr-link-hover-color-rgb: 249, 168, 212;
}

::selection {
    background: var(--painel-accent);
    color: var(--painel-tinta);
}

/* ---------- Tipografia --------------------------------------------------- */
.page-title,
.card-title,
.navbar-brand,
h1, h2, h3 {
    font-family: var(--painel-fonte-display);
    letter-spacing: 0.01em;
}

/* ---------- Marca (sidebar / login) --------------------------------------- */
.marca-painel {
    font-family: var(--painel-fonte-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: #eef1f5;
    text-decoration: none;
}
.marca-painel:hover { color: #ffffff; }
.marca-painel .marca-acento { color: var(--painel-accent); }
.marca-painel .marca-inicial { display: none; }

/* ---------- Sidebar ------------------------------------------------------- */
.navbar-vertical.navbar-expand-lg {
    background: var(--painel-sidebar) !important;
    border-right: 1px solid var(--painel-borda);
}
.navbar-vertical .nav-link {
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.navbar-vertical .nav-link .nav-link-icon { color: inherit; }
.navbar-vertical .nav-item.active .nav-link,
.navbar-vertical .nav-link.active {
    color: var(--painel-accent-hover) !important;
    border-left-color: var(--painel-accent);
    background: linear-gradient(90deg, rgba(var(--painel-accent-rgb), 0.10), transparent 70%);
}
.navbar-vertical .nav-link:hover { color: #ffffff; }

/* Botão de encolher/expandir o menu (rodapé da sidebar). */
.alternar-sidebar {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--painel-borda);
    color: #8b93a1;
    cursor: pointer;
    transition: color 0.15s ease;
}
.alternar-sidebar:hover { color: var(--painel-accent-hover); }
.alternar-sidebar .icon { transition: transform 0.25s ease; }

/* Modo encolhido (só desktop — no mobile o Tabler já vira menu hambúrguer). */
@media (min-width: 992px) {
    body.sidebar-mini .navbar-vertical.navbar-expand-lg { width: var(--painel-sidebar-mini); }
    body.sidebar-mini .navbar-expand-lg.navbar-vertical ~ .navbar,
    body.sidebar-mini .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-left: var(--painel-sidebar-mini);
    }
    body.sidebar-mini .navbar-vertical .nav-link-title { display: none; }
    body.sidebar-mini .navbar-vertical .nav-link { justify-content: center; }
    body.sidebar-mini .navbar-vertical .nav-link .nav-link-icon { margin: 0; }
    body.sidebar-mini .marca-painel .marca-texto { display: none; }
    body.sidebar-mini .marca-painel .marca-inicial { display: inline; }
    body.sidebar-mini .alternar-sidebar .icon { transform: rotate(180deg); }
}

/* Topbar: mesma superfície dos cards, discreta. */
[data-bs-theme="dark"] .navbar:not(.navbar-vertical) {
    background: var(--painel-superficie);
    border-bottom: 1px solid var(--painel-borda);
    min-height: 3.25rem;
}

/* Seletor de tenant (cliente/grupo ativo) na topbar. */
.seletor-tenant select {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
}
.seletor-tenant-ativo {
    border-color: var(--painel-accent) !important;
    color: var(--painel-accent-hover);
    font-weight: 600;
}

/* Chip do usuário logado (inicial no avatar). */
.chip-inicial {
    background: rgba(var(--painel-accent-rgb), 0.18);
    color: var(--painel-accent-hover);
    font-weight: 700;
    font-family: var(--painel-fonte-display);
}

/* ---------- Botões -------------------------------------------------------- */
.btn-primary {
    --tblr-btn-bg: var(--painel-accent);
    --tblr-btn-border-color: var(--painel-accent);
    --tblr-btn-color: var(--painel-tinta);
    --tblr-btn-hover-bg: var(--painel-accent-hover);
    --tblr-btn-hover-border-color: var(--painel-accent-hover);
    --tblr-btn-hover-color: var(--painel-tinta);
    --tblr-btn-active-bg: var(--painel-accent-pressed);
    --tblr-btn-active-border-color: var(--painel-accent-pressed);
    --tblr-btn-active-color: var(--painel-tinta);
    --tblr-btn-disabled-bg: rgba(var(--painel-accent-rgb), 0.4);
    --tblr-btn-disabled-border-color: transparent;
    --tblr-btn-disabled-color: rgba(255, 255, 255, 0.7);
    --tblr-btn-focus-shadow-rgb: var(--painel-accent-rgb);
    font-weight: 600;
}
.btn-primary:hover { box-shadow: 0 2px 10px rgba(var(--painel-accent-rgb), 0.30); }

/* ---------- Foco / formulários ------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--painel-accent-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--painel-accent-rgb), 0.10);
}
.form-check-input:checked {
    background-color: var(--painel-accent);
    border-color: var(--painel-accent);
}
.form-check-input:focus {
    border-color: rgba(var(--painel-accent-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--painel-accent-rgb), 0.10);
}

/* ---------- Tabelas / paginação ------------------------------------------ */
[data-bs-theme="dark"] .table-vcenter tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}
/* `--tblr-dark` (#1f2937) é próximo da própria superfície escura do painel —
   `.bg-dark-lt` (badge "Excluído", "limpa em...") fica quase ilegível sem isto. */
[data-bs-theme="dark"] .badge.bg-dark-lt {
    color: #d1d5db !important;
    background-color: rgba(107, 114, 128, 0.25) !important;
}
.pagination .page-item.active .page-link {
    background: var(--painel-accent);
    border-color: var(--painel-accent);
    color: var(--painel-tinta);
}

/* ---------- Cards ---------------------------------------------------------- */
[data-bs-theme="dark"] .card {
    background: var(--painel-superficie);
    border: 1px solid var(--painel-borda);
}

/* ---------- Dashboard (home) ---------------------------------------------- */
.indicador-numero {
    font-family: var(--painel-fonte-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.1;
    color: #eef1f5;
}
.indicador-rotulo {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #8b93a1;
}
.card-indicador {
    position: relative;
    overflow: hidden;
}
.card-indicador::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--painel-accent), transparent 65%);
    opacity: 0.75;
}

/* Gráfico de barras CSS-only (sincronizações por dia). */
.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    height: 10rem;
}
.grafico-barras .barra {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    text-align: center;
    gap: 0.35rem;
}
.grafico-barras .barra i {
    display: block;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--painel-accent), rgba(var(--painel-accent-rgb), 0.30));
    transition: filter 0.15s ease;
    animation: sobe-barra 0.6s ease both;
}
.grafico-barras .barra:hover i { filter: brightness(1.2); }
.grafico-barras .barra small {
    font-size: 0.68rem;
    color: #8b93a1;
}
@keyframes sobe-barra { from { max-height: 0; } to { max-height: 100%; } }

/* Ponto de status de serviço (verde = online; semântico, não decorativo). */
.dot-status {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}
.dot-status.ok { background: #2fb344; }
.dot-status.atencao { background: #f59f00; }
.dot-status.off { background: #6c7a72; }

/* Entrada escalonada dos cards da home (sutil). */
.entrada-suave { animation: surge 0.4s ease both; }
.entrada-suave:nth-child(2) { animation-delay: 0.05s; }
.entrada-suave:nth-child(3) { animation-delay: 0.10s; }
.entrada-suave:nth-child(4) { animation-delay: 0.15s; }
.entrada-suave:nth-child(5) { animation-delay: 0.20s; }
.entrada-suave:nth-child(6) { animation-delay: 0.25s; }
@keyframes surge {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Página de login ------------------------------------------------ */
.pagina-login {
    background:
        radial-gradient(46rem 24rem at 50% -10%, rgba(var(--painel-accent-rgb), 0.07), transparent 60%),
        var(--painel-fundo);
}
.pagina-login .card {
    border: 1px solid var(--painel-borda);
    border-top: 2px solid var(--painel-accent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- Detalhes ------------------------------------------------------- */
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--painel-fundo); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--painel-borda);
    border-radius: 5px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--painel-accent-rgb), 0.45);
}