@import url(dashboard-modern.css);

@import url(theme.css);

/* style.css - layout moderno e elegante (padronizado com PDV design) */
:root {
      --color-primary: #2563EB;
      /* azul corporativo */
      --color-primary-soft: #EFF6FF;
      --color-success: #16A34A;
      --color-danger: #DC2626;
      --color-text: #23282c;
      --color-text-muted: #5a6066;
      --color-bg: #f4f6f7;
      --color-surface: #FFFFFF;
      --color-border: #e6e9eb;
      --color-white: #FFFFFF;

      /* TEMA-DARK F1: tokens de marca Cambua (centraliza hex hardcoded; clareiam no dark) */
      --brand-teal: #51A8B1;
      --brand-orange: #F58634;
      --brand-green: #1D9E75;
      --radius: 14px;
      --radius-sm: 8px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --gap: 20px;
      --font-size-base: 14px;
      --line-height-base: 1.5;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 2px 2px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0.06);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      /* Additional variables for better hierarchy */
      --font-size-xs: 12px;
      --font-size-sm: 13px;
      --font-size-base: 14px;
      --font-size-md: 15px;
      --font-size-lg: 18px;
      --font-size-xl: 24px;
      --spacing-xs: 8px;
      --spacing-sm: 12px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;

      /* NOVAS VARIÁVEIS - Paleta expandida */
      --color-warning: #251582;
      --color-warning-soft: #FFFBEB;
      --color-info: #0891B2;
      --color-info-soft: #ECFEFF;
      --color-success-soft: #F0FDF4;
      --color-danger-soft: #FEF2F2;
      --color-primary-dark: #1D4ED8;

      /* Sidebar - MENU-3.1 tema CLARO (mockup-menu-v3): fundo branco, pílula teal */
      --sidebar-bg: #FFFFFF;                     /* MENU-3.1: era #1f3a3d (teal-escuro) */
      --sidebar-bg-dark: #FFFFFF;                /* MENU-3.1: área da logo agora branca (era #16292b) */
      --sidebar-text: #283042;                   /* MENU-3.1: tinta escura legível no branco (era #CBD5E1) */
      --sidebar-text-active: #2f6e75;            /* MENU-LATERAL-VISUAL: texto teal-escuro sobre a pilula CLARA (mockup .side a.on) */
      --sidebar-item-active: #e1f3f4;            /* MENU-LATERAL-VISUAL: pilula teal-CLARA do mockup (--teal-l2); era #2f6e75 solido */
      --sidebar-item-hover: #eef9fa;             /* MENU-3.1: teal bem claro (era branco-translúcido) */
      --sidebar-section: #aeb6c4;                /* MENU-3.1: rótulo de grupo cinza (era teal-claro #9fd9c8) */
      --sidebar-restricted: #c98a5a;             /* âmbar discreto p/ blocos restritos (legível no branco) */
      --sidebar-separator: #e8eaf0;              /* MENU-3.1: linha clara (era #2c4548) */

      /* Topbar */
      --topbar-bg: #FFFFFF;
      --topbar-border: #E5E7EB;

      /* ===== MOBILE-FIRST: Breakpoints =====
         Base (sem media query): 0–479px  → phones pequenos (iPhone SE = 375px)
         --bp-sm:  480px                  → phones grandes (iPhone 14 = 430px)
         --bp-md:  768px                  → tablets (iPad Mini = 768px)
         --bp-lg: 1024px                  → desktop pequeno / iPad Pro
         --bp-xl: 1280px                  → desktop padrão
         REGRA: novo código usa min-width (mobile-first). max-width é legado — não adicionar.
      */
      --bp-sm:  480px;
      --bp-md:  768px;
      --bp-lg: 1024px;
      --bp-xl: 1280px;

      /* Espaçamento responsivo */
      --space-xs:  4px;
      --space-sm:  8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 24px;

      /* Alvos de toque */
      --touch-target:    44px;
      --touch-target-sm: 36px;

      /* Bottom navigation */
      --bottom-nav-height: 60px;
      --bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);

      /* Cores de ícones por categoria */
      --icon-vendas: #34D399;
      --icon-cadastro: #60A5FA;
      --icon-financeiro: #4fc78f;
      --icon-relatorios: #A78BFA;
      --icon-usuarios: #c85e5e;
      --icon-config: #94A3B8;
      --icon-dashboard: #38BDF8;

      /* PDV Mobile — headers de seção (Comprou antes / Mais vendidos) */
      --cor-destaque-historico: #1D9E75;
      --cor-destaque-historico-bg: #E1F5EE;
      --cor-destaque-historico-text: #085041;
      --cor-destaque-popular: #E63946;
      --cor-destaque-popular-bg: #FCEBEB;
      --cor-destaque-popular-text: #791F1F;
}

* {
      box-sizing: border-box;
}

@keyframes fadeIn {
      from {
            opacity: 0;
            transform: translateY(20px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: var(--color-white);
      color: var(--color-text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
      margin: 0 0 var(--spacing-md) 0;
      font-weight: var(--font-weight-bold);
      line-height: 1.2;
}

h1 {
      font-size: var(--font-size-xl);
}

h2 {
      font-size: var(--font-size-lg);
}

h3 {
      font-size: var(--font-size-base);
}

h4 {
      font-size: var(--font-size-sm);
}

p {
      margin: 0 0 var(--spacing-md) 0;
}

.app {
      display: flex;
      min-height: 100vh;
      background: transparent;
}

/* Sidebar - Tema escuro elegante estilo SimplesVet */
.sidebar {
      width: 260px;
      background: var(--sidebar-bg);
      color: var(--sidebar-text);
      padding: 0;
      border-right: 1px solid var(--sidebar-separator); /* MENU-3.1: borda clara do mockup (era none) */
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      /* MENU-2.1: coluna flex p/ rodapé fixo. O scroll sai daqui e vai pro
         #main-menu (só o corpo do menu rola; logo e rodapé ficam parados). */
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

/* MENU-2.1: o corpo do menu é o único que rola; absorve o espaço entre a logo
   (topo) e o rodapé (base). min-height:0 deixa o flex item encolher e ativar o scroll. */
#main-menu {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
}

/* Scrollbar elegante — migrada da .sidebar para o #main-menu (MENU-2.1) */
#main-menu::-webkit-scrollbar {
      width: 6px;
}

#main-menu::-webkit-scrollbar-track {
      background: transparent;
}

#main-menu::-webkit-scrollbar-thumb {
      background: #d7dbe6; /* MENU-3.1: cinza visível no fundo branco (era branco-translúcido) */
      border-radius: 3px;
}

#main-menu::-webkit-scrollbar-thumb:hover {
      background: #c2c8d6; /* MENU-3.1 */
}

/* decorative overlay removed for minimal, high-contrast sidebar */
.sidebar::before {
      display: none;
}

/* Logo do sistema - área destacada */
.logo {
      font-weight: 700;
      margin: 0;
      padding: 18px 16px;
      font-size: 16px;
      text-align: left;
      color: var(--sidebar-text); /* MENU-3.1: tinta escura (era branco, sumiria no fundo claro) */
      background: var(--sidebar-bg-dark);
      border-bottom: 1px solid var(--sidebar-separator); /* MENU-3.1: linha clara */
      letter-spacing: 0.3px;
      min-height: 64px;
      flex: 0 0 auto; /* MENU-2.1: topo fixo da coluna flex (não encolhe) */
      display: flex;
      align-items: center;
      gap: 10px;
}

/* MENU-2.1: Minha Conta e Sair foram movidos para o rodapé do sidebar (lar
   canônico). Escondidos na topbar p/ evitar duplicação no desktop. O #userDisplay
   (nome/perfil) segue na topbar. !important sobrevive ao resetChrome do app-header
   (que restaura o display inline do #btn-user a cada rota). No mobile (≤767px) já
   eram escondidos por mobile.css. */
#btn-user,
#btn-logout {
      display: none !important;
}

.menu {
      list-style: none;
      padding: 12px 8px;
      margin: 0;
}

.menu li {
      margin-bottom: 2px;
}

.menu-toggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: transparent;
      border: 0;
      color: var(--sidebar-text);
      padding: 8px 14px;
      text-align: left;
      cursor: pointer;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.2s ease;
}

.menu-toggle:hover {
      background: var(--sidebar-item-hover);
}

.menu-toggle i {
      margin-right: 12px;
}

.menu .caret {
      font-size: 9px;
      color: var(--sidebar-text);
      opacity: 0.55;
      margin-left: auto;
      transition: transform 0.2s ease;
}

.menu li.open .caret {
      transform: rotate(180deg);
}

.menu a:focus,
.menu-toggle:focus {
      outline: 2px solid rgba(81, 168, 177, 0.55); /* MENU-3.1: anel teal visível no branco (era branco-translúcido) */
      outline-offset: 2px;
      border-radius: 8px;
}

.menu a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--sidebar-text);
      padding: 9px 14px;
      border-radius: 8px;
      transition: all 0.2s ease;
      font-weight: 500;
      position: relative;
      font-size: 14px;
}

.menu a i {
      margin-right: 12px;
      font-size: 16px;
}

.menu a:hover {
      background: var(--sidebar-item-hover);
      color: var(--sidebar-text); /* MENU-3.1: tinta escura no hover claro (branco sumiria sobre #eef9fa) */
}

.menu a.disabled {
      opacity: 0.4;
      pointer-events: none;
      cursor: default;
}

/* Item ativo - destaque azul clean */
.menu a.active {
      background: var(--sidebar-item-active);
      color: var(--sidebar-text-active);
      font-weight: 600;
      border-radius: 10px; /* MENU-3.1: pílula do mockup */
      box-shadow: none; /* MENU-LATERAL-VISUAL: pilula clara do mockup nao tem sombra (era sombra teal) */
}

.menu a.active i {
      color: var(--sidebar-text-active) !important;
}

.menu a::before {
      display: none;
}

/* ===== MENU-LATERAL-VISUAL — icones SVG coloridos proprios (trocam o FontAwesome) =====
   So dimensionamento + nao-encolher; a cor vem do proprio SVG (multi-fill), por isso as
   regras "CORES DE ICONES POR CATEGORIA" (que miravam <i>) viram no-op de forma inofensiva.
   Vale desktop E mobile (mesma sidebar/drawer). */
.menu a svg,
.menu-toggle svg,
.submenu a svg,
.sidebar-footer-link svg,
.sidebar-logout-btn svg {
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
}
.menu > li > a svg,
.menu-toggle svg {
      width: 18px;
      height: 18px;
      margin-right: 12px;
}
.sidebar:not(.collapsed) .menu li.has-children > .menu-toggle svg {
      width: 17px;
      height: 17px;
      margin-right: 10px;
}
.submenu a svg {
      width: 15px;
      height: 15px;
      margin-right: 10px;
}
.sidebar-footer-link svg,
.sidebar-logout-btn svg {
      width: 18px;
      height: 18px;
}

/* ===== CORES DE ÍCONES POR CATEGORIA ===== */

/* Dashboard - azul claro */
.menu>li>a[data-route="/dashboard"] i {
      color: var(--icon-dashboard);
}

/* Vendas - verde */
.menu-toggle[data-menu="vendas"] i,
.menu li.has-children:has(.menu-toggle[data-menu="vendas"]) .submenu a i {
      color: var(--icon-vendas);
}

/* Cadastro - azul */
.menu-toggle[data-menu="cadastro"] i,
.menu li.has-children:has(.menu-toggle[data-menu="cadastro"]) .submenu a i {
      color: var(--icon-cadastro);
}

/* Financeiro - amarelo */
.menu-toggle[data-menu="financeiro"] i,
.menu li.has-children:has(.menu-toggle[data-menu="financeiro"]) .submenu a i {
      color: var(--icon-financeiro);
}

/* Relatórios - roxo */
.menu-toggle[data-menu="relatorios"] i,
.menu li.has-children:has(.menu-toggle[data-menu="relatorios"]) .submenu a i {
      color: var(--icon-relatorios);
}

/* Usuários - vermelho claro */
.menu-toggle[data-menu="usuarios"] i,
.menu li.has-children:has(.menu-toggle[data-menu="usuarios"]) .submenu a i {
      color: var(--icon-usuarios);
}

/* Configurações - cinza */
.menu>li>a[data-route="/config"] i {
      color: var(--icon-config);
}

/* Blocos da reorganização do menu (ids novos do MENU_SCHEMA) */
.menu-toggle[data-menu="operacao"] i,
.menu li.has-children:has(.menu-toggle[data-menu="operacao"]) .submenu a i {
      color: var(--icon-vendas);
}

.menu-toggle[data-menu="suprimentos"] i,
.menu li.has-children:has(.menu-toggle[data-menu="suprimentos"]) .submenu a i {
      color: var(--icon-cadastro);
}

.menu-toggle[data-menu="fiscal"] i,
.menu li.has-children:has(.menu-toggle[data-menu="fiscal"]) .submenu a i {
      color: var(--icon-relatorios);
}

.menu-toggle[data-menu="configuracoes"] i {
      color: var(--icon-config);
}

/* ============================================================
   MENU MOCKUP TEAL — cabeçalhos discretos + blocos restritos
   ============================================================ */

/* Cabeçalho de seção = rótulo pequeno, maiúsculo, esmaecido (menos "botão") */
.menu li.has-children > .menu-toggle {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--sidebar-section);
}

/* :not(.collapsed) p/ não brigar com o modo só-ícones (sidebar colapsada) */
.sidebar:not(.collapsed) .menu li.has-children > .menu-toggle i {
      font-size: 15px;
      margin-right: 10px;
}

.menu li.has-children > .menu-toggle i {
      color: var(--sidebar-section);
}

/* Blocos restritos (Financeiro/Suprimentos/Fiscal/Configurações): âmbar + cadeado */
.menu li.is-restricted > .menu-toggle,
.menu li.is-restricted > .menu-toggle i {
      color: var(--sidebar-restricted);
}

.sidebar:not(.collapsed) .menu li.is-restricted > .menu-toggle i.menu-lock {
      font-size: 11px;
      margin-left: auto;
      margin-right: 8px;
      opacity: 0.85;
}

.menu li.is-restricted > .menu-toggle .caret {
      margin-left: 0;
}

/* Separadores finos entre blocos do menu */
.menu > li + li {
      border-top: 1px solid var(--sidebar-separator);
      padding-top: 4px;
}

/* Submenu styles - limpo e integrado */
.submenu {
      list-style: none;
      padding: 4px 0;
      margin: 0;
      background: transparent;
      border-radius: 0;
      margin-left: 0;
      margin-right: 0;
      display: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease;
      opacity: 1;
}

.submenu li {
      margin: 0;
}

.submenu a {
      padding: 7px 12px 7px 42px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 6px;
      margin: 1px 8px;
      border-left: none;
      color: var(--sidebar-text);
      opacity: 1; /* MENU-LATERAL-VISUAL: ink cheio do mockup (era 0.85 = "cinza apagado") */
}

.submenu a:hover {
      background: var(--sidebar-item-hover);
      opacity: 1;
}

.submenu a.active {
      background: var(--sidebar-item-active);
      color: var(--sidebar-text-active);
      opacity: 1;
      box-shadow: none; /* MENU-LATERAL-VISUAL: pilula clara do mockup sem sombra */
}

/* MENU-3.1: ícone do item ativo do submenu também branco sobre a pílula teal */
.submenu a.active i {
      color: var(--sidebar-text-active) !important;
}

.menu li.open .submenu {
      display: block;
      max-height: 1000px;
}

/* Subgrupos dentro de um submenu (ex.: Configurações → Empresa/Contábil/...) */
.submenu-subheader {
      list-style: none;
      padding: 8px 14px 3px 30px;
      margin: 4px 0 2px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--sidebar-text);
      opacity: 0.42;
      pointer-events: none;
      user-select: none;
}

.submenu-subheader:first-child {
      margin-top: 0;
}

/* Item de roadmap ("em breve") — esmaecido, não-clicável, com selo */
.menu a.menu-soon {
      opacity: 0.45;
      cursor: default;
}

.menu a.menu-soon:hover {
      background: transparent;
}

