/* ==========================================================================
   admin-refresh.css  -  Refresh visual da area restrita (menu_restrito.master)

   Carregado por ULTIMO no <head> do master, depois do <style> inline, para
   ter prioridade de cascata sem precisar de !important em tudo.

   Cobre:
   - fonte nova (Poppins + Roboto) em todo o back-office
   - fundo solido (sem imagem de textura)
   - barra do topo: logo com respiro
   - menu lateral mais clean/flat
   - cards de contadores do painel_gestor (Denuncias, Reclamacoes, ...)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIPOGRAFIA
   Poppins para titulos, Roboto para corpo. O <link> das fontes esta no
   <head> do menu_restrito.master.
   -------------------------------------------------------------------------- */
body,
.btn,
.form-control,
input,
button,
select,
textarea,
.dropdown-menu,
table,
.panel {
    font-family: 'Roboto', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.panel-title,
.panel-title-big,
.page-header,
.navbar-brand {
    font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   2. FUNDO  -  cor solida clean, sem fundo.jpg
   -------------------------------------------------------------------------- */
body {
    background: #eef1f5 !important;
    background-image: none !important;
    color: #384250;
}

#page-wrapper,
#page-wrapper-cadastro {
    background: transparent;
}

/* --------------------------------------------------------------------------
   3. TIER 1  -  barra superior (marca + conta), fixa
   -------------------------------------------------------------------------- */
#navbar.navbar-default {
    background-color: #1b2530;
    min-height: 56px;
    box-shadow: none;
}

#navbar .navbar-header {
    padding-left: 22px;
}

#navbar .margin_logo {
    height: 30px;
    width: auto;
    margin: 13px 0 0 0;
}

#navbar .navbar-top-links > li > a {
    padding: 17px 13px;
    color: rgba(255, 255, 255, .75);
}
#navbar .navbar-top-links .fa-2x {
    font-size: 1.5em;
}
#navbar .navbar-top-links > li > a:hover,
#navbar .navbar-top-links > li > a:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

/* cabecalho do dropdown de conta: nome + setor */
.dropdown-user .dropdown-user-head {
    padding: 12px 16px 10px;
    line-height: 1.3;
}
.dropdown-user .dropdown-user-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1f2d3d;
}
.dropdown-user .dropdown-user-setor {
    display: block;
    font-size: 12px;
    color: #7b8794;
}

/* --------------------------------------------------------------------------
   3b. Dropdowns da barra de conta (avaliacoes / notificacoes / minha conta)
   Os gatilhos ficam no canto direito. Com o Popper do BS4 o menu abria
   alinhado a ESQUERDA do gatilho e vazava para fora da tela, cortando o
   conteudo. Os toggles agora tem data-display="static" (sem Popper) e o
   menu e ancorado a direita, com largura fixa, quebra de linha e rolagem.
   -------------------------------------------------------------------------- */
#navbar .navbar-top-links > li.dropdown > .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}
#navbar .navbar-top-links .dropdown-menu.dropdown-alerts {
    width: 320px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 130px);
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
}
#navbar .navbar-top-links .dropdown-menu.dropdown-alerts > li,
#navbar .navbar-top-links .dropdown-menu.dropdown-alerts > li > a,
#navbar .navbar-top-links .dropdown-menu.dropdown-alerts > li > div {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
#navbar .navbar-top-links .dropdown-menu.dropdown-user {
    width: 230px;
}

/* --------------------------------------------------------------------------
   4. TIER 2  -  menu horizontal, fixo abaixo do tier 1
   -------------------------------------------------------------------------- */
#wrapper {
    margin-top: 102px !important;
}

/* Modais: o header fixo (tier1 56 + menu 46 = 102px) cobre o topo da
   viewport, entao o dialog abre logo abaixo dele (e nao atras). */
.modal-dialog {
    margin-top: 114px;
    margin-bottom: 32px;
}

/* Largura maxima do conteudo (nao ocupa 100% da tela em monitores grandes).
   ~container do Bootstrap. Mude AQUI para ajustar em TODAS as telas do
   back-office (ex.: 1200px, 1140px, 1440px). */
:root {
    --fiscale-container: 1320px;
}
#page-wrapper,
#page-wrapper-cadastro {
    max-width: var(--fiscale-container);
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 26px 28px 48px !important;
    min-height: calc(100vh - 130px);
}

