/* ==========================================================================
   KR Untitled UI — camada de design system (tokens + componentes)
   Carregada DEPOIS de estilo.css. Prefixo .ku-* evita colisão com Bootstrap/AdminLTE.
   Fonte-única: derivada do kit de componentes aprovado (Untitled UI adaptado à identidade do sistema).
   Sistema white-label (kiilg / krcosmeticos / teste) — nunca cravar nome de marca; usar PROJETO/APP_NAME.
   ========================================================================== */

:root {
  /* Cinzas Untitled UI */
  --ku-g25:#FCFCFD; --ku-g50:#F9FAFB; --ku-g100:#F2F4F7; --ku-g200:#EAECF0; --ku-g300:#D0D5DD;
  --ku-g400:#98A2B3; --ku-g500:#667085; --ku-g600:#475467; --ku-g700:#344054; --ku-g800:#1D2939; --ku-g900:#101828;
  /* Marca (azul) */
  --ku-p50:#EFF4FF; --ku-p100:#D1E0FF; --ku-p400:#528BFF; --ku-p500:#2563EB; --ku-p600:#1D4FD7;
  /* Teal (positivo) */
  --ku-t50:#F0FDF9; --ku-t100:#CCFBEF; --ku-t500:#15B79E; --ku-t600:#0E9384; --ku-t700:#107569;
  /* Estado */
  --ku-w50:#FFFAEB; --ku-w100:#FEF0C7; --ku-w500:#F79009; --ku-w600:#DC6803;
  --ku-e50:#FEF3F2; --ku-e100:#FEE4E2; --ku-e500:#F04438; --ku-e600:#D92D20;

  /* superfícies semânticas */
  --ku-bg:#F4F6FA; --ku-surface:#fff; --ku-surface-2:var(--ku-g50);
  --ku-ink:var(--ku-g900); --ku-ink-2:var(--ku-g600); --ku-ink-3:var(--ku-g500); --ku-ink-4:var(--ku-g400);
  --ku-line:var(--ku-g200); --ku-line-2:var(--ku-g300);
  --ku-brand:var(--ku-p500); --ku-brand-2:var(--ku-p600); --ku-brand-soft:var(--ku-p50);

  /* sombras em camadas */
  --ku-sh-xs:0 1px 2px rgba(16,24,40,.05);
  --ku-sh-sm:0 1px 3px rgba(16,24,40,.1),0 1px 2px rgba(16,24,40,.06);
  --ku-sh-md:0 4px 8px -2px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06);
  --ku-sh-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
  --ku-sh-xl:0 20px 24px -4px rgba(16,24,40,.1),0 8px 8px -4px rgba(16,24,40,.04);
  --ku-ring:0 0 0 4px var(--ku-p100);
  /* Foco PADRÃO de campos (texto/número/select/textarea/data): borda nítida, sem glow/blur. */
  --ku-focus:0 0 0 1px var(--ku-brand);

  --ku-r-sm:8px; --ku-r-md:10px; --ku-r-lg:12px; --ku-r-xl:16px; --ku-r-pill:999px;
  --ku-sans:"Poppins","Segoe UI",ui-sans-serif,-apple-system,Roboto,system-ui,sans-serif;
}

/* ---- Componentes reutilizáveis ------------------------------------------ */

/* Featured icon (assinatura UUI) */
.ku-feat{width:40px;height:40px;border-radius:var(--ku-r-md);display:grid;place-items:center;
  background:var(--ku-brand-soft);color:var(--ku-brand);border:1px solid var(--ku-p100);flex:none;}
.ku-feat > i, .ku-feat svg{font-size:1.1rem;width:20px;height:20px;}
.ku-feat--teal{background:var(--ku-t50);color:var(--ku-t600);border-color:var(--ku-t100);}
.ku-feat--amber{background:var(--ku-w50);color:var(--ku-w600);border-color:var(--ku-w100);}
.ku-feat--rose{background:var(--ku-e50);color:var(--ku-e600);border-color:var(--ku-e100);}
.ku-feat--halo{border:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--ku-brand-soft) 60%,transparent),
  0 0 0 12px color-mix(in srgb,var(--ku-brand-soft) 30%,transparent);}

/* Botões */
.ku-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ku-sans);
  font-size:.9rem;font-weight:600;line-height:1;padding:10px 16px;border-radius:var(--ku-r-sm);cursor:pointer;
  border:1px solid transparent;transition:.14s ease;box-shadow:var(--ku-sh-xs);text-decoration:none;}
.ku-btn:focus-visible{outline:none;box-shadow:var(--ku-ring);}
.ku-btn--pri{background:linear-gradient(180deg,var(--ku-p400),var(--ku-brand));color:#fff;
  box-shadow:var(--ku-sh-xs),inset 0 1px 0 rgba(255,255,255,.2);}