.menu-soon-badge {
      margin-left: auto;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 8px;
      background: #f1f3f8; /* MENU-3.1: cinza-claro do selo (era branco-translúcido) */
      color: var(--sidebar-section); /* MENU-3.1: texto cinza esmaecido do selo "em breve" */
      white-space: nowrap;
}

/* AI Insights styles - elegant card, grid and list */
.ai-insights-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: var(--spacing-md);
      box-shadow: var(--shadow);
      animation: fadeIn 360ms ease both;
      max-width: 100%;
}

.ai-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap);
      margin-bottom: var(--spacing-md);
}

.ai-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      color: var(--color-text);
      font-size: var(--font-size-lg);
}

.ai-title i {
      color: var(--color-primary);
      font-size: 20px;
}

.ai-actions .btn {
      padding: 8px 12px;
      border-radius: 10px;
      border: 0;
      cursor: pointer;
      background: var(--color-primary);
      color: var(--color-white);
      font-weight: 700;
}

.insights-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: var(--spacing-md);
}

.insights-section h4 {
      margin: 0 0 var(--spacing-sm) 0;
      font-size: var(--font-size-base);
      color: var(--color-text-muted);
}

.insights-list,
.recommendations-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
}

.insights-list li,
.recommendations-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), transparent);
      border-radius: 10px;
}

.insights-list li i,
.recommendations-list li i {
      min-width: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--color-primary);
}

.insight-text {
      color: var(--color-text);
      font-weight: 600;
}

.recommendations-list li i {
      color: #ff9800;
}

.ai-footer {
      margin-top: var(--spacing-sm);
      border-top: 1px dashed var(--color-border);
      padding-top: var(--spacing-sm);
      display: flex;
      justify-content: flex-end;
      color: var(--color-text-muted);
      font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
      .insights-grid {
            grid-template-columns: 1fr;
      }
}

/* Main area: flat, corporate */
.main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--color-bg);
      border-radius: 0;
      margin: 0 0 0 260px;
      /* espaço para sidebar fixa */
      box-shadow: none;
      overflow: visible;
      min-width: 0;
}

#app {
      min-width: 0;
}

/* ===== TOPBAR - Profissional e Limpa ===== */
.topbar {
      height: 64px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      background: var(--topbar-bg);
      border-bottom: 1px solid var(--topbar-border);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      position: sticky;
      top: 0;
      z-index: 100;
}

.topbar .top-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: var(--color-text);
      font-size: 18px;
      min-width: 200px;
}

/* Topbar-Fase3: regras de .topbar .top-middle (barra da busca global) REMOVIDAS
   — o .top-middle e o campo de busca foram enterrados junto com a topbar. */

.topbar .top-right {
      display: flex;
      gap: 16px;
      align-items: center;
}

/* Avatar circular com inicial do usuário */
.topbar .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--color-primary);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar .user-avatar:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Info do usuário ao lado do avatar */
.topbar .user-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.3;
}

.topbar .user-info .user-name {
      font-weight: 600;
      font-size: 14px;
      color: var(--color-text);
}

.topbar .user-info .user-email {
      font-size: 12px;
      color: var(--color-text-muted);
}

/* Display de usuário existente - melhorado */
.topbar #userDisplay {
      font-size: 13px;
      color: var(--color-text-muted);
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

/* Botão de perfil */
#btn-user.btn-top {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 50%;
      background: var(--color-primary);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
}

#btn-user.btn-top:hover {
      background: var(--color-primary-dark);
}

/* Botão Sair - discreto com ícone */
#btn-logout.btn-top {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--color-text-muted);
      border: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      position: relative;
      transition: all 0.2s ease;
}

#btn-logout.btn-top:hover {
      background: var(--color-danger-soft);
      border-color: var(--color-danger);
      color: var(--color-danger);
      transform: none;
      box-shadow: none;
}

/* Tooltip no botão sair */
#btn-logout.btn-top[title]:hover::after {
      content: attr(title);
      position: absolute;
      bottom: -32px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--color-text);
      color: var(--color-white);
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 1000;
}

/* Botões genéricos da topbar */
.btn-top {
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      background: var(--color-primary);
      color: var(--color-white);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
}

.btn-top:hover {
      background: var(--color-primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-top i {
      font-size: 12px;
}

/* Botões ocultos por padrão - estilo quando visíveis */
#btn-refresh.btn-top,
#btn-export.btn-top {
      background: var(--color-bg);
      color: var(--color-text);
      border: 1px solid var(--color-border);
}

#btn-refresh.btn-top:hover,
#btn-export.btn-top:hover {
      background: var(--color-primary-soft);
      border-color: var(--color-primary);
      color: var(--color-primary);
}

.content {
      background: var(--color-bg);
      padding: 24px;
      border-radius: 0;
      max-width: 100%;
      display: none;
}

/* Center column (pages) — Padronizado com PDV design */
.container {
      background: var(--color-bg);
      padding: 0px;
      border-radius: 0;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0px;
      min-width: 0;
}

/* Right summary column */
.summary {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

/* Wrapper to place list and summary side-by-side */
.list-summary {
      display: flex;
      gap: 24px;
      align-items: flex-start;
}

.list-summary .card {
      flex: 1 1 auto;
}

.list-summary .summary {
      width: 320px;
      max-width: 320px;
}

/* ===== MÓDULO 3: CARDS DO DASHBOARD - Estilo SimplesVet ===== */

/* Cards de métrica coloridos e vibrantes */
.metric-card {
      border-radius: 14px;
      color: var(--color-white);
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 700;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;
      margin-bottom: 16px;
      cursor: pointer;
      background: var(--color-primary);
      min-height: 100px;
}

/* Ícone grande decorativo no canto direito */
.metric-card::after {
      content: '';
      position: absolute;
      right: -10px;
      top: 50%;
      transform: translateY(-50%);
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
}

/* Hover com elevação */
.metric-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Container do conteúdo */
.metric-card>div:first-child {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
      z-index: 1;
}

/* Label/título do card */
.metric-card .small,
.metric-card .metric-label {
      font-size: 13px;
      font-weight: 500;
      opacity: 0.9;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

/* Valor principal - grande e bold */
.metric-card .metric-value,
.metric-card>div:first-child>div:nth-child(2) {
      font-size: 28px;
      font-weight: 800;
      line-height: 1.1;
      display: flex;
      align-items: center;
      gap: 8px;
}

/* Ícone no card */
.metric-card i,
.metric-card .metric-icon {
      font-size: 32px;
      opacity: 0.9;
      z-index: 1;
}

/* Meta/subtítulo à direita */
.metric-card .meta {
      text-align: right;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.85;
      z-index: 1;
}

/* ===== CORES DOS CARDS POR TIPO ===== */

/* Clientes - Azul Primary */
.metric-card.blue,
.metric-card.clientes,
.metric-card[data-type="clientes"] {
      background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

/* Animais - Verde Success */
.metric-card.green,
.metric-card.animais,
.metric-card[data-type="animais"] {
      background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}

/* Vendas - Laranja Warning */
.metric-card.orange,
.metric-card.vendas,
.metric-card[data-type="vendas"] {
      background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
}

/* Receitas - Azul Petróleo Info */
.metric-card.teal,
.metric-card.receitas,
.metric-card[data-type="receitas"] {
      background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
}

/* Despesas - Vermelho Danger */
.metric-card.red,
.metric-card.despesas,
.metric-card[data-type="despesas"] {
      background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
}

/* Roxo - Relatórios/Outros */
.metric-card.purple,
.metric-card[data-type="relatorios"] {
      background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

/* Cinza/Neutro */
.metric-card.dark,
.metric-card.neutral {
      background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

/* ===== CARDS COM FUNDO BRANCO (estilo alternativo) ===== */
.metric-card.light {
      background: var(--color-white);
      color: var(--color-text);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow);
}

.metric-card.light::after {
      background: rgba(0, 0, 0, 0.03);
}

.metric-card.light.blue {
      border-left: 4px solid var(--color-primary);
}

.metric-card.light.green {
      border-left: 4px solid var(--color-success);
}

.metric-card.light.orange {
      border-left: 4px solid var(--color-warning);
}

.metric-card.light.red {
      border-left: 4px solid var(--color-danger);
}

.metric-card.light .metric-value {
      color: var(--color-text);
}

/* ===== GRID DE CARDS DO DASHBOARD ===== */
.dashboard-cards,
.metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-bottom: 24px;
}

/* ===== CARDS DE GRÁFICO ===== */
.chart-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 20px;
      box-shadow: var(--shadow);
      transition: box-shadow 0.2s ease;
}

.chart-card:hover {
      box-shadow: var(--shadow-lg);
}

.chart-card .chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--color-border);
}

.chart-card .chart-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text);
      margin: 0;
}

.chart-card .chart-period {
      display: flex;
      align-items: center;
      gap: 8px;
}

.chart-card .chart-period select {
      padding: 6px 12px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      font-size: 13px;
      color: var(--color-text-muted);
      background: var(--color-bg);
      cursor: pointer;
}

.chart-card .chart-period select:focus {
      outline: none;
      border-color: var(--color-primary);
}

.chart-card .chart-body {
      min-height: 200px;
}

/* Grid de gráficos */
.charts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 24px;
      margin-bottom: 24px;
}

/* ===== CARDS DE RESUMO LATERAL ===== */
.summary-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
}

.summary-card .summary-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-muted);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.summary-card .summary-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--color-text);
}

.summary-card .summary-change {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 8px;
      padding: 4px 8px;
      border-radius: 4px;
}

.summary-card .summary-change.positive {
      color: var(--color-success);
      background: var(--color-success-soft);
}

.summary-card .summary-change.negative {
      color: var(--color-danger);
      background: var(--color-danger-soft);
}

/* Onboarding / Login */
.login-page {
      --bg: #eef4f8;
      --card: #ffffff;
      --muted: #6b7280;
      --primary: #2e7d32;
      --accent: #0ea5e9;
      --danger: #c62828;
      --glass: rgba(255, 255, 255, 0.6);
      --shadow: 0 10px 30px rgba(19, 24, 38, 0.08);
      --radius: 14px;
}

.login-page *,
.login-page *::before,
.login-page *::after {
      box-sizing: border-box;
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.login-page html,
.login-page body {
      height: 100%;
      margin: 0;
      background: linear-gradient(180deg, var(--bg), #f9fbfd);
}

.login-page .container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
}

.login-page .card {
      width: 100%;
      max-width: 980px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fff);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr 420px;
      overflow: hidden;
}

/* Left visual */
.login-page .visual {
      padding: 36px;
      background: linear-gradient(135deg, #f3fbff, #eef9f1);
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: flex-start;
      justify-content: center;
}

.login-page .visual .kicker {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-weight: 700;
      font-size: 12px;
}

.login-page .visual h2 {
      margin: 0;
      font-size: 28px;
      color: #07223a;
}

.login-page .visual p {
      margin: 0;
      color: var(--muted);
      max-width: 44ch;
}

.login-page .features {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
}

.login-page .feature {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      padding: 12px;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
}

.login-page .feature svg {
      width: 28px;
      height: 28px;
}

/* Right content */
.login-page .panel {
      padding: 28px;
      background: var(--card);
}

.login-page .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 6px;
}

.login-page .logo {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), #2196f3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
}

.login-page h1 {
      margin: 0;
      font-size: 20px;
}

.login-page .lead {
      margin: 6px 0 18px;
      color: var(--muted);
      font-size: 13px;
}

.login-page .tabs {
      display: flex;
      background: #f6f8fb;
      padding: 6px;
      border-radius: 10px;
      gap: 6px;
      margin-bottom: 16px;
}

.login-page .tab {
      flex: 1;
      text-align: center;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      color: var(--muted);
}

.login-page .tab[aria-selected="true"] {
      background: linear-gradient(180deg, #fff, #fbfffb);
      color: var(--primary);
      box-shadow: 0 6px 18px rgba(30, 40, 60, 0.04);
}

.login-page form {
      display: grid;
      gap: 12px;
}

.login-page label {
      font-size: 13px;
      color: var(--muted);
}

.login-page input,
.login-page select {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid #e8eef5;
      background: #fff;
      font-size: 14px;
}

.login-page .row {
      display: flex;
      gap: 10px;
}

.login-page .row>* {
      flex: 1;
}

.login-page .helper {
      font-size: 13px;
      color: var(--muted);
}

.login-page .error {
      color: var(--danger);
      font-size: 13px;
}

.login-page .actions {
      display: flex;
      gap: 8px;
      margin-top: 6px;
}

.login-page .btn {
      flex: 1;
      padding: 12px;
      border-radius: 10px;
      border: 0;
      cursor: pointer;
      font-weight: 700;
}

.login-page .btn.primary {
      background: linear-gradient(90deg, var(--primary), #1b9b3a);
      color: #fff;
}

.login-page .btn.ghost {
      background: transparent;
      border: 1px solid #e6eef6;
}

.login-page .small {
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
}

.login-page .password-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px;
      border-radius: 6px;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      cursor: pointer;
      transition: all 0.2s ease;
      color: #6c757d;
      font-size: 14px;
}

.login-page .password-toggle:hover {
      background: #e9ecef;
      border-color: #dee2e6;
      color: #495057;
}

.login-page .password-toggle:active {
      background: #dee2e6;
      transform: scale(0.98);
}

.login-page .password-toggle i {
      font-size: 16px;
      transition: transform 0.2s ease;
}

.login-page .password-toggle[aria-pressed="true"] i {
      color: var(--primary);
}

/* tiny helpers */
.login-page .muted {
      color: var(--muted);
}

.login-page .success {
      color: green;
}

/* responsive */
@media (max-width: 920px) {
      .login-page .card {
            grid-template-columns: 1fr;
      }

      .login-page .visual {
            order: 2;
            padding: 18px;
      }

      .login-page .panel {
            order: 1;
      }
}

@media (max-width: 420px) {
      .login-page .card {
            border-radius: 12px;
      }

      .login-page .logo {
            width: 48px;
            height: 48px;
      }
}

/* subtle focus styles */
.login-page input:focus,
.login-page button:focus {
      outline: 3px solid rgba(14, 165, 233, 0.12);
      outline-offset: 2px;
}

.login-page .muted {
      margin-top: 14px;
      font-size: 13px;
}

.login-page .password-container {
      position: relative;
}

.login-page .password-toggle {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
}

.login-page #loginError,
.login-page #regError {
      display: none;
}

.login-page .actions {
      display: flex;
      gap: 8px;
      margin-top: 6px;
}

.login-page .checkbox-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
}

.login-page .checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
}

.login-page #forgotLink {
      font-size: 13px;
      color: var(--accent);
      text-decoration: none;
}

.login-page #registerPanel {
      display: none;
}

.login-page #redirectLink {
      display: none;
      padding: 18px;
}




.onboard-step {
      padding: 6px 0;
}

.stepper {
      display: flex;
      gap: 8px
}

.stepper .step {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eee;
      color: #333
}

.stepper .step.active {
      background: var(--color-primary);
      color: #fff
}

.helper-error {
      color: var(--color-danger);
      font-size: 12px;
      margin-top: 6px
}

/* Onboarding helpers */
.hidden {
      display: none !important;
}

.onboard-container {
      max-width: 900px;
      margin: 28px auto;
}

.onboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.onboard-content {
      margin-top: 12px;
}

.form-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
}

/* Accessibility utilities */
.sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
}


/* Metric Cards duplicados removidos - usando nova estrutura acima */
.metric-card::before {
      display: none;
}

/* Override para compatibilidade - cards com borda lateral */
.metric-card.border-style {
      background: var(--color-white);
      color: var(--color-text);
      border-left: 6px solid var(--color-primary);
}

.metric-card.border-style.blue {
      border-left-color: var(--color-primary);
}

.metric-card.border-style.red {
      border-left-color: var(--color-danger);
}

.metric-card.border-style.green {
      border-left-color: var(--color-success);
}

.metric-card.border-style.dark {
      border-left-color: rgba(0, 0, 0, 0.1);
}

/* Snackbar / toast notifications */
.snackbar {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 28px;
      min-width: 260px;
      max-width: 92%;
      background: rgba(17, 24, 39, 0.98);
      color: white;
      padding: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 8px 30px rgba(2, 6, 23, 0.4);
      display: flex;
      gap: 12px;
      align-items: center;
      font-weight: 600;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
}