.main-menu {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 1020;
    height: 46px;
    background: #ffffff;
    border-bottom: 1px solid #e2e6ec;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}

.main-menu-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    list-style: none;
    overflow-x: auto;   /* menu ocupa a largura toda: com 9 itens longos nao cabe em 1320px */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.main-menu-list::-webkit-scrollbar { height: 0; }
.main-menu-list { scrollbar-width: none; }

.main-menu-list > li.item_menu {
    position: relative;
    display: flex;
    align-items: stretch;
    background: transparent !important;
    border: 0 !important;
}

.main-menu-list > li.item_menu > a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 46px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 500;
    color: #4a5768 !important;
    border-bottom: 3px solid transparent;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.main-menu-list > li.item_menu > a .fa {
    margin-right: 8px;
    font-size: 14px;
    color: #90a0b3;
    transition: color .12s ease;
}
.main-menu-list > li.item_menu > a .fa + .fa {
    margin-right: 8px;
    margin-left: -4px;
}
.main-menu-list > li.item_menu > a:hover,
.main-menu-list > li.item_menu > a:focus {
    color: #1b2530 !important;
    background-color: #f3f6f9;
    text-decoration: none;
}
.main-menu-list > li.item_menu > a:hover .fa {
    color: #2f80ed;
}

/* item da pagina atual (marcado via JS) */
.main-menu-list > li.item_menu.active > a {
    color: #1b2530 !important;
    border-bottom-color: #2f80ed;
}
.main-menu-list > li.item_menu.active > a .fa {
    color: #2f80ed;
}

/* caret dos itens com submenu */
.main-menu-list .sub-caret {
    margin-left: 7px;
    margin-right: 0 !important;
    font-size: 11px !important;
    color: #b3bfce !important;
    transition: transform .15s ease;
}
.main-menu-list .has-sub.open .sub-caret {
    transform: rotate(180deg);
}
.main-menu-list .has-sub.open > a.sub-toggle {
    color: #1b2530 !important;
    background-color: #f3f6f9;
    border-bottom-color: #2f80ed;
}

/* painel do submenu (Cadastros / Relatorios) - position:fixed p/ escapar
   do overflow da barra; o left/top e ajustado por JS ao abrir */
.main-menu-list .has-sub > .menu {
    position: fixed;
    top: 102px;
    left: 0;
    min-width: 250px;
    padding: 6px 0;
    background: #ffffff;
    border: 1px solid #e2e6ec;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
    display: none;
}
.main-menu-list .has-sub.open > .menu {
    display: block;
}
/* neutraliza o .collapse{display:none} do BS4 dentro do dropdown */
.main-menu-list .has-sub > .menu > ul.collapse {
    display: block !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent !important;
}
.main-menu-list .lileft {
    background: transparent !important;
    border: 0 !important;
}
.main-menu-list .lileft > a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    color: #4a5768 !important;
    white-space: nowrap;
}
.main-menu-list .lileft > a:hover {
    background-color: #f3f6f9;
    color: #1b2530 !important;
    text-decoration: none;
}

/* badges de contagem no item "Manutencoes" */
.main-menu-list .item_menu > a .label {
    font-size: 10px;
    padding: .18em .4em;
    margin-left: 3px;
    vertical-align: middle;
}