.ku-btn--pri:hover{background:var(--ku-brand-2);color:#fff;}
.ku-btn--sec{background:var(--ku-surface);color:var(--ku-ink-2);border-color:var(--ku-line-2);}
.ku-btn--sec:hover{background:var(--ku-surface-2);color:var(--ku-ink);}
.ku-btn--ok{background:linear-gradient(180deg,var(--ku-t500),var(--ku-t600));color:#fff;}
.ku-btn--danger{background:linear-gradient(180deg,var(--ku-e500),var(--ku-e600));color:#fff;}
.ku-btn--block{width:100%;}
.ku-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Badges */
.ku-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--ku-r-pill);
  font-size:.74rem;font-weight:600;border:1px solid transparent;white-space:nowrap;}
.ku-badge__dot{width:6px;height:6px;border-radius:50%;}
.ku-badge--teal{background:var(--ku-t50);color:var(--ku-t700);border-color:var(--ku-t100);}.ku-badge--teal .ku-badge__dot{background:var(--ku-t500);}
.ku-badge--blue{background:var(--ku-brand-soft);color:var(--ku-brand);border-color:var(--ku-p100);}.ku-badge--blue .ku-badge__dot{background:var(--ku-brand);}
.ku-badge--amber{background:var(--ku-w50);color:var(--ku-w600);border-color:var(--ku-w100);}.ku-badge--amber .ku-badge__dot{background:var(--ku-w500);}
.ku-badge--rose{background:var(--ku-e50);color:var(--ku-e600);border-color:var(--ku-e100);}.ku-badge--rose .ku-badge__dot{background:var(--ku-e500);}
.ku-badge--gray{background:var(--ku-surface-2);color:var(--ku-ink-3);border-color:var(--ku-line);}.ku-badge--gray .ku-badge__dot{background:var(--ku-ink-4);}

/* Card */
.ku-card{background:var(--ku-surface);border:1px solid var(--ku-line);border-radius:var(--ku-r-xl);
  box-shadow:var(--ku-sh-sm);}
.ku-card--pad{padding:22px;}

/* KPI / stat card (assinatura UUI) */
.ku-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.ku-kpi{background:var(--ku-surface);border:1px solid var(--ku-line);border-radius:var(--ku-r-lg);
  box-shadow:var(--ku-sh-xs);padding:18px;min-width:0;}
.ku-kpi__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.ku-kpi__label{font-size:.78rem;color:var(--ku-ink-3);font-weight:500;min-width:0;}
.ku-kpi__val{font-size:1.7rem;font-weight:700;line-height:1.1;color:var(--ku-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ku-kpi__delta{font-size:.76rem;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:5px;color:var(--ku-ink-4);}
.ku-kpi__delta.up{color:var(--ku-t600);}
.ku-kpi__delta.down{color:var(--ku-e600);}
@media (max-width:575.98px){
  .ku-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
  .ku-kpi{padding:14px;}
  .ku-kpi__val{font-size:1.4rem;}
}

/* Campos de formulário */
.ku-field{display:flex;flex-direction:column;gap:6px;}
.ku-field > label{font-size:.82rem;font-weight:600;color:var(--ku-ink-2);}
.ku-req{color:var(--ku-e600);}
.ku-input{width:100%;border:1px solid var(--ku-line-2);border-radius:var(--ku-r-sm);padding:10px 12px;
  font-family:var(--ku-sans);font-size:.9rem;background:var(--ku-surface);color:var(--ku-ink);box-shadow:var(--ku-sh-xs);}
.ku-input::placeholder{color:var(--ku-ink-4);}
.ku-input:focus{outline:none;box-shadow:var(--ku-focus);border-color:var(--ku-brand);}
.ku-input--ok{border-color:var(--ku-t500);box-shadow:0 0 0 1px var(--ku-t500);}
.ku-input--err{border-color:var(--ku-e500);box-shadow:0 0 0 1px var(--ku-e500);}
.ku-fmsg{font-size:.76rem;display:inline-flex;align-items:center;gap:5px;}
.ku-fmsg--ok{color:var(--ku-t700);}.ku-fmsg--err{color:var(--ku-e600);}

/* Input-group com ícone (ex.: campo com ícone à direita, calendário, busca) */
.ku-inputgrp{display:flex;box-shadow:var(--ku-sh-xs);border-radius:var(--ku-r-sm);}
.ku-inputgrp .ku-input{border-right:0;border-radius:var(--ku-r-sm) 0 0 var(--ku-r-sm);box-shadow:none;}
.ku-inputgrp:focus-within{box-shadow:var(--ku-focus);}
.ku-inputgrp__addon{display:inline-flex;align-items:center;justify-content:center;padding:0 13px;
  border:1px solid var(--ku-line-2);border-left:0;border-radius:0 var(--ku-r-sm) var(--ku-r-sm) 0;
  background:var(--ku-surface);color:var(--ku-ink-3);}
.ku-inputgrp__btn{display:inline-flex;align-items:center;gap:7px;border:none;padding:0 15px;
  border-radius:0 var(--ku-r-sm) var(--ku-r-sm) 0;font-family:var(--ku-sans);font-size:.86rem;font-weight:600;
  cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--ku-t500),var(--ku-t600));white-space:nowrap;}

/* Upload de imagem — dropzone (preview + área clicável/arrastar) */
.ku-upload{position:relative;display:flex;align-items:stretch;gap:12px;}
.ku-upload input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0;}
.ku-upload__preview{width:72px;height:72px;flex:none;border:1px solid var(--ku-line);border-radius:var(--ku-r-md);
  display:grid;place-items:center;background:var(--ku-surface-2);color:var(--ku-ink-4);overflow:hidden;cursor:pointer;}