.snackbar.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
}

.snackbar.success {
      background: var(--color-success);
      color: white;
}

.snackbar.error {
      background: var(--color-danger);
      color: white;
}

.snackbar.info {
      background: var(--color-primary);
      color: white;
}

.snackbar .msg {
      flex: 1;
      font-weight: 600;
}

.snackbar .close {
      cursor: pointer;
      opacity: 0.85;
}

.metric-card .meta {
      text-align: right;
      font-size: 14px;
      font-weight: 600;
      opacity: 0.9;
      z-index: 1;
}

/* Dashboard grid for finance pages */
.finance-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
}

.finance-grid .row-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
}

.panel-scroll {
      max-height: 220px;
      overflow-y: auto;
      padding-right: 6px;
}

.small-muted {
      color: #5b6b76;
      font-size: 13px;
}

/* Cards, tables and forms — Padronizado com PDV design */
.card {
      border-radius: var(--radius);
      padding: 20px;
      background: var(--color-surface);
      box-shadow: var(--shadow);
      border: 1px solid var(--color-border);
      transition: box-shadow 0.2s ease;
}

.card:hover {
      transform: none;
      box-shadow: var(--shadow-md);
}

.card.small {
      padding: 16px;
}

/* ===== MÓDULO 4: TABELAS - Padronizado com PDV design ===== */

.table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 0;
      background: var(--color-white);
}

/* Cabeçalho da tabela */
.table th,
.table thead th {
      padding: 12px 16px;
      background: #F8FAFC;
      color: var(--color-text-muted);
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-align: left;
      border-bottom: 2px solid var(--color-border);
      white-space: nowrap;
}

/* Células da tabela */
.table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--color-border);
      text-align: left;
      font-size: var(--font-size-base);
      color: var(--color-text);
      background: var(--color-white);
      vertical-align: middle;
}

/* Remover zebra - fundo branco uniforme */
.table tbody tr:nth-child(even) td {
      background: var(--color-white);
}

.table tbody {
      border-top: none;
}

/* Hover nas linhas */
.table tbody tr {
      transition: background 0.15s ease;
}

.table tbody tr:hover td {
      background: #F8FAFC;
}

/* Última linha sem borda */
.table tbody tr:last-child td {
      border-bottom: none;
}

/* ===== COLUNA DE AÇÕES ===== */
.table .actions-cell,
.table td.actions {
      text-align: right;
      white-space: nowrap;
}

.table .actions-cell .btn-icon,
.table .row-actions .btn-icon {
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--color-text-muted);
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      opacity: 0;
}

.table tbody tr:hover .btn-icon {
      opacity: 1;
}

.table .btn-icon:hover {
      background: var(--color-primary-soft);
      color: var(--color-primary);
}

.table .btn-icon.danger:hover {
      background: var(--color-danger-soft);
      color: var(--color-danger);
}

/* Botões de ação sempre visíveis em mobile */
@media (max-width: 768px) {
      .table .btn-icon {
            opacity: 1;
      }
}

/* ===== BADGES DE STATUS ===== */
.status-badge,
.badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      white-space: nowrap;
}

/* Ativo / Aplicada / Pago - Verde */
.badge.success,
.badge.ativo,
.badge.aplicada,
.badge.pago,
.status-badge.success {
      background: var(--color-success-soft);
      color: var(--color-success);
}

/* Pendente / Programada - Azul */
.badge.primary,
.badge.pendente,
.badge.programada,
.badge.info,
.status-badge.pending {
      background: var(--color-primary-soft);
      color: var(--color-primary);
}

/* Cancelado / Vencido - Vermelho */
.badge.danger,
.badge.cancelado,
.badge.vencido,
.badge.inativo,
.status-badge.danger {
      background: var(--color-danger-soft);
      color: var(--color-danger);
}

/* Alerta / Baixo estoque - Amarelo */
.badge.warning,
.badge.alerta,
.badge.baixo-estoque,
.status-badge.warning {
      background: var(--color-warning-soft);
      color: var(--color-warning);
}

/* Neutro / Muted */
.badge.muted,
.badge.neutral,
.status-badge.muted {
      background: #F1F5F9;
      color: var(--color-text-muted);
}

/* Info / Azul petróleo */
.badge.teal {
      background: var(--color-info-soft);
      color: var(--color-info);
}

/* ===== BADGES PILL PADRAO (FINANCEIRO / CADASTRO) ===== */
.nmp-badge,
.rfi-type-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
}

.nmp-badge i,
.rfi-type-badge i {
      font-size: 9px;
      line-height: 1;
}

.nmp-badge--soft {
      padding: 2px 9px;
      border-radius: 20px;
      font-weight: 600;
}

.nmp-badge--recebido,
.nmp-badge--aprovado,
.nmp-badge--concluido,
.nmp-badge--ativo,
.nmp-badge--entrada,
.rfi-type-badge--entrada {
      background: #dcfce7;
      color: #166534;
}

.nmp-badge--pendente,
.nmp-badge--pausada {
      background: #fef3c7;
      color: #92400e;
}

.nmp-badge--pago,
.nmp-badge--paga {
      background: #d1fae5;
      color: #065f46;
}

.nmp-badge--inativo,
.nmp-badge--falecido,
.nmp-badge--cancelada,
.nmp-badge--saida,
.rfi-type-badge--saida {
      background: #fee2e2;
      color: #991b1b;
}

.rfi-type-badge--neutro {
      background: #e5e7eb;
      color: #374151;
}

/* ===== TABELA RESPONSIVA ===== */
.table-container {
      width: 100%;
      overflow-x: auto;
      border-radius: 8px;
      border: 1px solid var(--color-border);
}

/* ===== DATA TABLE (tabelas de dados) ===== */
.data-table {
      width: 100%;
      border-collapse: collapse;
}

.data-table th {
      padding: 12px 16px;
      background: #F8FAFC;
      color: var(--color-text-muted);
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-align: left;
      border-bottom: 2px solid var(--color-border);
}

.data-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid var(--color-border);
      font-size: 14px;
}

.data-table tbody tr:hover {
      background: #F8FAFC;
}

/* ===== TABELA COMPACTA ===== */
.table.compact th,
.table.compact td {
      padding: 8px 12px;
      font-size: 13px;
}

/* ===== TABELA STRIPED (zebrada) ===== */
.table.striped tbody tr:nth-child(odd) td {
      background: #FAFBFC;
}

.table.striped tbody tr:nth-child(even) td {
      background: var(--color-white);
}

/* ===== TABELA BORDERED ===== */
.table.bordered {
      border: 1px solid var(--color-border);
}

.table.bordered th,
.table.bordered td {
      border: 1px solid var(--color-border);
}

.form-row {
      margin-bottom: var(--spacing-lg);

}

.form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-lg);

}

label {
      display: block;
      font-size: var(--font-size-xs);
      margin-bottom: 6px;
      font-weight: var(--font-weight-medium);
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
}

.field-error {
      border-color: var(--color-danger) !important;
      box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.06) !important;
}

.helper-error {
      color: var(--color-danger);
      font-size: 12px;
      margin-top: 6px;
      display: block;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
      width: 100%;
      height: 44px;
      padding: 10px 14px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-base);
      transition: all 0.2s ease;
      background: var(--color-surface);
      color: var(--color-text);
      line-height: 1.5;
}

textarea {
      height: auto;
      min-height: 80px;
      resize: vertical;
}



/* Quick-login styles */
.quick-login {
      padding: 12px 6px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      margin-bottom: 12px;
}

.quick-login h3 {
      margin: 0 0 8px 0;
      font-size: 18px;
}

#signin-err {
      margin-top: 8px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      background: white;
}

/* Buttons - usando estilos do Módulo 5 */
.btn.ai-actions {
      padding: 8px 12px;
      border-radius: 10px;
      border: 0;
      cursor: pointer;
      background: var(--color-primary);
      color: var(--color-white);
      font-weight: 700;
}

/* Bloco duplicado de inputs removido — já padronizado acima */

/* Buttons - usando estilos do Módulo 5 */

/* Simple modal panel (in-page) — Padronizado com PDV design */
.panel {
      padding: 20px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      background: var(--color-surface);
      margin-bottom: 16px;
      box-shadow: var(--shadow);
}

/* Tab bar */
.tab-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      padding: 12px 16px;
      border-radius: 16px;
}

.kpi-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
}

.card-kpi {
      padding: 12px 14px;
      background: var(--color-white);
      border-radius: 12px;
      border-left: 6px solid rgba(0, 0, 0, 0.04);
      color: var(--color-black);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.card-kpi h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
}

.card-kpi span {
      color: var(--color-gray);
      font-size: 13px;
}

.card-kpi.bg-green {
      border-left-color: var(--color-success);
}

.card-kpi.bg-blue {
      border-left-color: var(--color-primary);
}

.card-kpi.bg-red {
      border-left-color: var(--color-danger);
}

/* Dashboard grid */

/* ===== MÓDULO 5: BOTÕES - Padronizado com PDV design ===== */
.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      cursor: pointer;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      border: 1px solid var(--color-border);
      background: var(--color-white);
      color: var(--color-text);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
      white-space: nowrap;
      height: 40px;
}

.btn:hover {
      background: var(--color-bg);
      border-color: var(--color-text-muted);
}

.btn:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.btn:active {
      background: var(--color-border);
}

.btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
}

/* Botão Primary - Azul */
.btn.primary,
.btn-primary {
      background: var(--color-primary);
      color: var(--color-white);
      border-color: var(--color-primary);
}

.btn.primary:hover,
.btn-primary:hover {
      background: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
}

/* Botão Secondary - Borda cinza */
.btn.secondary,
.btn-secondary {
      background: var(--color-white);
      color: var(--color-text);
      border-color: var(--color-border);
}

.btn.secondary:hover,
.btn-secondary:hover {
      background: var(--color-bg);
      border-color: var(--color-text-muted);
}

/* Botão Danger - Vermelho */
.btn.danger,
.btn-danger {
      background: var(--color-danger);
      color: var(--color-white);
      border-color: var(--color-danger);
}

.btn.danger:hover,
.btn-danger:hover {
      background: #B91C1C;
      border-color: #B91C1C;
}

/* Botão Success - Verde */
.btn.success,
.btn-success {
      background: var(--color-success);
      color: var(--color-white);
      border-color: var(--color-success);
}

.btn.success:hover,
.btn-success:hover {
      background: #15803D;
      border-color: #15803D;
}

/* Botão Warning - Laranja */
.btn.warning,
.btn-warning {
      background: var(--color-warning);
      color: var(--color-white);
      border-color: var(--color-warning);
}

.btn.warning:hover,
.btn-warning:hover {
      background: #B45309;
      border-color: #B45309;
}

/* Botão Outline - Apenas borda colorida */
.btn.outline-primary {
      background: transparent;
      color: var(--color-primary);
      border-color: var(--color-primary);
}

.btn.outline-primary:hover {
      background: var(--color-primary-soft);
}

.btn.outline-danger {
      background: transparent;
      color: var(--color-danger);
      border-color: var(--color-danger);
}

.btn.outline-danger:hover {
      background: var(--color-danger-soft);
}

/* Botão Ghost - Sem borda */
.btn.ghost {
      background: transparent;
      border-color: transparent;
      color: var(--color-text-muted);
}

.btn.ghost:hover {
      background: var(--color-bg);
      color: var(--color-text);
}

/* Tamanhos de botão */
.btn.small,
.btn-sm {
      padding: 6px 12px;
      font-size: 12px;
}

.btn.large,
.btn-lg {
      padding: 14px 28px;
      font-size: 16px;
}

/* Botão com ícone apenas */
.btn.icon-only,
.btn-icon {
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 8px;
}

.btn.icon-only.small {
      width: 32px;
      height: 32px;
}

/* Botão block - largura total */
.btn.block {
      width: 100%;
}

/* Grupo de botões */
.btn-group {
      display: flex;
      gap: 8px;
}

.btn-group.vertical {
      flex-direction: column;
}

/* ===== COMPONENTES EXTRAS ERP ===== */

/* Card de formulário */
.form-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 24px;
}

.form-card .form-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--color-border);
}

/* Divider */
.divider {
      height: 1px;
      background: var(--color-border);
      margin: 24px 0;
}

/* Empty state */
.empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--color-text-muted);
}

.empty-state i {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
}

.empty-state h3 {
      font-size: 18px;
      color: var(--color-text);
      margin-bottom: 8px;
}

.empty-state p {
      font-size: 14px;
      margin-bottom: 16px;
}

.tab-bar .btn {
      background: rgba(255, 255, 255, 0.6);
      border: 2px solid transparent;
      color: #7f8c8d;
      font-weight: 600;
      transition: all 0.3s ease;
      border-radius: 12px;
      padding: 10px 20px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 8px;
}

.tab-bar .btn i {
      font-size: 16px;
}

.tab-bar .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
      transition: left 0.5s;
}

.tab-bar .btn:hover::before {
      left: 100%;
}

.tab-bar .btn.primary {
      background: var(--color-primary);
      color: var(--color-white);
      box-shadow: 0 6px 18px rgba(46, 125, 50, 0.08);
      transform: translateY(-2px);
}


/* Dashboard grid */
.dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 24px;
      margin-top: 16px;
}

.dash-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.dash-col:first-child,
.dash-col:nth-child(2),
.dash-col:last-child {
      background: transparent;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Responsive */
@media (max-width: 900px) {
      .content {
            grid-template-columns: 1fr;
      }

      .sidebar {
            display: none;
      }

      .nav-grid {
            grid-template-columns: 1fr;
      }

      .main {
            margin: 5px;
            border-radius: 10px;
      }

      .topbar {
            padding: 0 16px;
      }

      /* Topbar-Fase3: .topbar .top-middle input removido (busca global enterrada). */

      .dashboard-grid {
            grid-template-columns: 1fr 1fr;
      }

      .dash-col:last-child {
            grid-column: 1 / -1;
      }
}

@media (max-width: 768px) {
      .dashboard-grid {
            grid-template-columns: 1fr;
      }
}

/* Navigation cards */
.nav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-top: 24px;
}

/* Responsive tables — display:table mantido para layout correto */

.nav-card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
      border-radius: 20px;
      padding: 32px;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
}

.nav-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(46, 125, 50, 0.03), rgba(46, 125, 50, 0.02));
      opacity: 0;
      transition: opacity 0.18s ease;
}

.nav-card:hover::before {
      opacity: 1;
}

.nav-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.nav-card i {
      font-size: 56px;
      color: var(--color-primary);
      margin-bottom: 20px;
      transition: transform 0.12s ease;
}

.nav-card:hover i {
      transform: scale(1.1);
}

.nav-card h4 {
      margin: 0 0 12px 0;
      color: #2c3e50;
      font-size: 24px;
      font-weight: 700;
}

.nav-card p {
      color: #7f8c8d;
      font-size: 16px;
      margin-bottom: 20px;
      line-height: 1.5;
}

/* Financeiro Section Styles */
#financeiro-panels {
      animation: fadeIn 0.6s ease-out;
}

#financeiro-panels .content {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
      border-radius: 20px;
      padding: 32px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.3);
}

.finance-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 20px;
}

.finance-grid .row-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
}

.finance-grid .card {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
}

.finance-grid .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(46, 125, 50, 0.03), rgba(46, 125, 50, 0.02));
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.18s ease;
}

.finance-grid .card:hover::before {
      opacity: 1;
}

.finance-grid .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.finance-grid .card h4 {
      margin: 0 0 12px 0;
      color: var(--color-black);
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
}

.finance-grid .card h4 i {
      color: var(--color-primary);
      font-size: 20px;
}

.finance-grid .card h4::before {
      content: '';
      width: 4px;
      height: 20px;
      background: linear-gradient(135deg, rgba(46, 125, 50, 0.2), rgba(46, 125, 50, 0.08));
      border-radius: 2px;
}

.panel-scroll {
      max-height: 240px;
      overflow-y: auto;
      padding-right: 8px;
}

.panel-scroll::-webkit-scrollbar {
      width: 6px;
}

.panel-scroll::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 3px;
}