/* botao hamburger - so aparece no mobile */
.main-menu-toggle {
    display: none;
    height: 46px;
    padding: 0 16px;
    background: transparent;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4a5768;
}
.main-menu-toggle .fa { color: #2f80ed; }

/* --------------------------------------------------------------------------
   4b. TIER 2 responsivo  (< 992px vira menu colapsavel)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    #wrapper { margin-top: 102px !important; }
    #page-wrapper,
    #page-wrapper-cadastro { padding: 16px 14px 32px !important; }

    /* mantem logo + icones de conta na mesma faixa de 56px no mobile */
    #navbar .navbar-header { float: left; }
    #navbar .navbar-top-links { float: right; }
    #navbar .navbar-top-links > li > a { padding: 17px 9px; }

    .main-menu { height: 46px; }
    .main-menu-toggle { display: inline-flex; align-items: center; }

    .main-menu-list {
        position: absolute;
        top: 46px;
        left: 0;
        right: 0;
        height: auto;
        max-height: calc(100vh - 102px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 4px 0 8px;
        background: #fff;
        border-bottom: 1px solid #e2e6ec;
        box-shadow: 0 14px 28px rgba(16, 24, 40, .16);
        display: none;
    }
    .main-menu-list.open { display: flex; }

    .main-menu-list > li.item_menu { display: block; }
    .main-menu-list > li.item_menu > a {
        height: auto;
        padding: 12px 20px;
        border-bottom: 1px solid #eef1f4;
        border-left: 3px solid transparent;
    }
    .main-menu-list > li.item_menu.active > a {
        border-bottom-color: #eef1f4;
        border-left-color: #2f80ed;
    }
    .main-menu-list .has-sub.open > a.sub-toggle {
        border-bottom-color: #eef1f4;
        border-left-color: #2f80ed;
    }
    .main-menu-list .has-sub > .menu {
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f7f9fb;
    }
    .main-menu-list .lileft > a { padding-left: 44px; }
}

/* --------------------------------------------------------------------------
   5. PAINEIS (cards) da area restrita  -  um pouco mais suaves
   -------------------------------------------------------------------------- */
#page-wrapper .panel,
#page-wrapper-cadastro .panel {
    border: 1px solid #e4e8ee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
#page-wrapper .panel-primary,
#page-wrapper-cadastro .panel-primary {
    border-color: #dbe3ec;
}
#page-wrapper .panel-primary > .panel-heading {
    background-color: #2f80ed;
    border-color: #2f80ed;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.page-header {
    font-weight: 600;
    color: #1f2d3d;
}

/* --------------------------------------------------------------------------
   6. CARDS DE CONTADORES do painel_gestor
   Markup (montado em painel_gestor.aspx.cs):
     <div class="col-sm-6 col-md-3 col-lg-2">
       <a id="denuncia" class="btn btn-danger btn-block" ...>
         <i class="fa fa-bullhorn fa-2x"></i>
         <p><b>19</b> Denuncias</p>
       </a>
     </div>
   Reestilizamos os 5 <a> por id, transformando o "botao" colorido em card
   branco com icone tintado a esquerda.
   -------------------------------------------------------------------------- */
#denuncia.btn,
#reclamacao.btn,
#solicitacao.btn,
#sugestao.btn,
#elogio.btn {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px !important;
    padding: 16px 18px;
    text-align: left;
    white-space: normal;
    background: #fff;
    border: 1px solid #e4e8ee;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    color: #1f2d3d;
    transition: transform .15s ease, box-shadow .15s ease;
}
#denuncia.btn:hover,
#reclamacao.btn:hover,
#solicitacao.btn:hover,
#sugestao.btn:hover,
#elogio.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .1);
    color: #1f2d3d;
}

/* icone -> circulo/quadrado arredondado tintado */
#denuncia.btn > .fa,
#reclamacao.btn > .fa,
#solicitacao.btn > .fa,
#sugestao.btn > .fa,
#elogio.btn > .fa {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 19px !important;   /* anula o fa-2x */
    line-height: 1;
}

/* numero + rotulo */
#denuncia.btn > p,
#reclamacao.btn > p,
#solicitacao.btn > p,
#sugestao.btn > p,
#elogio.btn > p {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.25;
    color: #7b8794;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
#denuncia.btn > p > b,
#reclamacao.btn > p > b,
#solicitacao.btn > p > b,
#sugestao.btn > p > b,
#elogio.btn > p > b {
    font-family: 'Poppins', sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1f2d3d;
    text-transform: none;
}

/* cores por tipo (fundo do icone tenue + icone forte + faixa a esquerda) */
#denuncia.btn    { border-left: 4px solid #e74c3c; }
#denuncia.btn > .fa    { background: rgba(231, 76, 60, .12);  color: #e74c3c; }

#reclamacao.btn  { border-left: 4px solid #f39c12; }
#reclamacao.btn > .fa  { background: rgba(243, 156, 18, .12); color: #f39c12; }

#solicitacao.btn { border-left: 4px solid #27ae60; }
#solicitacao.btn > .fa { background: rgba(39, 174, 96, .12);  color: #27ae60; }

