/* ============================================================================
 * COCKPIT DARK — overlay de tema escuro/arrojado p/ GPSWOX (carregado por cima
 * do tema base). Ativa por ?ui=cockpit (preview) ou flag global cockpit_dark.
 * Paleta em variáveis; use !important onde precisa vencer estilos inline.
 * ========================================================================== */
:root {
    --ck-bg:        #0f1720;   /* fundo da página */
    --ck-bg-deep:   #0b1119;   /* fundo mais profundo (body/atrás) */
    --ck-card:      #17212e;   /* cards/painéis */
    --ck-card-2:    #1c2836;   /* card elevado / hover */
    --ck-input:     #0f1a24;   /* inputs */
    --ck-border:    #26323f;   /* bordas sutis */
    --ck-border-2:  #33455620; /* divisórias fracas */
    --ck-text:      #c3d0dc;   /* texto padrão */
    --ck-strong:    #eef4fa;   /* texto forte */
    --ck-muted:     #7f8ea0;   /* texto secundário */
    --ck-accent:    #1b99bd;   /* neón de marca */
    --ck-accent-2:  #35c9ee;   /* neón claro (realces) */
    --ck-glow:      rgba(27,153,189,.35);
    --ck-glow-soft: rgba(27,153,189,.14);
}

/* ---- base ---------------------------------------------------------------- */
body, body.admin-layout, .content, .wrapper {
    background: radial-gradient(1200px 600px at 80% -10%, #12202e 0%, var(--ck-bg) 45%, var(--ck-bg-deep) 100%) !important;
    color: var(--ck-text) !important;
}
body { scrollbar-color: #33465a var(--ck-bg-deep); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ck-bg-deep); }
::-webkit-scrollbar-thumb { background: #33465a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #45607a; }

a { color: var(--ck-accent); }
a:hover, a:focus { color: var(--ck-accent-2); }
hr { border-color: var(--ck-border) !important; }
label, .control-label { color: var(--ck-text) !important; }
small, .text-muted, .help-block { color: var(--ck-muted) !important; }

/* ---- topbar (admin usa .navbar-main; front/mapa usa .main-navbar) --------- */
.navbar-main, .header .navbar-main,
.main-navbar, .navbar.main-navbar {
    background: linear-gradient(180deg, #14202d 0%, #0f1a25 100%) !important;
    border-bottom: 1px solid var(--ck-border) !important;
    box-shadow: 0 2px 18px rgba(0,0,0,.45), 0 1px 0 var(--ck-glow-soft) !important;
}
.navbar-main .navbar-text, .navbar-main .navbar-brand,
.main-navbar .navbar-text, .main-navbar .navbar-brand { color: var(--ck-strong) !important; }
.navbar-nav > li > a, .main-navbar .nav > li > a { color: var(--ck-text) !important; }
/* a faixa de itens e os próprios itens ficam transparentes p/ mostrar a barra escura
   (o branco vem do tema pintar navbar-collapse / navbar-nav / os <a>) */
.main-navbar .navbar-collapse, .main-navbar .navbar-nav,
.main-navbar .navbar-nav > li, .main-navbar .navbar-nav > li > a,
#header .main-navbar, #header .main-navbar .navbar-collapse, #header .main-navbar .navbar-nav {
    background-color: transparent !important;
    border-color: var(--ck-border) !important;
}
.main-navbar .navbar-nav > li > a > .text, .main-navbar .navbar-nav > li > a { color: var(--ck-text) !important; }
.main-navbar .navbar-nav > li.active > a, .main-navbar .navbar-nav > li:hover > a,
.main-navbar .navbar-nav > .open > a { color: #fff !important; background-color: rgba(27,153,189,.16) !important; }
.main-navbar .navbar-nav > li > a > .icon { color: var(--ck-accent-2) !important; }
.navbar-nav > li > a:hover, .navbar-nav > li.active > a, .navbar-nav > .open > a,
.main-navbar .nav > li > a:hover, .main-navbar .nav > li.active > a, .main-navbar .nav > .open > a {
    color: #fff !important;
    background: rgba(27,153,189,.14) !important;
}
.navbar-toggle .icon-bar { background: var(--ck-text) !important; }
.badge { background: var(--ck-accent) !important; color: #fff !important; }

/* dropdowns Bootstrap + os dropdowns próprios do front (ul flutuante por id) */
.dropdown-menu, #ferramentas_dropdown, #usuario_dropdown {
    background: var(--ck-card-2) !important;
    border: 1px solid var(--ck-border) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
    border-radius: 10px !important;
}
.dropdown-menu > li > a, #ferramentas_dropdown > li > a, #usuario_dropdown > li > a { color: var(--ck-text) !important; }
.dropdown-menu > li > a:hover,
#ferramentas_dropdown > li > a:hover, #usuario_dropdown > li > a:hover { background: rgba(27,153,189,.16) !important; color: #fff !important; }
.dropdown-menu .divider { background: var(--ck-border) !important; }

/* ícones-sprite do menu do front são PNG escuro (spans VAZIOS) — clarear.
   Os .icon que contêm <i> (Font Awesome) já herdam a cor do texto: NÃO inverter. */
.main-navbar .nav .icon:empty, #ferramentas_dropdown .icon:empty, #usuario_dropdown .icon:empty { filter: invert(1) brightness(1.65); opacity:.92; }

/* ---- painéis / cards ----------------------------------------------------- */
.panel, .panel-default, .plan, .well, .box, .widget {
    background: var(--ck-card) !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.35) !important;
    color: var(--ck-text) !important;
}
.panel-heading {
    background: linear-gradient(180deg, rgba(27,153,189,.08), transparent) !important;
    border-bottom: 1px solid var(--ck-border) !important;
    color: var(--ck-strong) !important;
    border-radius: 12px 12px 0 0 !important;
}
.panel-title, .panel-title * { color: var(--ck-strong) !important; }
.panel-footer { background: var(--ck-card-2) !important; border-top: 1px solid var(--ck-border) !important; }

/* ---- tabelas ------------------------------------------------------------- */
.table, .table-list { color: var(--ck-text) !important; background: transparent !important; }
.table > thead > tr > th, .table-list > thead > tr > th {
    color: var(--ck-muted) !important;
    border-bottom: 1px solid var(--ck-border) !important;
    background: transparent !important;
}
.table > tbody > tr > td, .table-list > tbody > tr > td { border-top: 1px solid var(--ck-border) !important; }
.table-hover > tbody > tr:hover, .table-list > tbody > tr:hover { background: rgba(27,153,189,.07) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }

/* ---- formulários --------------------------------------------------------- */
.form-control, select, textarea, input[type=text], input[type=email],
input[type=password], input[type=number], input[type=search], .bootstrap-select > .btn {
    background: var(--ck-input) !important;
    border: 1px solid var(--ck-border) !important;
    color: var(--ck-text) !important;
    box-shadow: none !important;
}
.form-control:focus, select:focus, textarea:focus, .bootstrap-select.open > .btn {
    border-color: var(--ck-accent) !important;
    box-shadow: 0 0 0 3px var(--ck-glow-soft) !important;
}
.form-control::placeholder { color: #5f6f80 !important; }
.input-group-addon { background: var(--ck-card-2) !important; border-color: var(--ck-border) !important; color: var(--ck-muted) !important; }

/* ---- botões -------------------------------------------------------------- */
.btn-main, .btn-primary, .btn.submit {
    background: linear-gradient(180deg, var(--ck-accent) 0%, #158099 100%) !important;
    border: 1px solid #1887a7 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--ck-glow) !important;
}
.btn-main:hover, .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 20px var(--ck-glow) !important; }
.btn-side, .btn-default, .btn.default {
    background: var(--ck-card-2) !important;
    border: 1px solid var(--ck-border) !important;
    color: var(--ck-text) !important;
}
.btn-side:hover, .btn-default:hover, .btn.default:hover { background: #24323f !important; color: #fff !important; }

/* ---- modais -------------------------------------------------------------- */
.modal-content {
    background: var(--ck-card) !important;
    border: 1px solid var(--ck-border) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.6) !important;
    color: var(--ck-text) !important;
}
.modal-header, .modal-footer { border-color: var(--ck-border) !important; }
.modal-title, .modal-title * { color: var(--ck-strong) !important; }
.modal-backdrop.in { opacity: .7; }

/* ---- alerts / labels ----------------------------------------------------- */
.alert { border: 1px solid var(--ck-border) !important; }
.alert-success { background: rgba(40,167,69,.14) !important; color: #7ee2a0 !important; }
.alert-danger  { background: rgba(220,53,69,.14) !important; color: #ff9aa6 !important; }
.alert-info    { background: rgba(27,153,189,.14) !important; color: #7fd8ee !important; }
.nav-tabs { border-bottom-color: var(--ck-border) !important; }
.nav-tabs > li > a { color: var(--ck-muted) !important; }
.nav-tabs > li.active > a { background: var(--ck-card) !important; border-color: var(--ck-border) var(--ck-border) transparent !important; color: var(--ck-strong) !important; }

/* ---- footer -------------------------------------------------------------- */
#footer { background: transparent !important; color: var(--ck-muted) !important; border-top: 1px solid var(--ck-border) !important; }
#footer a { color: var(--ck-accent); }

/* ---- front / mapa (área do cliente) -------------------------------------- */
.sidebar-content, .sidebar, aside, .map-sidebar, .list-sidebar {
    background: var(--ck-card) !important;
    color: var(--ck-text) !important;
    border-color: var(--ck-border) !important;
}
.leaflet-container { background: #0a1017 !important; }
.leaflet-bar a, .leaflet-control a { background: var(--ck-card-2) !important; color: var(--ck-text) !important; border-color: var(--ck-border) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--ck-card) !important; color: var(--ck-text) !important; }

/* login */
.sign-in-layout { background: radial-gradient(900px 500px at 50% -10%, #16283a, var(--ck-bg-deep)) !important; }
.sign-in-layout .panel, .sign-in-layout .login-box, .sign-in-layout form {
    background: rgba(23,33,46,.92) !important; border: 1px solid var(--ck-border) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px var(--ck-glow-soft) !important;
}

/* ============================================================================
 * MAXGUARDIAN — os cards têm estilos inline (fundo branco). Vencemos com
 * !important e damos o brilho de cockpit aos KPIs.
 * ========================================================================== */
.mg-wrap { --card-bg:var(--ck-card) !important; --card-br:var(--ck-border) !important; --muted:var(--ck-muted) !important; }
.mg-kpi, .sg-kpi, .sc-kpi, .rv-kpi, .rv-card,
.sg-account, .sc-broker, a.mg-kpi, a.sg-kpi, a.sc-kpi, a.rv-kpi {
    background: var(--ck-card) !important;
    border: 1px solid var(--ck-border) !important;
    color: var(--ck-text) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,.35) !important;
}
.mg-kpi:hover, a.sg-kpi:hover, a.sc-kpi:hover, a.rv-kpi:hover, .mg-clickable:hover {
    border-color: var(--ck-accent) !important;
    box-shadow: 0 0 0 1px var(--ck-glow), 0 10px 28px rgba(0,0,0,.5) !important;
}
/* números grandes brilhando */
.mg-kpi .n, .sg-kpi .n, .sc-kpi .n, .rv-kpi .n { text-shadow: 0 0 18px currentColor; }
.rv-kpi .l, .sg-kpi .l, .sc-kpi .l, .mg-kpi .l,
.rv-card h4, .rv-kpi .sub, .rv-money { color: var(--ck-muted) !important; }
.rv-kpi:not(.accent-green):not(.accent-orange):not(.accent-red):not(.accent-gray):not(.accent-blue):not(.hero) .n,
.sg-kpi .n, .sc-kpi .n { color: var(--ck-strong) !important; }

/* barras / trilhos */
.rv-bar-track, .mg-bar-track, .sc-bar-track { background: #0e1822 !important; }
.rv-bar-row:hover, .mg-bar-row:hover { background: rgba(27,153,189,.10) !important; }
.rv-bar-row.active { background: rgba(27,153,189,.16) !important; }

/* tabelas internas do maxguardian */
.rv-table th, .mg-risk-table th { color: var(--ck-muted) !important; }
.rv-table td, .rv-table th, .mg-risk-table td, .mg-risk-table th { border-bottom-color: var(--ck-border) !important; }
.rv-table tbody tr:hover, .mg-risk-table tbody tr:hover { background: rgba(27,153,189,.07) !important; }

/* active de KPI/filtro clicável */
.rv-kpi.hero { box-shadow: 0 0 0 1px rgba(220,53,69,.5), 0 10px 30px rgba(220,53,69,.25) !important; }
a.sg-kpi.sg-active, a.sc-kpi.sc-active { box-shadow: 0 0 0 2px var(--ck-glow) !important; border-color: var(--ck-accent) !important; }

/* pills mantêm cor semântica, só reforço contraste no escuro */
.rv-pill.semchip { background:#233240 !important; color:#9fb0c0 !important; }