.panel-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, rgba(46, 125, 50, 0.22), rgba(46, 125, 50, 0.16));
      border-radius: 3px;
}

.panel-scroll::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, rgba(46, 125, 50, 0.36), rgba(46, 125, 50, 0.2));
}

.panel-scroll>div {
      padding: 12px 8px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease;
      border-radius: 8px;
      margin-bottom: 4px;
}

.panel-scroll>div:hover {
      background: rgba(46, 125, 50, 0.03);
}

.panel-scroll>div:last-child {
      border-bottom: none;
      margin-bottom: 0;
}

.panel-scroll strong {
      color: #2c3e50;
      font-weight: 600;
}

.panel-scroll .small-muted {
      color: #7f8c8d;
      font-size: 12px;
      margin-bottom: 4px;
}

/* Metric Cards Enhancement - usando nova estrutura do Módulo 3 */
/* Mantido para compatibilidade */

/* Chart Container in Finance */
#chart-fluxo {
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.5);
      padding: 8px;
      margin-top: 8px;
}

/* Responsive Finance */
@media (max-width: 1024px) {
      #financeiro-panels .content {
            grid-template-columns: 1fr;
            gap: 24px;
      }

      .finance-grid .row-2 {
            grid-template-columns: 1fr;
      }

      .metric-card {
            margin-bottom: 12px;
      }
}

@media (max-width: 768px) {
      #financeiro-panels .content {
            padding: 20px;
      }

      .finance-grid .card {
            padding: 20px;
      }

      .panel-scroll {
            max-height: 200px;
      }
}

/* Performance: animações habilitadas para interatividade moderna */

/* Relatórios */
.reports-container {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.report-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
}

.summary-card {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
}

.summary-card h3 {
      margin: 0 0 8px 0;
      font-size: 14px;
      color: #666;
      font-weight: 500;
}

.metric {
      font-size: 24px;
      font-weight: bold;
      color: #2E7D32;
}

.report-charts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
}

.chart-container {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
      margin: 0 0 16px 0;
      color: #333;
}

.report-details {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Data table usando estilos do Módulo 4 */
/* Mantido para compatibilidade */

/* Botões usando estilos do Módulo 5 */

.btn-logout {
      margin-left: 8px;
}

/* ===== DASHBOARD EXECUTIVO ===== */
\n\n
/* Topbar já definida acima — sem redefinição aqui */

.filter-group {
      display: flex;
      align-items: center;
      gap: 8px;
}

.filter-select {
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      background: white;
      font-size: 14px;
}

.btn-top {
      padding: 8px 12px;
      border: none;
      background: transparent;
      color: #666;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
}

.btn-top:hover {
      background: #f5f5f5;
      color: #333;
}

.btn-top.primary {
      background: var(--color-primary);
      color: white;
}

.btn-top.primary:hover {
      background: #1b5e20;
}

/* Alertas */
.alerts-container {
      margin-bottom: 20px;
}

.alert {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 8px;
      border-left: 4px solid;
}

.alert-success {
      background: #e8f5e8;
      border-left-color: #4caf50;
}

.alert-warning {
      background: #fff3cd;
      border-left-color: #ffc107;
}

.alert-info {
      background: #d1ecf1;
      border-left-color: #17a2b8;
}

.alert-danger {
      background: #f8d7da;
      border-left-color: #dc3545;
}

.alert-icon {
      margin-right: 12px;
      font-size: 18px;
}

.alert-content {
      flex: 1;
}

.alert-message {
      font-weight: 500;
      margin-bottom: 2px;
}

.alert-action {
      font-size: 14px;
      color: #666;
      text-decoration: underline;
      cursor: pointer;
}

.alert-close {
      background: none;
      border: none;
      color: #666;
      cursor: pointer;
      padding: 4px;
}

/* Tabs */
.tab-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 10px;
}

.tab-button {
      padding: 12px 20px;
      border: none;
      background: #f5f5f5;
      color: #666;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
}

.tab-button:hover {
      background: #e9ecef;
      color: #333;
}

.tab-button.primary {
      background: var(--color-primary);
      color: white;
}

.tab-button.primary:hover {
      background: #1b5e20;
}

.tab-content {
      display: none;
}

.tab-content:first-child {
      display: block;
}

/* ========================================
   KPIs - Sistema Moderno e Elegante
   ======================================== */

/* Grid responsivo para KPIs */
.kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
}

/* Card KPI base moderno — Padronizado com PDV design */
.kpi-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: var(--shadow);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
}

/* Header do KPI com ícone */
.kpi-header {
      display: flex;
      align-items: center;
      gap: 10px;
}

.kpi-icon-box {
      border-radius: 10px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
}

.kpi-icon-box i {
      font-size: 18px;
}

/* Conteúdo do KPI */
.kpi-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
}

.kpi-label {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.kpi-value {
      font-size: 22px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
}

/* Trend indicators */
.kpi-trend {
      font-size: 12px;
      font-weight: 500;
      margin-top: 4px;
}

.trend-up {
      color: #16a34a;
}

.trend-down {
      color: #dc2626;
}

.trend-neutral {
      color: #64748b;
}

/* ========================================
   KPI Variantes de Cor
   ======================================== */

/* Primary - Azul */
.kpi-card.primary {
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
      border: none;
      color: #fff;
}

.kpi-card.primary .kpi-label {
      color: rgba(255, 255, 255, 0.8);
}

.kpi-card.primary .kpi-value {
      color: #fff;
}

.kpi-card.primary .kpi-icon-box {
      background: rgba(255, 255, 255, 0.2);
}

.kpi-card.primary .kpi-icon-box i {
      color: #fff;
}

/* Success - Verde */
.kpi-card.success .kpi-icon-box {
      background: #dcfce7;
}

.kpi-card.success .kpi-icon-box i {
      color: #16a34a;
}

.kpi-card.success .kpi-value {
      color: #16a34a;
}

/* Info - Ciano/Azul claro */
.kpi-card.info .kpi-icon-box {
      background: #e0f2fe;
}

.kpi-card.info .kpi-icon-box i {
      color: #0891b2;
}

.kpi-card.info .kpi-value {
      color: #0891b2;
}

/* Warning - Laranja/Amarelo */
.kpi-card.warning .kpi-icon-box {
      background: #fef3c7;
}

.kpi-card.warning .kpi-icon-box i {
      color: #d97706;
}

.kpi-card.warning .kpi-value {
      color: #d97706;
}

/* Danger - Vermelho */
.kpi-card.danger .kpi-icon-box {
      background: #fee2e2;
}

.kpi-card.danger .kpi-icon-box i {
      color: #dc2626;
}

.kpi-card.danger .kpi-value {
      color: #dc2626;
}

/* Purple - Roxo */
.kpi-card.purple .kpi-icon-box {
      background: #f3e8ff;
}

.kpi-card.purple .kpi-icon-box i {
      color: #9333ea;
}

.kpi-card.purple .kpi-value {
      color: #9333ea;
}

/* Pink - Rosa */
.kpi-card.pink .kpi-icon-box {
      background: #fce7f3;
}

.kpi-card.pink .kpi-icon-box i {
      color: #db2777;
}

.kpi-card.pink .kpi-value {
      color: #db2777;
}

/* Neutral - Cinza */
.kpi-card.neutral .kpi-icon-box {
      background: #f1f5f9;
}

.kpi-card.neutral .kpi-icon-box i {
      color: #475569;
}

.kpi-card.neutral .kpi-value {
      color: #475569;
}

/* ========================================
   KPI Card Destaque (Highlight)
   ======================================== */
.kpi-highlight {
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
      border-radius: 16px;
      padding: 24px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
      margin-bottom: 20px;
}

.kpi-highlight .kpi-content {
      gap: 6px;
}

.kpi-highlight .kpi-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.8;
      color: #fff;
}

.kpi-highlight .kpi-value {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
}

.kpi-highlight .kpi-icon-box {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 16px;
      width: auto;
      height: auto;
}

.kpi-highlight .kpi-icon-box i {
      font-size: 28px;
      color: #fff;
}

/* ========================================
   KPI Card Total/Saldo (Footer style)
   ======================================== */
.kpi-total {
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      border-radius: 12px;
      padding: 16px;
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 2px solid #cbd5e1;
}

.kpi-total .kpi-icon-box {
      background: #0f172a;
      border-radius: 10px;
      width: 44px;
      height: 44px;
}

.kpi-total .kpi-icon-box i {
      color: #fff;
      font-size: 20px;
}

.kpi-total .kpi-label {
      font-size: 12px;
      color: #64748b;
}

.kpi-total .kpi-value {
      font-size: 24px;
      font-weight: 700;
      color: #0f172a;
}

/* ========================================
   Ícone solo (sem caixa)
   ======================================== */
.kpi-icon {
      font-size: 24px;
      margin-bottom: 12px;
      opacity: 0.8;
}

/* Dashboard Grid */
.dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
}

.dash-col {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
}

.dash-col-2 {
      grid-column: span 2;
}

.dash-col-3 {
      grid-column: span 3;
}

/* Panels */
.card-panel {
      background: var(--color-surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid var(--color-border);
      overflow: hidden;
      padding: 12px;
}

.panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--color-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to bottom, #FAFBFC, #F8FAFC);
}

.panel-header h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-text);
}

.panel-actions {
      display: flex;
      gap: 8px;
      align-items: center;
}

.chart-period-select {
      padding: 4px 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background: white;
      font-size: 12px;
}

.panel-body {
      padding: 24px;
}

/* Atividades */
.activities-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
}

.activity-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
      transition: background 0.2s;
}

.activity-item:hover {
      background: #e9ecef;
}

.activity-icon {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      color: var(--color-primary);
}

.activity-content {
      flex: 1;
}

.activity-description {
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 2px;
}

.activity-time {
      font-size: 12px;
      color: #666;
}

.activity-amount {
      font-weight: 600;
      color: var(--color-primary);
}

/* Listas */
.list-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.list-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
      justify-content: space-between;
}

.list-item-content {
      flex: 1;
}

.list-item-title {
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 2px;
}

.list-item-subtitle {
      font-size: 12px;
      color: #666;
}

.list-item-action {
      margin-left: 12px;
}

/* Badges usando estilos do Módulo 4 */
/* Mantido para compatibilidade */

/* Vencimentos */
.dues-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.due-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
      justify-content: space-between;
}

.due-item.overdue {
      background: #f8d7da;
      border-left: 4px solid #dc3545;
}

.due-info {
      flex: 1;
}

.due-description {
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 2px;
}

.due-date,
.due-days {
      font-size: 12px;
      color: #666;
}

.due-amount {
      font-weight: 600;
      color: var(--color-primary);
}

/* Agendamentos */
.appointments-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.appointment-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
}

.appointment-time {
      font-weight: 600;
      color: var(--color-primary);
      margin-right: 16px;
      min-width: 60px;
}

.appointment-info {
      flex: 1;
}

.appointment-client {
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 2px;
}

.appointment-service {
      font-size: 14px;
      color: #666;
}

/* Ranking */
.ranked-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.ranked-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
}

.rank {
      width: 32px;
      height: 32px;
      background: var(--color-primary);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-right: 12px;
}

.ranked-content {
      flex: 1;
}

.ranked-name {
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 2px;
}

.ranked-stats {
      font-size: 12px;
      color: #666;
}

/* Vendas */
.sales-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.sale-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
      justify-content: space-between;
}

.sale-info {
      display: flex;
      align-items: center;
      gap: 12px;
}

.sale-id {
      font-weight: 600;
      color: var(--color-primary);
}

.sale-client {
      font-weight: 500;
      color: #1a1a1a;
}

.sale-time {
      font-size: 12px;
      color: #666;
}

.sale-amount {
      text-align: right;
}

.sale-total {
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 2px;
}

.sale-status {
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
      text-transform: uppercase;
      font-weight: 500;
}

.status-pago {
      background: #d4edda;
      color: #155724;
}

.status-pendente {
      background: #fff3cd;
      color: #856404;
}

.status-atrasado {
      background: #f8d7da;
      color: #721c24;
}

/* Estados vazios */
.empty-state {
      font-size: 55px;
      height: 200px;
      text-align: center;
      padding: 40px 20px;
      color: #666;
      font-style: italic;
}

.empty-state small {
      display: block;
      font-size: 16px;
      margin-top: 12px;
      color: #999;
      font-style: normal;
}

.empty-state i {
      font-size: 32px;
      margin-bottom: 12px;
}

/* Seções */
.dashboard-section {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 20px;
}

.section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--color-border);
}

.section-header h3 {
      margin: 0;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
      color: var(--color-text);
}

.btn-link {
      background: none;
      border: none;
      color: var(--color-primary);
      text-decoration: underline;
      cursor: pointer;
      font-size: 14px;
      padding: 4px 0;
}

.btn-link:hover {
      color: var(--color-primary-dark);
}

.btn-link.small {
      font-size: 12px;
}

/* Botões adicionais */
.btn.small {
      padding: 6px 12px;
      font-size: var(--font-size-xs);
      border-radius: 6px;
      height: 32px;
}

.btn.active {
      background: var(--color-primary);
      color: white;
}

/* Canvas Charts */
.chart-canvas {
      width: 100%;
      height: 300px;
}

.chart-canvas.small {
      height: 250px;
}

/* Enhanced Form Styles for ERP Registration Modules — Padronizado com PDV design */
.form-section {
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: var(--spacing-lg);
      margin-bottom: var(--spacing-xl);
      background: var(--color-surface);
      box-shadow: var(--shadow);
}

.form-section legend {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
      padding: 0 var(--spacing-sm);
      margin-bottom: var(--spacing-md);
      border-bottom: 2px solid var(--color-primary);
      width: 100%;
      font-size: var(--font-size-md);
}

.form-actions {
      display: flex;
      gap: var(--spacing-md);
      justify-content: flex-start;
      margin-top: var(--spacing-xl);
      padding-top: var(--spacing-lg);
      border-top: 1px solid var(--color-border);
}

.form-actions .btn {
      min-width: 140px;
}

.span-2 {
      grid-column: span 2;
}

.helper-text {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
      margin-top: var(--spacing-xs);
      display: block;
}

.required {
      color: var(--color-danger);
      font-weight: 600;
}

.status-badge {
      display: inline-block;
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: calc(var(--radius) / 2);
      font-size: var(--font-size-sm);
      font-weight: 600;
      text-transform: uppercase;
}

.status-badge.success {
      background: rgba(16, 185, 129, 0.1);
      color: var(--color-success);
}

.status-badge.danger {
      background: rgba(239, 68, 68, 0.1);
      color: var(--color-danger);
}

.status-badge.muted {
      background: rgba(107, 114, 128, 0.1);
      color: var(--color-text-muted);
}

@media (max-width: 768px) {
      .form-grid {
            grid-template-columns: 1fr;
      }

      .span-2 {
            grid-column: span 1;
      }

      .form-actions {
            flex-direction: column;
      }

      .form-actions .btn {
            width: 100%;
      }

      .table-responsive {
            font-size: var(--font-size-sm);
      }
}

/* Override: tabelas ERP — Padronizado com PDV design */
.table-responsive {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius);
      border: 1px solid var(--color-border);
}

.table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
}

.table thead {
      background: #F8FAFC;
}

.table th,
.table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--color-border);
      text-align: left;
      font-size: var(--font-size-base);
      background: transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

.table th {
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-text-muted);
      font-weight: var(--font-weight-semibold);
      padding: 10px 12px;
      border-bottom: 2px solid var(--color-border);
}

.table tbody tr {
      transition: background-color 0.15s ease;
}

.table tbody tr:hover {
      background-color: #F8FAFC;
}

/* Coluna de ações (última): largura fixa para garantir que os botões apareçam */
.table th:last-child,
.table td:last-child {
      width: 170px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
}

/* Classes auxiliares opcionais */
.table th.col-wide {
      width: 35%;
}

.table th.col-medium {
      width: 20%;
}

.table th.col-small {
      width: 10%;
}


.content-layout {
      display: flex;
      gap: 20px;
      align-items: flex-start;
}

.form-section {
      flex: 3;
      /* tabela maior */
}

.summary {
      flex: 1;
      /* resumo menor */
      min-width: 220px;
}