#sugestao.btn    { border-left: 4px solid #16a085; }
#sugestao.btn > .fa    { background: rgba(22, 160, 133, .12); color: #16a085; }

#elogio.btn      { border-left: 4px solid #2980b9; }
#elogio.btn > .fa      { background: rgba(41, 128, 185, .12); color: #2980b9; }

/* --------------------------------------------------------------------------
   6.1 CARDS DE INDICADORES E ESTATÍSTICAS do painel_gestor
   Transforma os alerts em cards modernos no mesmo padrão dos cards de tipo
   de manifestação (#denuncia, #reclamacao, etc.): fundo branco, borda sutil,
   faixa lateral esquerda colorida e quadrado tintado para o ícone.
   -------------------------------------------------------------------------- */
.indicador-card,
.detalhesInfo > .alert.indicador-card-agendadas,
.col-indicadores-gestor .detalhesInfo > .alert-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    padding: 14px 18px !important;
    text-align: left !important;
    white-space: normal !important;
    background: #ffffff !important;
    border: 1px solid #e4e8ee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
    color: #1f2d3d !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    min-height: 72px;
    text-decoration: none !important;
}

.indicador-card:hover,
.detalhesInfo:hover > .alert.indicador-card-agendadas,
.col-indicadores-gestor .detalhesInfo:hover > .alert-info {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .1) !important;
    color: #1f2d3d !important;
}

/* Ícone: quadrado arredondado tintado como nos cards do topo */
.indicador-card > .fa,
.detalhesInfo > .alert.indicador-card-agendadas > .fa,
.col-indicadores-gestor .detalhesInfo > .alert-info > .fa {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 19px !important;   /* anula o fa-3x */
    line-height: 1 !important;
    margin: 0 !important;
}

/* Conteúdo de texto */
.indicador-card .indicador-text,
.detalhesInfo > .alert.indicador-card-agendadas .indicador-text,
.col-indicadores-gestor .detalhesInfo > .alert-info .indicador-text {
    flex: 1 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
    text-align: left !important;
}

/* Destaque nos números e palavras em negrito */
.indicador-card b,
.indicador-card strong,
.detalhesInfo > .alert.indicador-card-agendadas b,
.col-indicadores-gestor .detalhesInfo > .alert-info b {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Cores por indicador: */

/* 1. Avaliações (Estrela / Nota média) */
.indicador-card-avaliacoes {
    border-left: 4px solid #f1c40f !important;
}
.indicador-card-avaliacoes > .fa {
    background: rgba(241, 196, 15, .14) !important;
    color: #d4ac0d !important;
}

/* 2. Respondidas no prazo de 5 dias (Café) */
.indicador-card-prazo {
    border-left: 4px solid #27ae60 !important;
}
.indicador-card-prazo > .fa {
    background: rgba(39, 174, 96, .12) !important;
    color: #27ae60 !important;
}

/* 3. Concluídas / Realizadas (Check) */
.indicador-card-concluidas {
    border-left: 4px solid #16a085 !important;
}
.indicador-card-concluidas > .fa {
    background: rgba(22, 160, 133, .12) !important;
    color: #16a085 !important;
}

/* 4. Agendadas (Calendário) */
.indicador-card-agendadas,
.col-indicadores-gestor .detalhesInfo > .alert-info {
    border-left: 4px solid #2980b9 !important;
}
.indicador-card-agendadas > .fa,
.col-indicadores-gestor .detalhesInfo > .alert-info > .fa {
    background: rgba(41, 128, 185, .12) !important;
    color: #2980b9 !important;
}

/* 5. Abertas há 60 dias (Sino / Alerta Crítico) */
.indicador-card-abertas {
    border-left: 4px solid #e74c3c !important;
}
.indicador-card-abertas > .fa {
    background: rgba(231, 76, 60, .12) !important;
    color: #e74c3c !important;
}

/* 6. Bairro com maior número de atrasos (Atenção / Triângulo) */
.indicador-card-bairro {
    border-left: 4px solid #e67e22 !important;
}
.indicador-card-bairro > .fa {
    background: rgba(230, 126, 34, .12) !important;
    color: #e67e22 !important;
}

/* 7. Mini-cards de Período (Último dia, Semana, Mês) */
.row-periodos-gestor {
    margin-bottom: 2px;
}
.row-periodos-gestor .col-xs-4 {
    padding-left: 6px;
    padding-right: 6px;
}
.row-periodos-gestor .detalhesInfo {
    text-decoration: none !important;
    display: block;
}
.row-periodos-gestor .detalhesInfo > .alert {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #e4e8ee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
    padding: 12px 6px 10px !important;
    margin-bottom: 14px !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    color: #1f2d3d !important;
}
.row-periodos-gestor .detalhesInfo:hover > .alert {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .1) !important;
    color: #1f2d3d !important;
}
.row-periodos-gestor .periodo-col-dia .detalhesInfo > .alert {
    border-top: 3px solid #3498db !important;
}
.row-periodos-gestor .periodo-col-semana .detalhesInfo > .alert {
    border-top: 3px solid #f39c12 !important;
}
.row-periodos-gestor .periodo-col-mes .detalhesInfo > .alert {
    border-top: 3px solid #e74c3c !important;
}
.row-periodos-gestor .detalhesInfo img {
    max-width: 28px !important;
    max-height: 28px !important;
    margin-bottom: 4px !important;
    display: inline-block !important;
    transition: transform .15s ease !important;
}
.row-periodos-gestor .detalhesInfo:hover img {
    transform: scale(1.08) !important;
}
.row-periodos-gestor .detalhesInfo b {
    font-family: 'Poppins', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #1f2d3d !important;
}
.row-periodos-gestor .periodo-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #7b8794;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    #denuncia.btn,
    #reclamacao.btn,
    #solicitacao.btn,
    #sugestao.btn,
    #elogio.btn {
        margin-bottom: 12px !important;
    }
    .indicador-card,
    .detalhesInfo > .alert.indicador-card-agendadas,
    .col-indicadores-gestor .detalhesInfo > .alert-info {
        margin-bottom: 10px !important;
        padding: 12px 14px !important;
    }
}

