/*
 * Design System v2 "Layout Claro" (2026-08-17) — redesign aprovado pelo
 * usuario, aplicado em todo o sistema (ver cabecalho.php e login.php, ambos
 * carregam este arquivo e adicionam a classe body.preview-clean sempre).
 * Sobrepoe o design-system.css v1 (accent laranja cheio #FF8A00, sidebar
 * escura) sem remove-lo, entao ainda e reversivel: tirar este <link> das
 * duas paginas volta ao v1 em todo o sistema.
 */
body.preview-clean{
  --pv-ink:#17181A;
  --pv-ink-soft:#5C5B57;
  --pv-bg:#FCFBF9;
  --pv-surface:#FFFFFF;
  --pv-surface-dim:#F2F0EB;
  --pv-line:#E4E1D8;
  --pv-accent:#E85226;
  --pv-accent-soft:#FCE3D6;
  --pv-success:#2F7A4F;
  --pv-success-soft:#DFEFE4;
  --pv-pending:#B4790A;
  --pv-pending-soft:#F7E7C8;
  --pv-danger:#C23B2B;
  --pv-danger-soft:#F8DDD7;

  background:var(--pv-bg) !important;
  color:var(--pv-ink) !important;
}

/* Escopo leve so com os tokens de cor, sem nenhuma das regras de card/
   sidebar/botao acima - usado em telas "modo focado" (sem shell do sistema,
   ex. checklistexecucao_preencher.php) que so querem o toast redesenhado
   sem herdar overrides de layout que nao fazem sentido fora do shell. */
body.toast-claro{
  --pv-ink:#17181A;
  --pv-ink-soft:#5C5B57;
  --pv-surface:#FFFFFF;
  --pv-line:#E4E1D8;
  --pv-accent:#E85226;
  --pv-accent-soft:#FCE3D6;
  --pv-success:#2F7A4F;
  --pv-success-soft:#DFEFE4;
  --pv-pending:#B4790A;
  --pv-pending-soft:#F7E7C8;
  --pv-danger:#C23B2B;
  --pv-danger-soft:#F8DDD7;
}

/* ---- sidebar: de trilho escuro pra trilho claro com borda fina ---- */
body.preview-clean .app-sidebar{
  background:var(--pv-surface-dim) !important;
  border-right:1px solid var(--pv-line);
  box-shadow:none !important;
}
body.preview-clean .app-sidebar .sidebar-brand{
  border-bottom:1px solid var(--pv-line);
}
body.preview-clean .app-sidebar .brand-text{ color:var(--pv-ink) !important; font-weight:700; }
body.preview-clean .app-sidebar .user-panel{ border-color:var(--pv-line) !important; }
body.preview-clean .app-sidebar .user-panel .info a{ color:var(--pv-ink) !important; }
body.preview-clean .app-sidebar .sidebar-wrapper{ padding-left:.25rem !important; }
body.preview-clean .app-sidebar .nav-link{
  color:var(--pv-ink-soft) !important;
  border-radius:8px;
  margin:1px 10px;
  padding-left:.4rem;
  transition:background .15s ease,color .15s ease;
}
body.preview-clean .app-sidebar .nav-link:hover{
  background:var(--pv-surface) !important;
  color:var(--pv-ink) !important;
}
body.preview-clean .app-sidebar .nav-item > .nav-link.active,
body.preview-clean .app-sidebar .nav-treeview .nav-link.active{
  background:var(--pv-surface) !important;
  color:var(--pv-ink) !important;
  font-weight:700;
  box-shadow:inset 0 0 0 1px var(--pv-line);
}
body.preview-clean .app-sidebar .nav-icon{ color:var(--pv-ink-soft) !important; }
body.preview-clean .app-sidebar .nav-treeview{ background:transparent !important; }
body.preview-clean .app-sidebar .nav-badge{
  background:var(--pv-accent) !important;
  color:#fff !important;
}
/* logo da marca no rodape do menu lateral (menu_lateral.php) */
body.preview-clean .app-sidebar li.nav-item:has(> p.text > img[src*="bannerlogo1"]){
  text-align:center;
}
body.preview-clean .app-sidebar p.text > img[src*="bannerlogo1"]{
  width:85%;max-width:160px;height:auto;
}

/* ---- topo (menu_superior.php) ---- */
body.preview-clean .app-header{
  background:var(--pv-surface) !important;
  border-bottom:1px solid var(--pv-line);
}
body.preview-clean .app-header .nav-link{ color:var(--pv-ink-soft) !important; }
body.preview-clean .app-header .nav-link:hover{ color:var(--pv-accent) !important; }

/* ---- titulo de pagina ---- */
body.preview-clean .app-content-header h1{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--pv-ink) !important;
}

