/* =====================================================================
   IBO PANEL — TEMA "GLOBAL WEB STYLE" (v2)

   Estratégia: em vez de sobrescrever cada componente individualmente,
   ligamos o dark mode NATIVO do Metronic (includes/layout.php ->
   defaultThemeMode = "dark") e só trocamos as variáveis que ele já
   expõe. Isso garante que TODO componente (dropdown, alerta, paginação,
   tooltip, modal, datatable...) fique consistente, não só os que a
   gente lembrou de estilizar manualmente.
   ===================================================================== */

/* ---------- Formas: cantos arredondados em tudo, de uma vez só ---------- */
:root {
    --bs-border-radius: 0.85rem;
    --bs-border-radius-sm: 0.6rem;
    --bs-border-radius-lg: 1.15rem;
    --bs-border-radius-xl: 1.4rem;
    --bs-card-border-radius: 1.15rem;
    --bs-btn-border-radius: 999px;
    --bs-badge-border-radius: 999px;
}

/* ---------- Paleta: sobrescreve as variáveis do dark mode nativo ---------- */
/* Paleta fixa e incondicional: aplica sempre, independente do que o
   navegador tenha salvo em localStorage para o toggle claro/escuro do
   Metronic. Isso garante que o painel SEMPRE fique nesse visual. */
:root {
    /* fundo geral / login / header / sidebar (hooks nativos do Metronic) */
    --bs-app-bg-color: #121828;
    --bs-app-blank-bg-color: #121828;
    --bs-app-header-sticky-bg-color: #1a2338;
    --bs-app-header-base-bg-color: #1a2338;
    --bs-app-sidebar-base-bg-color: #182034;
    --bs-app-sidebar-panel-base-bg-color: #182034;

    --bs-body-bg: #121828;
    --bs-body-color: #f2f4f9;
    --bs-card-bg: #1e2740;
    --bs-border-color: #2c3650;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);

    /* cor de destaque (accent) usada em botões, links, focos, checkboxes... */
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-primary-text-emphasis: #7fb2fb;
}

html, body { background-color: var(--bs-app-bg-color) !important; }

/* Garante que NENHUM container intermediário (wrapper/main/content) volte a
   ficar branco - o fundo escuro do body precisa aparecer por trás de tudo. */
#kt_app_root,
.app-page,
#kt_app_page,
.app-wrapper,
#kt_app_wrapper,
.app-main,
#kt_app_main,
.app-content,
#kt_app_content,
#kt_app_content_container,
.app-footer,
#kt_app_footer {
    background-color: transparent !important;
}

.text-gray-900 { color: var(--bs-body-color) !important; }

/* Brilho decorativo sutil no fundo, sem interferir em nenhum componente */
#kt_app_root {
    position: relative;
    background:
        radial-gradient(900px 500px at 8% -5%, rgba(59, 130, 246, 0.14), transparent 60%),
        radial-gradient(900px 600px at 105% 15%, rgba(236, 72, 153, 0.08), transparent 55%),
        transparent !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232a40; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2d3654; }

/* ================= Sidebar: agrupamento e item ativo ================= */
.menu-item .menu-heading,
.menu-content .menu-heading {
    color: #5b6377 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.menu-link {
    border-radius: var(--bs-border-radius) !important;
    transition: all 0.2s ease !important;
}

.menu-link.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(99, 102, 241, 0.10)) !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.menu-link.active .menu-title { color: #fff !important; }

/* ================= Header ================= */
.app-header {
    background: linear-gradient(90deg, #0c1a14 0%, var(--bs-app-header-sticky-bg-color) 55%) !important;
}

.app-navbar-item .btn-icon {
    border-radius: 999px !important;
    background-color: rgba(255, 255, 255, 0.04);
}

/* ================= Botões: gradientes por cima da base já correta ================= */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    border: none !important;
    box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.55);
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%) !important;
    border: none !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%) !important;
    border: none !important;
}

/* ================= Badges: chips estilo "Validade: Vitalício" ================= */
.badge { padding: 0.5em 1em !important; font-weight: 600 !important; }
.badge-light-primary { background-color: rgba(59, 130, 246, 0.16) !important; color: #7fb2fb !important; }
.badge-light-info    { background-color: rgba(6, 182, 212, 0.16) !important; color: #5fd7ea !important; }
.badge-light-success { background-color: rgba(16, 185, 129, 0.16) !important; color: #5fe8c2 !important; }
.badge-light-warning { background-color: rgba(245, 158, 11, 0.16) !important; color: #fbc369 !important; }
.badge-light-danger  { background-color: rgba(244, 63, 94, 0.16) !important; color: #fb90a4 !important; }

/* ================= Cards ================= */
.card { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.55) !important; }

/* Utilitário opcional para um card "hero" com gradiente, se quiser usar em alguma página */
.card-gradient-hero {
    background: linear-gradient(135deg, #3b5bfd 0%, #7c3aed 55%, #ec4899 100%) !important;
    border: none !important;
    color: #fff !important;
}
.card-gradient-hero .text-muted { color: rgba(255, 255, 255, 0.75) !important; }

/* ================= Mini-card de estatística (opcional, para usar em qualquer página) ================= */
.stat-tile {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-card-border-radius);
    padding: 20px;
}
.stat-tile .stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--bs-border-radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(59, 130, 246, 0.16);
    color: #7fb2fb;
}
.stat-tile .stat-value { font-size: 1.6rem; font-weight: 800; }
.stat-tile .stat-label { font-size: 0.78rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: 0.04em; }