/* ==========================================================================
   8. TELAS DE CADASTRO / CRUD  +  DataTables
   Reutilizavel por todas as telas de cadastro do back-office (bairros,
   setores, equipamentos, ...). Reduz o aninhamento de panels e a altura,
   compacta os controles do DataTables e mata a rolagem horizontal fantasma.
   ========================================================================== */

/* --- painel unico da tela de cadastro --- */
#page-wrapper > .row > .col-lg-12 > .panel.panel-primary,
#page-wrapper > .panel.panel-primary {
    margin-bottom: 0;
}
#page-wrapper .panel-primary > .panel-heading .panel-title-big {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* panels aninhados dentro de um panel-body: achatar (sem "caixa dentro de caixa") */
#page-wrapper .panel-body .panel,
#page-wrapper .panel-body .panel-group .panel {
    margin-bottom: 14px;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
#page-wrapper .panel-body .panel-group {
    margin-bottom: 0;
}
#page-wrapper .panel-body .panel > .panel-heading {
    padding: 0 0 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e8ebf0;
}
#page-wrapper .panel-body .panel > .panel-heading .panel-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #48566a;
}
#page-wrapper .panel-body .panel > .panel-heading .panel-title > a { color: #48566a; }
#page-wrapper .panel-body .panel > .panel-collapse > .panel-body,
#page-wrapper .panel-body .panel > .panel-body {
    padding: 14px 0 4px;
}

/* --- formulario do cadastro --- */
#page-wrapper .panel-body label {
    margin-bottom: 4px;
    font-weight: 500;
    color: #48566a;
}
#page-wrapper .panel-body .form-control {
    height: 36px;
    padding: 6px 10px;
    font-size: 13.5px;
    border-color: #d7dde5;
    box-shadow: none;
}
#page-wrapper .panel-body textarea.form-control { height: auto; }
#page-wrapper .panel-body .form-group,
#page-wrapper .panel-body .row {
    margin-bottom: 10px;
}

/* checkbox que veio com class="form-control" (fica como caixa gigante) */
#page-wrapper .panel-body input[type="checkbox"].form-control,
#page-wrapper .panel-body input[type="radio"].form-control {
    width: auto;
    height: auto;
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   8c. BARRA DE ACOES padronizada (Adicionar / Alterar / Limpar / Excluir /
   Historico). Botoes menores, agrupados a DIREITA, cor discreta (fill
   tenue + texto/borda na cor; hover fica solido).
   Para alinhar a ESQUERDA: trocar justify-content para flex-start.
   -------------------------------------------------------------------------- */