.ku-upload__preview img{width:100%;height:100%;object-fit:cover;display:block;}
.ku-upload__preview i{font-size:1.4rem;}
.ku-upload__zone{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:3px;padding:14px 16px;border:1px dashed var(--ku-line-2);border-radius:var(--ku-r-md);
  background:var(--ku-surface);cursor:pointer;transition:border-color .15s,background .15s;}
.ku-upload__zone:hover,.ku-upload.is-dragover .ku-upload__zone{border-color:var(--ku-brand);background:var(--ku-brand-soft);}
.ku-upload__cta{font-size:.9rem;color:var(--ku-ink-2);}
.ku-upload__cta strong{color:var(--ku-brand);font-weight:600;}
.ku-upload__hint{font-size:.78rem;color:var(--ku-ink-4);}
.ku-upload--err .ku-upload__zone{border-color:var(--ku-e500);}
.ku-upload--err .ku-upload__preview{border-color:var(--ku-e500);}

/* Switch moderno */
.ku-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.88rem;color:var(--ku-ink);}
.ku-switch input{position:absolute;opacity:0;width:0;height:0;}
.ku-switch__track{width:40px;height:22px;border-radius:var(--ku-r-pill);background:var(--ku-line-2);position:relative;transition:.15s;flex:none;}
.ku-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--ku-sh-sm);transition:.15s;}
.ku-switch input:checked + .ku-switch__track{background:var(--ku-t500);}
.ku-switch input:checked + .ku-switch__track::after{transform:translateX(18px);}
.ku-switch input:focus-visible + .ku-switch__track{box-shadow:var(--ku-ring);}

@media (prefers-reduced-motion:reduce){.ku-btn,.ku-switch__track,.ku-switch__track::after{transition:none;}}

/* =========================================================================
   Shell & Dashboard — refino Untitled UI (overrides sobre estilo.css/AdminLTE)
   ========================================================================= */

/* ---- Sidebar: fundo mais rico e profundo ---- */
.kr-main-sidebar,
.kr-main-sidebar.sidebar-dark-primary,
[class*='sidebar-dark-'].kr-main-sidebar {
  background: linear-gradient(185deg, #101a33 0%, #0b1220 62%, #090f1c 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ---- Sidebar: item ativo/caminho na cor da marca (azul, não ciano) ---- */
[class*='sidebar-dark-'] .kr-sidebar-nav .nav-item > .nav-link.active,
.kr-sidebar-nav .nav-item > .nav-link.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.24) 0%, rgba(37, 99, 235, 0.05) 100%) !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  box-shadow: inset 3px 0 0 var(--ku-p400) !important;
  color: #fff !important;
}
.kr-sidebar-nav .nav-item > .nav-link.active .kr-nav-icon-wrap {
  background: rgba(37, 99, 235, 0.26) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #bfd3ff !important;
}
[class*='sidebar-dark-'] .kr-sidebar-nav .nav-item.menu-path > .nav-link .kr-nav-icon-wrap,
.kr-sidebar-nav .nav-item.menu-path > .nav-link .kr-nav-icon-wrap {
  background: rgba(37, 99, 235, 0.16) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  color: #9bb8ff !important;
}
.kr-sidebar-nav .nav-item > .nav-link:hover .kr-nav-icon-wrap {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.22);
  color: #cdddff;
}

/* ---- Header: base alinhada aos tokens ---- */
.kr-main-header.navbar {
  border-bottom: 1px solid var(--ku-line) !important;
}

/* ---- Header: seletor de vendedor, usuário e tiles refinados ---- */
.kr-navbar-vendor-select {
  border-radius: var(--ku-r-sm) !important;
  border-color: var(--ku-line-2) !important;
  color: var(--ku-ink-2) !important;
  background-color: var(--ku-surface) !important;
}
.kr-navbar-vendor-select:hover {
  border-color: var(--ku-line-2) !important;
  background-color: var(--ku-surface-2) !important;
}
.kr-navbar-user-toggle,
.kr-navbar-icon-surface {
  border-radius: var(--ku-r-sm) !important;
}

/* ---- Dashboard: hero claro e elegante ---- */
.kr-dashboard2-page .kr-dashboard2-hero {
  background:
    radial-gradient(110% 190% at 100% 0%, var(--ku-t50), transparent 52%),
    radial-gradient(85% 150% at 0% 0%, var(--ku-brand-soft), transparent 55%),
    var(--ku-surface) !important;
  border: 1px solid var(--ku-line) !important;
  color: var(--ku-ink) !important;
  border-radius: var(--ku-r-xl) !important;
  box-shadow: var(--ku-sh-sm) !important;
  align-items: center !important;
}
.kr-dashboard2-page .kr-dashboard2-hero__title { color: var(--ku-ink) !important; }
.kr-dashboard2-page .kr-dashboard2-hero__subtitle { color: var(--ku-ink-3) !important; }
.kr-dashboard2-page .kr-dashboard2-hero__badge {
  background: var(--ku-brand-soft) !important;
  color: var(--ku-brand) !important;
}
.kr-dashboard2-page .kr-dashboard2-hero__actions .btn {
  border-radius: var(--ku-r-sm) !important;
  border: 1px solid var(--ku-p100) !important;
  color: var(--ku-brand) !important;
  background: var(--ku-brand-soft) !important;
  box-shadow: var(--ku-sh-xs) !important;
}
.kr-dashboard2-page .kr-dashboard2-hero__actions .btn:hover {
  background: var(--ku-p100) !important;
  color: var(--ku-brand-2) !important;
}

