/* ============================================================
   NFA SOFT — DESIGN SYSTEM (bridge p/ Bootstrap 3 e 4)
   Camada global de tema. Deve ser o ÚLTIMO CSS carregado em
   cada template-base para vencer a cascata do Bootstrap.
   Tokens e identidade conforme design-system.html (v1.0).
   ============================================================ */
/* Montserrat vendorizada localmente (CSP: sem CDN externo). Os woff2 ficam em
   /files/static/fonts/montserrat/ — regenerar com _baixar_montserrat.py. */
@import url('/files/static/fonts/montserrat/montserrat.css');

/* ===================== TOKENS ===================== */
:root{
  /* azul logo (marca/acento) */
  --brand:#0784b8; --brand-strong:#075f86;
  --brand-soft:#e4f2f9; --brand-soft-medium:#cde8f3;
  /* principal (barras, menus, títulos) */
  --principal:#34495e; --principal-medium:#3e566e;
  --principal-700:#2b3c4d; --principal-900:#212e3b;
  /* cinza */
  --gray:#96989a; --gray-soft:#b9bbbd; --gray-line:#d6d8da;
  /* superfícies */
  --surface:#ffffff; --surface-soft:#f3f5f7; --surface-medium:#eef1f4;
  --surface-tertiary:#e4e8ec; --surface-dark:#212e3b;
  --border:#e6e9ed; --border-medium:#d9dde2;
  /* texto */
  --text-heading:#1d2733; --text-body:#34495e; --text-subtle:#7c8895;
  --text-muted:#96989a; --text-on-dark:#ffffff; --text-brand:#0784b8;
  /* semânticas */
  --success:#1f9d6b; --success-soft:#e6f6ef; --success-fg:#13624a; --success-border:#bfe6d4;
  --warning:#d98a00; --warning-soft:#fdf3e1; --warning-fg:#8a5a00; --warning-border:#f3dca8;
  --danger:#d8413a;  --danger-soft:#fceceb;  --danger-fg:#9c2b26;  --danger-border:#f3c6c4;
  --info:#0784b8;
  /* raios */
  --r-sm:8px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-full:999px;
  /* sombras */
  --shadow-xs:0 1px 2px rgba(29,39,51,.06);
  --shadow-sm:0 1px 3px rgba(29,39,51,.10),0 1px 2px rgba(29,39,51,.05);
  --shadow-md:0 8px 24px rgba(29,39,51,.10);
  /* espaçamento */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  /* fonte */
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

[data-theme="dark"]{
  --brand:#2aa3d6; --brand-strong:#5cc0e8;
  --brand-soft:#15324a; --brand-soft-medium:#1d4a66;
  --principal:#3e566e; --principal-medium:#4a6079;
  --principal-700:#28384a; --principal-900:#0f1820;
  --gray:#8a949e; --gray-soft:#5b6772; --gray-line:#33424f;
  --surface:#1a2733; --surface-soft:#131e28; --surface-medium:#22323f;
  --surface-tertiary:#2c3e4d; --surface-dark:#0c141b;
  --border:#2a3a48; --border-medium:#33454f;
  --text-heading:#eef2f6; --text-body:#c4cfd9; --text-subtle:#8b97a3;
  --text-muted:#74808c; --text-brand:#5cc0e8;
  --success:#34c98a; --success-soft:#10301f; --success-fg:#7ee0b4; --success-border:#1d5a3c;
  --warning:#f0a623; --warning-soft:#352712; --warning-fg:#f3cd84; --warning-border:#5e4516;
  --danger:#ef5e57;  --danger-soft:#371917;  --danger-fg:#f4a39e;  --danger-border:#6b2d29;
  --info:#5cc0e8;
  --shadow-xs:0 1px 2px rgba(0,0,0,.40);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 8px 24px rgba(0,0,0,.50);
}

/* ===================== BASE / TIPOGRAFIA ===================== */
/* Escala global (~zoom-out): reduz a raiz para que TODAS as medidas em rem
   — títulos, navbar, números, paddings, tabelas — encolham proporcionalmente.
   Ajuste fino aqui (87.5% ≈ 14px de base). */
html{font-size:87.5%}
body{
  font-family:var(--font)!important;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--text-body);
  background:var(--surface-soft);
  -webkit-font-smoothing:antialiased;
}
[data-theme="dark"] body{background:var(--surface-soft);color:var(--text-body)}
/* só padroniza a FAMÍLIA — peso e cor ficam por conta do Bootstrap/página.
   NÃO forçamos cor: assim o heading herda branco em header escuro e escuro
   em fundo claro (evita o efeito "tudo em negrito" e o contraste ruim). */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--font);
}
a{color:var(--brand)}
a:hover,a:focus{color:var(--brand-strong)}
code,kbd,pre,samp{font-family:var(--font);font-variant-numeric:tabular-nums}
hr{border-top-color:var(--border)}
/* sem !important e sem alcançar <small>: assim textos claros sobre fundos
   escuros (ex.: subtítulo em header slate) mantêm o contraste herdado */