#page-wrapper .panel-body .btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
#page-wrapper .panel-body .btn-group > .btn,
#page-wrapper .panel-body .btn-group > .btn.btn-lg,
#page-wrapper .panel-body .btn-group > .btn.btn-block {
    flex: 0 0 auto;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 6px !important;
    box-shadow: none;
    text-shadow: none;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
#page-wrapper .panel-body .btn-group > .btn .fa,
#page-wrapper .panel-body .btn-group > .btn .glyphicon {
    margin-right: 5px;
    font-size: 11px;
}

/* verde - Adicionar / Alterar */
#page-wrapper .panel-body .btn-group > .btn.btn-success {
    color: #1f7a44;
    background-color: #eaf6ef;
    border-color: #cde8d7;
}
#page-wrapper .panel-body .btn-group > .btn.btn-success:hover,
#page-wrapper .panel-body .btn-group > .btn.btn-success:focus,
#page-wrapper .panel-body .btn-group > .btn.btn-success:active {
    color: #fff;
    background-color: #2e9e5b;
    border-color: #2e9e5b;
}
/* amarelo - Limpar */
#page-wrapper .panel-body .btn-group > .btn.btn-warning {
    color: #97670f;
    background-color: #fdf4e3;
    border-color: #f1e0bd;
}
#page-wrapper .panel-body .btn-group > .btn.btn-warning:hover,
#page-wrapper .panel-body .btn-group > .btn.btn-warning:focus,
#page-wrapper .panel-body .btn-group > .btn.btn-warning:active {
    color: #fff;
    background-color: #d99512;
    border-color: #d99512;
}
/* vermelho - Excluir */
#page-wrapper .panel-body .btn-group > .btn.btn-danger {
    color: #b23a33;
    background-color: #fdedeb;
    border-color: #f4cbc7;
}
#page-wrapper .panel-body .btn-group > .btn.btn-danger:hover,
#page-wrapper .panel-body .btn-group > .btn.btn-danger:focus,
#page-wrapper .panel-body .btn-group > .btn.btn-danger:active {
    color: #fff;
    background-color: #cf4239;
    border-color: #cf4239;
}
/* azul - Historico */
#page-wrapper .panel-body .btn-group > .btn.btn-primary {
    color: #1f5fc0;
    background-color: #eaf1fd;
    border-color: #cfe0f7;
}
#page-wrapper .panel-body .btn-group > .btn.btn-primary:hover,
#page-wrapper .panel-body .btn-group > .btn.btn-primary:focus,
#page-wrapper .panel-body .btn-group > .btn.btn-primary:active {
    color: #fff;
    background-color: #2f80ed;
    border-color: #2f80ed;
}
/* cinza - btn-default */
#page-wrapper .panel-body .btn-group > .btn.btn-default {
    color: #4a5768;
    background-color: #f1f4f7;
    border-color: #dce1e8;
}
#page-wrapper .panel-body .btn-group > .btn.btn-default:hover,
#page-wrapper .panel-body .btn-group > .btn.btn-default:focus {
    color: #1b2530;
    background-color: #e4e9ef;
    border-color: #cdd4dd;
}

/* --------------------------------------------------------------------------
   8b. DataTables  -  compacto, no tema, sem scroll horizontal fantasma
   -------------------------------------------------------------------------- */
/* O DataTables injeta o .dataTables_wrapper (busca, botoes, paginacao E a
   tabela) DENTRO do .table-responsive. Como o .table-responsive tem
   overflow-x:auto, qualquer sobra de 1-2px (box-model dos <th>, larguras em
   px que o autoWidth do DataTables crava) vira uma barra de rolagem em volta
   de TODA a listagem. Solucao: o .table-responsive nao rola nada; a tabela
   fica travada em 100% e sem larguras fixas de coluna. */