.pdv-actions {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
}

.pdv-actions-left,
.pdv-actions-right {
      display: flex;
      gap: 12px;
}


/* ═══════════════════════════════════════════════════
       RECEIPT — IDENTIDADE VISUAL PROFISSIONAL
    ═══════════════════════════════════════════════════ */
#receipt {
      font-family: 'Inter', Roboto, Arial, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      background: #fff;
      color: #1a2e4a;
      border-radius: 12px;
      box-shadow: 0 4px 28px rgba(26, 46, 74, .15);
      overflow: hidden;
}

/* ── Header ── */
.rcpt-header {
      background: #1a2e4a;
      color: #fff;
      padding: 26px 30px;
      display: flex;
      align-items: center;
      gap: 18px;
}

.rcpt-logo-wrap {
      background: rgba(255, 255, 255, .13);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
}

.rcpt-brand-name {
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: -.5px;
      margin: 0;
      line-height: 1.1;
}

.rcpt-brand-sub {
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .6);
      margin-top: 4px;
}

.rcpt-header-note {
      margin-left: auto;
      text-align: right;
      font-size: .82rem;
      color: rgba(255, 255, 255, .45);
      line-height: 1.6;
}

/* ── Gold divider ── */
.rcpt-divider-gold {
      height: 3px;
      background: linear-gradient(90deg, #e8a000, #f5c842, #e8a000);
}

/* ── Info row ── */
.rcpt-info-row {
      display: flex;
      background: #f4f6fa;
      border-bottom: 1px solid #dde3ef;
}

.rcpt-info-block {
      flex: 1;
      padding: 16px 24px;
}

.rcpt-info-block:first-child {
      border-right: 1px solid #dde3ef;
}

.rcpt-info-label {
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #7a8fa8;
      margin-bottom: 9px;
}

.rcpt-info-block dl {
      margin: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 12px;
}

.rcpt-info-block dt {
      font-size: .94rem;
      font-weight: 600;
      color: #1a2e4a;
      white-space: nowrap;
}

.rcpt-info-block dd {
      font-size: .94rem;
      color: #3d5a80;
      margin: 0;
}

/* ── Body ── */
.rcpt-body {
      padding: 22px 30px;
}

/* ── Table ── */
.rcpt-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 1rem;
}

.rcpt-table thead th {
      background: #1a2e4a;
      color: #fff;
      padding: 10px 12px;
      font-weight: 600;
      font-size: .88rem;
      letter-spacing: .5px;
      text-transform: uppercase;
}

.rcpt-table thead th:not(:first-child) {
      text-align: right;
}

.rcpt-table tbody tr:nth-child(even) {
      background: #f8fafd;
}

.rcpt-table tbody tr:nth-child(odd) {
      background: #fff;
}

.rcpt-table tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid #edf0f7;
      color: #2d3f58;
      vertical-align: top;
}

.rcpt-table tbody td:not(:first-child) {
      text-align: right;
      white-space: nowrap;
}

.rcpt-item-sub {
      font-size: .86rem;
      color: #7a8fa8;
      margin-top: 2px;
}

/* ── Totals ── */
.rcpt-totals-wrap {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
}

.rcpt-totals-table {
      width: 320px;
      font-size: 1rem;
      border-collapse: collapse;
}

.rcpt-totals-table td {
      padding: 6px 10px;
      color: #3d5a80;
}

.rcpt-totals-table td:first-child {
      font-weight: 500;
}

.rcpt-totals-table td:last-child {
      text-align: right;
      font-weight: 600;
      color: #1a2e4a;
}

.rcpt-total-final td {
      background: #1a2e4a !important;
      color: #fff !important;
      font-size: 1.15rem !important;
      font-weight: 700 !important;
      padding: 11px 14px !important;
}

.rcpt-total-final td:last-child {
      color: #f5c842 !important;
}

/* ── Payment badges ── */
.rcpt-payment-row {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
}

.rcpt-payment-label {
      font-size: .96rem;
      font-weight: 600;
      color: #1a2e4a;
}

.rcpt-payment-badge {
      background: #e6f0fa;
      color: #1a2e4a;
      font-size: .92rem;
      font-weight: 600;
      padding: 7px 16px;
      border-radius: 20px;
      border: 1px solid #c3d4ea;
      display: inline-flex;
      align-items: center;
      gap: 6px;
}

.rcpt-installments-badge {
      background: #f0f7e6;
      color: #2e6620;
      font-size: .9rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #c3e4c0;
}

/* ── Footer ── */
.rcpt-footer {
      background: #f4f6fa;
      border-top: 2px solid #dde3ef;
      padding: 20px 30px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      flex-wrap: wrap;
}

.rcpt-footer-text {
      flex: 1;
      min-width: 180px;
}

.rcpt-footer-thanks {
      font-size: 1.1rem;
      font-weight: 600;
      color: #1a2e4a;
      margin-bottom: 6px;
}

.rcpt-footer-contact {
      font-size: .9rem;
      color: #5a7490;
      line-height: 1.8;
}

.rcpt-footer-contact span {
      display: block;
}

.rcpt-footer-contact i {
      width: 16px;
      color: #1a2e4a;
}

/* ── QR Code ── */
.rcpt-qr-wrap {
      text-align: center;
      flex-shrink: 0;
}

.rcpt-qr-label {
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #7a8fa8;
      margin-top: 6px;
}

#rcpt-qrcode canvas,
#rcpt-qrcode img {
      border-radius: 4px;
      border: 3px solid #1a2e4a;
}

/* ── Watermark ── */
.rcpt-watermark {
      text-align: center;
      padding: 10px 30px 14px;
      font-size: .78rem;
      color: #a0aec0;
      letter-spacing: .4px;
      background: #fff;
}

/* ── Print button (screen only) ── */
.rcpt-print-action {
      display: flex;
      justify-content: flex-end;
      padding: 10px 30px;
      background: #fff;
      border-top: 1px solid #edf0f7;
      gap: 10px;
}

.rcpt-print-action button {
      background: #1a2e4a;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 24px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: inherit;
}

.rcpt-print-action button:hover {
      background: #24406a;
}

/* ════════════════════════════════════════════════
       @media print — mostra SOMENTE o recibo (1 página)
       Condicionado a body.printing-receipt para não conflitar com relatórios
    ════════════════════════════════════════════════ */
@media print {
      @page {
            margin: 8mm 10mm;
            size: A4 portrait;
      }

      /* Impede páginas em branco extras */
      html,
      body {
            height: auto !important;
            overflow: visible !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #fff !important;
      }

      /* Tudo invisível — SOMENTE quando imprimindo recibos */
      body.printing-receipt * {
            visibility: hidden !important;
      }

      /* Remove do fluxo os grandes blocos que causam páginas extras */
      body.printing-receipt .sidebar,
      body.printing-receipt .topbar,
      body.printing-receipt nav,
      body.printing-receipt #navbar,
      body.printing-receipt .pdv-container,
      body.printing-receipt .pdv-receipt-modal,
      body.printing-receipt .module-title,
      body.printing-receipt .espaco,
      body.printing-receipt .feedback-area,
      body.printing-receipt #busca-section,
      body.printing-receipt #impressao-feedback,
      body.printing-receipt .recibo-actions {
            display: none !important;
      }

      /* Colapsa a "casca" da SPA (altura 0, sem espaço)
         mas overflow:visible permite filhos absolutos renderizarem */
      body.printing-receipt .app,
      body.printing-receipt .main,
      body.printing-receipt #app {
            display: block !important;
            height: 0 !important;
            min-height: 0 !important;
            overflow: visible !important;
            padding: 0 !important;
            margin: 0 !important;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
      }

      /* O container/module-layout do impressão de venda também colapsa */
      body.printing-receipt .container,
      body.printing-receipt .module-layout {
            display: block !important;
            height: 0 !important;
            min-height: 0 !important;
            overflow: visible !important;
            padding: 0 !important;
            margin: 0 !important;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            gap: 0 !important;
      }

      /* Mostra o recibo posicionado absoluto no topo — somente ao imprimir recibo */
      body.printing-receipt #receipt,
      body.printing-receipt #recibo-section {
            display: block !important;
            visibility: visible !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
            margin: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            border: none !important;
            background: #fff !important;
      }

      /* Torna visível todo conteúdo interno do recibo — somente ao imprimir recibo */
      body.printing-receipt #receipt *,
      body.printing-receipt #recibo-section * {
            visibility: visible !important;
      }

      /* Oculta elementos internos desnecessários na impressão */
      #recibo-section .module-card-header {
            display: none !important;
      }

      #recibo-section .module-card-body {
            padding: 0 !important;
            margin: 0 !important;
      }

      #recibo-container {
            margin: 0 !important;
      }

      .rcpt-print-action {
            display: none !important;
      }

      /* ── Compactar para caber em 1 página ── */
      .rcpt-header {
            padding: 14px 20px !important;
      }

      .rcpt-logo-wrap {
            width: 40px !important;
            height: 40px !important;
      }

      .rcpt-brand-name {
            font-size: 1.3rem !important;
      }

      .rcpt-brand-sub {
            font-size: .72rem !important;
            letter-spacing: 2px !important;
            margin-top: 2px !important;
      }

      .rcpt-header-note {
            font-size: .7rem !important;
      }

      .rcpt-divider-gold {
            height: 2px !important;
      }

      .rcpt-info-block {
            padding: 8px 16px !important;
      }

      .rcpt-info-label {
            font-size: .7rem !important;
            margin-bottom: 4px !important;
      }

      .rcpt-info-block dt,
      .rcpt-info-block dd {
            font-size: .82rem !important;
      }

      .rcpt-info-block dl {
            gap: 2px 8px !important;
      }

      .rcpt-body {
            padding: 10px 20px !important;
      }

      .rcpt-table {
            font-size: .85rem !important;
      }

      .rcpt-table thead th {
            padding: 6px 8px !important;
            font-size: .75rem !important;
      }

      .rcpt-table tbody td {
            padding: 5px 8px !important;
            font-size: .82rem !important;
      }

      .rcpt-item-sub {
            font-size: .72rem !important;
      }

      .rcpt-totals-wrap {
            margin-top: 4px !important;
      }

      .rcpt-totals-table {
            width: 260px !important;
            font-size: .85rem !important;
      }

      .rcpt-totals-table td {
            padding: 3px 8px !important;
      }

      .rcpt-total-final td {
            font-size: .95rem !important;
            padding: 6px 10px !important;
      }

      .rcpt-payment-row {
            margin-top: 8px !important;
            gap: 6px !important;
      }

      .rcpt-payment-label {
            font-size: .82rem !important;
      }

      .rcpt-payment-badge {
            font-size: .78rem !important;
            padding: 4px 10px !important;
      }

      .rcpt-installments-badge {
            font-size: .76rem !important;
            padding: 3px 10px !important;
      }

      .rcpt-footer {
            padding: 10px 20px !important;
            gap: 12px !important;
      }

      .rcpt-footer-thanks {
            font-size: .88rem !important;
            margin-bottom: 2px !important;
      }

      .rcpt-footer-contact {
            font-size: .76rem !important;
            line-height: 1.5 !important;
      }

      .rcpt-qr-wrap {
            display: none !important;
      }

      .rcpt-watermark {
            padding: 4px 20px 6px !important;
            font-size: .68rem !important;
      }

      .rcpt-header,
      .rcpt-divider-gold,
      .rcpt-table thead th,
      .rcpt-total-final td,
      .rcpt-table tbody tr:nth-child(even),
      .rcpt-info-row,
      .rcpt-footer {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            color-adjust: exact;
      }
}

/* ==========================================================================
   MÓDULO 13: CARDS DE SEÇÃO (PADRÃO PDV)
   Aplicado em todos os módulos do sistema
   ========================================================================== */

/* Layout principal do módulo */
.module-layout {
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: #F8FAFC;
      padding: 24px;
      min-height: calc(100vh - 60px);
}

/* Título da página */
.module-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      padding: 0;
}

.module-title-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      font-size: 18px;
}

.module-title h3 {
      font-size: 20px;
      font-weight: 700;
      color: #111827;
      margin: 0;
}

/* ===== CARD BASE ===== */
.module-card {
      background: #FFFFFF;
      border-radius: var(--radius-lg);
      border: 1px solid #E2E8F0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: box-shadow 0.2s ease;
      margin-bottom: 20px;
}

.module-card:last-child {
      margin-bottom: 0;
}


.module-card-header {
      padding: 16px 20px;
      border-bottom: 1px solid #E5E7EB;
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(to bottom, #FAFBFC, #F8FAFC);
}

.module-card-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
}

.module-card-icon i {
      font-size: 14px;
}

.module-card-header h4 {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      margin: 0;
      flex: 1;
}

.module-card-body {
      padding: 20px;
}

/* Layout: Tabela + Resumo lado a lado */
.module-card-body:has(.table-responsive + aside.summary),
.module-card-body:has(.table-responsive + .summary) {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: flex-start;
}

.module-card-body>.table-responsive {
      flex: 1;
      min-width: 0;
}

.module-card-body>aside.summary,
.module-card-body>.summary {
      flex: 0 0 200px;
      min-width: 180px;
}

