/* =========================================================================
   TEMA NOVO — cores da marca A Casa do Nobreak (do SCSS _variables.scss)
   $brand #BA1218 · secondary #1A1A2E · third #961014 · light #FDEAEB
   Overlay CSP-safe (sem fontes/assets externos). Ativado com define('TEMA_NOVO').
   ========================================================================= */

:root{
  --nv-primary:#BA1218;      /* brand */
  --nv-primary-d:#961014;    /* brand-third (hover) */
  --nv-primary-l:#FDEAEB;    /* brand-light */
  --nv-navy:#1A1A2E;         /* brand-secondary (sidebar) */
  --nv-bg:#F8FAFC;           /* bg-alt */
  --nv-card:#FFFFFF;
  --nv-text:#2D3748;
  --nv-muted:#718096;
  --nv-border:#E2E8F0;
  --nv-success:#38A169;
  --nv-danger:#E53E3E;
  --nv-warning:#ECC94B;
  --nv-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --nv-radius:12px;
  /* Fonte do painel (mprado-theme admin) = Work Sans */
  --nv-font: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

body, .content-page, .wrapper{
  background: var(--nv-bg) !important;
  color: var(--nv-text);
  font-family: var(--nv-font) !important;
  -webkit-font-smoothing: antialiased;
}
/* Fonte do WP em todos os elementos (inputs/botoes/tabelas costumam ter a propria) */
body, h1, h2, h3, h4, h5, h6, p, a, span, td, th, li,
.btn, .form-control, .table, input, select, textarea, .page-title, .header-title, .nav-link, .dropdown-item, label{
  font-family: var(--nv-font) !important;
}

/* ---------- Cards ---------- */
.card-box{
  background: var(--nv-card);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius);
  box-shadow: var(--nv-shadow);
  padding: 22px 24px;
  margin-bottom: 22px;
}

/* ---------- Titulos ---------- */
.page-title-box .page-title{ font-weight:700; font-size:20px; color:var(--nv-text); letter-spacing:-.2px; }
.page-title-box{ padding:6px 0 14px; }
.header-title{ color:var(--nv-navy); font-weight:700; }

/* ---------- Botoes ---------- */
.btn{ border-radius:8px !important; font-weight:600; padding:.5rem .95rem; border:none !important; box-shadow:none !important; transition:filter .15s ease, transform .02s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--nv-primary) !important; }
.btn-primary:hover{ background:var(--nv-primary-d) !important; }
/* .btn-success no sistema inteiro so aparece em acao PRIMARIA (Salvar/Logar/Incluir/
   Enviar) — nenhum e "aprovar". Entao veste a marca, junto com o "novo registro".
   O verde fica reservado a status (.badge-success, .alert-success). */