#page-wrapper .table-responsive {
    border: 0;
    overflow: visible !important;   /* !important: vence o dataTables.bootstrap.css legado */
}
#page-wrapper .dataTables_wrapper {
    padding: 0;
    font-size: 13px;
    overflow-x: auto !important;    /* rede de seguranca: so a tabela rola, se precisar */
    overflow-y: visible !important;
}
#page-wrapper .dataTables_wrapper table.dataTable,
#page-wrapper table#datatable {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
/* deixa o texto longo quebrar em vez de esticar a tabela (o width:100% acima
   ja garante o ajuste; NAO zerar as larguras de coluna do DataTables aqui,
   senao quebra o layout das listagens largas como a solicitacao_lista) */
#page-wrapper .dataTables_wrapper table.dataTable > tbody > tr > td {
    white-space: normal;
}

/* paginador server-side das listagens (solicitacao_lista, etc.) */
#page-wrapper .lista-paginador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e8ebf0;
}
#page-wrapper .lista-paginador .lista-total {
    font-size: 12.5px;
    color: #8a95a4;
}
#page-wrapper .lista-paginador .lista-pager {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#page-wrapper .lista-paginador .lista-pagina-info {
    font-size: 12.5px;
    color: #4a5768;
    min-width: 120px;
    text-align: center;
}
#page-wrapper .lista-paginador .btn.btn-sm {
    border-radius: 6px;
    border: 1px solid #d7dde5;
    background: #fff;
    color: #4a5768;
    font-weight: 500;
}
#page-wrapper .lista-paginador .btn.btn-sm:hover {
    background: #f3f6f9;
    color: #1b2530;
}
#page-wrapper .lista-paginador .btn.btn-sm[disabled],
#page-wrapper .lista-paginador .aspNetDisabled {
    opacity: .45;
    cursor: not-allowed;
}

/* topo do DataTables: botoes + "mostrar N" + busca na mesma faixa */
#page-wrapper .dataTables_wrapper .dt-buttons {
    float: left;
    margin-bottom: 10px;
}
#page-wrapper .dataTables_wrapper .dt-buttons .btn {
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #d7dde5;
    color: #48566a;
    border-radius: 6px;
    margin-right: 5px;
}
#page-wrapper .dataTables_wrapper .dt-buttons .btn:hover {
    background: #f3f6f9;
    color: #1b2530;
}
#page-wrapper .dataTables_wrapper .dataTables_length,
#page-wrapper .dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
    font-size: 13px;
    color: #6b7787;
}
#page-wrapper .dataTables_wrapper .dataTables_filter { float: right; }
#page-wrapper .dataTables_wrapper .dataTables_length select,
#page-wrapper .dataTables_wrapper .dataTables_filter input {
    height: 32px;
    padding: 4px 8px;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    box-shadow: none;
}
#page-wrapper .dataTables_wrapper .dataTables_filter input { min-width: 200px; margin-left: 6px; }

/* corpo da tabela */
#page-wrapper table#datatable {
    border-collapse: collapse;
}
#page-wrapper table#datatable > thead > tr > th {
    padding: 9px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7787;
    background: #f6f8fa;
    border-bottom: 2px solid #e4e8ee;
}
#page-wrapper table#datatable > tbody > tr > td {
    padding: 8px 12px;
    font-size: 13px;
    vertical-align: middle;
    border-color: #edf0f3;
}
#page-wrapper table#datatable.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfcfd;
}

/* rodape do DataTables: info + paginacao */
#page-wrapper .dataTables_wrapper .dataTables_info {
    padding-top: 12px;
    font-size: 12.5px;
    color: #8a95a4;
}
#page-wrapper .dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
}
#page-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 11px;
    margin-left: 3px;
    border-radius: 6px !important;
    border: 1px solid #e0e5ec !important;
    color: #48566a !important;
    background: #fff !important;
}
#page-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2f80ed !important;
    border-color: #2f80ed !important;
    color: #fff !important;
}
#page-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
}

/* botao "Abrir" da coluna de acao: menor e sem esticar */
#page-wrapper table#datatable td .btn-block {
    display: inline-block;
    width: auto;
    padding: 4px 14px;
}

/* --- ajustes finos das telas de cadastro --- */
#page-wrapper .cadastro-check {
    display: flex;
    align-items: center;
    min-height: 36px;
}
#page-wrapper .cadastro-check input[type="checkbox"] {
    width: auto;
    height: auto;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
#page-wrapper .cadastro-check label {
    margin: 0;
    font-weight: 400;
}
#page-wrapper .panel-body .panel.cadastro-list {
    margin: 22px 0 0;
}