/* ---- Dashboard: cards de gráfico/painel + respiro ---- */
.kr-dashboard2-page .card {
  border: 1px solid var(--ku-line);
  border-radius: var(--ku-r-xl);
  box-shadow: var(--ku-sh-sm);
}
.kr-dashboard2-page .card .card-title {
  font-weight: 700;
  color: var(--ku-ink);
  font-size: 0.98rem;
}
.kr-dashboard2-page .kr-dashboard2-kpis { margin-bottom: 1.25rem !important; }
.kr-dashboard2-page .kr-dashboard-individual-panels .col-lg-6 > .card { height: 408px !important; }
.kr-dashboard2-page .kr-dashboard-individual-panels .row { margin-bottom: 0.4rem; }

/* =========================================================================
   TEMA ESCURO — redefine tokens + overrides de superfícies legadas
   Ativado por [data-theme="dark"] no <html>. Toggle no header.
   ========================================================================= */
:root[data-theme="dark"] {
  --ku-g50:#101828; --ku-g100:#1D2939; --ku-g200:#242f42; --ku-g300:#333f57;
  --ku-g400:#5b6b85; --ku-g500:#8b98ad; --ku-g600:#aab4c5; --ku-g700:#cdd4de; --ku-g800:#e6e9ef; --ku-g900:#f5f7fa;
  --ku-p50:#16233d; --ku-p100:#1e2c4d; --ku-brand-soft:#16233d;
  --ku-t50:#0f2723; --ku-t100:#123c34;
  --ku-w50:#2a1f0d; --ku-w100:#3a2c12; --ku-e50:#2a1416; --ku-e100:#3a1a1d;
  --ku-bg:#0a0f1c; --ku-surface:#111827; --ku-surface-2:#0e1524;
  --ku-line:#232f45; --ku-line-2:#2e3c56;
  --ku-ring:0 0 0 4px rgba(37, 99, 235, 0.35);
  --ku-sh-xs:0 1px 2px rgba(0,0,0,.35);
  --ku-sh-sm:0 1px 3px rgba(0,0,0,.4);
  --ku-sh-md:0 6px 14px -2px rgba(0,0,0,.5);
  --ku-sh-lg:0 16px 26px -6px rgba(0,0,0,.55);
  --ku-sh-xl:0 24px 40px -8px rgba(0,0,0,.6);
}