.btn-success{ background:var(--nv-primary) !important; }
.btn-success:hover{ background:var(--nv-primary-d) !important; }
.btn-info{ background:var(--nv-navy) !important; }
.btn-danger{ background:var(--nv-danger) !important; }
.btn-secondary{ background:#6b7280 !important; }
.btn-default{ background:#eef1f7 !important; color:#374151 !important; }
.btn-sm{ border-radius:7px !important; }
a{ color:var(--nv-primary); }
a:hover{ color:var(--nv-primary-d); }

/* ---------- Tabelas ---------- */
.table{ color:var(--nv-text); }
.table thead th, .table thead td{
  background:#f8f9fc; color:var(--nv-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  font-weight:700; border-top:none; border-bottom:1px solid var(--nv-border) !important; padding:12px 14px;
}
.table td{ padding:12px 14px; vertical-align:middle; border-color:var(--nv-border); }
.table.table-bordered, .table.table-bordered td, .table.table-bordered th{ border-color:var(--nv-border) !important; }
.table tbody tr:hover{ background:#fbf4f4; }
.badge{ border-radius:6px; padding:.35em .6em; font-weight:600; }
.badge-primary{ background:var(--nv-primary) !important; }

/* ---------- Formularios ---------- */
.form-control{ border-radius:8px; border:1px solid var(--nv-border); padding:.5rem .8rem; color:var(--nv-text); box-shadow:none; }
.form-control:focus{ border-color:var(--nv-primary); box-shadow:0 0 0 3px rgba(186,18,24,.12); }
.control-label, label{ font-weight:600; color:#374151; font-size:13px; }

/* ---------- Sidebar (clara) ---------- */
.left.side-menu, .left.side-menu .sidebar-inner, #sidebar-menu{ background:#ffffff !important; }
.left.side-menu{ border-right:1px solid var(--nv-border); }
#sidebar-menu > ul > li > a{
  color:#4a5568 !important; border-radius:8px; margin:2px 10px; padding:11px 14px !important; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
#sidebar-menu > ul > li > a:hover{ background:var(--nv-primary-l) !important; color:var(--nv-primary-d) !important; }
#sidebar-menu > ul > li > a i{ font-size:17px; }
#sidebar-menu ul li a.active, #sidebar-menu > ul > li.active > a{ background:var(--nv-primary) !important; color:#fff !important; }
#sidebar-menu ul ul li a{ color:#6b7280 !important; border-radius:7px; margin:1px 12px 1px 26px; padding:8px 12px !important; font-size:13px; }
#sidebar-menu ul ul li a:hover{ background:var(--nv-primary-l) !important; color:var(--nv-primary-d) !important; }
#sidebar-menu .menu-title{ color:#9aa1ad !important; }
/* Seta do submenu centrada na linha: o style.css do tema a prende em top:16px, medida
   para o padding antigo — com o padding de 11px daqui ela descia abaixo do texto.
   O translate entra tambem no estado aberto, senao o rotate(90deg) do tema o apaga. */
#sidebar-menu > ul > li > a .menu-arrow{ top:50%; right:16px; transform:translateY(-50%); }
#sidebar-menu > ul > li > a.subdrop .menu-arrow{ transform:translateY(-50%) rotate(90deg); }
/* Badge (ex.: alteracoes do site) como bolinha no canto do icone: entre "Catalogo do Site"
   e a seta nao cabe nem um digito — flutuando, ele caia para uma segunda linha e ficava
   por baixo da seta. No icone cabe "12" ou "99" sem empurrar nada. */
#sidebar-menu > ul > li > a .badge.float-right{
  position:absolute; left:26px; top:4px; float:none; margin:0;
  min-width:17px; padding:.2em .38em; font-size:10px; line-height:1.2; text-align:center;
  box-shadow:0 0 0 2px #fff;
}

/* ---------- Proteger fontes de icone (Work Sans nao pode atropelar) ---------- */
.zmdi, [class^="zmdi-"], [class*=" zmdi-"]{ font-family:'Material-Design-Iconic-Font' !important; }
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"]{ font-family:'FontAwesome' !important; }
.ti, [class^="ti-"], [class*=" ti-"]{ font-family:'themify' !important; }
[class^="icon-"], [class*=" icon-"]{ font-family:'simple-line-icons' !important; }
.ion, [class^="ion-"], [class*=" ion-"]{ font-family:'Ionicons' !important; }
.menu-arrow, .menu-arrow:before{ font-family:'Material-Design-Iconic-Font' !important; }

/* ---------- Sem topbar: sidebar + conteudo colados no topo ---------- */
.topbar{ display:none !important; }
.left.side-menu{ top:0 !important; padding-top:0 !important; }
.content-page{ margin-top:0 !important; }
.content-page .content, .content-page > .content{ margin-top:0 !important; padding-top:26px; }
.left.side-menu, body.fixed-left .side-menu.left{ top:0 !important; }

/* ---------- Logo na sidebar ---------- */
.sidebar-brand{ padding:18px 16px 12px; text-align:center; border-bottom:1px solid var(--nv-border); }
.sidebar-brand img{ width:180px; max-width:100%; height:auto; }

/* ---------- Bloco do usuario na sidebar ---------- */
.sidebar-user{ padding:10px 12px; border-bottom:1px solid var(--nv-border); margin-bottom:6px; }
.sidebar-user-toggle{ display:flex; align-items:center; gap:8px; color:#4a5568 !important; font-weight:600; padding:9px 10px; border-radius:8px; }
.sidebar-user-toggle:hover{ background:var(--nv-primary-l); color:var(--nv-primary-d) !important; }
.sidebar-user .su-avatar{ font-size:22px; color:var(--nv-primary); }
.sidebar-user .su-name{ flex:1; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .su-caret{ font-size:16px; opacity:.55; }
.sidebar-user .dropdown-menu{ width:calc(100% - 24px); border:1px solid var(--nv-border); border-radius:10px; box-shadow:var(--nv-shadow); padding:6px; }
.sidebar-user .dropdown-item{ padding:9px 12px; font-weight:600; color:#4a5568; border-radius:7px; }
.sidebar-user .dropdown-item:hover{ background:var(--nv-primary-l); color:var(--nv-primary-d); }
.sidebar-user .dropdown-item i{ margin-right:6px; color:var(--nv-primary); }

/* ---------- Cabecalho da pagina: barra branca alinhada com o card da tabela ---------- */
.page-title-box{
  background:var(--nv-card); border:1px solid var(--nv-border); border-radius:var(--nv-radius);
  box-shadow:var(--nv-shadow); padding:15px 22px !important; margin:0 0 22px !important;
  overflow:hidden; min-height:0 !important; height:auto !important; /* overflow contem os floats */
}
.page-title-box .page-title{ margin:7px 0 !important; }
.page-title-box .btn-group, .page-title-box .float-right{ margin-top:0 !important; }
.page-title-box .breadcrumb{ display:none; } /* migalha antiga escondida no cabecalho compacto */

/* ---------- Abas ---------- */
.nav-tabs{ border-bottom:1px solid var(--nv-border); }
.nav-tabs .nav-link{ border:none; color:var(--nv-muted); font-weight:600; border-radius:8px 8px 0 0; }
.nav-tabs .nav-link.active{ color:var(--nv-primary); background:transparent; border-bottom:2px solid var(--nv-primary); }

/* ---------- Alerts ---------- */
.alert{ border-radius:10px; border:none; }
.alert-success{ background:#e9f7ef; color:#1e7e46; }
.alert-danger{ background:#fdeaeb; color:#a11117; }

/* ---------- DataTables ---------- */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ border-radius:8px; border:1px solid var(--nv-border); }
.dataTables_wrapper .paginate_button.current{ background:var(--nv-primary) !important; border-color:var(--nv-primary) !important; color:#fff !important; border-radius:8px !important; }

/* Tabela larga (clientes, dados da empresa) transbordava o card e levava a coluna
   de ACOES pra fora da tela — sem rolagem, nao dava pra editar nem excluir.
   A row da tabela e a unica do wrapper com um filho so; e ela que rola. Quem faz a
   tabela caber e o ajustaLargura() do footer, que libera a quebra so na coluna de
   texto livre (nome/razao social) — liberar todas quebrava CPF e telefone no meio.
   O overflow fica como rede de seguranca em tela estreita. */
.dataTables_wrapper .row > .col-sm-12:only-child{ overflow-x:auto; }
.dataTables_wrapper table.dataTable{ min-width:100%; }
/* A coluna de acoes (a ultima, com o botao de engrenagem) nunca encolhe nem quebra. */
.dataTables_wrapper table.dataTable td:last-child,
.dataTables_wrapper table.dataTable th:last-child{ white-space:nowrap; width:1%; }
/* Titulo de coluna nunca quebra: e ele que segura a largura minima da coluna. */
.dataTables_wrapper table.dataTable thead th{ white-space:nowrap; }

/* Paginacao: o tema so vestia .paginate_button.current, mas o DataTables aqui e o
   build bootstrap4, que usa .page-item/.page-link — por isso a pagina ativa ficava azul. */
.dataTables_wrapper .pagination{ margin-bottom:0; }
.dataTables_wrapper .page-link{ color:var(--nv-text); border-color:var(--nv-border); }
.dataTables_wrapper .page-link:hover{ background:#fbf4f4; color:var(--nv-primary); border-color:var(--nv-border); }
.dataTables_wrapper .page-link:focus{ box-shadow:0 0 0 3px rgba(186,18,24,.12); }
.dataTables_wrapper .page-item.active .page-link{ background:var(--nv-primary); border-color:var(--nv-primary); color:#fff; }
.dataTables_wrapper .page-item.disabled .page-link{ color:#aeb6c4; }
.dataTables_wrapper .page-item:first-child .page-link{ border-radius:8px 0 0 8px; }
.dataTables_wrapper .page-item:last-child .page-link{ border-radius:0 8px 8px 0; }
.dataTables_wrapper .dataTables_info{ color:var(--nv-muted); font-size:13px; }

/* ---------- Telas publicas (login, recuperar e trocar senha) ----------
   Ficaram de fora quando o tema virou global: fundo azul do template antigo e
   botao verde. E a primeira tela que a equipe ve todo dia. */
.wrapper-page{ margin:7% auto; max-width:440px; }
.account-pages, body:has(.wrapper-page){ background:var(--nv-bg) !important; }
.account-bg{ background:transparent !important; box-shadow:none !important; border:none !important; padding:0 !important; }
/* o style.css antigo poe uma borda azul de 5px so aqui — dai o !important */
.wrapper-page .card-box{
  padding:34px 30px 26px; border-radius:14px;
  border:1px solid var(--nv-border) !important; box-shadow:0 10px 30px rgba(16,24,40,.08) !important;
}
.wrapper-page .logo img{ width:230px; max-width:100%; height:auto; }
.wrapper-page .form-control{ height:auto; padding:.7rem .9rem; }
.wrapper-page .btn-block{ padding:.72rem 1rem; font-size:15px; }
.wrapper-page .text-muted{ color:var(--nv-muted) !important; font-size:13.5px; }
.wrapper-page .text-muted:hover{ color:var(--nv-primary) !important; }
.wrapper-page .alert{ font-size:13.5px; }

/* ---------- Barra de auto save (15/09/2026) ----------
   O botao "Salvar dados do orcamento" vivia no fim do card do cabecalho: quem estava
   rolando a tela de itens ou a previa nao via nem o botao nem o aviso de salvo. Agora
   o estado do registro acompanha a pagina, no canto de baixo, e o botao so aparece
   quando ha o que salvar. */
.mp-autosave{
  position:fixed; right:22px; bottom:22px; z-index:1055;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-radius:999px;
  background:var(--nv-card); color:var(--nv-text);
  border:1px solid var(--nv-border);
  box-shadow:0 6px 24px rgba(16,24,40,.14);
  font-family:var(--nv-font); font-size:13.5px; font-weight:600;
  /* 560px: "Alterações não salvas" + os dois botoes cabem em UMA linha. Com 420px o
     "Atualizar prévia" caia para a linha de baixo e a barra virava um bloco. */
  max-width:min(560px, calc(100vw - 44px));
}
.mp-autosave_ponto{ width:9px; height:9px; border-radius:50%; background:var(--nv-success); flex:0 0 auto; }
.mp-autosave_txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-autosave_btn{
  border:none; border-radius:999px; cursor:pointer;
  background:var(--nv-primary); color:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700;
  padding:.38rem .85rem; margin-left:2px; flex:0 0 auto;
}
.mp-autosave_btn:hover{ background:var(--nv-primary-d); }
.mp-autosave_btn[hidden]{ display:none; }

/* "Atualizar prévia" (16/09/2026): acao secundaria, em contorno, para nao competir com o
   "Salvar agora", que e o que importa quando ha coisa por gravar. */
.mp-autosave_btn--previa{
  background:transparent; color:var(--nv-primary);
  border:1px solid var(--nv-border); font-weight:600;
}
.mp-autosave_btn--previa:hover{ background:var(--nv-primary-l); color:var(--nv-primary-d); }

/* "Fechar" do aviso de regra (16/09/2026): unico botao da barra naquele estado, entao vai
   cheio — em contorno, sobre o fundo rosado do alerta, ele sumia. */
/* ---------- Valor do item da preventiva, editavel na tabela (16/09/2026) ----------
   A celula parece texto ate a pessoa clicar: so o cursor e um tracejado no hover contam
   que da para mexer. */
td.mp-valor{ cursor:pointer; position:relative; }
td.mp-valor:hover .mp-valor_txt{ border-bottom:1px dashed var(--nv-primary); }
td.mp-valor--editando{ background:var(--nv-primary-l); cursor:default; }
.mp-valor_input{
  width:110px; border:1px solid var(--nv-primary); border-radius:6px;
  padding:.28rem .5rem; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--nv-text);
}
.mp-valor_input:focus{ outline:none; box-shadow:0 0 0 3px rgba(186,18,24,.12); }
.mp-valor_dica{ display:block; margin-top:3px; font-size:11.5px; color:var(--nv-muted); white-space:nowrap; }
.mp-valor_dica--erro{ color:var(--nv-primary-d); font-weight:600; white-space:normal; }
/* "alterado": este item tem preco proprio, diferente da Tabela Preventiva. */
.mp-valor_tag{
  display:inline-block; margin-left:6px; padding:.12em .45em; border-radius:5px;
  background:var(--nv-primary-l); color:var(--nv-primary-d);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; vertical-align:middle;
}

.mp-autosave_btn--fechar{
  background:var(--nv-primary); color:#fff; border:none;
  box-shadow:0 1px 3px rgba(16,24,40,.18);
}
.mp-autosave_btn--fechar:hover{ background:var(--nv-primary-d); color:#fff; }

.mp-autosave--ok{ color:var(--nv-muted); font-weight:500; }
.mp-autosave--ok .mp-autosave_ponto{ background:var(--nv-success); }

.mp-autosave--sujo{ border-color:#F0C36D; background:#FFFBF0; }
.mp-autosave--sujo .mp-autosave_ponto{ background:var(--nv-warning); }

.mp-autosave--aviso{ border-color:#F0C36D; background:#FFFBF0; }
.mp-autosave--aviso .mp-autosave_ponto{ background:var(--nv-warning); }

.mp-autosave--indo .mp-autosave_ponto{ background:var(--nv-primary); animation:mp-autosave-pulso 1s ease-in-out infinite; }
.mp-autosave--indo{ color:var(--nv-muted); font-weight:500; }

.mp-autosave--erro{ border-color:var(--nv-danger); background:var(--nv-primary-l); color:var(--nv-primary-d); }
.mp-autosave--erro .mp-autosave_ponto{ background:var(--nv-danger); }
.mp-autosave--erro .mp-autosave_txt{ white-space:normal; }

@keyframes mp-autosave-pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

@media (max-width:575.98px){
  .mp-autosave{ left:12px; right:12px; bottom:12px; max-width:none; border-radius:12px; }
}
@media (prefers-reduced-motion:reduce){
  .mp-autosave--indo .mp-autosave_ponto{ animation:none; }
}