.text-muted{color:var(--text-muted)}
::selection{background:var(--brand-soft-medium);color:var(--brand-strong)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.text-primary{color:var(--brand)!important}
.text-success{color:var(--success)!important}
.text-warning{color:var(--warning)!important}
.text-danger{color:var(--danger)!important}
.text-info{color:var(--info)!important}
.bg-primary{background-color:var(--brand)!important;color:#fff}
.bg-success{background-color:var(--success)!important}
.bg-warning{background-color:var(--warning)!important}
.bg-danger{background-color:var(--danger)!important}
.bg-info{background-color:var(--info)!important}
.bg-dark{background-color:var(--principal)!important}

/* ===================== BOTÕES ===================== */
.btn{
  font-family:var(--font);font-weight:600;
  border-radius:var(--r-full);
  border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.btn:focus,.btn.focus{box-shadow:0 0 0 3px var(--brand-soft)}
/* primário / info usam o azul-logo */
.btn-primary,.btn-info{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow-xs)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,
.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{background:var(--brand-strong)!important;border-color:var(--brand-strong)!important;color:#fff}
/* secundário (BS4) — sólido neutro slate, TEXTO BRANCO
   (mantém legível o uso disseminado de bg slate inline nas telas) */
.btn-secondary{background:var(--principal-medium);border-color:var(--principal-medium);color:#fff}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active,.btn-secondary.active{background:var(--principal)!important;border-color:var(--principal)!important;color:#fff}
/* default (BS3) e light — neutro CLARO, texto escuro */
.btn-default,.btn-light{background:var(--surface-medium);border-color:var(--border-medium);color:var(--text-body)}
.btn-default:hover,.btn-default:focus,.btn-light:hover,.btn-light:focus{background:var(--surface-tertiary)!important;border-color:var(--border-medium)!important;color:var(--text-heading)}
/* escuro — principal (barras) */
.btn-dark{background:var(--principal);border-color:var(--principal);color:#fff}
.btn-dark:hover,.btn-dark:focus{background:var(--principal-medium)!important;border-color:var(--principal-medium)!important}
/* semânticas */
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover,.btn-success:focus{filter:brightness(.92)}
.btn-warning{background:var(--warning);border-color:var(--warning);color:#fff}
.btn-warning:hover,.btn-warning:focus{filter:brightness(.92);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover,.btn-danger:focus{filter:brightness(.92)}
.btn-link{color:var(--brand)}
.btn-link:hover{color:var(--brand-strong)}
/* outline (BS4) */
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-outline-secondary{color:var(--text-body);border-color:var(--border-medium)}
.btn-outline-secondary:hover{background:var(--surface-medium);color:var(--text-heading)}
.btn-outline-success{color:var(--success);border-color:var(--success)}
.btn-outline-success:hover{background:var(--success);color:#fff}
.btn-outline-danger{color:var(--danger);border-color:var(--danger)}
.btn-outline-danger:hover{background:var(--danger);color:#fff}
.btn-outline-warning{color:var(--warning);border-color:var(--warning)}
.btn-outline-warning:hover{background:var(--warning);color:#fff}
.btn:disabled,.btn.disabled{opacity:.5}
/* grupos e add-ons: cantos retos p/ não quebrar layout */
.btn-group>.btn,.input-group .btn,.btn-group-vertical>.btn{border-radius:0}
.btn-group>.btn:first-child,.btn-group>.btn-group:first-child>.btn{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
.btn-group>.btn:last-child,.btn-group>.btn-group:last-child>.btn,.input-group-append .btn:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}

/* ===================== FORMULÁRIOS ===================== */
.form-control,.custom-select,.form-select{
  font-family:var(--font);
  color:var(--text-heading);
  background-color:var(--surface);
  border:1px solid var(--border-medium);
  border-radius:var(--r-sm);
  box-shadow:none;
  transition:border-color .15s;
}
.form-control:focus,.custom-select:focus,.form-select:focus{
  border-color:var(--brand);
  background-color:var(--surface);
  color:var(--text-heading);
}
/* Sem sombra nos inputs (repouso e foco), inclusive os que usam .shadow-sm.
   O foco é indicado apenas pela cor da borda. */
.form-control,.custom-select,.form-select,textarea,select,
input[type="text"],input[type="number"],input[type="email"],input[type="password"],
input[type="search"],input[type="tel"],input[type="date"],input[type="url"],
input.shadow-sm,select.shadow-sm,textarea.shadow-sm{
  box-shadow:none!important;
}
.form-control::placeholder{color:var(--text-muted)}
.form-control:disabled,.form-control[readonly]{background-color:var(--surface-medium);opacity:1}
label,.control-label,.col-form-label{font-family:var(--font);font-weight:500;color:var(--text-body)}
.form-text,.help-block{color:var(--text-muted)}
.input-group-text,.input-group-addon{
  background:var(--surface-medium);
  border:1px solid var(--border-medium);
  color:var(--text-subtle);
  border-radius:var(--r-sm);
}

/* --- input-group: cantos retos por dentro, arredondados só nas pontas ---
   O Bootstrap só zera os cantos internos no arranjo que ele prevê
   (input + addon). Em qualquer grupo com mais de um campo, ou com um addon no
   meio, o --r-sm que aplicamos a TODO .form-control reaparece no meio do grupo
   e o fundo da página vaza pelos cantos arredondados.
   Aqui o raio é sempre de quem desenha a borda, e só nas extremidades. */
.input-group>.form-control,
.input-group>.custom-select,
.input-group>select,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend>.input-group-text{border-radius:0}

.input-group>.form-control:first-child,
.input-group>.custom-select:first-child,
.input-group>select:first-child,
.input-group>.input-group-prepend:first-child>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn{
  border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)
}

.input-group>.form-control:last-child,
.input-group>.custom-select:last-child,
.input-group>select:last-child,
.input-group>.input-group-append:last-child>.input-group-text{
  border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)
}

/* Grupo que carrega um elemento fora do fluxo no fim (dropdown de
   autocomplete, painel absoluto): a ponta direita é o PENÚLTIMO filho, já que
   o último não desenha borda. Marque o grupo com .input-group-flutuante.
   Sem isso o último campo fica com os cantos direitos retos. */
.input-group-flutuante>.form-control:nth-last-child(2),
.input-group-flutuante>.custom-select:nth-last-child(2),
.input-group-flutuante>select:nth-last-child(2),
.input-group-flutuante>.input-group-append:nth-last-child(2)>.input-group-text{
  border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)
}

/* sem borda dupla entre controles colados */
.input-group>*+*{margin-left:-1px}
.custom-control-input:checked~.custom-control-label::before,
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.was-validated .form-control:valid,.form-control.is-valid{border-color:var(--success)}
.was-validated .form-control:invalid,.form-control.is-invalid{border-color:var(--danger)}
.invalid-feedback{color:var(--danger)}

/* ===================== CAMPO PESQUISÁVEL (AUTOCOMPLETE) =====================
   Campo que busca enquanto se digita e abre a lista logo abaixo. Não depende de
   plugin: o projeto não tem typeahead e a CSP só admite recursos locais.

   Marcação esperada:
     <div class="input-group input-group-flutuante campo-auto">
       <input class="form-control campo-codigo">
       <div class="input-group-append campo-indicador"><span class="input-group-text">
         <i class="fa"></i></span></div>
       <input class="form-control" readonly>          (descrição do escolhido)
       <div class="sugestoes"></div>                  (lista, fora do fluxo)
     </div>

   O indicador tem 3 estados, aplicados em .campo-indicador:
     (sem classe) lupa  |  .buscando spinner  |  .escolhido check              */
.campo-auto{position:relative}

.sugestoes{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:1040;
  margin-top:2px;max-height:260px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border-medium);
  border-radius:var(--r-sm);box-shadow:var(--shadow-md);
}
.sugestoes.aberto{display:block}
.sugestao{
  display:flex;align-items:baseline;gap:.6rem;padding:.4rem .6rem;
  cursor:pointer;font-size:.84rem;border-bottom:1px solid var(--border);
}
.sugestao:last-child{border-bottom:0}
.sugestao:hover,.sugestao.ativo{background:var(--brand-soft,var(--surface-medium))}
.sugestao-codigo{flex:0 0 auto;font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums}
.sugestao-desc{flex:1 1 auto;color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugestao-vazio,.sugestao-erro{padding:.5rem .6rem;font-size:.82rem;color:var(--text-muted)}
.sugestao-erro{color:var(--danger)}

.campo-indicador>.input-group-text{
  padding:0 .6rem;min-width:2rem;font-size:.8rem;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-subtle);
}
.campo-indicador .fa::before{content:"\f002"}                       /* lupa */
.campo-indicador.buscando>.input-group-text{color:var(--brand)}
.campo-indicador.buscando .fa::before{
  content:"\f110";display:inline-block;animation:ds-girar 1s linear infinite
}
@keyframes ds-girar{to{transform:rotate(360deg)}}
.campo-indicador.escolhido>.input-group-text{color:var(--success);border-color:var(--success)}
.campo-indicador.escolhido .fa::before{content:"\f00c"}             /* check */
.campo-codigo.escolhido{border-color:var(--success)}
.campo-indicador.desabilitado>.input-group-text{color:var(--text-muted)}

/* dica textual ao lado do label de um campo pesquisável */
.dica-busca{font-size:.7rem;color:var(--text-muted);font-weight:400;margin-left:.35rem}

/* ===================== CARDS / PAINÉIS ===================== */
.card,.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xs);
  overflow:hidden; /* impede que conteúdo (tabelas, DataTables wrapper) vaze além do border-radius */
}
/* Barra de título padrão (slate da marca, texto branco) — unifica todos os
   .card-header, com ou sem cor inline nas telas */
.card-header{
  background:var(--principal);
  border-bottom:1px solid var(--principal-700);
  color:#fff;
  font-weight:600;
  border-top-left-radius:var(--r-xl);
  border-top-right-radius:var(--r-xl);
}
.card-header h1,.card-header h2,.card-header h3,.card-header h4,.card-header h5,.card-header h6,
.card-header a,.card-header small,.card-header .small,.card-header .text-muted,
.card-header .card-header-title{color:#fff}
.card-header a:hover{color:var(--brand-soft)}
/* BS3 (appbuilder) mantém cabeçalho claro p/ não desconfigurar o admin */
.panel-heading{
  background:var(--surface-soft);
  border-bottom:1px solid var(--border);
  color:var(--text-heading);
  font-weight:600;
}
/* BS4 removeu .panel-*, então .panel-body fica sem padding — replica o .card-body */
.panel-body{padding:var(--s5)}
.card-footer,.panel-footer{background:var(--surface-soft);border-top:1px solid var(--border)}
.panel-default>.panel-heading{color:var(--text-heading)}
.panel-primary{border-color:var(--brand)}
.panel-primary>.panel-heading{background:var(--brand);border-color:var(--brand);color:#fff}
.card-title,.panel-title{color:var(--text-heading);font-weight:600}
.well{background:var(--surface-medium);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:none}

/* ===================== JUMBOTRON ===================== */
.jumbotron{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);padding:var(--s12) var(--s10);margin-bottom:var(--s8)}
.jumbotron h1,.jumbotron h2,.jumbotron h3{color:var(--text-heading)}
.jumbotron .lead{color:var(--text-body)}
.jumbotron hr{border-color:var(--border)}
@media(max-width:575px){.jumbotron{padding:var(--s8) var(--s4);border-radius:var(--r-lg)}}
@media(min-width:576px) and (max-width:991px){.jumbotron{padding:var(--s10) var(--s6)}}

/* ===================== TABELAS ===================== */
.table{color:var(--text-body)}
.table thead th,.table>thead>tr>th{
  background:var(--surface-soft);
  color:var(--text-body);
  border-bottom:1px solid var(--border);
  border-top:none;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  vertical-align:middle;
}
.table td,.table th,.table>tbody>tr>td,.table>tbody>tr>th{
  border-top:1px solid var(--border);
  vertical-align:middle;
}
.table-hover tbody tr:hover,.table-hover>tbody>tr:hover{background:var(--surface-soft)}
.table-striped tbody tr:nth-of-type(odd),.table-striped>tbody>tr:nth-of-type(odd){background:var(--surface-soft)}
.table-bordered,.table-bordered td,.table-bordered th{border-color:var(--border)}

/* ===================== BADGES / LABELS ===================== */
.badge,.label{font-family:var(--font);font-weight:600;border-radius:var(--r-full);padding:.35em .7em}
.badge-primary,.label-primary,.badge-info,.label-info{background-color:var(--brand);color:#fff}
.badge-secondary,.label-default{background-color:var(--surface-tertiary);color:var(--text-body)}
.badge-success,.label-success{background-color:var(--success);color:#fff}
.badge-warning,.label-warning{background-color:var(--warning);color:#fff}
.badge-danger,.label-danger{background-color:var(--danger);color:#fff}
.badge-light{background-color:var(--surface-medium);color:var(--text-body)}
.badge-dark{background-color:var(--principal);color:#fff}

/* ===================== NAVBAR / MENUS ===================== */
.navbar-default,.navbar-inverse,.navbar.bg-dark,.navbar.bg-primary{
  background:var(--principal)!important;border-color:var(--principal-700)!important;
}
.navbar-default .navbar-brand,.navbar-inverse .navbar-brand,
.navbar-default .navbar-nav>li>a,.navbar-inverse .navbar-nav>li>a,
.navbar-dark .navbar-brand,.navbar-dark .navbar-nav .nav-link{color:#fff!important}
.navbar-default .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:hover,
.navbar-dark .navbar-nav .nav-link:hover{color:var(--brand-soft)!important;background:var(--principal-medium)}
.navbar-default .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a{background:var(--principal-medium)!important;color:#fff!important}
.nav-tabs{border-bottom:1px solid var(--border)}
.nav-tabs .nav-link,.nav-tabs>li>a{color:var(--text-subtle);border:none;border-bottom:2px solid transparent;border-radius:0}
.nav-tabs .nav-link:hover,.nav-tabs>li>a:hover{border-color:transparent;color:var(--brand);background:transparent}
.nav-tabs .nav-link.active,.nav-tabs>li.active>a{
  color:var(--brand);background:transparent;border:none;border-bottom:2px solid var(--brand);
}
.nav-pills .nav-link.active,.nav-pills>li.active>a{background:var(--brand);color:#fff;border-radius:var(--r-full)}
.list-group-item{background:var(--surface);border-color:var(--border);color:var(--text-body)}
.list-group-item.active{background:var(--brand);border-color:var(--brand);color:#fff}
.breadcrumb{background:var(--surface-medium);border-radius:var(--r-sm)}
.breadcrumb-item.active{color:var(--text-muted)}

/* ===================== ALERTAS ===================== */
.alert{border-radius:var(--r-md);border:1px solid transparent;font-family:var(--font)}
.alert-success{background:var(--success-soft);border-color:var(--success-border);color:var(--success-fg)}
.alert-warning{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning-fg)}
.alert-danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-fg)}
.alert-info,.alert-primary{background:var(--brand-soft);border-color:var(--brand-soft-medium);color:var(--brand-strong)}

/* ===================== MODAIS / DROPDOWN / POPOVER ===================== */
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
/* alinha o raio do topo do header ao do modal (elimina a "moldura" branca nos
   cantos). NÃO forçamos cor/borda do header: assim o título herda o branco de
   headers slate (.modal-header com fundo escuro) e fica escuro em headers claros. */
.modal-header{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.modal-footer{border-top:1px solid var(--border)}
.modal-title{font-weight:600}
.dropdown-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:var(--s2)}
.dropdown-item,.dropdown-menu>li>a{color:var(--text-body);border-radius:var(--r-sm)}
.dropdown-item:hover,.dropdown-menu>li>a:hover{background:var(--brand-soft);color:var(--brand-strong)}
.dropdown-item.active,.dropdown-menu>.active>a{background:var(--brand);color:#fff}
.popover,.tooltip-inner{border-radius:var(--r-md)}
.tooltip-inner{background:var(--principal)}

/* ===================== PAGINAÇÃO / PROGRESS ===================== */
.pagination .page-link,.pagination>li>a,.pagination>li>span{color:var(--brand);border-color:var(--border)}
.pagination .page-item.active .page-link,.pagination>.active>a{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination .page-link:hover,.pagination>li>a:hover{background:var(--brand-soft);color:var(--brand-strong)}
.progress{background:var(--surface-medium);border-radius:var(--r-full);height:10px}
.progress-bar{background:var(--brand)}

/* ===================== PLUGINS ===================== */
/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--r-sm)!important;color:var(--text-body)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1px solid var(--border-medium);border-radius:var(--r-sm);padding:6px 10px}
table.dataTable thead th{border-bottom:1px solid var(--border)}
/* Botões da toolbar (Exportar Excel, pageLength, etc.) — seguem o slate da marca,
   no mesmo padrão dos .btn da aplicação. Substitui o visual cinza padrão do
   buttons.dataTables.css; mantido aqui (camada global) p/ sobreviver a upgrades do vendor. */
.dt-buttons .dt-button,button.dt-button,div.dt-button,a.dt-button{
  background:var(--principal);border:1px solid var(--principal);color:#fff;
  font-family:var(--font);font-weight:600;border-radius:var(--r-full);
  padding:.45em 1.1em;box-shadow:var(--shadow-xs);
  transition:background .15s,border-color .15s,box-shadow .15s}
.dt-buttons .dt-button:hover,button.dt-button:hover,a.dt-button:hover,
.dt-buttons .dt-button:focus,button.dt-button:focus,a.dt-button:focus,
.dt-buttons .dt-button:active:not(.disabled),button.dt-button:active:not(.disabled){
  background:var(--principal-medium)!important;border-color:var(--principal-medium)!important;color:#fff!important;
  box-shadow:0 0 0 3px var(--brand-soft)!important;outline:none}
.dt-button.active,button.dt-button.active,.dt-button-collection .dt-button.active{
  background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.dt-button.disabled,button.dt-button.disabled,a.dt-button.disabled{
  background:var(--surface-medium)!important;border-color:var(--border-medium)!important;color:var(--text-subtle)!important;box-shadow:none!important}
/* menu suspenso do pageLength */
.dt-button-collection{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md)}
/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{border:1px solid var(--border-medium)!important;border-radius:var(--r-sm)!important}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus{border-color:var(--brand)!important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--brand)!important}
.select2-dropdown{border-color:var(--border-medium);border-radius:var(--r-sm)}
/* daterangepicker */
.daterangepicker td.active,.daterangepicker td.active:hover{background:var(--brand)!important}
.daterangepicker .ranges li.active{background:var(--brand)!important}
.daterangepicker{border-radius:var(--r-md);border-color:var(--border)}

/* ===================== MOBILE / RESPONSIVO ===================== */

/* 1. Font size: 87.5% foi calibrado para desktop (~14 px de base).
      Em mobile a densidade é diferente; 100% evita texto pequeno demais. */
@media(max-width:767px){html{font-size:100%}}

/* 2. Botões: área mínima de toque 44 px (WCAG 2.5.5).
      Aplica em todos exceto .btn-sm/.btn-xs que são usados em células de tabela. */
@media(max-width:767px){
  .btn:not(.btn-sm):not(.btn-xs){
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
}

/* 3. Cards: raio menor e padding reduzido em mobile */
@media(max-width:575px){
  .card,.panel{border-radius:var(--r-md)}
  .card-header,.panel-heading{border-radius:var(--r-md) var(--r-md) 0 0}
  .card-body,.panel-body{padding:var(--s3)}
  .card-header,.card-footer,.panel-heading,.panel-footer{padding:var(--s2) var(--s3)}
}

/* 4. table-responsive: scroll suave iOS + garante que overflow:hidden do .card
      não esconda a barra de rolagem horizontal */
.card .table-responsive,.panel .table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* 5. Tabelas: padding e fonte compactos em mobile */
@media(max-width:575px){
  .table td,.table th,
  .table>tbody>tr>td,.table>tbody>tr>th{padding:var(--s2);font-size:12px}
  .table thead th,.table>thead>tr>th{font-size:10px;padding:var(--s2)}
}

/* 6. DataTables: empilha controles e expande busca em mobile */
@media(max-width:767px){
  /* remove floats — cada bloco ocupa sua própria linha */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate{
    float:none!important;text-align:left!important;
    margin-bottom:var(--s2);
  }
  /* busca full-width */
  .dataTables_wrapper .dataTables_filter input{
    width:100%;max-width:none;box-sizing:border-box;
    display:block;margin-left:0!important;
  }
  /* botões da toolbar em linha flexível */
  .dataTables_wrapper .dt-buttons{
    display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s2);
  }
  /* paginação centralizada */
  .dataTables_wrapper .dataTables_paginate{text-align:center!important;margin-top:var(--s2)}
}

/* 7. Paginação: botões menores em mobile */
@media(max-width:575px){
  .pagination .page-link,.pagination>li>a,.pagination>li>span{
    padding:.3rem .55rem;font-size:12px;
    min-height:36px;display:inline-flex;align-items:center;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    padding:.25em .55em!important;font-size:12px!important;
  }
}

/* 8. Modal: quase full-screen em mobile */
@media(max-width:575px){
  .modal-dialog{margin:var(--s3) var(--s2);max-width:none}
  .modal-content{border-radius:var(--r-lg)!important}
  .modal-body{padding:var(--s4)}
  .modal-header,.modal-footer{padding:var(--s3) var(--s4)}
}

/* 9. Navbar colapsada: dropdowns inline (visual dark, sem hover) */
@media(max-width:991px){
  .navbar-collapse .navbar-nav .nav-item{
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .navbar-collapse .navbar-nav .nav-link{
    padding:var(--s3) var(--s4);
  }
  .navbar-collapse .dropdown-menu{
    position:static!important;float:none;
    background:var(--principal-medium);
    border:none;box-shadow:none;border-radius:0;padding:0;margin:0;
  }
  .navbar-collapse .dropdown-menu .dropdown-item{
    color:rgba(255,255,255,.85);
    padding:var(--s2) var(--s8);
    border-radius:0;
  }
  .navbar-collapse .dropdown-menu .dropdown-item:hover,
  .navbar-collapse .dropdown-menu .dropdown-item:focus{
    background:var(--principal-700);color:#fff;
  }
  /* submenu Integrações: indentado */
  .navbar-collapse .dropdown-submenu .dropdown-menu{
    position:static!important;
    background:var(--principal-700);
  }
  .navbar-collapse .dropdown-submenu .dropdown-menu .dropdown-item{
    padding-left:var(--s12);
  }
}