.module-card-body aside.summary .card,
.module-card-body .summary .card {
      background: #FFFFFF;
      border-radius: 12px;
      padding: 16px 18px;
      border: 1px solid #E5E7EB;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.module-card-body aside.summary .card h4,
.module-card-body .summary .card h4 {
      margin: 0 0 14px 0;
      font-size: 13px;
      font-weight: 600;
      color: #6B7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid #F3F4F6;
      padding-bottom: 10px;
}

.module-card-body aside.summary .card p,
.module-card-body .summary .card p {
      margin: 8px 0;
      font-size: 13px;
      color: #6B7280;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.module-card-body aside.summary .card p span,
.module-card-body .summary .card p span {
      font-weight: 600;
      color: #111827;
      font-size: 14px;
}

/* Responsivo: Resumo embaixo em telas menores */
@media (max-width: 900px) {

      .module-card-body:has(.table-responsive + aside.summary),
      .module-card-body:has(.table-responsive + .summary) {
            flex-direction: column;
      }

      .module-card-body>aside.summary,
      .module-card-body>.summary {
            flex: 1 1 100%;
            width: 100%;
      }
}

/* Remove estilos do fieldset/legend dentro dos cards */
.module-card .form-section {
      border: none;
      padding: 0;
      margin: 0;
      background: transparent;
      box-shadow: none;
}

.module-card .form-section legend {
      display: none;
}

/* ===== VARIANTES DE COR ===== */

/* Azul - Informações, Dados Pessoais */
.module-card--azul .module-card-icon {
      background: #EFF6FF;
}

.module-card--azul .module-card-icon i {
      color: #2563EB;
}

/* Verde - Contato, Sucesso, Confirmação */
.module-card--verde .module-card-icon {
      background: #F0FDF4;
}

.module-card--verde .module-card-icon i {
      color: #16A34A;
}

/* Laranja - Preços, Alertas */
.module-card--laranja .module-card-icon {
      background: #FFF7ED;
}

.module-card--laranja .module-card-icon i {
      color: #D97706;
}

/* Roxo - Listagens, Tabelas */
.module-card--roxo .module-card-icon {
      background: #F5F3FF;
}

.module-card--roxo .module-card-icon i {
      color: #7C3AED;
}

/* Rosa - Estoque */
.module-card--rosa .module-card-icon {
      background: #FDF2F8;
}

.module-card--rosa .module-card-icon i {
      color: #DB2777;
}

/* Ciano - Endereço, Localização */
.module-card--ciano .module-card-icon {
      background: #ECFEFF;
}

.module-card--ciano .module-card-icon i {
      color: #0891B2;
}

/* Cinza - Observações, Notas */
.module-card--cinza .module-card-icon {
      background: #F8FAFC;
}

.module-card--cinza .module-card-icon i {
      color: #64748B;
}

/* Vermelho - Exclusão, Perigo */
.module-card--vermelho .module-card-icon {
      background: #FEF2F2;
}

.module-card--vermelho .module-card-icon i {
      color: #DC2626;
}

/* Amarelo - Pendentes, Atenção */
.module-card--amarelo .module-card-icon {
      background: #FEFCE8;
}

.module-card--amarelo .module-card-icon i {
      color: #CA8A04;
}

/* ===== AÇÕES DO FORMULÁRIO ===== */
.module-form-actions {
      display: flex;
      gap: 12px;
      padding-top: 8px;
}

/* ===== UTILITÁRIOS ===== */
.module-icon-mr {
      margin-right: 6px;
}

.module-btn-rounded {
      border-radius: 8px;
}

.module-empty-state {
      padding: 24px;
      text-align: center;
      color: #94a3b8;
}

/* ===== RESPONSIVIDADE ===== */
@media (min-width: 1700px) {
      .module-layout {
            padding: 28px;
            gap: 24px;
      }

      .module-card-body {
            padding: 24px;
      }

      .module-card-header {
            padding: 16px 24px;
      }

      .module-card-header h4 {
            font-size: 15px;
      }
}

@media (max-width: 768px) {
      .module-layout {
            padding: 16px;
            gap: 16px;
      }

      .module-card-body {
            padding: 16px;
      }

      .module-card-header {
            padding: 12px 16px;
      }

      .module-form-actions {
            flex-direction: column;
      }
}

/* ===================================================================
   SIDEBAR COLLAPSE / EXPAND
   =================================================================== */

/* Transições suaves ao colapsar/expandir */
.sidebar {
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: width;
}

.main {
      transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado colapsado - apenas ícones */
.sidebar.collapsed {
      width: 72px;
      overflow: hidden;
}

/* Logo colapsada: esconde o texto, mostra apenas ícone */
.sidebar.collapsed .logo {
      font-size: 0;
      padding: 18px 0;
      justify-content: center;
      display: flex;
      align-items: center;
}

.sidebar.collapsed .logo::after {
      content: '🐾';
      font-size: 22px;
      display: block;
}

/* Esconde labels de texto nos itens do menu */
.sidebar.collapsed .sidebar-label {
      display: none;
}

/* MENU-2.1 (prep MENU-3): no rail recolhido o rodapé também vira só-ícones,
   centralizado como os itens do menu (o .sidebar-label já some pela regra acima). */
.sidebar.collapsed .sidebar-footer {
      padding-left: 0;
      padding-right: 0;
}

.sidebar.collapsed .sidebar-footer-link,
.sidebar.collapsed .sidebar-logout-btn {
      justify-content: center;
      gap: 0;
      padding-left: 0;
      padding-right: 0;
}

/* Centraliza e remove margem dos itens */
.sidebar.collapsed .menu a,
.sidebar.collapsed .menu-toggle {
      justify-content: center;
      padding: 13px 0;
      width: 100%;
}

.sidebar.collapsed .menu a i,
.sidebar.collapsed .menu-toggle i {
      margin-right: 0;
      font-size: 18px;
      min-width: 20px;
      text-align: center;
}

/* MENU-LATERAL-VISUAL: SVG tambem zera a margem no rail so-icones (igual ao <i>) */
.sidebar.collapsed .menu a svg,
.sidebar.collapsed .menu-toggle svg {
      margin-right: 0;
}

/* Esconde a seta de submenus e o cadeado de restrição no modo só-ícones */
.sidebar.collapsed .caret,
.sidebar.collapsed .menu-lock {
      display: none !important;
}

/* Esconde submenus completamente */
.sidebar.collapsed .submenu {
      display: none !important;
      max-height: 0 !important;
}

/* Tooltip nativo - aparece no hover quando colapsado */
.sidebar.collapsed .menu a[title],
.sidebar.collapsed .menu-toggle[title] {
      position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   MENU-3.2 — POLISH do rail recolhido no TEMA CLARO (MENU-3.1)
   No recolhido só sobra o ÍCONE do item/grupo (submenus escondidos).
   Tudo aqui é escopado em .collapsed; o estado EXPANDIDO fica intocado.
   ═══════════════════════════════════════════════════════════════ */

/* (#3) Cor de categoria nos ícones de GRUPO quando recolhido.
   No expandido o cabeçalho é cinza/discreto (mockup) e a cor vive nos filhos;
   recolhido os filhos somem, então devolvemos a cor da categoria ao ícone do grupo
   p/ o rail ficar escaneável (decisão MENU-3.1: ícones continuam coloridos).
   Grupos restritos (is-restricted) seguem âmbar; o grupo da rota ativa fica branco. */
.sidebar.collapsed .menu li.has-children:not(.is-restricted) > .menu-toggle[data-menu="operacao"] i,
.sidebar.collapsed .menu li.has-children:not(.is-restricted) > .menu-toggle[data-menu="vendas"] i {
      color: var(--icon-vendas);
}
.sidebar.collapsed .menu li.has-children:not(.is-restricted) > .menu-toggle[data-menu="cadastro"] i {
      color: var(--icon-cadastro);
}
.sidebar.collapsed .menu li.has-children:not(.is-restricted) > .menu-toggle[data-menu="relatorios"] i {
      color: var(--icon-relatorios);
}
.sidebar.collapsed .menu li.has-children:not(.is-restricted) > .menu-toggle[data-menu="usuarios"] i {
      color: var(--icon-usuarios);
}

/* (#4) Item ativo no rail recolhido: a rota ativa costuma viver no SUBMENU, que
   fica display:none quando recolhido — então o "ativo" sumiria do rail. Trazemos a
   pílula teal p/ o ícone do GRUPO que contém a rota ativa (ativo nunca desaparece).
   O ativo de TOPO (link direto, ex. Painel) já herda .menu a.active e segue funcionando. */
.sidebar.collapsed .menu li.has-children:has(.submenu a.active) > .menu-toggle {
      background: var(--sidebar-item-active);
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(81, 168, 177, 0.32);
}
.sidebar.collapsed .menu li.has-children:has(.submenu a.active) > .menu-toggle i {
      color: var(--sidebar-text-active) !important;
}

/* (#8) Coming-soon de TOPO no rail recolhido: o rótulo e o selo "em breve" vêm em
   <span> simples (não .sidebar-label), então não somem pela regra dos labels.
   Escondemos os <span> e deixamos só o ícone — já esmaecido por .menu a.menu-soon. */
.sidebar.collapsed .menu a.menu-soon > span {
      display: none;
}

/* Ajusta o main quando a sidebar está colapsada */
.main.sidebar-collapsed {
      margin-left: 72px;
}

/* Botão toggle da sidebar na topbar */
#btn-sidebar-toggle {
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      cursor: pointer;
      padding: 8px 10px;
      color: var(--color-text-muted);
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      margin-right: 12px;
      min-width: 38px;
      height: 38px;
}

#btn-sidebar-toggle:hover {
      background: var(--color-primary-soft);
      color: var(--color-primary);
      border-color: var(--color-primary);
}

#btn-sidebar-toggle i {
      transition: transform 0.3s ease;
}

.sidebar.collapsed~.main #btn-sidebar-toggle i,
#btn-sidebar-toggle.is-collapsed i {
      transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════
   DRAWER (painel lateral de edição) — Design aprimorado
   ═══════════════════════════════════════════════════════════════ */

/* Overlay */
.drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      z-index: 9998;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.12s ease-out, visibility 0.12s ease-out;
}

.drawer-overlay.open {
      opacity: 1;
      visibility: visible;
}

/* Painel principal */
.drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: 460px;
      max-width: 95vw;
      height: 100vh;
      background: #ffffff;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15), -2px 0 8px rgba(0, 0, 0, 0.06);
      transform: translateX(100%);
      transition: transform 0.15s ease-out;
      will-change: transform;
      border-left: 1px solid #e5e7eb;
}

.drawer.open {
      transform: translateX(0);
}

/* Painel SEMPRE acima do proprio overlay, por especificidade — nao por sorte de ordem de
   cascata entre stylesheets. `assets/v2/components.css` define um `.drawer` DIFERENTE (design
   system v2, convencao `.is-open`) com `z-index: var(--z-drawer)` = 50 e NAO define
   `.drawer-overlay` — se esse arquivo cascatear depois deste (viewLoader.js reinjeta
   stylesheet de modulo quando a URL resolvida nao bate com o cache de dedupe por STRING;
   confirmado ao vivo pra `style.css` via query string `?v=toggle1` — ver
   .claude/frentes/drawer-cliente-travado-mobile.md, secao "PARTE FIX 2"), so o PAINEL cairia
   pra z-index 50, ficando ABAIXO do proprio overlay (9998) — exatamente o sintoma medido no
   aparelho (overlay no topo do elementsFromPoint, painel ausente da pilha). Seletor
   ID+classe (especificidade 0,1,1,0) vence QUALQUER `.drawer` puro (0,0,1,0),
   independente de qual arquivo carregou por ultimo. */
#ced-edit-drawer.drawer,
#dcl-drawer.drawer {
      z-index: 9999;
}
#ced-drawer-overlay.drawer-overlay,
#dcl-drawer-overlay.drawer-overlay {
      z-index: 9998;
}

/* Linha de destaque colorida no topo do drawer */
.drawer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--color-primary, #2563eb) 0%, #60a5fa 60%, transparent 100%);
      z-index: 1;
}

/* Cabeçalho do drawer */
.drawer-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 24px 18px;
      border-bottom: 1px solid #e5e7eb;
      background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
      position: relative;
      flex-shrink: 0;
}

/* Ícone do header — pode ser adicionado via JS com classe .drawer-header-icon */
.drawer-header-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
}

.drawer-header-icon i {
      font-size: 16px;
      color: var(--color-primary, #2563eb);
}

/* Área de texto do header */
.drawer-header-text {
      flex: 1;
      min-width: 0;
}

.drawer-header h3,
.drawer-header-text h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.drawer-header-subtitle {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
      font-weight: 400;
}

/* Botão de fechar */
.drawer-close {
      background: none;
      border: 1px solid #e5e7eb;
      font-size: 18px;
      cursor: pointer;
      color: #64748b;
      line-height: 1;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      flex-shrink: 0;
}

.drawer-close:hover {
      background: #fee2e2;
      border-color: #fca5a5;
      color: #dc2626;
}

/* Corpo do drawer com scrollbar elegante */
.drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 22px 24px;
      background: #fdfdfe;
}

.drawer-body::-webkit-scrollbar {
      width: 5px;
}

.drawer-body::-webkit-scrollbar-track {
      background: transparent;
}

.drawer-body::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 4px;
}

.drawer-body::-webkit-scrollbar-thumb:hover {
      background: #9ca3af;
}

/* Seção do drawer — card com borda e sombra suave */
.drawer-section {
      margin-bottom: 20px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Título da seção — header do card com linha de acento esquerda */
.drawer-section-title {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.65px;
      color: #374151;
      padding: 10px 16px 9px 14px;
      background: linear-gradient(to right, #f1f5f9, #f8fafc);
      border-bottom: 1px solid #e5e7eb;
      border-left: 3px solid var(--color-primary, #2563eb);
      display: flex;
      align-items: center;
      gap: 7px;
      /* Remove margin-bottom legado */
      margin-bottom: 0;
}

/* Campos dentro de drawer-section — padding horizontal */
.drawer-section .form-row {
      padding-left: 16px;
      padding-right: 16px;
      margin-bottom: 16px;
}

/* Primeiro form-row após o título — espaço no topo */
.drawer-section .drawer-section-title+.form-row {
      margin-top: 14px;
}

/* Último form-row dentro da seção — espaço no fundo */
.drawer-section .form-row:last-child {
      margin-bottom: 0;
      padding-bottom: 16px;
}

/* Inputs e selects dentro do drawer — foco aprimorado */
.drawer-body input:focus,
.drawer-body select:focus,
.drawer-body textarea:focus {
      outline: none;
      border-color: var(--color-primary, #2563eb);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      background: #fefeff;
}

/* Rodapé do drawer */
.drawer-footer {
      display: flex;
      gap: 10px;
      padding: 16px 24px;
      border-top: 1px solid #e5e7eb;
      background: linear-gradient(to top, #f8fafc, #ffffff);
      flex-shrink: 0;
}

/* Botão Salvar — mais destaque */
.drawer-footer .btn.primary,
.drawer-footer .btn-primary {
      flex: 2;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.2px;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.drawer-footer .btn.primary:hover,
.drawer-footer .btn-primary:hover {
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
      transform: translateY(-1px);
}

/* Botão Cancelar — secundário discreto */
.drawer-footer .btn.secondary,
.drawer-footer .btn-secondary {
      flex: 1;
      font-size: 13px;
}

/* Variante: só um botão ocupa tudo */
.drawer-footer .btn:only-child {
      flex: 1;
}

/* Badge de status no header do drawer */
.drawer-header-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 20px;
      white-space: nowrap;
}

.drawer-header-badge.ativo {
      background: #dcfce7;
      color: #15803d;
}

.drawer-header-badge.inativo {
      background: #f3f4f6;
      color: #6b7280;
}

/* Cores temáticas para seções específicas */
.drawer-section--azul .drawer-section-title::before {
      background: #2563eb;
}

.drawer-section--verde .drawer-section-title::before {
      background: #16a34a;
}

.drawer-section--laranja .drawer-section-title::before {
      background: #d97706;
}

.drawer-section--roxo .drawer-section-title::before {
      background: #7c3aed;
}

.drawer-section--vermelho .drawer-section-title::before {
      background: #dc2626;
}

.drawer-section--ciano .drawer-section-title::before {
      background: #0891b2;
}

/* Animação de entrada dos campos */
@keyframes drawerFieldIn {
      from {
            opacity: 0;
            transform: translateY(6px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.drawer.open .drawer-section {
      animation: drawerFieldIn 0.2s ease both;
}

.drawer.open .drawer-section:nth-child(1) {
      animation-delay: 0.04s;
}

.drawer.open .drawer-section:nth-child(2) {
      animation-delay: 0.08s;
}

.drawer.open .drawer-section:nth-child(3) {
      animation-delay: 0.12s;
}

.drawer.open .drawer-section:nth-child(4) {
      animation-delay: 0.16s;
}

/* Drawer responsivo */
@media (max-width: 520px) {
      .drawer {
            width: 100vw;
            max-width: 100vw;
            border-left: none;
      }

      .drawer-header {
            padding: 16px 18px 14px;
      }

      .drawer-body {
            padding: 16px 18px;
      }

      .drawer-footer {
            padding: 14px 18px;
      }
}

/* ═══════════════════════════════════════════════════════════════
   SUMMARY — Card interativo e drawer de resumo detalhado
   ═══════════════════════════════════════════════════════════════ */

/* Card clicável */
.summary-card-clickable {
      cursor: pointer;
      transition: box-shadow 0.1s ease-out, transform 0.08s ease-out, border-color 0.1s ease-out;
      border: 1px solid #e5e7eb;
      position: relative;
}

.summary-card-clickable:hover {
      box-shadow: 0 4px 18px rgba(37, 99, 235, 0.13);
      border-color: #bfdbfe;
      transform: translateY(-2px);
}

.summary-card-clickable:active {
      transform: translateY(0);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Tooltip ao passar o mouse */
.summary-card-clickable::after {
      content: 'Ver resumo completo';
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: #1e293b;
      color: #fff;
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 10;
}

.summary-card-clickable:hover::after {
      opacity: 1;
}

/* Header do card de resumo */
.summary-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
}

.summary-card-header h4 {
      margin: 0;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
      display: flex;
      align-items: center;
      gap: 6px;
}

.summary-expand-icon {
      font-size: 11px;
      color: #9ca3af;
      transition: color 0.2s ease, transform 0.2s ease;
}

.summary-card-clickable:hover .summary-expand-icon {
      color: #2563eb;
      transform: scale(1.2);
}

/* Itens do quick summary */
#summary-quick-items p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
      padding: 6px 0;
      border-bottom: 1px solid #f3f4f6;
}

#summary-quick-items p:last-child {
      border-bottom: none;
      padding-bottom: 0;
}

#summary-quick-items p:first-child {
      padding-top: 0;
}

.summary-label {
      font-size: 12.5px;
      color: #6b7280;
}

.summary-value {
      font-size: 14px;
      font-weight: 700;
      color: #111827;
}

/* Grid de stats no drawer de resumo detalhado */
.summary-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 14px 16px;
}

.summary-stat-card {
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.summary-stat-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
      border-color: #d1d5db;
}

.summary-stat-icon {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
}

.summary-stat-info {
      min-width: 0;
      display: flex;
      flex-direction: column;
}

.summary-stat-label {
      font-size: 14.5px;
      font-weight: 600;
      color: #374151;
      line-height: 1.3;
      order: 1;
}

.summary-stat-value {
      font-size: 15px;
      font-weight: 500;
      color: #64748b;
      line-height: 1.2;
      margin-top: 2px;
      order: 2;
}

/* Lista de preferências (checkboxes) */
.summary-prefs-list {
      padding: 10px 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
}

.summary-pref-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      color: #374151;
      transition: background 0.12s ease, border-color 0.12s ease;
      user-select: none;
      border: 1px solid transparent;
}

.summary-pref-item:hover {
      background: #f1f5f9;
      border-color: #e2e8f0;
}

.summary-pref-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      min-width: 16px;
      accent-color: var(--color-primary, #2563eb);
      cursor: pointer;
      flex-shrink: 0;
}

.summary-pref-item:has(input:checked) {
      background: #eff6ff;
      border-color: #bfdbfe;
}

.summary-pref-item:has(input:checked) span {
      font-weight: 600;
      color: #1d4ed8;
}

/* Hint de personalização no card */
.summary-customize-hint {
      font-size: 10.5px;
      color: #9ca3af;
      text-align: center;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
}

@media (max-width: 520px) {
      .summary-stats-grid {
            grid-template-columns: 1fr;
      }
}


/* ═══════════════════════════════════════════════════
   ENTRADA DE PRODUTOS — overrides mínimos (usa .table padrão)
   ═══════════════════════════════════════════════════ */

/* Contador de itens acima da tabela */
.produtos-count-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--color-primary);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 10px 2px 8px;
      border-radius: 20px;
}

/* A tabela de entrada usa layout automático (não fixo) e permite overflow nos cells */
.table--entrada {
      table-layout: auto;
      min-width: 820px;
}

.table--entrada th:last-child,
.table--entrada td:last-child {
      width: auto;
}

.table--entrada td {
      padding: 7px 8px;
      vertical-align: middle;
      white-space: normal;
      overflow: visible;
}

/* Inputs e selects dentro da tabela de entrada */
.table--entrada td input[type="number"],
.table--entrada td input[type="text"],
.table--entrada td select {
      width: 100%;
      padding: 5px 8px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      font-size: var(--font-size-sm);
      font-family: inherit;
      color: var(--color-text);
      background: var(--color-surface);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      box-sizing: border-box;
}

.table--entrada td input[type="number"]:focus,
.table--entrada td input[type="text"]:focus,
.table--entrada td select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Número de linha */
.prod-num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      background: var(--color-primary-soft);
      color: var(--color-primary);
      font-size: 11px;
      font-weight: 700;
      border-radius: 50%;
      border: 1px solid #bfdbfe;
}