/* ---- cards ----
 * .dashboard-kpi (principal_original.php) fica de fora: sao cards com fundo
 * gradiente colorido proprio (kpi-total/kpi-pago/kpi-vencido/etc, ver estilo
 * inline daquela pagina) e texto branco - a regra generica de fundo claro
 * sobrescrevia o gradiente e deixava o texto branco invisivel sobre fundo
 * claro (achado do usuario, dashboard financeiro).
 */
body.preview-clean .card:not(.dashboard-kpi){
  border:1px solid var(--pv-line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  background:var(--pv-surface) !important;
}
body.preview-clean .card-header{
  background:var(--pv-surface) !important;
  border-bottom:1px solid var(--pv-line) !important;
  padding:16px 22px;
}
body.preview-clean .card-header .card-title{
  color:var(--pv-ink) !important;
  font-weight:700;
  font-size:14.5px;
}
body.preview-clean .card-footer{
  background:var(--pv-surface-dim) !important;
  border-top:1px solid var(--pv-line) !important;
}

/* ---- campos ---- */
body.preview-clean .form-control,
body.preview-clean .form-select{
  border-radius:8px !important;
  border-color:var(--pv-line) !important;
  background:var(--pv-bg) !important;
  color:var(--pv-ink) !important;
}
body.preview-clean .form-control:focus,
body.preview-clean .form-select:focus{
  border-color:var(--pv-accent) !important;
  box-shadow:0 0 0 3px var(--pv-accent-soft) !important;
  background:var(--pv-surface) !important;
}
body.preview-clean label{
  color:var(--pv-ink-soft) !important;
  font-weight:600;
}
body.preview-clean .input-group-text{
  background:var(--pv-surface) !important;
  border-color:var(--pv-line) !important;
  color:var(--pv-ink-soft) !important;
}
body.preview-clean .select2-container--bootstrap4 .select2-selection--single{
  border-color:var(--pv-line) !important;
  background:var(--pv-bg) !important;
}

/* ---- botoes: primario vira solido "ink", nao mais laranja cheio ---- */
body.preview-clean .btn{ border-radius:8px !important; font-weight:600; }
body.preview-clean .btn-primary{
  background:var(--pv-ink) !important;
  border-color:var(--pv-ink) !important;
  color:#fff !important;
}
body.preview-clean .btn-primary:hover{ filter:brightness(1.15); }
body.preview-clean .btn-default{
  background:var(--pv-surface) !important;
  border:1.5px solid var(--pv-line) !important;
  color:var(--pv-ink-soft) !important;
}
body.preview-clean .btn-default:hover{ border-color:var(--pv-ink-soft) !important; color:var(--pv-ink) !important; }
body.preview-clean .btn-soft-primary{
  background:var(--pv-accent-soft) !important;
  color:var(--pv-accent) !important;
  border-color:transparent !important;
}
body.preview-clean .btn-soft-primary:hover{ background:var(--pv-accent) !important; color:#fff !important; }
body.preview-clean .btn-soft-neutral{
  background:var(--pv-surface-dim) !important;
  color:var(--pv-ink-soft) !important;
  border-color:var(--pv-line) !important;
}

/* ---- form-section / form-bloco (cadastro) ---- */
body.preview-clean .form-section{ border-color:var(--pv-line) !important; }
body.preview-clean .form-section-head h3{ color:var(--pv-ink-soft) !important; }
body.preview-clean .form-section-head::before{ background:var(--pv-accent) !important; }
/* Cores por secao (data-cor) tem que vencer o acento unico do Layout Claro -
   sem isso todo bloco fica na mesma cor (--pv-accent), escondendo a
   diferenciacao visual pedida pelo usuario em pagamentos_cadastro/editar. */
body.preview-clean .form-bloco{
  border:1px solid var(--pv-line) !important;
  border-left:4px solid var(--bloco-accent, var(--pv-accent)) !important;
  background:var(--bloco-bg, var(--pv-surface)) !important;
  border-radius:12px !important;
}
body.preview-clean .form-bloco-head::before{ background:var(--bloco-accent, var(--pv-accent)) !important; }
body.preview-clean .form-bloco-head h3{ color:var(--pv-ink) !important; }

/* ---- tabelas ---- */
body.preview-clean table thead th{
  color:var(--pv-ink-soft) !important;
  border-color:var(--pv-line) !important;
  background:var(--pv-surface-dim) !important;
  font-weight:600;
}
body.preview-clean table td{ border-color:var(--pv-line) !important; color:var(--pv-ink) !important; }
body.preview-clean .table-hover>tbody>tr:hover>*{ background:var(--pv-accent-soft) !important; }
body.preview-clean .table-striped>tbody>tr:nth-of-type(odd)>*{ background:var(--pv-surface-dim) !important; }
body.preview-clean #example1 td:nth-child(3){ color:var(--pv-ink) !important; }

/* ---- pills de status (reaproveita .pill do design system v1) ---- */
body.preview-clean .pill-success{ color:var(--pv-success) !important; background:var(--pv-success-soft) !important; }
body.preview-clean .pill-warning{ color:var(--pv-pending) !important; background:var(--pv-pending-soft) !important; }
body.preview-clean .pill-danger{ color:var(--pv-danger) !important; background:var(--pv-danger-soft) !important; }
body.preview-clean .pill-neutral{ color:var(--pv-ink-soft) !important; background:var(--pv-surface-dim) !important; }

/* ---- rodape ---- */
body.preview-clean .app-footer{ color:var(--pv-ink-soft) !important; border-color:var(--pv-line); }
body.preview-clean .app-footer a:hover{ color:var(--pv-accent) !important; }

/* ================= LOGIN (layout de duas colunas) ================= */
body.preview-clean.login-page{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
}
body.preview-clean .pv-login-shell{
  width:100%;max-width:900px;margin:24px;
  background:var(--pv-surface);
  border:1px solid var(--pv-line);
  border-radius:16px;
  overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  box-shadow:0 1px 2px rgba(23,24,26,.04);
}
body.preview-clean .pv-login-visual{
  background:var(--pv-surface-dim);
  border-right:1px solid var(--pv-line);
  padding:48px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
}
body.preview-clean .pv-brand-logo{ width:220px;max-width:85%;height:auto;display:block;margin:0 auto; }
body.preview-clean .pv-login-visual h2{
  margin-top:20px;font-size:clamp(22px,2.6vw,28px);line-height:1.15;font-weight:700;
  letter-spacing:-.01em;max-width:20ch;white-space:nowrap;color:var(--pv-ink);
  text-align:center;
}
body.preview-clean .pv-login-visual p{
  margin-top:12px;font-size:14px;color:var(--pv-ink-soft);line-height:1.6;
  text-align:center;text-wrap:balance;
}
body.preview-clean .pv-metrics{ display:flex;justify-content:center;gap:26px;margin-top:auto;padding-top:22px;border-top:1px solid var(--pv-line); }
body.preview-clean .pv-metrics .n{ font-size:19px;font-weight:700;color:var(--pv-ink);text-align:center; }
body.preview-clean .pv-metrics .l{ font-size:11px;color:var(--pv-ink-soft);margin-top:2px;text-align:center; }
body.preview-clean .pv-login-form{ padding:48px 44px;display:flex;flex-direction:column;justify-content:center; }
body.preview-clean .pv-login-form h2{ font-size:22px;font-weight:700;color:var(--pv-ink);margin:0; }
body.preview-clean .pv-login-form .pv-sub{ font-size:13.5px;color:var(--pv-ink-soft);margin-top:6px; }
/* o form real (ids/JS inalterados) fica dentro do painel direito - so tira a
   moldura de card antiga (banner + borda) pra nao duplicar com o cabecalho
   "Entrar" que ja criamos acima dele */
body.preview-clean .pv-login-form .login-box{ width:100%;margin:0; }
body.preview-clean .pv-login-form .login-box .card{ border:none !important;box-shadow:none !important; }
body.preview-clean .pv-login-form .login-box .card-header{ display:none !important; }
body.preview-clean .pv-login-form .login-box .card-body{ padding:20px 0 0 !important; }
body.preview-clean .pv-login-form .login-box-msg{ display:none; }
body.preview-clean .pv-login-form .form-control{ height:44px; }
body.preview-clean .pv-login-form .btn-primary.w-100{ height:46px;margin-top:6px; }

/* celular: empilha (imagem/texto em cima, formulario embaixo), sem
   min-height:100vh forcado - senao sobra espaco vazio vazio em telas
   bem altas e o conteudo fica jogado no meio */
@media (max-width:720px){
  body.preview-clean.login-page{ display:block;min-height:0; }
  body.preview-clean .pv-login-shell{
    grid-template-columns:1fr;margin:0;max-width:none;
    border:none;border-radius:0;box-shadow:none;min-height:100vh;
  }
  body.preview-clean .pv-login-visual{
    border-right:none;border-bottom:1px solid var(--pv-line);
    padding:32px 24px 24px;align-items:center;text-align:center;
  }
  body.preview-clean .pv-brand-logo{ margin:0 auto; }
  body.preview-clean .pv-login-visual h2{ white-space:normal;max-width:none;margin-top:8px; }
  body.preview-clean .pv-login-visual p{ max-width:38ch;margin-left:auto;margin-right:auto;margin-top:6px; }
  body.preview-clean .pv-metrics{ margin-top:10px;padding-top:10px;justify-content:center; }
  body.preview-clean .pv-login-form{ padding:0 24px 32px; }
  /* espaco entre "Informe seus dados de acesso." e o campo de CPF - achado
     do usuario: no celular sobrava vazio ali e o botao Entrar saia da tela
     sem rolar. */
  body.preview-clean .pv-login-form .login-box .card-body{ padding-top:8px !important; }
  body.preview-clean .pv-login-form .input-group.mb-3{ margin-bottom:.65rem !important; }
}

/* ================= TOASTR (toastr.success/error/warning/info) =================
 * Padrao do plugin: caixa colorida solida, icone base64 embutido, sombra
 * pesada, texto branco - destoava do resto do sistema depois do redesign
 * (achado do usuario). Vira cartao branco com risco de cor a esquerda +
 * icone circular tintado, mesma linguagem visual dos .pill de status ja
 * usados nas tabelas ("Pago"/"Atrasado"). Container fica fora de
 * .preview-clean no DOM (appendado direto no body pelo plugin), mas ainda
 * e descendente de body.preview-clean - o seletor funciona mesmo assim.
 */
body.preview-clean #toast-container > div,
body.toast-claro #toast-container > div{
  background-color:var(--pv-surface) !important;
  color:var(--pv-ink) !important;
  border:1px solid var(--pv-line);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(23,24,26,.12);
  padding:13px 16px 13px 46px;
  opacity:1 !important;
  background-image:none !important;
  position:relative;
  overflow:hidden;
}
body.preview-clean #toast-container > div:hover,
body.toast-claro #toast-container > div:hover{
  box-shadow:0 10px 28px rgba(23,24,26,.16);
  opacity:1 !important;
}
body.preview-clean #toast-container > div::before,
body.toast-claro #toast-container > div::before{
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  position:absolute;
  left:0;top:0;bottom:0;width:4px;
  content:"";
}
body.preview-clean #toast-container > div::after,
body.toast-claro #toast-container > div::after{
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  position:absolute;
  left:15px;top:14px;
  width:22px;height:22px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
}
body.preview-clean #toast-container > .toast-success::before,
body.toast-claro #toast-container > .toast-success::before{ background:var(--pv-success); }
body.preview-clean #toast-container > .toast-success::after,
body.toast-claro #toast-container > .toast-success::after{ content:"\f00c"; background:var(--pv-success-soft); color:var(--pv-success); }
body.preview-clean #toast-container > .toast-error::before,
body.toast-claro #toast-container > .toast-error::before{ background:var(--pv-danger); }
body.preview-clean #toast-container > .toast-error::after,
body.toast-claro #toast-container > .toast-error::after{ content:"\f06a"; background:var(--pv-danger-soft); color:var(--pv-danger); }
body.preview-clean #toast-container > .toast-warning::before,
body.toast-claro #toast-container > .toast-warning::before{ background:var(--pv-pending); }
body.preview-clean #toast-container > .toast-warning::after,
body.toast-claro #toast-container > .toast-warning::after{ content:"\f071"; background:var(--pv-pending-soft); color:var(--pv-pending); }
body.preview-clean #toast-container > .toast-info::before,
body.toast-claro #toast-container > .toast-info::before{ background:var(--pv-accent); }
body.preview-clean #toast-container > .toast-info::after,
body.toast-claro #toast-container > .toast-info::after{ content:"\f05a"; background:var(--pv-accent-soft); color:var(--pv-accent); }