/* fundo global (especificidade alta para vencer o inline do startHtml) */
:root[data-theme="dark"] { background: #0a0f1c !important; background-image: none !important; }
[data-theme="dark"] body.hold-transition,
[data-theme="dark"] body.sidebar-mini,
[data-theme="dark"] body.layout-fixed,
[data-theme="dark"] body.hold-transition.sidebar-mini.layout-fixed {
  background: #0a0f1c !important;
  color: var(--ku-ink);
}
[data-theme="dark"] .wrapper,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .content { background: transparent !important; }

/* navbar / header */
[data-theme="dark"] .kr-main-header.navbar,
[data-theme="dark"] .main-header.navbar {
  background: rgba(17, 24, 39, 0.92) !important;
  border-bottom-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-navbar-icon-surface {
  background: var(--ku-surface-2) !important;
  border-color: var(--ku-line) !important;
  color: var(--ku-ink-3) !important;
}
/* Ring do badge acompanha o fundo do header (branco no claro, escuro no dark) */
[data-theme="dark"] .kr-navbar-icon-badge { --kr-navbar-badge-ring: var(--ku-surface); }
[data-theme="dark"] .kr-navbar-vendor-select {
  background-color: var(--ku-surface-2) !important;
  border-color: var(--ku-line) !important;
  color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .kr-navbar-user-toggle { background: var(--ku-surface-2) !important; }
[data-theme="dark"] .kr-navbar-user-name { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-navbar-user { border-left-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-main-header .navbar-nav .nav-link:hover { background: var(--ku-surface-2) !important; }

/* títulos / breadcrumb */
[data-theme="dark"] .content-header .page-title,
[data-theme="dark"] h1.page-title,
[data-theme="dark"] .text-dark { color: var(--ku-ink) !important; }
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item a { color: var(--ku-ink-3) !important; }

/* cards genéricos (Bootstrap/AdminLTE) */
[data-theme="dark"] .card {
  background: var(--ku-surface) !important;
  border-color: var(--ku-line) !important;
  color: var(--ku-ink) !important;
}
[data-theme="dark"] .card-header { border-color: var(--ku-line) !important; color: var(--ku-ink) !important; }
[data-theme="dark"] .card-title { color: var(--ku-ink) !important; }
[data-theme="dark"] .card-footer { background: var(--ku-surface-2) !important; border-color: var(--ku-line) !important; }

/* formulários */
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] .custom-select {
  background-color: var(--ku-surface-2) !important;
  border-color: var(--ku-line-2) !important;
  color: var(--ku-ink) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--ku-ink-4) !important; }
[data-theme="dark"] label { color: var(--ku-ink-2); }

/* tabelas */
[data-theme="dark"] .table { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .table thead th {
  background: var(--ku-surface-2) !important; color: var(--ku-ink-3) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--ku-line) !important; }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }
[data-theme="dark"] .table-hover tbody tr:hover td { background: var(--ku-surface-2) !important; }

/* dropdowns (notificações, usuário, etc.) */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .kr-navbar-dropdown {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .kr-navbar-dropdown__item:hover { background: var(--ku-surface-2) !important; }

/* modais */
[data-theme="dark"] .modal-content {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--ku-line) !important; }

/* ---- Detalhe (kr-cadastro-detalhes / kr-produto-detalhes) — tema escuro ---- */
/* Overrides das cores claras cravadas em financeiro-relatorios.css (~2183-2503).
   Mantém o CSS base intacto (tema claro) e só recolore no dark via tokens --ku-*. */

/* Cadastro — container e texto base */
[data-theme="dark"] .kr-cadastro-detalhes { color: var(--ku-ink) !important; }

/* Cadastro — faixa de meta (summary) */
[data-theme="dark"] .kr-cadastro-detalhes__meta {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-cadastro-detalhes__meta-divider { background: var(--ku-line) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__label { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__field,
[data-theme="dark"] .kr-cadastro-detalhes__codigo { color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__metric { color: var(--ku-brand) !important; }

/* Cadastro — seções (painéis) */
[data-theme="dark"] .kr-cadastro-detalhes__section {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-cadastro-detalhes__section-title { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__logs { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__log-item { border-bottom-color: var(--ku-line) !important; }

/* Cadastro — rodapé e upload de imagem */
[data-theme="dark"] .kr-cadastro-detalhes__footer { border-top-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__imagem-upload img {
  border-color: var(--ku-line) !important; background: var(--ku-surface-2) !important;
}

/* Cadastro — divisor de meta empilhado no mobile */
[data-theme="dark"] .kr-cadastro-detalhes__meta-item { border-top-color: var(--ku-line) !important; }

/* Produto — hero (thumb) */
[data-theme="dark"] .kr-produto-detalhes__thumb { border-color: var(--ku-line) !important; }

/* Produto — painel (moldura das abas) */
[data-theme="dark"] .kr-produto-detalhes__panel {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important;
}

/* Produto — nav lateral (sidebar) */
[data-theme="dark"] .kr-produto-detalhes__sidebar {
  background: var(--ku-surface-2) !important; border-right-color: var(--ku-line) !important;
  border-bottom-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-produto-detalhes__sidebar-title { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-produto-detalhes__sidebar .nav-link { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-produto-detalhes__sidebar .nav-link:hover {
  background: var(--ku-surface) !important; color: var(--ku-brand) !important;
}
[data-theme="dark"] .kr-produto-detalhes__sidebar .nav-link.active {
  background: var(--ku-brand-soft) !important; color: var(--ku-brand) !important;
  border-left-color: var(--ku-brand) !important;
}

/* Produto — imagens (principal e galeria) */
[data-theme="dark"] .kr-produto-detalhes__img-principal { border-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-produto-detalhes__galeria-item { border-color: var(--ku-line) !important; }

/* botão de tema no header */
.kr-theme-toggle .kr-navbar-icon-surface i.fa-sun { display: none; }
[data-theme="dark"] .kr-theme-toggle .kr-navbar-icon-surface i.fa-moon { display: none; }
[data-theme="dark"] .kr-theme-toggle .kr-navbar-icon-surface i.fa-sun { display: inline-block; }

/* superfícies internas brancas (card-body, bg-white, etc.) no escuro */
[data-theme="dark"] .card-body { background: var(--ku-surface) !important; color: var(--ku-ink) !important; }
[data-theme="dark"] .bg-white { background: var(--ku-surface) !important; }
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-gray-light { background: var(--ku-surface-2) !important; }
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] small.text-muted { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .text-body,
[data-theme="dark"] p, [data-theme="dark"] span:not([class*="badge"]):not([class*="text-"]),
[data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] li { color: inherit; }
/* .ku-kpi__label é um <span>: a regra acima o força a inherit (cor clara) no escuro.
   Restaura a cor semântica do rótulo do KPI. */
[data-theme="dark"] .ku-kpi__label { color: var(--ku-ink-3) !important; }
[data-theme="dark"] hr { border-color: var(--ku-line) !important; }
[data-theme="dark"] .close { color: var(--ku-ink-2) !important; text-shadow: none; }

/* cabeçalhos de card no escuro */
[data-theme="dark"] .card-header { background: var(--ku-surface) !important; }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header .card-title,
[data-theme="dark"] .card-title { color: var(--ku-ink) !important; }

/* botões neutros no escuro */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-light {
  background: var(--ku-surface-2) !important;
  border-color: var(--ku-line-2) !important;
  color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-light:hover {
  background: var(--ku-line) !important;
  color: var(--ku-ink) !important;
}

/* =========================================================================
   Ajustes finos do tema escuro (fonte mais clara + boxes estilosos)
   ========================================================================= */

/* Texto de tabelas mais claro (nomes/valores legíveis) */
[data-theme="dark"] .content .table td,
[data-theme="dark"] .content .table th,
[data-theme="dark"] .tableListagens td,
[data-theme="dark"] .tableListagens th { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .content .table thead th { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td b { color: var(--ku-ink) !important; }

/* Card de prêmios/metas (financial-goals) — escuro e estiloso */
[data-theme="dark"] .financial-goals-card-wrapper {
  background: linear-gradient(180deg, var(--ku-surface-2), var(--ku-surface)) !important;
  border: 1px solid var(--ku-line) !important;
  color: var(--ku-ink) !important;
  box-shadow: var(--ku-sh-sm) !important;
}
[data-theme="dark"] .financial-goals-card-wrapper,
[data-theme="dark"] .financial-goals-card,
[data-theme="dark"] .financial-goals-summary,
[data-theme="dark"] .financial-goals-metrics,
[data-theme="dark"] .financial-goals-progress-footer { color: var(--ku-ink) !important; }
[data-theme="dark"] .financial-goals-card-wrapper h1,
[data-theme="dark"] .financial-goals-card-wrapper h2,
[data-theme="dark"] .financial-goals-card-wrapper h3,
[data-theme="dark"] .financial-goals-card-wrapper h4,
[data-theme="dark"] .financial-goals-card-wrapper strong,
[data-theme="dark"] .financial-goals-card-wrapper span,
[data-theme="dark"] .financial-goals-card-wrapper p,
[data-theme="dark"] .financial-goals-card-wrapper div,
[data-theme="dark"] .financial-goals-metric,
[data-theme="dark"] .financial-goals-metric * { color: var(--ku-ink) !important; }
[data-theme="dark"] .financial-goals-metric {
  background: var(--ku-surface) !important;
  border: 1px solid var(--ku-line) !important;
  border-radius: 12px !important;
}
/* rótulos secundários / muted dentro do card */
[data-theme="dark"] .financial-goals-progress-footer,
[data-theme="dark"] .financial-goals-card-wrapper .text-muted { color: var(--ku-ink-3) !important; }
/* pill de status legível no escuro */
[data-theme="dark"] .financial-goals-status.status-pending { background: rgba(248,113,113,.16) !important; color: #fca5a5 !important; }
[data-theme="dark"] .financial-goals-status.status-complete { background: rgba(34,197,94,.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .financial-goals-status.status-ontrack { background: rgba(59,130,246,.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .financial-goals-status.status-warning { background: rgba(234,179,8,.18) !important; color: #fcd34d !important; }
/* barra de progresso trilha escura */
[data-theme="dark"] .financial-goals-progress { background: var(--ku-line) !important; }

/* =========================================================================
   Componentes kr-financeiro-* no tema escuro (hero, painéis, tabela, paginação)
   — corrige superfícies claras herdadas de financeiro-relatorios.css
   ========================================================================= */
[data-theme="dark"] .kr-financeiro-hero {
  background:
    radial-gradient(110% 190% at 100% 0%, var(--ku-t50), transparent 52%),
    radial-gradient(85% 150% at 0% 0%, var(--ku-brand-soft), transparent 55%),
    var(--ku-surface) !important;
  border: 1px solid var(--ku-line) !important;
}
[data-theme="dark"] .kr-financeiro-competencia,
[data-theme="dark"] .kr-financeiro-hero__title,
[data-theme="dark"] .kr-financeiro-hero h1 { color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-financeiro-subtitle { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-financeiro-badge { background: var(--ku-brand-soft) !important; color: var(--ku-brand) !important; border-color: var(--ku-p100) !important; }
[data-theme="dark"] .btn-app { background: var(--ku-surface-2) !important; border: 1px solid var(--ku-line) !important; color: var(--ku-ink-2) !important; }
[data-theme="dark"] .btn-app:hover { background: var(--ku-line) !important; color: var(--ku-ink) !important; }

[data-theme="dark"] .kr-financeiro-panel,
[data-theme="dark"] .kr-financeiro-table-card { background: var(--ku-surface) !important; border-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-financeiro-panel .card-header { background: var(--ku-surface) !important; border-color: var(--ku-line) !important; }

/* tabela */
[data-theme="dark"] .kr-financeiro-table thead th {
  background: var(--ku-surface-2) !important; color: var(--ku-ink-3) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-financeiro-table td,
[data-theme="dark"] .kr-financeiro-table th { border-color: var(--ku-line) !important; color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-financeiro-table tbody tr:hover td { background: var(--ku-surface-2) !important; }
[data-theme="dark"] .kr-financeiro-table tfoot td,
[data-theme="dark"] .kr-financeiro-table tfoot th {
  background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; border-color: var(--ku-line) !important;
}

/* paginação (rodapé) */
[data-theme="dark"] .kr-financeiro-pagination {
  background: var(--ku-surface-2) !important; border-color: var(--ku-line) !important; color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .kr-financeiro-pagination-count,
[data-theme="dark"] .kr-financeiro-pagination-suffix,
[data-theme="dark"] .kr-financeiro-pagination .text-muted { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-financeiro-pagination .page-link,
[data-theme="dark"] .kr-financeiro-pagination .pgn {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .kr-financeiro-pagination .page-item.active .page-link,
[data-theme="dark"] .kr-financeiro-pagination .pgn.on {
  background: var(--ku-brand) !important; border-color: var(--ku-brand) !important; color: #fff !important;
}

/* header: seletor de vendedor + grupo de ferramentas */
[data-theme="dark"] .kr-navbar-vendor-select {
  background-color: var(--ku-surface-2) !important; color: var(--ku-ink-2) !important; border-color: var(--ku-line) !important;
}

/* labels de filtro legíveis */
[data-theme="dark"] .kr-financeiro-filters label,
[data-theme="dark"] .kr-financeiro-panel label { color: var(--ku-ink-2) !important; }

/* =========================================================================
   Formulários no estilo do kit (global, ambos os temas)
   ========================================================================= */
.form-control, .custom-select, select.form-control, textarea.form-control {
  border-radius: var(--ku-r-sm);
  border: 1px solid var(--ku-line-2);
  box-shadow: var(--ku-sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .custom-select:focus, select.form-control:focus, textarea.form-control:focus {
  border-color: var(--ku-brand);
  box-shadow: var(--ku-focus);
}
/* Mesmo padrão de foco para campos dentro de input-group (sobrepõe o glow do AdminLTE) */
.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > select.form-control:focus,
.input-group > textarea.form-control:focus,
.input-group > .form-control.datetimepicker-input:focus {
  border-color: var(--ku-brand);
  box-shadow: var(--ku-focus);
  z-index: 3;
}
/* Tema escuro: a borda de marca no foco precisa vencer o override [data-theme=dark] .form-control (0,2,0) */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] textarea.form-control:focus,
[data-theme="dark"] .input-group > .form-control:focus {
  border-color: var(--ku-brand);
  box-shadow: var(--ku-focus);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  border: 1px solid var(--ku-line-2); background: var(--ku-surface-2); color: var(--ku-ink-2);
  border-radius: 6px; padding: 5px 12px; margin-right: 10px; cursor: pointer; font-weight: 500;
}

/* =========================================================================
   Dark — campos, abas, filtros, estados vazios (inclui kr-cliente-*)
   ========================================================================= */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background-color: var(--ku-surface-2) !important; border-color: var(--ku-line-2) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--ku-ink-4) !important; }
[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
  background: var(--ku-line) !important; color: var(--ku-ink) !important; border-color: var(--ku-line-2) !important;
}
[data-theme="dark"] .btn-app.btn,
[data-theme="dark"] a.btn-app {
  background: var(--ku-surface-2) !important; border: 1px solid var(--ku-line) !important; color: var(--ku-ink-2) !important;
}

/* abas (nav-tabs / kr-cliente-tabs) */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--ku-line) !important; }
[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .kr-cliente-tabs .nav-link { color: var(--ku-ink-3) !important; background: transparent !important; border-color: transparent !important; }
[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"] .kr-cliente-tabs .nav-link:hover { color: var(--ku-ink) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .kr-cliente-tabs .nav-link.active {
  background: var(--ku-surface) !important; color: var(--ku-t600) !important;
  border-color: var(--ku-line) var(--ku-line) var(--ku-surface) !important;
}
[data-theme="dark"] .kr-cliente-tabs-card,
[data-theme="dark"] .kr-cliente-tab-body { background: var(--ku-surface) !important; }

/* filtros e estados vazios dentro das abas */
[data-theme="dark"] .kr-cliente-filters { background: var(--ku-surface) !important; border-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-cliente-empty,
[data-theme="dark"] .kr-financeiro-empty {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink-3) !important;
}
[data-theme="dark"] .kr-cliente-empty i { color: var(--ku-ink-4) !important; }

/* =========================================================================
   Dark — todos os containers kr-cliente-* (abas: detalhes, movs, produtos,
   pagamentos, alterações, visitas, observações)
   ========================================================================= */
[data-theme="dark"] .kr-cliente-tabs-card,
[data-theme="dark"] .kr-cliente-tab-body,
[data-theme="dark"] .kr-cliente-tab-content,
[data-theme="dark"] .kr-cliente-accordion,
[data-theme="dark"] .kr-cliente-accordion-item,
[data-theme="dark"] .kr-cliente-obs-panel,
[data-theme="dark"] .kr-cliente-obs-history,
[data-theme="dark"] .kr-cliente-obs-item,
[data-theme="dark"] .kr-cliente-obs-list,
[data-theme="dark"] .kr-cliente-obs-form,
[data-theme="dark"] .kr-cliente-table-wrap {
  background: var(--ku-surface) !important;
  border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-cliente-obs-textarea,
[data-theme="dark"] .kr-cliente-obs-empty-inline {
  background: var(--ku-surface-2) !important; border-color: var(--ku-line-2) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .kr-cliente-table-summary { background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-cliente-obs-count {
  background: var(--ku-surface-2) !important; color: var(--ku-ink-3) !important; border-color: var(--ku-line) !important;
}
/* textos das observações/seções */
[data-theme="dark"] .kr-cliente-section-title,
[data-theme="dark"] .kr-cliente-obs-panel__title,
[data-theme="dark"] .kr-cliente-obs-history__title,
[data-theme="dark"] .kr-cliente-obs-item__author,
[data-theme="dark"] .kr-cliente-obs-item__text,
[data-theme="dark"] .kr-cliente-obs-item__body { color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-cliente-obs-panel__subtitle,
[data-theme="dark"] .kr-cliente-obs-item__date,
[data-theme="dark"] .kr-cliente-obs-item__meta,
[data-theme="dark"] .kr-cliente-obs-hint { color: var(--ku-ink-3) !important; }

/* =========================================================================
   Coluna Ações — estilo ghost do kit (ícones neutros que colorizam no hover)
   Aplica em todas as listagens (ambos os temas; hover usa tokens theme-aware)
   ========================================================================= */
td .btn.btn-sm.btn-outline-success,
td .btn.btn-sm.btn-outline-danger,
td .btn.btn-sm.btn-outline-primary,
td .btn.btn-sm.btn-outline-secondary,
td .btn.btn-sm.btn-outline-info,
.kr-financeiro-actions-cell .btn.btn-sm {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ku-ink-3) !important;
  border-radius: var(--ku-r-sm) !important;
  box-shadow: none !important;
  transition: background .12s, color .12s;
}
/* No mobile não há hover: o ícone de ação precisa ser claramente tocável (borda + tinta) */
@media (max-width: 767.98px) {
  td .btn.btn-sm.btn-outline-success,
  td .btn.btn-sm.btn-outline-danger,
  td .btn.btn-sm.btn-outline-primary,
  td .btn.btn-sm.btn-outline-secondary,
  td .btn.btn-sm.btn-outline-info,
  .kr-financeiro-actions-cell .btn.btn-sm {
    background: var(--ku-surface-2) !important;
    border-color: var(--ku-line-2) !important;
    color: var(--ku-brand) !important;
  }
}
td .btn.btn-sm.btn-outline-success:hover,
td .btn.btn-sm.btn-outline-info:hover { background: var(--ku-t50) !important; color: var(--ku-t600) !important; }
td .btn.btn-sm.btn-outline-primary:hover { background: var(--ku-brand-soft) !important; color: var(--ku-brand) !important; }
td .btn.btn-sm.btn-outline-danger:hover { background: var(--ku-e50) !important; color: var(--ku-e600) !important; }
td .btn.btn-sm.btn-outline-secondary:hover { background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; }

/* =========================================================================
   Formulário no kit — estado de erro (vee-validate), botões e alertas
   ========================================================================= */
/* campo em erro (.form-group.invalid) no estilo do kit */
.form-group.invalid .form-control,
.form-group.invalid .custom-select,
.form-group.invalid select,
.form-group.invalid textarea,
.form-group.invalid .input-group .form-control {
  border-color: var(--ku-e500) !important;
  box-shadow: 0 0 0 4px var(--ku-e100) !important;
}
.form-group.invalid label { color: var(--ku-e600) !important; }
/* mensagem de erro estilo kit (com ícone) */
.span-error {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: .76rem; font-weight: 500; color: var(--ku-e600) !important;
}
.span-error::before {
  content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .85em; line-height: 1;
}
/* sem mensagem = sem ícone (evita "erro fantasma" em campo válido) */
.span-error:empty { display: none !important; }

/* AdminLTE .callout tem fundo branco cravado — vaza no tema escuro (fluxo do VerCaixa) */
:root[data-theme="dark"] .callout {
  background-color: var(--ku-surface-2) !important;
  color: var(--ku-ink-2);
}

/* botões do hero (btn-app) no estilo do kit */
.btn-app.btn {
  border-radius: var(--ku-r-sm) !important;
  border: 1px solid var(--ku-line-2) !important;
  background: var(--ku-surface) !important;
  color: var(--ku-ink-2) !important;
  box-shadow: var(--ku-sh-xs) !important;
  transition: background .14s, color .14s, box-shadow .14s;
}
.btn-app.btn:hover { background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; }
/* ações positivas (adicionar/salvar) = botão primário */
.btn-app.btn:has(.fa-plus),
.btn-app.btn:has(.fa-save),
.btn-app.btn:has(.fa-floppy-o) {
  background: linear-gradient(180deg, var(--ku-p400), var(--ku-brand)) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: var(--ku-sh-xs), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-app.btn:has(.fa-plus):hover,
.btn-app.btn:has(.fa-save):hover,
.btn-app.btn:has(.fa-floppy-o):hover { background: var(--ku-brand-2) !important; color: #fff !important; }

/* SweetAlert toast no estilo do kit */
.swal2-popup.swal2-toast {
  border-radius: var(--ku-r-lg) !important;
  box-shadow: var(--ku-sh-lg) !important;
  border: 1px solid var(--ku-line) !important;
}
[data-theme="dark"] .swal2-popup.swal2-toast { background: var(--ku-surface) !important; }
[data-theme="dark"] .swal2-popup.swal2-toast .swal2-title { color: var(--ku-ink) !important; }
[data-theme="dark"] .swal2-popup.swal2-toast .swal2-html-container,
[data-theme="dark"] .swal2-popup.swal2-toast #swal2-content { color: var(--ku-ink-3) !important; }