/* Categoria (readonly preenchida automaticamente) */
.cat-readonly {
      background: var(--color-bg) !important;
      color: var(--color-text-muted) !important;
      font-style: italic;
      cursor: default;
      pointer-events: none;
}

.cat-readonly.has-value {
      background: var(--color-success-soft) !important;
      color: var(--color-success) !important;
      font-style: normal;
      font-weight: 500;
}

/* Campo Preço Venda (calculado automaticamente) */
.input-pv {
      background: var(--color-success-soft) !important;
      color: var(--color-success) !important;
      font-weight: 600 !important;
      border-color: #bbf7d0 !important;
}

/* Subtotal por linha */
.subtotal-display {
      display: block;
      text-align: right;
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-text-muted);
      white-space: nowrap;
}

.subtotal-display.has-value {
      color: var(--color-success);
}

/* Checkbox atualizar preço */
.td-check {
      text-align: center;
}

.td-check input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: #7c3aed;
      cursor: pointer;
}

/* Estado vazio */
.produtos-empty {
      text-align: center;
      padding: 28px 16px !important;
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
}

/* Linha de totais no rodapé da tabela */
.total-foot-row {
      background: var(--color-bg);
      border-top: 2px solid var(--color-border);
}

.total-foot-row td {
      padding: 9px 8px;
      font-size: var(--font-size-sm);
      white-space: nowrap;
}

.grand-total-items {
      color: var(--color-text-muted);
}

.grand-total-qty {
      text-align: center;
      color: var(--color-primary);
      font-weight: 700;
}

.grand-total-label {
      text-align: right;
      font-weight: 600;
      color: var(--color-text-muted);
}

.grand-total-value {
      text-align: right;
      font-weight: 700;
      color: var(--color-success);
}

:root {
      --rec-bg: #f4f7fd;
      --rec-ink: #0f172a;
      --rec-muted: #64748b;
      --rec-line: #dbe3ef;
      --rec-surface: #ffffff;
      --rec-primary: #2563eb;
      --rec-accent: #7c3aed;
      --rec-shadow-sm: 0 8px 18px rgba(15, 23, 42, 0.06);
}


.container.module-layout {
      display: flex;
      flex-direction: column;
      gap: 26px;
      padding-top: 10px;
      padding-bottom: calc(26px + env(safe-area-inset-bottom));
}

.module-title {
      margin-bottom: 0;
}

.module-title h3 {
      color: var(--rec-ink);
}

.module-title-icon {
      background: linear-gradient(135deg, #1d4ed8, #7c3aed);

}

.module-card {
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 14px;
      overflow: visible;
      position: relative;

}

.rec-card-form {
      z-index: 20;
}

.rec-card-list {
      z-index: 10;
}

.module-card-header {
      background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), #ffffff 65%);
      border-bottom: 1px solid rgba(148, 163, 184, 0.18);
      padding: 18px 22px;
      gap: 14px;
}

.module-card-body {
      background: rgba(255, 255, 255, 0.96);
      padding: 22px;
}

#rec-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
}

#rec-form .form-section {
      border: 1px solid var(--rec-line);
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 18px;
      margin: 0;
}

#rec-form .form-section legend {
      color: var(--rec-muted);
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0 10px;
      margin-left: 6px;
}

.rec-form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 18px 20px;
}

.rec-form-grid>.form-row {
      margin-bottom: 0;
}

#rec-form .form-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
}

#rec-form .form-row label {
      font-size: 11px;
      color: var(--rec-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 700;
}

#rec-form input,
#rec-form select,
#rec-form textarea {
      border: 1px solid var(--rec-line);
      border-radius: 10px;
      color: #0f172a;
      background: #fff;
      min-height: 40px;
      transition:
            border-color 0.12s ease,
            box-shadow 0.12s ease;
}

#rec-form textarea {
      min-height: 84px;
      resize: vertical;
}

#rec-form .helper-text {
      margin-top: 2px;
      line-height: 1.45;
}

#rec-form input::placeholder,
#rec-form textarea::placeholder {
      color: #94a3b8;
}

#rec-form input:focus,
#rec-form select:focus,
#rec-form textarea:focus {
      outline: none;
      border-color: #93c5fd;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rec-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
}

.rec-preview-item {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #ffffff;
      padding: 14px 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 5px 12px rgba(15, 23, 42, 0.04);
}

.rec-preview-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #cbd5e1;
}

.rec-preview-item .kicker {
      display: block;
      color: #6b7280;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
}

.rec-preview-item .value {
      margin-top: 4px;
      color: #111827;
      font-size: 18px;
      font-weight: 700;
}

.rec-preview-item--expected {
      border-color: #c7d2fe;
      background: #eef2ff;
}

.rec-preview-item--expected::before {
      background: #4f46e5;
}

.rec-preview-item--physical {
      border-color: #bbf7d0;
      background: #f0fdf4;
}

.rec-preview-item--physical::before {
      background: #16a34a;
}

.rec-preview-item--difference {
      border-color: #fed7aa;
      background: #fff7ed;
}

.rec-preview-item--difference::before {
      background: #ea580c;
}

.rec-preview-item .value.positive {
      color: #047857;
}

.rec-preview-item .value.negative {
      color: #dc2626;
}

.rec-preview-item .value.neutral {
      color: #6b7280;
}

.rec-preview-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 6px;
      grid-column: 1 / -1;
}

.rec-preview-chip {
      border: 1px dashed #dbe3ef;
      border-radius: 10px;
      background: #ffffff;
      padding: 12px 13px;
      display: flex;
      flex-direction: column;
      gap: 4px;
}

.rec-preview-chip span {
      font-size: 10px;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 700;
}

.rec-preview-chip strong {
      font-size: 14px;
      color: #111827;
}

.rec-preview-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      margin-top: 4px;
      padding-top: 2px;
}

.rec-preview-actions .btn {
      min-height: 34px;
      border-radius: 8px;
}

.rec-form-feedback {
      margin-top: 16px;
      border: 1px solid #dbe3ef;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
}

.rec-form-feedback i {
      font-size: 12px;
}

.rec-form-feedback.info {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1e40af;
}

.rec-form-feedback.warning {
      background: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
}

.rec-form-feedback.error {
      background: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
}

.rec-form-feedback.success {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
}

.rec-form-feedback.is-hidden {
      display: none;
}

#rec-create:disabled {
      opacity: 0.55;
      pointer-events: none;
      cursor: not-allowed;
}

.rec-actions-inline {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      padding-top: 2px;
}

#rec-create,
.rec-dropdown-btn {
      min-height: 38px;
      border-radius: 10px;
}

#rec-create {
      box-shadow: 0 10px 16px rgba(29, 78, 216, 0.22);
}

.rec-dropdown {
      position: relative;
      z-index: 30;
}

.rec-dropdown.open {
      z-index: 180;
}

.rec-dropdown-btn {
      min-width: 165px;
      justify-content: space-between;
}

.rec-dropdown-btn i:last-child {
      font-size: 11px;
}

.rec-dropdown-menu {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 240px;
      border: 1px solid #e5e7eb;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
      padding: 8px;
      z-index: 220;
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(4px) scale(0.98);
      transform-origin: top right;
      transition:
            opacity 0.14s ease,
            transform 0.14s ease,
            visibility 0.14s ease;
}

.rec-dropdown.open .rec-dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
}

.rec-dropdown-item {
      width: 100%;
      border: none;
      background: transparent;
      text-align: left;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      color: #374151;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-family: inherit;
}

.rec-dropdown-item:hover {
      background: #f8fafc;
      color: #111827;
}

.rec-quick-icon--today {
      color: #2563eb;
}

.rec-quick-icon--week {
      color: #0ea5e9;
}

.rec-quick-icon--approve {
      color: #16a34a;
}

.rec-quick-icon--migrate {
      color: #7c3aed;
}

.rec-quick-icon--clear {
      color: #6b7280;
}

.rec-toolbar {
      margin-bottom: 16px;
}

.module-card--roxo .module-card-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 18px;
      align-items: start;
}

.rec-search-wrap {
      margin-left: auto;
      min-width: 230px;
      max-width: 320px;
      position: relative;
}

.rec-search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
      font-size: 12px;
      pointer-events: none;
      z-index: 1;
}

.rec-search-input {
      width: 100%;
      height: 36px;
      padding: 7px 12px 7px 32px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 13px;
      color: #1f2937;
      background: #fff;
      outline: none;
      font-family: inherit;
      box-sizing: border-box;
      transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease;
}

.rec-search-input:focus {
      border-color: #93c5fd;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rec-toolbar-filters {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      padding: 2px 0;
}

.rec-toolbar-filters select,
.rec-toolbar-filters button {
      height: 32px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 12px;
      font-family: inherit;
}

.rec-toolbar-filters select {
      min-width: 150px;
      padding: 0 10px;
      background: #fff;
      color: #374151;
}

.rec-toolbar-filters button {
      padding: 0 12px;
      cursor: pointer;
      background: #fff;
      color: #374151;
}

.rec-toolbar-filters button:hover {
      background: #f8fafc;
}

.rec-period-label {
      display: flex;
      flex-direction: column;
      gap: 2px;
}

.rec-period-label .date {
      color: #111827;
      font-weight: 600;
      font-size: 13px;
}

.rec-period-label .time {
      color: #94a3b8;
      font-size: 11px;
}

.rec-diff {
      font-weight: 700;
}

.rec-diff--positive {
      color: #0f766e;
}

.rec-diff--negative {
      color: #dc2626;
}

.rec-diff--neutral {
      color: #6b7280;
}

.rec-row-actions {
      position: relative;
      display: inline-flex;
      z-index: 1;
}

.rec-row-actions.open {
      z-index: 120;
}

.rec-table td,
.rec-table th {
      position: relative;
}

.rec-table td:last-child,
.rec-table th:last-child {
      overflow: visible;
      z-index: 140;
}

.rec-row-menu-btn {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
      background: #fff;
      color: #6b7280;
      cursor: pointer;
}

.rec-row-menu-btn:hover {
      background: #f8fafc;
      color: #374151;
}

.rec-row-menu {
      position: fixed;
      left: 0;
      top: 0;
      min-width: 190px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
      padding: 8px;
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(4px) scale(0.98);
      transform-origin: top right;
      transition:
            opacity 0.14s ease,
            transform 0.14s ease,
            visibility 0.14s ease;
      z-index: 75;
}

.rec-row-actions.open .rec-row-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
}

.rec-row-menu-item {
      width: 100%;
      border: none;
      background: transparent;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      font-family: inherit;
      color: #374151;
      text-align: left;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
}

.rec-row-menu-item:hover {
      background: #f8fafc;
}

.rec-row-menu-item--danger {
      color: #b91c1c;
}

.rec-action-icon--approve {
      color: #16a34a;
}

.rec-action-icon--details {
      color: #2563eb;
}

.rec-action-icon--duplicate {
      color: #7c3aed;
}

#reconciliations-table {
      border-collapse: separate;
      border-spacing: 0;
}

#reconciliations-table thead th {
      background: #f8fafc;
      color: #475569;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
}

#reconciliations-table tbody td {
      border-bottom: 1px solid #eef2f7;
      vertical-align: middle;
}

#reconciliations-table tbody tr:hover {
      background: #f8fbff;
}

.nmp-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
}

.nmp-badge--aprovado {
      color: #166534;
      background: #dcfce7;
      border: 1px solid #bbf7d0;
}

.nmp-badge--pendente {
      color: #b45309;
      background: #fef3c7;
      border: 1px solid #fde68a;
}

#summary-widget {
      margin: 0;
      position: sticky;
      top: 84px;
}

#summary-card {
      border: 1px solid var(--rec-line);
      border-radius: 12px;
      box-shadow: var(--rec-shadow-sm);
      background: linear-gradient(180deg, #ffffff, #fcfcff);
}

.summary-card-title-icon {
      color: #7c3aed;
}

.summary-stat-optional {
      display: none;
}

.summary-hint-icon {
      font-size: 9px;
}

.drawer-header-icon--summary {
      background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

.drawer-icon-summary {
      color: #7c3aed;
}

.drawer-header-icon--details {
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.drawer-icon-details {
      color: #2563eb;
}

.summary-section-icon {
      font-size: 11px;
}

.rec-details-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
}

.rec-detail-box {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
}

.rec-detail-box .kicker {
      font-size: 11px;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
}

.rec-detail-box .value {
      margin-top: 4px;
      color: #111827;
      font-size: 14px;
      font-weight: 600;
}

.rec-linked-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
}

.rec-linked-item {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
}

.rec-linked-item .left {
      display: flex;
      flex-direction: column;
      gap: 2px;
}

.rec-linked-item .left .title {
      font-size: 13px;
      color: #111827;
      font-weight: 600;
}

.rec-linked-item .left .meta {
      font-size: 11px;
      color: #94a3b8;
}

.rec-linked-item .right {
      font-size: 13px;
      font-weight: 700;
      color: #111827;
}

@media (max-width: 1180px) {
      .module-card--roxo .module-card-body {
            grid-template-columns: 1fr;
      }

      #summary-widget {
            position: static;
      }
}