body.preview-clean .toast-title,
body.toast-claro .toast-title{ color:var(--pv-ink) !important; font-weight:700; font-size:13.5px; }
body.preview-clean .toast-message,
body.toast-claro .toast-message{ color:var(--pv-ink-soft) !important; font-size:12.5px; line-height:1.5; }
body.preview-clean .toast-message a,
body.preview-clean .toast-message label,
body.toast-claro .toast-message a,
body.toast-claro .toast-message label{ color:var(--pv-accent) !important; }
body.preview-clean .toast-close-button,
body.toast-claro .toast-close-button{
  color:var(--pv-ink-soft) !important;
  text-shadow:none !important;
  opacity:.7 !important;
  font-weight:400;
}
body.preview-clean .toast-close-button:hover,
body.toast-claro .toast-close-button:hover{ color:var(--pv-ink) !important; opacity:1 !important; }
body.preview-clean .toast-progress,
body.toast-claro .toast-progress{
  background-color:var(--pv-line) !important;
  opacity:1 !important;
  height:2px;
}
body.preview-clean #toast-container > .toast-success .toast-progress,
body.toast-claro #toast-container > .toast-success .toast-progress{ background-color:var(--pv-success) !important; opacity:.5 !important; }
body.preview-clean #toast-container > .toast-error .toast-progress,
body.toast-claro #toast-container > .toast-error .toast-progress{ background-color:var(--pv-danger) !important; opacity:.5 !important; }