@media (max-width: 980px) {
      .rec-form-grid {
            grid-template-columns: 1fr;
      }

      .rec-preview-grid {
            grid-template-columns: 1fr;
      }

      .rec-preview-meta {
            grid-template-columns: 1fr;
      }

      .rec-details-grid {
            grid-template-columns: 1fr;
      }

      .module-card-header {
            flex-wrap: wrap;
            gap: 10px;
      }

      .rec-search-wrap {
            width: 100%;
            max-width: none;
      }

      .rec-toolbar-filters select,
      .rec-toolbar-filters button {
            flex: 1 1 170px;
      }
}

@media (max-width: 680px) {
      .container.module-layout {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            gap: 18px;
      }

      .module-card-header,
      .module-card-body {
            padding-left: 16px;
            padding-right: 16px;
      }

      #rec-form .form-section {
            padding: 14px;
      }

      .rec-actions-inline {
            width: 100%;
      }

      .rec-actions-inline>.btn,
      .rec-actions-inline>.rec-dropdown {
            width: 100%;
      }

      .rec-dropdown-btn {
            width: 100%;
      }

      .rec-dropdown-menu {
            left: 0;
            right: auto;
            min-width: 0;
            width: 100%;
      }

      .rec-preview-actions {
            justify-content: stretch;
      }

      .rec-preview-actions .btn {
            width: 100%;
      }
}

/* ===================================================================
   RESPONSIVE FOUNDATION (Fases 1 e 2)
   =================================================================== */

.app-shell-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      z-index: 1190;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
}

.app-shell-overlay.is-visible {
      opacity: 1;
      visibility: visible;
}

body.sidebar-mobile-open {
      overflow: hidden;
}

/* Utilitarios para substituir wrappers inline recorrentes em lotes */
.nmp-search-wrap {
      position: relative;
      width: min(100%, 260px);
      min-width: 210px;
}

.nmp-search-wrap--auto {
      margin-left: auto;
}

.nmp-search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #9CA3AF;
      font-size: 12px;
      pointer-events: none;
      z-index: 1;
}

.nmp-search-input {
      width: 100%;
      height: 36px;
      padding: 7px 12px 7px 32px;
      border: 1px solid #E5E7EB;
      border-radius: 8px;
      font-size: 13px;
      color: #1F2937;
      background: #FFFFFF;
      outline: none;
      font-family: inherit;
      box-sizing: border-box;
}

/* Onda 1 — utilitarios safe para reducao de inline styles */
.nmp-u-hidden {
      display: none;
}

.nmp-u-hidden-mt12 {
      display: none;
      margin-top: 12px;
}

.nmp-u-text-right {
      text-align: right;
}

.nmp-u-text-center {
      text-align: center;
}

.nmp-u-pad-6 {
      padding: 6px;
}

.nmp-u-pad-12x16 {
      padding: 12px 16px;
}

.nmp-u-cell-center-10x16 {
      padding: 10px 16px;
      text-align: center;
}

.nmp-u-pad-8-16-14-52 {
      padding: 8px 16px 14px 52px;
}

.nmp-u-flex-center-gap8-mb8 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
}

.nmp-u-block-mb8 {
      display: block;
      margin-bottom: 8px;
}

.nmp-u-flex-col-gap6 {
      display: flex;
      flex-direction: column;
      gap: 6px;
}

.nmp-u-label-strong-13 {
      color: #111827;
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
}

.nmp-u-text-muted-soft {
      color: #94A3B8;
}

.nmp-u-text-orange-600 {
      color: #EA580C;
}

.nmp-u-icon-xs-rotate {
      font-size: 9px;
      transition: transform 0.25s;
}

.nmp-u-overline-muted {
      color: #6B7280;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
}

.nmp-u-nowrap-muted-12 {
      color: #6B7280;
      font-size: 12px;
      white-space: nowrap;
}

.nmp-u-input-box-36 {
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #E5E7EB;
      color: #1F2937;
      font-family: inherit;
      font-size: 12px;
      height: 36px;
      outline: none;
      padding: 0 8px;
}

.nmp-u-th-strong-12x16 {
      border-bottom: 2px solid #E2E8F0;
      color: #334155;
      font-weight: 600;
      padding: 12px 16px;
}

.nmp-u-panel-16 {
      background: #FFFFFF;
      border-radius: 12px;
      border: 1px solid #E2E8F0;
      padding: 16px;
}

.nmp-u-label-uppercase-12 {
      color: #64748B;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.5px;
      text-transform: uppercase;
}

.nmp-u-table-head-compact {
      border-bottom: 2px solid #E5E7EB;
      color: #64748B;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      padding: 8px 12px;
      text-align: left;
      text-transform: uppercase;
}

.nmp-u-table-cell-compact {
      border-bottom: 1px solid #F3F4F6;
      padding: 8px 12px;
}

.nmp-u-cell-border-ccc-6 {
      border: 1px solid #CCC;
      padding: 6px;
}

.nmp-u-cell-border-ccc-6-right {
      border: 1px solid #CCC;
      padding: 6px;
      text-align: right;
}

.nmp-u-cell-border-eee-6 {
      border-bottom: 1px solid #EEE;
      padding: 6px;
}

.nmp-u-radius-8 {
      border-radius: 8px;
}

.nmp-u-th-left-8x16 {
      color: #374151;
      font-weight: 600;
      padding: 8px 16px;
      text-align: left;
}

.nmp-u-th-center-8x16 {
      color: #374151;
      font-weight: 600;
      padding: 8px 16px;
      text-align: center;
}

.nmp-u-border-b-slate-100 {
      border-bottom: 1px solid #F1F5F9;
}

.nmp-u-cell-muted-10x16 {
      color: #6B7280;
      padding: 10px 16px;
}

/* Compatibilidade imediata para blocos inline legados sem quebrar cada modulo */
.module-card-header>div[style*="min-width: 210px"][style*="position: relative"],
.module-card-header>div[style*="min-width:210px"][style*="position:relative"] {
      width: min(100%, 260px);
      min-width: 210px !important;
}

/* Ajuste de tabela que usava largura fixa agressiva em mobile */
@media (max-width: 900px) {
      .table--entrada {
            min-width: 680px;
      }
}

@media (max-width: 1024px) {
      .app {
            overflow-x: hidden;
      }

      .sidebar {
            /* MENU-2.1: mantém a coluna flex no drawer mobile p/ o rodapé fixo
               (era display:block). Continua escondido fora da tela via translateX. */
            display: flex !important;
            flex-direction: column;
            width: min(86vw, 320px);
            transform: translateX(-100%);
            transition: transform 0.24s ease;
            z-index: 1200;
      }

      .sidebar.mobile-open {
            transform: translateX(0);
      }

      .main,
      .main.sidebar-collapsed {
            margin-left: 0 !important;
      }

      .topbar {
            height: auto;
            min-height: 64px;
            flex-wrap: wrap;
            row-gap: 10px;
            align-items: center;
            padding: 10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right));
      }

      .topbar .top-left {
            flex: 1 1 auto;
            min-width: 0;
      }

      /* Topbar-Fase3: .topbar .top-middle e #global-search-wrapper removidos
         (busca global enterrada). */

      .topbar .top-right {
            margin-left: auto;
            gap: 8px;
      }

      .topbar #userDisplay {
            display: none;
      }

      #btn-sidebar-toggle {
            display: inline-flex;
      }

      .module-card-header>div[style*="min-width: 210px"][style*="position: relative"],
      .module-card-header>div[style*="min-width:210px"][style*="position:relative"] {
            order: 99;
            margin-left: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
      }
}

@media (max-width: 680px) {
      .topbar .top-right {
            width: 100%;
            justify-content: flex-end;
      }

      .module-card-header {
            flex-wrap: wrap;
            align-items: flex-start;
      }

      .nmp-search-wrap {
            width: 100%;
            min-width: 0;
      }
}

/* ============================================================================
   TEMA-DARK — escuro governado por TOGGLE (data-theme), nao mais pelo SO
   ----------------------------------------------------------------------------
   ANTES vivia em @media (prefers-color-scheme: dark) e seguia o SO. AGORA um
   botao no header grava data-theme="light|dark" no <html> e persiste a escolha
   (localStorage nmp_theme). Default = claro (sem atributo / data-theme=light).
   O @media foi REMOVIDO p/ o SO nao brigar com o botao (escolha vence sempre).
   Alcance: moldura do shell (sidebar/topbar/fundo) + MIOLO do dashboard
   (.dashboard-executivo). NAO toca PDV/conciliacao/demais telas internas.
   Cobre as 2 familias de tokens (shell + cards); espelhado no FIM do
   dashboard-modern.css (ultimo da cascata) p/ vencer os #ffffff literais.
   ============================================================================ */
[data-theme="dark"] {
            /* Família shell (style.css) */
            --color-bg: #13181c;
            --color-surface: #1a2025;
            --color-border: #2a3035;
            --color-text: #e8ebed;
            --color-text-muted: #aeb4ba;

            /* Família cards de KPI (dashboard-modern.css) */
            --color-text-primary: #e8ebed;
            --color-text-secondary: #aeb4ba;
            --color-text-tertiary: #6a7278;
            --color-bg-primary: #13181c;
            --color-bg-secondary: #1f262b;
            --color-border-light: #2a3035;

            /* Sidebar */
            --sidebar-bg: #1a2025;
            --sidebar-bg-dark: #1a2025;
            --sidebar-text: #e8ebed;
            --sidebar-text-active: #7fe0cb;
            --sidebar-item-active: #143b3a;
            --sidebar-item-hover: #22312f;
            --sidebar-section: #6a7278;
            --sidebar-separator: #2a3035;
            --sidebar-restricted: #d89a6a;

            /* Topbar */
            --topbar-bg: #1a2025;
            --topbar-border: #2a3035;

            /* Marca clareada p/ contraste no escuro */
            --brand-teal: #6dc4cd;
            --brand-orange: #ff9d52;
            --brand-green: #5dcaa5;

            /* Tokens dos cards/painel do dashboard */
            --dashboard-card-border: #2a3035;
            --dashboard-card-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.5);

            /* Painel AI Insights */
            --ai-surface-soft: #1f262b;
            --ai-surface-muted: #232b30;
            --ai-border-soft: #2a3035;
            --ai-border-strong: #3a424a;
            --ai-ink-strong: #e8ebed;
            --ai-ink-muted: #aeb4ba;

            /* Chips semânticos (fundos -light usados como tinta de ícone) */
            --color-primary-light: #1e2a44;
            --color-success-light: #143b2e;
            --color-warning-light: #3a2e12;
            --color-danger-light: #3a1e1e;
            --color-info-light: #14303a;
      }

      /* Fundo da pagina (dashboard-modern.css hardcoda body com fundo branco) */
      [data-theme="dark"] body {
            background: var(--color-bg);
      }

      /* ----- MIOLO do dashboard: superfícies #ffffff hardcoded -> surface ----- */
      [data-theme="dark"] .dashboard-executivo {
            background: var(--color-bg);
      }

      [data-theme="dark"] .dashboard-executivo .kpi-card-main,
[data-theme="dark"] .dashboard-executivo .kpi-card-main.primary,
[data-theme="dark"] .dashboard-executivo .kpi-card-main.success,
[data-theme="dark"] .dashboard-executivo .kpi-card-main.info,
[data-theme="dark"] .dashboard-executivo .kpi-card-main.danger,
[data-theme="dark"] .dashboard-executivo .kpi-card-main.warning,
[data-theme="dark"] .dashboard-executivo .kpi-card-main.violet,
[data-theme="dark"] .dashboard-executivo .kpi-card,
[data-theme="dark"] .dashboard-executivo .tab-bar,
[data-theme="dark"] .dashboard-executivo .card-panel,
[data-theme="dark"] .dashboard-executivo .panel-header,
[data-theme="dark"] .dashboard-executivo .panel-body,
[data-theme="dark"] .dashboard-executivo .section-header,
[data-theme="dark"] .dashboard-executivo .chart-period-select,
[data-theme="dark"] .dashboard-executivo .activity-item,
[data-theme="dark"] .dashboard-executivo .appointment-item,
[data-theme="dark"] .dashboard-executivo .due-item,
[data-theme="dark"] .dashboard-executivo .list-item,
[data-theme="dark"] .dashboard-executivo .activity-item.warning,
[data-theme="dark"] .dashboard-executivo .appointment-item.warning,
[data-theme="dark"] .dashboard-executivo .due-item.warning,
[data-theme="dark"] .dashboard-executivo .list-item.warning,
[data-theme="dark"] .dashboard-executivo .activity-item.danger,
[data-theme="dark"] .dashboard-executivo .appointment-item.danger,
[data-theme="dark"] .dashboard-executivo .due-item.danger,
[data-theme="dark"] .dashboard-executivo .list-item.danger,
[data-theme="dark"] .dashboard-executivo .activity-item.success,
[data-theme="dark"] .dashboard-executivo .appointment-item.success,
[data-theme="dark"] .dashboard-executivo .due-item.success,
[data-theme="dark"] .dashboard-executivo .list-item.success,
[data-theme="dark"] .dashboard-executivo .empty-state,
[data-theme="dark"] .dashboard-executivo .ai-insights-wrapper,
[data-theme="dark"] .dashboard-executivo .ai-insights-hero,
[data-theme="dark"] .dashboard-executivo .ai-insights-header,
[data-theme="dark"] .dashboard-executivo .ai-loading-step,
[data-theme="dark"] .dashboard-executivo .btn-ai-refresh {
            background: var(--color-surface);
            border-color: var(--dashboard-card-border);
      }

      [data-theme="dark"] .dashboard-executivo .kpi-card-main .kpi-card-main-icon,
[data-theme="dark"] .dashboard-executivo .kpi-icon-box {
            background: #232b30;
      }

      /* AI Insights subtree (regras com ID — precisam de seletor c/ ID p/ vencer) */
      [data-theme="dark"] .dashboard-executivo #ai-insights .metric-item,
[data-theme="dark"] .dashboard-executivo #tab-content-insights .metric-item,
[data-theme="dark"] .dashboard-executivo #ai-insights .card-panel,
[data-theme="dark"] .dashboard-executivo #tab-content-insights .card-panel,
[data-theme="dark"] .dashboard-executivo #ai-insights .ai-recs-section,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-recs-section,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-category,
[data-theme="dark"] .dashboard-executivo #tab-content-insights .ai-panel,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-insight-item,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-insight-item:hover,
[data-theme="dark"] .dashboard-executivo #ai-insights .ai-recs-title,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-recs-title,
[data-theme="dark"] .dashboard-executivo #ai-insights .ai-rec-item,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-rec-item {
            background: var(--color-surface);
            border-color: var(--ai-border-soft);
      }

      /* Chips/badges/ícones de tinta clara dentro do dashboard -> chip escuro */
      [data-theme="dark"] .dashboard-executivo #ai-insights .metric-label i,
[data-theme="dark"] .dashboard-executivo #tab-content-insights .metric-label i,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-insight-icon,
[data-theme="dark"] .dashboard-executivo #ai-insights .ai-rec-item.ai-rec-info .ai-rec-icon,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .ai-rec-item.ai-rec-info .ai-rec-icon,
[data-theme="dark"] .dashboard-executivo #ai-insights .ai-rec-item .btn.small,
[data-theme="dark"] .dashboard-executivo #ai-insights .last-updated,
[data-theme="dark"] .dashboard-executivo #ai-insights-tab-main .last-updated,
[data-theme="dark"] .dashboard-executivo .ai-tag-neutral {
            background: #232b30;
            border-color: var(--ai-border-strong);
            color: var(--ai-ink-muted);
      }

      [data-theme="dark"] .dashboard-executivo .ai-tag-up {
            background: #14303a;
            border-color: #2a4a52;
            color: #7fc7d2;
      }

      [data-theme="dark"] .dashboard-executivo .ai-tag-down {
            background: #3a1e22;
            border-color: #5a2e33;
            color: #f0a0aa;
      }

      /* Tabela de relatório do AI */
      [data-theme="dark"] .dashboard-executivo #tab-content-insights .report-table thead,
[data-theme="dark"] .dashboard-executivo #tab-content-insights .report-table tbody tr,
[data-theme="dark"] .dashboard-executivo #tab-content-insights .report-table tbody tr:nth-child(even) {
            background: var(--color-surface);
      }

      [data-theme="dark"] .dashboard-executivo #tab-content-insights .report-table tbody tr:hover {
            background: #232b30;
      }