@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =====================================================================
   legacy-shell.css — Compatibilidade do menu/navbar AdminLTE 2 (gerado
   pelo Delphi em UserSessionUnit.pas) com o shell BS5 / AdminLTE 4.
   Estiliza a marcação antiga (sidebar-menu / treeview / treeview-menu)
   sem precisar mexer no Delphi.
   ===================================================================== */

/* ---------- SIDEBAR: menu principal legado ---------- */
.app-sidebar .sidebar-menu,
.app-sidebar .sidebar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app-sidebar .sidebar-menu li { position: relative; list-style: none; }

/* cabeçalho de seção (<li class="header">) */
.app-sidebar .sidebar-menu li.header {
  padding: .85rem 1rem .35rem;
  color: #8a949c;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

/* links de 1º nível e de submenu */
.app-sidebar .sidebar-menu > li > a,
.app-sidebar .sidebar-menu .treeview-menu > li > a {
  display: flex;
  align-items: flex-start;        /* ícone no topo quando o texto quebra em 2 linhas */
  gap: .5rem;
  padding: .42rem .9rem;
  color: #c2c7d0;
  text-decoration: none;
  font-size: .84rem;
  line-height: 1.2;
  white-space: normal;            /* permite quebrar linha (antes cortava) */
  overflow-wrap: anywhere;
  word-break: break-word;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
/* o ícone não encolhe; a seta de grupo fica à direita mesmo com texto em 2 linhas */
.app-sidebar .sidebar-menu a > i:first-child { flex-shrink: 0; margin-top: .1rem; }
.app-sidebar .sidebar-menu .pull-right-container { margin-top: .05rem; }
.app-sidebar .sidebar-menu > li > a:hover,
.app-sidebar .sidebar-menu .treeview-menu > li > a:hover,
.app-sidebar .sidebar-menu li.menu-open > a {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-left-color: #0d6efd;
}
.app-sidebar .sidebar-menu li.active > a {
  background: rgba(13,110,253,.15);
  color: #fff;
  border-left-color: #0d6efd;
}

/* ícones */
.app-sidebar .sidebar-menu a > i {
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

/* submenu (treeview) */
.app-sidebar .sidebar-menu .treeview-menu {
  display: none;
  background: rgba(0,0,0,.20);
}
.app-sidebar .sidebar-menu li.menu-open > .treeview-menu { display: block; }
.app-sidebar .sidebar-menu .treeview-menu > li > a {
  padding-left: 2.4rem;
  font-size: .8rem;
  color: #aab2bb;
}

/* ícones do menu menores */
.app-sidebar .sidebar-menu a > i { font-size: .95rem; }
/* cabeçalho de seção mais discreto */
.app-sidebar .sidebar-menu li.header { padding: .7rem .9rem .3rem; font-size: .68rem; }

/* seta do grupo (fa-angle-left) */
.app-sidebar .sidebar-menu .pull-right-container {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.app-sidebar .sidebar-menu .treeview > a .fa-angle-left {
  transition: transform .2s;
}
.app-sidebar .sidebar-menu li.menu-open > a .fa-angle-left {
  transform: rotate(-90deg);
}

/* combo de empresas no topo da sidebar */
.app-sidebar .sidebar-form .input-group,
.app-sidebar form .input-group { width: 100%; }

/* ====================================================================
   TEMA LMC (claro) — sobrescreve o sidebar escuro acima, replicando o
   visual do projeto ideiabot-lmc na marcação do menu legado.
   ==================================================================== */
.app-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0;
  box-shadow: none;
}
.app-sidebar .sidebar-brand { border-bottom: 1px solid #e2e8f0; }
.app-sidebar .sidebar-brand .brand-text,
.app-sidebar .sidebar-brand .brand-link { color: #0f172a !important; }
.app-sidebar .sidebar-brand .interface { color: #0f172a !important; }
.app-sidebar .sidebar-brand .on { color: #22c55e !important; }

/* painel do usuário no topo (claro, estilo LMC) */
.app-sidebar .user-panel {
  background: #eff6ff !important; border-bottom: 1px solid #e2e8f0;
  margin: 0 !important; padding: 12px 16px !important;
}
.app-sidebar .user-panel .info span,
.app-sidebar .user-panel .info { color: #0f172a !important; }
.app-sidebar .user-panel small { color: #64748b !important; }

/* ====================================================================
   SIDEBAR RECOLHIDA (rail estreito, sem hover) — centralizar avatar e
   ícones do menu igual à logo. No hover o AdminLTE4 expande e tudo volta.
   ==================================================================== */
.sidebar-mini.sidebar-collapse .app-sidebar .user-panel {
  justify-content: center !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.sidebar-mini.sidebar-collapse .app-sidebar .user-panel .image { margin: 0 !important; }
.sidebar-mini.sidebar-collapse .app-sidebar .user-panel .info { display: none !important; }
/* combo de empresas some quando recolhido */
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-wrapper > form { display: none !important; }
/* cabeçalho "Menu Principal" oculto quando recolhido */
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu li.header { display: none !important; }
/* itens do menu: ícone centralizado, rótulo e seta de grupo ocultos */
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu > li > a {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  border-left-color: transparent !important;
  font-size: 0 !important;            /* esconde &nbsp;/texto solto p/ o ícone centralizar */
}
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu > li > a > span,
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu > li > a .pull-right-container { display: none !important; }
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu a > i:first-child { margin: 0 !important; }
/* submenu (treeview) some no rail mesmo se o grupo estiver aberto — evita gaps;
   no hover ele reaparece normalmente */
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu .treeview-menu { display: none !important; }
/* espaçamento UNIFORME: zera margens dos itens e fixa a altura dos ícones */
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu > li { margin: 0 !important; }
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu > li > a {
  height: 44px; padding-top: 0 !important; padding-bottom: 0 !important;
  align-items: center !important;
}

/* ====================================================================
   FLYOUT do submenu no rail (sidebar colapsada) — PAINEL FIXO via JS.
   O painel .rail-flyout eh criado por legacy-shell.js e anexado ao <body>
   com position:fixed e coordenadas calculadas. Isso evita o flicker que o
   flyout CSS-puro causava em submenus longos (overflow/reflow do rail).
   ==================================================================== */
.rail-flyout {
  position: fixed; z-index: 2000;
  min-width: 220px; max-width: 320px;
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: #1e293b; color: #cbd5e1;
  padding: 6px 0; margin: 0;
  box-shadow: 6px 0 28px rgba(15,23,42,.45);
  border-radius: 10px;
  animation: railFlyoutIn .12s ease-out;
}
@keyframes railFlyoutIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.rail-flyout .rail-flyout-title {
  padding: 8px 16px 10px; font-size: .8rem; font-weight: 700; color: #fff;
  border-bottom: 1px solid #334155; margin-bottom: 4px; white-space: nowrap;
}
.rail-flyout a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px; color: #cbd5e1; text-decoration: none;
  font-size: .85rem; white-space: nowrap;
}
.rail-flyout a > i, .rail-flyout a > svg { flex-shrink: 0; width: 18px; text-align: center; }
.rail-flyout a:hover { background: #334155; color: #fff; }
/* o rail mantem overflow normal (scroll quando precisa); nada de overflow:visible */

.app-sidebar .sidebar-menu { padding: 8px; }

/* seção (li.header) */
.app-sidebar .sidebar-menu li.header {
  padding: 10px 10px 4px !important; color: #94a3b8 !important;
  font-size: 11px !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}

/* itens (grupos + simples + submenu) */
.app-sidebar .sidebar-menu > li { margin: 1px 0; }   /* compacto — igual ao layout anterior */
.app-sidebar .sidebar-menu > li > a,
.app-sidebar .sidebar-menu .treeview-menu > li > a {
  align-items: center;
  gap: 8px; padding: 5px 10px; margin: 0;
  color: #64748b; font-size: 11.5px; font-weight: 400;
  border-left: 0; border-radius: 8px;
}
.app-sidebar .sidebar-menu .treeview-menu > li { margin: 0; }
.app-sidebar .sidebar-menu a > i { width: 15px; font-size: 13px; color: #64748b; }

/* hover */
.app-sidebar .sidebar-menu > li > a:hover,
.app-sidebar .sidebar-menu .treeview-menu > li > a:hover,
.app-sidebar .sidebar-menu li.menu-open > a {
  background: #f1f5f9; color: #0f172a; border-left: 0;
}
.app-sidebar .sidebar-menu > li > a:hover > i,
.app-sidebar .sidebar-menu li.menu-open > a > i { color: #0f172a; }

/* ativo (azul-claro + texto azul) */
.app-sidebar .sidebar-menu li.active > a {
  background: #eff6ff; color: #1a6fd4; font-weight: 600; border-left: 0;
}
.app-sidebar .sidebar-menu li.active > a > i { color: #1a6fd4; }

/* submenu */
.app-sidebar .sidebar-menu .treeview-menu { background: transparent; padding-left: 10px; margin-bottom: 2px; }
.app-sidebar .sidebar-menu .treeview-menu > li > a { padding: 4px 10px; font-size: 11px; color: #64748b; }

/* chevron */
.app-sidebar .sidebar-menu .pull-right-container .fa-angle-left { color: #94a3b8; }

/* ---------- NAVBAR: dropdowns/badges legados injetados pelos tokens ---------- */
.app-header .navbar-nav > li { list-style: none; }
.app-header .navbar-nav .dropdown-menu .menu {
  list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto;
}
.app-header .navbar-nav .dropdown-menu .menu > li > a,
.app-header .navbar-nav .dropdown-menu > li > a {
  display: block; padding: .5rem 1rem; color: #212529; text-decoration: none; font-size: .9rem;
}
.app-header .navbar-nav .dropdown-menu .menu > li > a:hover { background: #f1f3f5; }
.app-header .navbar-nav .dropdown-menu li.header {
  padding: .5rem 1rem; font-size: .8rem; font-weight: 600; color: #6c757d; border-bottom: 1px solid #eee;
}
.app-header .navbar-nav .dropdown-menu li.footer > a {
  display: block; padding: .5rem 1rem; text-align: center; font-size: .85rem;
}

/* labels BS3 (label label-*) que ainda aparecem em tokens da navbar */
.app-header .label {
  display: inline-block; padding: .2em .45em; font-size: .68rem;
  font-weight: 700; line-height: 1; border-radius: .35rem; color: #fff; vertical-align: middle;
}
.app-header .label-success { background: #198754; }
.app-header .label-warning { background: #ffc107; color: #000; }
.app-header .label-danger  { background: #dc3545; }
.app-header .label-info    { background: #0dcaf0; color: #000; }
.app-header .label-primary { background: #0d6efd; }

/* ====================================================================
   NAVBAR — layout/espaçamento (tokens do Delphi injetam muita coisa)
   ==================================================================== */
/* CRÍTICO: garante que o conteúdo dos dropdowns da navbar (atalhos, mensagens,
   notificações injetados pelo Delphi) só apareça quando o dropdown está aberto */
.app-header .dropdown-menu:not(.show) { display: none !important; }

.app-header .navbar-nav { flex-wrap: nowrap; align-items: center; }
.app-header .navbar-nav > li { list-style: none; }
.app-header .navbar-nav > li > .nav-link,
.app-header .navbar-nav > li > .nav-link > span {
  white-space: nowrap;            /* impede "ERP Retaguarda | Completo" quebrar em 3 linhas */
}
.app-header .navbar-nav > .nav-item > .nav-link {
  padding: .5rem .6rem;
  display: flex; align-items: center; gap: .35rem;
  color: #2c3e50;
}
.app-header .navbar-nav > .nav-item > .nav-link i { font-size: 1.05rem; }
.app-header .navbar-badge {
  font-size: .62rem; padding: .15em .4em; position: static; margin-left: .15rem;
}

/* itens de atalho/mensagem/notificação injetados (li.dropdown.messages-menu /
   .notifications-menu) — devem aparecer DENTRO do dropdown, como itens normais */
.app-header .dropdown-menu li.dropdown,
.app-header .dropdown-menu li.messages-menu,
.app-header .dropdown-menu li.notifications-menu { display: block; list-style: none; }
.app-header .dropdown-menu li.dropdown > a,
.app-header .dropdown-menu li > a:not(.dropdown-item) {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; color: #212529; text-decoration: none; font-size: .9rem; white-space: nowrap;
}
.app-header .dropdown-menu li.dropdown > a:hover,
.app-header .dropdown-menu li > a:not(.dropdown-item):hover { background: #f1f3f5; }
.app-header .dropdown-menu { max-height: 70vh; overflow-y: auto; min-width: 240px; }

/* combo de empresa no topo da sidebar (form do master) ocupa largura toda */
.app-sidebar form .input-group .select2,
.app-sidebar form .input-group > select { width: 100% !important; }

/* ====================================================================
   SIDEBAR RECOLHIDA (mini) — ao clicar no hambúrguer, vira barra de ícones
   (o menu legado não tem isso nativo; tratamos aqui)
   ==================================================================== */
@media (min-width: 992px) {
  /* esconde textos/seções/submenus, deixando só os ícones */
  body.sidebar-collapse .app-sidebar .sidebar-menu li.header,
  body.sidebar-collapse .app-sidebar .sidebar-menu > li > a > span,
  body.sidebar-collapse .app-sidebar .sidebar-menu .pull-right-container,
  body.sidebar-collapse .app-sidebar .sidebar-brand .brand-text,
  body.sidebar-collapse .app-sidebar .user-panel .info,
  body.sidebar-collapse .app-sidebar form,
  body.sidebar-collapse .app-sidebar .treeview-menu { display: none !important; }
  body.sidebar-collapse .app-sidebar .sidebar-menu > li > a { justify-content: center; }
  body.sidebar-collapse .app-sidebar .sidebar-menu a > i:first-child { margin: 0; }

  /* NOTA: o rail agora eh PERMANENTE (body.sidebar-without-hover). Nao ha mais
     expand-on-hover: ao inves disso, o submenu aparece como FLYOUT (ver bloco
     "FLYOUT do submenu no rail"). Por isso o sub-bloco antigo de :hover que
     fazia display:revert no header/spans/form foi REMOVIDO — era ele que
     deixava "MENU PRINCIPAL" vazar no rail estreito ao passar o mouse. */
}

/* ====================================================================
   ABAS legadas (BS3: ul.nav-tabs > li.active > a[data-bs-toggle=tab])
   O BS5 espera nav-item/nav-link; estilizamos a marcação antiga.
   ==================================================================== */
.app-main .nav-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid #dee2e6; padding-left: 0; margin-bottom: 1rem; list-style: none;
}
.app-main .nav-tabs > li { margin-bottom: -1px; list-style: none; }
.app-main .nav-tabs > li > a {
  display: block; padding: .55rem 1rem; color: #0d6efd; text-decoration: none;
  border: 1px solid transparent; border-top-left-radius: .375rem; border-top-right-radius: .375rem;
  white-space: nowrap; font-size: .9rem;
}
.app-main .nav-tabs > li > a:hover { border-color: #e9ecef #e9ecef #dee2e6; background: #f8f9fa; }
.app-main .nav-tabs > li.active > a,
.app-main .nav-tabs > li > a.active {
  color: #495057; background: #fff; border-color: #dee2e6 #dee2e6 #fff; font-weight: 600;
}
/* conteúdo das abas */
.app-main .tab-content > .tab-pane { display: none; }
.app-main .tab-content > .tab-pane.active { display: block; }

/* ---- nav-tabs-custom (AdminLTE2) -> card moderno + abas underline ---- */
.app-main .nav-tabs-custom {
  background: #fff; border: 1px solid var(--lmc-border); border-radius: 14px;
  box-shadow: var(--lmc-shadow); overflow: hidden; margin-bottom: 1rem;
}
.app-main .nav-tabs-custom > .nav-tabs {
  margin: 0; padding: 0 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap;
}
.app-main .nav-tabs-custom > .tab-content { padding: 18px; }
.app-main .nav-tabs > li > a {
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  color: #64748b; padding: 12px 14px; background: transparent; white-space: nowrap;
}
.app-main .nav-tabs > li > a:hover { background: transparent; border-bottom-color: #cbd5e1 !important; color: #334155; }
.app-main .nav-tabs > li.active > a,
.app-main .nav-tabs > li > a.active {
  background: transparent !important; color: var(--lmc-brand) !important;
  border-bottom-color: var(--lmc-brand) !important; font-weight: 700;
}
body.theme-dark .app-main .nav-tabs-custom { background: #131c2e; border-color: #243049; }
body.theme-dark .app-main .nav-tabs-custom > .nav-tabs { background: #0b1220; border-bottom-color: #243049; }

/* breadcrumb à direita não sobrepor o título da página */
.app-main .breadcrumb.float-end { max-width: 60%; }
.app-main h1.page-header, .app-main .page-header { clear: both; }

/* ====================================================================
   ACABAMENTO LMC — topbar, fundo, cards e botões no estilo do ideiabot-lmc
   ==================================================================== */

/* tokens LMC */
:root {
  --lmc-brand: #1a6fd4; --lmc-brand-hover: #155bb5; --lmc-brand-light: #eff6ff;
  --lmc-bg: #f1f5f9; --lmc-surface: #fff; --lmc-border: #e2e8f0;
  --lmc-text: #0f172a; --lmc-muted: #64748b;
  --lmc-shadow: 0 1px 4px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
}

/* ---- fundo geral do conteúdo (cinza-claro, cards brancos destacam) ---- */
body.layout-fixed, .app-main, .app-content { background: var(--lmc-bg) !important; }

/* ---- TOPBAR branca minimalista ---- */
.app-header.navbar {
  background: var(--lmc-surface) !important;
  border-bottom: 1px solid var(--lmc-border);
  box-shadow: none !important;
  min-height: 60px;
}
.app-header .navbar-nav > .nav-item > .nav-link { color: var(--lmc-muted) !important; border-radius: 8px; }
.app-header .navbar-nav > .nav-item > .nav-link:hover { background: var(--lmc-bg); color: var(--lmc-text) !important; }
.app-header .interface { color: var(--lmc-text) !important; }
.app-header .on { color: #22c55e !important; }
.app-header .navbar-badge { background: var(--lmc-brand) !important; color: #fff !important; }
/* textos de empresa/sistema mais discretos */
.app-header .navbar-nav .nav-link span,
.app-header .navbar-nav .nav-link { font-size: .85rem; }

/* ---- CARDS com acabamento LMC ---- */
.app-main .card {
  border: 1px solid var(--lmc-border);
  border-radius: 14px;
  box-shadow: var(--lmc-shadow);
  background: var(--lmc-surface);
}
/* cabeçalho de card neutro (mantém o card-modern com gradiente próprio) */
.app-main .card:not(.card-modern) > .card-header {
  background: var(--lmc-surface);
  border-bottom: 1px solid #eef2f6;
  border-radius: 14px 14px 0 0;
  font-weight: 600;
  color: var(--lmc-text);
}

/* ---- BOTÕES primários na cor da marca LMC ---- */
.app-main .btn-primary, .app-header .btn-primary {
  --bs-btn-bg: var(--lmc-brand); --bs-btn-border-color: var(--lmc-brand);
  --bs-btn-hover-bg: var(--lmc-brand-hover); --bs-btn-hover-border-color: var(--lmc-brand-hover);
  --bs-btn-active-bg: var(--lmc-brand-hover); --bs-btn-active-border-color: var(--lmc-brand-hover);
}
.app-main .btn { border-radius: 9px; }

/* inputs/selects com cantos LMC */
.app-main .form-control, .app-main .form-select { border-radius: 9px; border-color: var(--lmc-border); }
.app-main .form-control:focus, .app-main .form-select:focus {
  border-color: var(--lmc-brand); box-shadow: 0 0 0 3px rgba(26,111,212,.15);
}

/* títulos de página */
.app-main h1.h3, .app-main .page-head h1 { color: var(--lmc-text); }

/* footer discreto */
.app-footer { background: var(--lmc-surface) !important; border-top: 1px solid var(--lmc-border); color: var(--lmc-muted); }

/* ====================================================================
   PADRÃO DE ESCALA (design system) — base 14px, compacto/denso estilo LMC
   Reduz tudo de forma proporcional e consistente em todo o app.
   ==================================================================== */
html { font-size: 14px; }                 /* base: era 16px do Bootstrap -> 14px (-12%) */

.app-main { font-size: .95rem; }
.app-main h1, .app-main .h1 { font-size: 1.5rem; }
.app-main h2, .app-main .h2 { font-size: 1.3rem; }
.app-main h3, .app-main .h3 { font-size: 1.1rem; }
.app-main h4, .app-main .h4 { font-size: 1rem; }
.app-main .card-title { font-size: .92rem; }
.app-main .card-body { padding: .85rem 1rem; }
.app-main .card-header { padding: .7rem 1rem; }
.app-main label, .app-main .form-label { font-size: .82rem; font-weight: 600; color: #475569; margin-bottom: .25rem; }
.app-main .form-control, .app-main .form-select { font-size: .9rem; padding: .4rem .7rem; min-height: 38px; }
.app-main .btn { font-size: .88rem; padding: .4rem .8rem; }
.app-main .btn-sm { font-size: .8rem; padding: .25rem .55rem; }
.app-main table { font-size: .88rem; }

/* stat cards: número e ícone menores */
.app-main .small-box h3 { font-size: 1.6rem; }
.app-main .small-box p { font-size: .82rem; }
.app-main .small-box .icon { font-size: 3.2rem; top: 10px; }
.app-main .small-box > .inner { padding: 14px 16px; }
.app-main .small-box-footer { font-size: .8rem; padding: 7px; }

/* topbar um pouco mais baixa */
.app-header.navbar { min-height: 54px; }
.app-header .navbar-nav .nav-link, .app-header .navbar-nav .nav-link span { font-size: .82rem; }

/* ====================================================================
   MODERNIZAÇÃO v2 — tipografia Inter + microdetalhes (cara de ERP premium)
   ==================================================================== */
body, .app-wrapper, .app-header, .app-sidebar, .app-main,
.modal, .dropdown-menu, .card, .btn, .form-control, .form-select, input, select, textarea, button {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* scrollbars finas e modernas */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* cards: borda mais leve + hover sutil (elevação) */
.app-main .card { transition: box-shadow .2s ease, transform .2s ease; }
.app-main .card:hover { box-shadow: 0 8px 28px rgba(15,23,42,.10); }

/* stat cards: sombra colorida + leve elevação no hover */
.app-main .small-box { transition: transform .2s ease, box-shadow .2s ease; }
.app-main .small-box:hover { transform: translateY(-3px); }
.app-main .small-box.bg-aqua,
.app-main .small-box.bg-blue   { box-shadow: 0 8px 20px rgba(26,111,212,.30); }
.app-main .small-box.bg-green  { box-shadow: 0 8px 20px rgba(22,163,74,.30); }
.app-main .small-box.bg-yellow,
.app-main .small-box.bg-orange { box-shadow: 0 8px 20px rgba(245,158,11,.30); }
.app-main .small-box.bg-red    { box-shadow: 0 8px 20px rgba(239,68,68,.30); }
.app-main .small-box.bg-teal   { box-shadow: 0 8px 20px rgba(13,148,136,.30); }
.app-main .small-box.bg-purple { box-shadow: 0 8px 20px rgba(124,58,237,.30); }
.app-main .small-box .icon { transition: transform .2s ease; }
.app-main .small-box:hover .icon { transform: scale(1.08) rotate(-4deg); }

/* topbar: ícones com chip arredondado no hover */
.app-header .navbar-nav > .nav-item > .nav-link { transition: background .15s, color .15s; border-radius: 9px; }
.app-header .navbar-nav > .nav-item > .nav-link:hover { background: #f1f5f9; }
.app-header.navbar { box-shadow: 0 1px 3px rgba(15,23,42,.04); }

/* botões: transição + elevação sutil no primário */
.app-main .btn { transition: all .15s ease; }
.app-main .btn-primary { box-shadow: 0 2px 8px rgba(26,111,212,.22); }
.app-main .btn-primary:hover { box-shadow: 0 5px 16px rgba(26,111,212,.32); transform: translateY(-1px); }
.app-main .btn-success { box-shadow: 0 2px 8px rgba(22,163,74,.20); }

/* tabelas modernas */
.app-main .table { --bs-table-hover-bg: #f6f9fc; border-color: #eef2f6; }
.app-main .table thead th {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0; color: #64748b;
  font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .8rem; white-space: nowrap;
}
.app-main .table td, .app-main .table th { padding: .55rem .7rem; vertical-align: middle; }
.app-main .table-responsive { border: 1px solid #eef2f6; border-radius: 12px; overflow: hidden; }

/* inputs com transição suave */
.app-main .form-control, .app-main .form-select { transition: border-color .15s, box-shadow .15s; }

/* ====================================================================
   SELECTS (campos que puxam de tabelas relacionadas / dropdowns)
   ganham um chevron pra diferenciar dos campos de digitação
   ==================================================================== */
.app-main select.form-control,
.app-main select.form-select,
.app-main select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%231a6fd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .7rem center !important;
  background-size: 14px !important;
  padding-right: 2rem !important;
  cursor: pointer;
}
/* foco do select também destaca o chevron com leve fundo azul-claro */
.app-main select:hover { background-color: #f8fbff; }
body.theme-dark .app-main select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
}
body.theme-dark .app-main select:hover { background-color: #0e1626; }

/* ====================================================================
   CAMPOS DE DATA — ícone de calendário (datepicker/daterange)
   ==================================================================== */
.app-main input.field-date, section.content input.field-date {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231a6fd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .7rem center !important;
  background-size: 15px !important;
  padding-right: 2.1rem !important;
}
/* data dentro de input-group já tem o ícone (cinza) do append -> remove o
   ícone azul de fundo pra não duplicar. Vale em todo o sistema. */
.app-main .input-group input.field-date,
section.content .input-group input.field-date {
  background-image: none !important; padding-right: .85rem !important;
}
body.theme-dark .app-main input.field-date {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}

/* sidebar: transição suave + scrollbar fina clara */
.app-sidebar .sidebar-menu > li > a,
.app-sidebar .sidebar-menu .treeview-menu > li > a { transition: background .15s, color .15s; }
.app-sidebar ::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* breadcrumb moderno */
.app-main .breadcrumb { font-size: .8rem; background: transparent; padding: 0; }
.app-main .breadcrumb a { color: #64748b; text-decoration: none; }
.app-main .breadcrumb a:hover { color: var(--lmc-brand); }

/* modais com cantos e sombra modernos */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15,23,42,.25); overflow: hidden; }
.modal-header { border-bottom: 1px solid #eef2f6; }
.modal-footer { border-top: 1px solid #eef2f6; }

/* badges um pouco mais arredondadas */
.app-main .badge { border-radius: 7px; font-weight: 600; padding: .35em .6em; }

/* busca global na topbar */
.app-header .topbar-search { max-width: 340px; width: 100%; }
.app-header .topbar-search .form-control { background: #f1f5f9; border: 1px solid #e2e8f0; height: 36px; border-radius: 9px; }
.app-header .topbar-search .form-control:focus { background: #fff; }
.app-header .topbar-search .input-group-text { background: #f1f5f9; border: 1px solid #e2e8f0; border-right: 0; border-radius: 9px 0 0 9px; }

/* ====================================================================
   MODO ESCURO (toggle .theme-dark no body) — paleta slate moderna
   ==================================================================== */
body.theme-dark { background: #0b1220 !important; }
body.theme-dark .app-main, body.theme-dark .app-content,
body.theme-dark.layout-fixed { background: #0b1220 !important; }

/* topbar */
body.theme-dark .app-header.navbar { background: #131c2e !important; border-bottom-color: #243049; }
body.theme-dark .app-header .navbar-nav > .nav-item > .nav-link { color: #cbd5e1 !important; }
body.theme-dark .app-header .navbar-nav > .nav-item > .nav-link:hover { background: #243049; color: #fff !important; }
body.theme-dark .app-header .interface { color: #f1f5f9 !important; }
body.theme-dark .app-header .topbar-search .form-control,
body.theme-dark .app-header .topbar-search .input-group-text { background: #0b1220; border-color: #243049; color: #e2e8f0; }

/* sidebar */
body.theme-dark .app-sidebar { background: #131c2e !important; border-right-color: #243049; }
body.theme-dark .app-sidebar .user-panel { background: #0b1220 !important; border-bottom-color: #243049; }
body.theme-dark .app-sidebar .user-panel .info span, body.theme-dark .app-sidebar .user-panel .info { color: #f1f5f9 !important; }
body.theme-dark .app-sidebar .sidebar-brand { border-bottom-color: #243049; }
body.theme-dark .app-sidebar .sidebar-brand .interface { color: #f1f5f9 !important; }
body.theme-dark .app-sidebar .sidebar-menu li.header { color: #64748b !important; }
body.theme-dark .app-sidebar .sidebar-menu > li > a,
body.theme-dark .app-sidebar .sidebar-menu .treeview-menu > li > a { color: #cbd5e1; }
body.theme-dark .app-sidebar .sidebar-menu a > i { color: #94a3b8; }
body.theme-dark .app-sidebar .sidebar-menu > li > a:hover,
body.theme-dark .app-sidebar .sidebar-menu .treeview-menu > li > a:hover,
body.theme-dark .app-sidebar .sidebar-menu li.menu-open > a { background: #243049 !important; color: #fff !important; }
body.theme-dark .app-sidebar .sidebar-menu li.menu-open > a > i,
body.theme-dark .app-sidebar .sidebar-menu > li > a:hover > i { color: #fff; }
body.theme-dark .app-sidebar .sidebar-menu li.active > a { background: #1d4ed8 !important; color: #fff !important; }

/* superfícies (cards/box/info-box) */
body.theme-dark .app-main .card,
body.theme-dark .app-main .box,
body.theme-dark .app-main .info-box { background: #131c2e !important; border-color: #243049 !important; }
body.theme-dark .app-main .card:not(.card-modern) > .card-header,
body.theme-dark .app-main .box-header, body.theme-dark .app-main .box-footer,
body.theme-dark .app-main .card-footer { background: #131c2e !important; border-color: #243049 !important; }
body.theme-dark .app-main .card-title, body.theme-dark .app-main .box-title,
body.theme-dark .app-main h1, body.theme-dark .app-main h2, body.theme-dark .app-main h3,
body.theme-dark .app-main h4, body.theme-dark .app-main h5, body.theme-dark .app-main strong,
body.theme-dark .app-main p, body.theme-dark .app-main label,
body.theme-dark .app-main .box-body, body.theme-dark .app-main li { color: #e2e8f0 !important; }

/* inputs */
body.theme-dark .app-main .form-control,
body.theme-dark .app-main .form-select { background: #0b1220; border-color: #243049; color: #e2e8f0; }
body.theme-dark .app-main .form-control::placeholder { color: #64748b; }

/* tabelas */
body.theme-dark .app-main .table { color: #e2e8f0; --bs-table-hover-bg: #243049; --bs-table-bg: transparent; }
body.theme-dark .app-main .table thead th { background: #0b1220; border-color: #243049; color: #94a3b8; }
body.theme-dark .app-main .table td, body.theme-dark .app-main .table th { border-color: #243049; }
body.theme-dark .app-main .table-responsive { border-color: #243049; }

/* footer / modais / dropdowns */
body.theme-dark .app-footer { background: #131c2e !important; border-color: #243049; color: #94a3b8; }
body.theme-dark .modal-content { background: #131c2e; color: #e2e8f0; }
body.theme-dark .modal-header, body.theme-dark .modal-footer { border-color: #243049; }
body.theme-dark .dropdown-menu { background: #131c2e; border-color: #243049; }
body.theme-dark .dropdown-menu .dropdown-item, body.theme-dark .dropdown-menu a:not(.dropdown-item) { color: #e2e8f0; }
body.theme-dark .dropdown-menu .dropdown-item:hover, body.theme-dark .dropdown-menu a:hover { background: #243049; }

/* page header */
.app-main .page-head, .app-main .page-header { margin-bottom: 1rem; }
.app-main h1.page-header { font-size: 1.35rem; font-weight: 700; padding-bottom: .5rem; border-bottom: 1px solid #eef2f6; }
body.theme-dark .app-main h1.page-header { border-bottom-color: #243049; }

/* ====================================================================
   TOPBAR PREMIUM — badges discretos, textos suaves, ícones refinados
   ==================================================================== */
.app-header .navbar-nav .nav-item.dropdown > .nav-link,
.app-header .navbar-nav .nav-item > .nav-link { position: relative; }

/* badge de contagem -> bolinha pequena no canto do ícone */
.app-header .navbar-badge {
  position: absolute; top: 2px; right: -1px; margin: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: .58rem; font-weight: 700; line-height: 16px; text-align: center;
  border-radius: 999px; background: #ef4444 !important; color: #fff !important;
  box-shadow: 0 0 0 2px #fff;
}
/* Esconde o badge quando não há notificações (caption vazio) */
.app-header .navbar-badge:empty { display: none !important; }
body.theme-dark .app-header .navbar-badge { box-shadow: 0 0 0 2px #131c2e; }

/* textos de empresa/sistema bem discretos */
.app-header .navbar-nav .nav-link i.fa-building-o,
.app-header .navbar-nav .nav-link i.fa-desktop { color: #94a3b8; }
.app-header .navbar-nav > .nav-item.d-none .nav-link,
.app-header .navbar-nav > .nav-item.d-none .nav-link span { color: #64748b !important; font-weight: 500; }

/* ícones da topbar com tamanho/cor consistentes */
.app-header .navbar-nav > .nav-item > .nav-link > i.fa { font-size: 1rem; color: #64748b; }
.app-header .navbar-nav > .nav-item > .nav-link:hover > i.fa { color: var(--lmc-brand); }
body.theme-dark .app-header .navbar-nav > .nav-item > .nav-link > i.fa { color: #94a3b8; }
body.theme-dark .app-header .navbar-nav > .nav-item > .nav-link:hover > i.fa { color: #60a5fa; }

/* avatar do usuário com anel sutil */
.app-header .user-menu .user-image { border: 2px solid #e2e8f0; }
.app-header .user-menu .nav-link { gap: 8px; }

/* ====================================================================
   SIDEBAR — painel do usuário (premium) + seletor de empresa AZUL
   ==================================================================== */
.app-sidebar .user-panel {
  background: #ffffff !important; border-bottom: 1px solid #eef2f6 !important;
  margin: 0 !important; padding: 14px 14px !important; align-items: center; gap: 10px;
}
.app-sidebar .user-panel .image { flex-shrink: 0; }
.app-sidebar .user-panel img {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  border: 2px solid #e2e8f0 !important; object-fit: cover; box-shadow: none !important; padding: 0 !important;
}
.app-sidebar .user-panel .info { min-width: 0; overflow: hidden; margin-left: 0 !important; }
.app-sidebar .user-panel .info span {
  display: block; font-size: 12.5px; font-weight: 600; color: #0f172a !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-sidebar .user-panel small { font-size: 10.5px; color: #94a3b8 !important; line-height: 1.35; white-space: normal; display: block; }

/* username sempre em minúsculo (sidebar, topbar e card do usuário) */
.app-sidebar .user-panel .info span,
.app-header .user-menu .nav-link span,
.app-header .user-header > p { text-transform: lowercase; }
.app-header .user-header > p small { text-transform: none; }

/* seletor de empresa — AZUL (mesmo azul do card "Total de vendas | Mês") */
.app-sidebar form { padding: 10px 12px 12px !important; margin: 0 !important; }
.app-sidebar form .input-group {
  box-shadow: 0 4px 14px rgba(26,111,212,.30); border-radius: 11px; overflow: hidden; width: 100%;
}
.app-sidebar form select,
.app-sidebar form .form-control,
.app-sidebar form .form-select {
  color: #fff !important; border: 0 !important; border-radius: 11px !important;
  height: 42px !important; font-weight: 600 !important; font-size: 13px !important; width: 100% !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding: 0 34px 0 14px !important;
  background-color: #1a6fd4 !important;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E"),
    linear-gradient(135deg,#1a6fd4,#2878d8) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right .8rem center, center !important;
  background-size: 14px, cover !important;
}
.app-sidebar form select:focus, .app-sidebar form .form-control:focus {
  box-shadow: 0 0 0 3px rgba(26,111,212,.25) !important;
}
.app-sidebar form select option { color: #0f172a; background: #fff; font-weight: 500; }

/* dark mode: painel do usuário escuro (o seletor de empresa segue azul) */
body.theme-dark .app-sidebar .user-panel { background: #0b1220 !important; border-bottom-color: #243049 !important; }
body.theme-dark .app-sidebar .user-panel .info span { color: #f1f5f9 !important; }
body.theme-dark .app-sidebar .user-panel img { border-color: #243049 !important; }

/* ====================================================================
   CARD DO USUÁRIO (dropdown da topbar) — premium
   ==================================================================== */
.app-header .user-menu .dropdown-menu {
  padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  min-width: 290px; box-shadow: 0 22px 55px rgba(15,23,42,.25);
}
.app-header .user-header {
  background: linear-gradient(135deg,#1a6fd4 0%,#2878d8 100%) !important;
  color: #fff; text-align: center; padding: 24px 18px 20px; height: auto;
}
.app-header .user-header img {
  width: 84px !important; height: 84px !important; border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.65); box-shadow: 0 6px 18px rgba(0,0,0,.28); object-fit: cover;
}
.app-header .user-header p {
  margin: 12px 0 0; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.3;
}
.app-header .user-header p small {
  display: block; font-size: .74rem; font-weight: 400; color: rgba(255,255,255,.88); margin-top: 4px;
}
.app-header .user-footer {
  display: flex; gap: 10px; padding: 14px 16px; background: #fff; border: 0;
}
.app-header .user-footer .btn {
  flex: 1; float: none !important; border-radius: 10px; font-weight: 600; font-size: .85rem; padding: .5rem .6rem;
}
.app-header .user-footer .btn:first-child {
  background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #334155 !important;
}
.app-header .user-footer .btn:first-child:hover { background: #e2e8f0 !important; }
.app-header .user-footer .btn:last-child {
  background: #ef4444 !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(239,68,68,.30);
}
.app-header .user-footer .btn:last-child:hover { background: #dc2626 !important; }

/* dark mode no rodapé do card */
body.theme-dark .app-header .user-footer { background: #131c2e; }
body.theme-dark .app-header .user-footer .btn:first-child { background: #0b1220 !important; border-color: #243049 !important; color: #cbd5e1 !important; }

/* ====================================================================
   LISTAS — padrão premium (vale para todas as telas de listagem)
   ==================================================================== */
/* TOOLBAR GLOBAL do formulario — FIXA no rodape da viewport, igual ao
   .fixed-bottom-toolbar do PDV. Aparece igual em todas as abas. */
.app-main .form-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: stretch;
  padding: 8px 12px;
  background: #fff; border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15,23,42,.08);
}
body.theme-dark .app-main .form-toolbar { background: #131c2e; border-top-color: #243049; }

/* Barra de STATUS dentro do .fixed-bottom-toolbar (Pedido/OS/PDV) — fundo branco. */
.app-main .fixed-bottom-toolbar .box-header,
.app-main .fixed-bottom-toolbar .box-header1 {
  background: transparent !important;
  padding: 6px 14px !important;
  border-bottom: 0 !important;
  border-radius: 0;
  margin-bottom: 0;
}
.app-main .fixed-bottom-toolbar .box-header .box-title,
.app-main .fixed-bottom-toolbar .box-header h1,
.app-main .fixed-bottom-toolbar .box-header h5,
.app-main .fixed-bottom-toolbar .box-header i,
.app-main .fixed-bottom-toolbar .box-header1 .box-title,
.app-main .fixed-bottom-toolbar .box-header1 h5,
.app-main .fixed-bottom-toolbar .box-header1 i {
  color: #475569 !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* No Pedido/OS (que tem form-toolbar separada): a fixed-bottom-toolbar do
   status sobe pra ficar acima da form-toolbar.
   Dual: :has() nativo + classe .has-form-toolbar adicionada por legacy-shell.js */
.app-main:has(.form-toolbar) .fixed-bottom-toolbar,
.has-form-toolbar .app-main .fixed-bottom-toolbar {
  bottom: 76px !important;
}

/* compensa altura da toolbar+status fixa: reduz o min-height do .app-wrapper
   (que e 100vh por padrao no AdminLTE). Sem isso, o conteudo + padding
   passava de 100vh e empurrava o app pra baixo da barra do Windows.
   - Pedido/OS: tem form-toolbar + fixed-bottom-toolbar (~120px total)
   - PDV: tem so fixed-bottom-toolbar com tudo dentro (~140px)
   Dual: :has() nativo + classes adicionadas por legacy-shell.js */
body:has(.form-toolbar) .app-wrapper,
body.has-form-toolbar .app-wrapper,
body:has(.fixed-bottom-toolbar) .app-wrapper,
body.has-fixed-toolbar .app-wrapper { min-height: calc(100vh - 140px) !important; }
body:has(.form-toolbar),
body.has-form-toolbar,
body:has(.fixed-bottom-toolbar),
body.has-fixed-toolbar { padding-bottom: 140px; }

/* botões de ação (btn-app do AdminLTE2) -> botões limpos modernos */
.app-main .btn-app {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: #fff !important; border: 1px solid var(--lmc-border) !important; color: #475569 !important;
  border-radius: 9px !important; padding: .42rem .8rem !important; font-size: .82rem; font-weight: 600;
  margin: 0 0 0 6px !important; height: auto !important; width: auto !important;
  box-shadow: none !important; text-align: center; transition: all .15s; line-height: 1.2;
}
.app-main .btn-app:hover { background: #f1f5f9 !important; color: var(--lmc-brand) !important; border-color: #cbd5e1 !important; }
.app-main .btn-app > i { font-size: .9rem !important; margin: 0 !important; display: inline !important; width: auto !important; }
body.theme-dark .app-main .btn-app { background: #131c2e !important; border-color: #243049 !important; color: #cbd5e1 !important; }
body.theme-dark .app-main .btn-app:hover { background: #243049 !important; color: #60a5fa !important; }

/* hierarquia: Novo = CTA verde sólido (destaque) | Sair = outline vermelho */
.app-main .btn-app[onclick*="'Novo'"],
.app-main .btn-app[onclick*="'Novs'"] {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.28) !important;
}
.app-main .btn-app[onclick*="'Novs'"] {  /* Resumido = verde mais suave (variante do Novo) */
  background: linear-gradient(135deg,#0d9488,#14b8a6) !important;
  box-shadow: 0 3px 10px rgba(13,148,136,.25) !important;
}
.app-main .btn-app[onclick*="'Novo'"]:hover { background: linear-gradient(135deg,#15803d,#16a34a) !important; color: #fff !important; transform: translateY(-1px); }
.app-main .btn-app[onclick*="'Novs'"]:hover { background: linear-gradient(135deg,#0f766e,#0d9488) !important; color: #fff !important; transform: translateY(-1px); }
.app-main .btn-app[onclick*="'Sair'"] {
  background: #fff !important; border-color: #fecaca !important; color: #dc2626 !important;
}
.app-main .btn-app[onclick*="'Sair'"]:hover { background: #fef2f2 !important; border-color: #ef4444 !important; color: #dc2626 !important; }
body.theme-dark .app-main .btn-app[onclick*="'Sair'"] { background: #131c2e !important; border-color: #7f1d1d !important; color: #f87171 !important; }

/* Relatórios (Imp) = cinza claro (neutro) */
.app-main .btn-app[onclick*="'Imp'"] { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; }
.app-main .btn-app[onclick*="'Imp'"]:hover { background: #e2e8f0 !important; color: var(--lmc-brand) !important; }
.app-main .btn-app[onclick*="'Imp'"] > i { color: var(--lmc-brand); }
body.theme-dark .app-main .btn-app[onclick*="'Imp'"] { background: #131c2e !important; border-color: #243049 !important; color: #cbd5e1 !important; }

/* ====================================================================
   CRUDS — botões com a MESMA hierarquia das listas
   Salvar (Post) = verde sólido (CTA) | Cancelar (Cancel) = cinza outline
   (modais usam data-bs-dismiss, sem onclick -> não são afetados)
   ==================================================================== */
.app-main .btn[onclick*="'Post'"], .app-main .btn-app[onclick*="'Post'"] {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.28) !important; font-weight: 600;
}
.app-main .btn[onclick*="'Post'"]:hover, .app-main .btn-app[onclick*="'Post'"]:hover {
  background: linear-gradient(135deg,#15803d,#16a34a) !important; color: #fff !important; transform: translateY(-1px);
}
/* Cancelar = vermelho (ação de descartar), pareando com o Salvar verde */
.app-main .btn[onclick*="'Cancel'"], .app-main .btn-app[onclick*="'Cancel'"] {
  background: #dc2626 !important; border: 1px solid #dc2626 !important; color: #fff !important; box-shadow: 0 3px 10px rgba(220,38,38,.25) !important;
}
.app-main .btn[onclick*="'Cancel'"] > i, .app-main .btn-app[onclick*="'Cancel'"] > i { color: #fff !important; }
.app-main .btn[onclick*="'Cancel'"]:hover, .app-main .btn-app[onclick*="'Cancel'"]:hover {
  background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important;
}
/* Fechar (Fecc) = cinza sólido, seguindo o modelo do Salvar/Cancelar */
.app-main .btn[onclick*="'Fecc'"], .app-main .btn-app[onclick*="'Fecc'"] {
  background: #6c757d !important; border: 1px solid #6c757d !important; color: #fff !important; box-shadow: none !important;
}
.app-main .btn[onclick*="'Fecc'"] > i, .app-main .btn-app[onclick*="'Fecc'"] > i,
.app-main .btn[onclick*="'Fecc'"] > svg, .app-main .btn-app[onclick*="'Fecc'"] > svg { color: #fff !important; }
.app-main .btn[onclick*="'Fecc'"]:hover, .app-main .btn-app[onclick*="'Fecc'"]:hover {
  background: #5c636a !important; border-color: #565e64 !important; color: #fff !important;
}
/* Repetir (Rep) = neutro claro (outline), no footer do form */
.app-main .btn[onclick*="'Rep'"], .app-main .btn-app[onclick*="'Rep'"] {
  background: #fff !important; border: 1px solid #e5e7eb !important; color: #475569 !important; box-shadow: none !important;
}
.app-main .btn[onclick*="'Rep'"]:hover, .app-main .btn-app[onclick*="'Rep'"]:hover { background: #f1f5f9 !important; color: var(--lmc-brand) !important; }
/* Salvar/Cancelar/Fechar/Repetir do form: tamanho consistente */
.app-main .btn-app[onclick*="'Post'"], .app-main .btn-app[onclick*="'Cancel'"],
.app-main .btn-app[onclick*="'Fecc'"], .app-main .btn-app[onclick*="'Rep'"] {
  font-size: .88rem !important; padding: .5rem 1.3rem !important; min-width: 120px; justify-content: center;
}

/* ── Botões "Incluir" → verde em TODO o sistema ──
   Cobre: BTNINCLUIR*, BTNINCLUIF* (typo histórico na cotação), BTNINCLUIxxxx
   Aplica em qualquer template sem necessidade de alterar cada HTML.          */
.app-main button[id^="BTNINCLUIR"],
.app-main a[id^="BTNINCLUIR"],
.app-main button[id^="BTNINCLUIF"],
.app-main a[id^="BTNINCLUIF"] {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.28) !important;
}
.app-main button[id^="BTNINCLUIR"]:hover,
.app-main a[id^="BTNINCLUIR"]:hover,
.app-main button[id^="BTNINCLUIF"]:hover,
.app-main a[id^="BTNINCLUIF"]:hover {
  background: linear-gradient(135deg,#15803d,#16a34a) !important;
  transform: translateY(-1px);
}
/* alinhamento: se o botão estiver dentro de um col sem label, empurra 20px */
.app-main button[id^="BTNINCLUIR"].w-100,
.app-main a[id^="BTNINCLUIR"].w-100,
.app-main button[id^="BTNINCLUIF"].w-100,
.app-main a[id^="BTNINCLUIF"].w-100 { margin-top: 20px; display: block; }

/* header da lista vira barra de ferramentas (botões à direita) */
.app-main .card > .card-header .card-header-btn { float: none !important; margin-left: auto; }
.app-main .card > .card-header { display: flex; align-items: center; }
.app-main .card-header-btn .btn-group { display: inline-flex; gap: 6px; }
.app-main .card-header-btn .btn-group > .btn-app { border-radius: 9px !important; }

/* divisores hr discretos dentro dos cards */
.app-main .card-body > hr { margin: .25rem 0 1rem; border-color: #eef2f6; opacity: 1; }
body.theme-dark .app-main .card-body > hr { border-color: #243049; }

/* legenda/badges de status nas listas */
.app-main .card-body > .badge,
.app-main .card-body .col-lg-6 > .badge { font-size: .72rem; padding: .42em .7em; margin-right: 4px; }

/* botões Pesquisar/Limpar alinhados (neutraliza o margin-top inline antigo) */
.app-main .card-body .btn-block { width: 100%; }

/* ====================================================================
   FOTO dos cadastros (wrapper do modal de crop) -> coluna estreita à
   esquerda, com os campos fluindo ao lado. Vale para todos os cadastros
   que têm foto (cliente, funcionário, produto...).
   ==================================================================== */
/* só por `data-bs-target`: cliente.js/produto.js/admin.js removem o
   `data-bs-toggle` deste wrapper (senão o Bootstrap abre um segundo modal,
   vazio, por cima do componente de recorte) — exigir os dois atributos aqui
   fazia a coluna de 210px sumir depois desse conserto e a foto voltava a
   ocupar a linha inteira, centralizada. */
.app-main .row > [data-bs-target="#ModalCroppie"] {
  flex: 0 0 auto !important; width: 210px !important; max-width: 210px !important; text-align: center;
}
.app-main [data-bs-target="#ModalCroppie"] > .col-lg-2,
.app-main [data-bs-target="#ModalCroppie"] > [class*="col-"] {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}
.app-main [data-bs-target="#ModalCroppie"] img {
  max-width: 100%; max-height: 175px; height: auto;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; padding: 4px;
}
.app-main #BTNINCLUIR, .app-main #BTNREMOVER { font-size: .76rem !important; padding: .35rem .45rem !important; }

/* placeholder da foto nas telas do MOTOR de metadados (campo tipo "foto",
   ex.: funcionário). Cliente/produto/config têm o próprio (no template ou
   injetado por JS) porque nasceram de um `FrmCrud*.html` legado; o motor não
   tem template nenhum para carregar esse CSS, então fica aqui, global. */
.app-main .campo-foto-placeholder {
  width: 150px; height: 150px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; color: #94a3b8; cursor: pointer;
}
.app-main .campo-foto-placeholder .fa { font-size: 34px; opacity: .7; }
.app-main .campo-foto-placeholder small { font-size: .72rem; }

/* foto centralizada verticalmente no card-section (Produto/Cliente):
   quando os campos a direita ocupam mais altura que a foto+botoes,
   a foto fica centralizada no espaco em vez de colada no topo. */
.app-main .card-section .row > [data-bs-target="#ModalCroppie"] {
  align-self: center !important;
}

/* ====================================================================
   CADASTROS — layout em SEÇÕES (abordagem premium)
   ==================================================================== */
.app-main .form-section {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--lmc-brand); margin: 16px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #eef2f6;
}
.app-main .form-section i { font-size: .85rem; }
body.theme-dark .app-main .form-section { border-bottom-color: #243049; color: #60a5fa; }

/* compacta espaçamento dos campos no cadastro */
.app-main form .mb-3 { margin-bottom: .8rem; }
.app-main .nav-tabs-custom > .tab-content { padding: 20px 22px; }
/* divisor <hr> antigo dentro do cadastro fica discreto */
.app-main .tab-content hr { margin: .25rem 0 1rem; border-color: #eef2f6; opacity: 1; }
body.theme-dark .app-main .tab-content hr { border-color: #243049; }

/* Seções do cadastro em CARDS (Identificação / Dados / Endereço / Contato) */
.app-main form > .card-section { margin-bottom: 16px; border: 1px solid #eef2f6; }
.app-main form > .card-section:last-child { margin-bottom: 4px; }
.app-main .card-section > .card-body { padding: 8px 18px 4px; }
/* o header da seção fica colado no topo do card, sem borda dupla */
.app-main .card-section > .card-body > .form-section:first-child {
  margin-top: 2px; margin-bottom: 14px;
}
body.theme-dark .app-main form > .card-section { border-color: #243049; }

/* ====================================================================
   TÍTULO da lista dentro do card (toolbar) + breadcrumb discreto
   ==================================================================== */
.app-main .card > .card-header .list-title {
  font-size: .98rem; font-weight: 700; color: var(--lmc-text);
  display: flex; align-items: center; gap: 8px;
}
.app-main .card > .card-header .list-title > i { color: var(--lmc-brand); }
.app-main .card > .card-header .list-title .list-count {
  font-size: .66rem; font-weight: 600; color: #64748b; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 999px; padding: .18em .6em; margin-left: 2px;
}
.app-main .card > .card-header .list-title .list-help { color: #94a3b8; margin-left: 4px; font-size: .92rem; text-decoration: none; cursor: help; }
.app-main .card > .card-header .list-title .list-help:hover { color: var(--lmc-brand); }

/* popover de ajuda "Sobre esta tela" */
.popover.help-popover { border: 0; box-shadow: 0 14px 40px rgba(15,23,42,.20); border-radius: 12px; max-width: 330px; font-size: .8rem; }
.popover.help-popover .popover-header { background: var(--lmc-brand); color: #fff; border: 0; font-weight: 700; font-size: .82rem; border-radius: 12px 12px 0 0; }
.popover.help-popover .popover-body { color: #475569; line-height: 1.55; }
body.theme-dark .popover.help-popover { background: #131c2e; }
body.theme-dark .popover.help-popover .popover-body { color: #cbd5e1; }
body.theme-dark .app-main .card > .card-header .list-title { color: #e2e8f0; }
body.theme-dark .app-main .card > .card-header .list-title .list-count { background: #0b1220; border-color: #243049; color: #94a3b8; }

/* breadcrumb do topo da página mais discreto */
section.content .breadcrumb.float-end, .app-main .breadcrumb.float-end {
  font-size: .76rem; color: #94a3b8; margin-bottom: .4rem;
}

/* ====================================================================
   FOOTER premium — pequeno e discreto
   ==================================================================== */
.app-footer { font-size: .75rem !important; color: #94a3b8 !important; padding: .55rem 1.1rem !important; }
.app-footer strong, .app-footer b { font-weight: 600 !important; color: #64748b; }
.app-footer a { color: var(--lmc-brand) !important; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
body.theme-dark .app-footer { color: #64748b !important; }
body.theme-dark .app-footer strong, body.theme-dark .app-footer b { color: #94a3b8; }

/* ====================================================================
   DASHBOARD legado (AdminLTE 2: small-box / box / info-box / chart)
   estilizados no visual moderno LMC
   ==================================================================== */

/* ---- stat cards coloridos (small-box) ---- */
.app-main .small-box {
  position: relative; border-radius: 14px; margin-bottom: 1rem; color: #fff;
  box-shadow: 0 4px 16px rgba(15,23,42,.12); overflow: hidden;
}
.app-main .small-box > .inner { padding: 18px 20px; }
.app-main .small-box h3 { font-size: 2rem; font-weight: 800; margin: 0; color: #fff; }
.app-main .small-box p { margin: 4px 0 0; opacity: .92; font-size: .9rem; }
.app-main .small-box .icon { position: absolute; right: 16px; top: 14px; font-size: 4rem; opacity: .18; }
.app-main .small-box-footer {
  display: block; padding: 8px; text-align: center; color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.12); text-decoration: none; font-size: .85rem;
}
.app-main .small-box-footer:hover { background: rgba(0,0,0,.2); color: #fff; }
.app-main .small-box.bg-aqua,
.app-main .small-box.bg-blue   { background: linear-gradient(135deg,#1a6fd4,#2878d8); }
.app-main .small-box.bg-green  { background: linear-gradient(135deg,#16a34a,#22c55e); }
.app-main .small-box.bg-yellow,
.app-main .small-box.bg-orange { background: linear-gradient(135deg,#ea8a00,#f59e0b); }
.app-main .small-box.bg-red    { background: linear-gradient(135deg,#dc2626,#ef4444); }
.app-main .small-box.bg-teal   { background: linear-gradient(135deg,#0d9488,#14b8a6); }
.app-main .small-box.bg-purple { background: linear-gradient(135deg,#7c3aed,#8b5cf6); }

/* ---- "box" -> card moderno ---- */
.app-main .box {
  background: #fff; border: 1px solid var(--lmc-border); border-radius: 14px;
  box-shadow: var(--lmc-shadow); margin-bottom: 1rem;
}
.app-main .box-header { padding: 14px 18px; border-bottom: 1px solid #eef2f6; display: flex; align-items: center; }
.app-main .box-header.with-border { border-bottom: 1px solid #eef2f6; }
.app-main .box-title { font-size: 1rem; font-weight: 600; color: var(--lmc-text); margin: 0; }
.app-main .box-tools { margin-left: auto; }
.app-main .box-body { padding: 16px 18px; }
.app-main .box-footer { padding: 12px 18px; border-top: 1px solid #eef2f6; background: #fbfcfd; }
.app-main .btn-box-tool { background: transparent; border: 0; color: #94a3b8; }
.app-main .btn-box-tool:hover { color: var(--lmc-brand); }

/* ---- info-box ---- */
.app-main .info-box {
  display: flex; background: #fff; border: 1px solid var(--lmc-border); border-radius: 14px;
  box-shadow: var(--lmc-shadow); margin-bottom: 1rem; min-height: 80px; overflow: hidden;
}
.app-main .info-box-icon { display: flex; align-items: center; justify-content: center; width: 70px; font-size: 1.8rem; color: #fff; background: var(--lmc-brand); }
.app-main .info-box-content { padding: 12px 16px; flex: 1; }
.app-main .info-box-number { font-size: 1.4rem; font-weight: 700; color: var(--lmc-text); }
.app-main .info-box-text { color: var(--lmc-muted); font-size: .85rem; }

/* ---- listas/gráficos do dashboard ---- */
.app-main .box ul:not(.dropdown-menu),
.app-main .chart-legend { list-style: none; padding-left: 0; margin: 0; }
.app-main .chart-legend > li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: .9rem; }
.app-main .chart, .app-main .chart-responsive { position: relative; min-height: 180px; }
.app-main canvas { max-width: 100%; }

/* ====================================================================
   CADASTRO AREJADO v3 — visual moderno estilo SaaS (escopo: .card-section)
   Só afeta os cadastros refatorados em cards de seção; listas/sidebar
   continuam densas. Inputs altos e arredondados, rótulos leves, respiro.
   ==================================================================== */

/* respiro entre as seções e dentro do card */
.app-main form > .card-section { margin-bottom: 22px; border: 1px solid #eef2f6; border-radius: 14px; }
.app-main .card-section > .card-body { padding: 20px 24px 12px; }

/* cabeçalho da seção mais leve e espaçado */
.app-main .card-section .form-section {
  font-size: .72rem; letter-spacing: .06em; color: #64748b;
  margin: 0 0 18px; padding-bottom: 0; border-bottom: 0;
}
.app-main .card-section .form-section i { color: var(--lmc-brand); }

/* rótulos leves (estilo da referência) */
.app-main .card-section label {
  font-size: .82rem; font-weight: 500; color: #475569;
  margin-bottom: .4rem; text-transform: none; letter-spacing: 0;
}

/* inputs/selects altos, arredondados, borda suave */
.app-main .card-section .form-control,
.app-main .card-section .form-select,
.app-main .card-section input,
.app-main .card-section select,
.app-main .card-section textarea {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: .6rem 1rem;
  font-size: .9rem;
  background-color: #fff;
  box-shadow: none;
}
.app-main .card-section textarea { min-height: 92px; }
/* campos somente-leitura (datas de sistema etc.) ficam distintos */
.app-main .card-section input[readonly],
.app-main .card-section .form-control[readonly],
.app-main .card-section input:disabled {
  background: #f1f5f9; color: #64748b; cursor: not-allowed;
}
.app-main .card-section .form-control::placeholder,
.app-main .card-section input::placeholder { color: #9aa6b2; }
.app-main .card-section .form-control:focus,
.app-main .card-section .form-select:focus,
.app-main .card-section input:focus,
.app-main .card-section select:focus,
.app-main .card-section textarea:focus {
  border-color: #1a6fd4; box-shadow: 0 0 0 3px rgba(26,111,212,.12);
}

/* respiro vertical entre campos */
.app-main .card-section form .mb-3,
.app-main .card-section .mb-3 { margin-bottom: 1.15rem; }

/* input-group (campos com botão +, busca de cidade) alinhados e arredondados */
.app-main .card-section .input-group > .form-control,
.app-main .card-section .input-group > .form-select,
.app-main .card-section .input-group > select,
.app-main .card-section .input-group > input { min-height: 46px; }
.app-main .card-section .input-group > .btn {
  min-height: 46px; border-radius: 0;
  border: 1px solid #e5e7eb; border-left: 0;
  background: #f8fafc; color: #475569;
}
.app-main .card-section .input-group > .btn:last-child { border-radius: 0 12px 12px 0; }
.app-main .card-section .input-group > .btn:hover { background: #eff6ff; color: var(--lmc-brand); }
/* primeiro controle do input-group mantém cantos arredondados à esquerda */
.app-main .card-section .input-group > :first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }

/* foto: quadrada (cantos levemente arredondados), estilo card */
.app-main .card-section [data-bs-target="#ModalCroppie"] img {
  width: 150px !important; height: 150px !important; max-height: none !important; max-width: none !important;
  border-radius: 14px !important; object-fit: cover;
  border: 1px solid #e5e7eb !important; padding: 0 !important;
  background: #f8fafc;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}
/* botões Incluir/Excluir discretos (texto leve, sem bloco cinza) */
.app-main .card-section #BTNINCLUIR,
.app-main .card-section #BTNREMOVER {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: #64748b !important; font-size: .72rem !important; font-weight: 500 !important;
  padding: .2rem .35rem !important; min-height: 0 !important;
}
.app-main .card-section #BTNINCLUIR:hover { color: var(--lmc-brand) !important; }
.app-main .card-section #BTNREMOVER:hover { color: #dc2626 !important; }

/* tabs do cadastro com mais respiro */
.app-main .nav-tabs-custom > .nav-tabs > li > a { padding: 12px 16px; }
.app-main .nav-tabs-custom > .tab-content { padding: 24px; }

/* dark mode dos inputs do cadastro */
body.theme-dark .app-main .card-section .form-control,
body.theme-dark .app-main .card-section .form-select,
body.theme-dark .app-main .card-section input,
body.theme-dark .app-main .card-section select,
body.theme-dark .app-main .card-section textarea { background: #0b1220; border-color: #243049; color: #e2e8f0; }
body.theme-dark .app-main .card-section .input-group > .btn { background: #131c2e; border-color: #243049; color: #cbd5e1; }
body.theme-dark .app-main form > .card-section { border-color: #243049; }
body.theme-dark .app-main .card-section label { color: #cbd5e1; }

/* ====================================================================
   CRUD — título dentro do card (padrão da lista) + footer de ações
   ==================================================================== */
.app-main .crud-head { margin-bottom: 16px; }
.app-main .crud-head > .card-header { padding: .8rem 1.1rem; }
/* título DENTRO do card principal (nav-tabs-custom) — igual à lista */
.app-main .nav-tabs-custom > .card-header.crud-head-bar {
  display: flex; align-items: center; padding: .8rem 1.1rem;
  background: #fff; border-bottom: 1px solid #f1f5f9;
}
.app-main .nav-tabs-custom > .card-header .list-title {
  font-size: .98rem; font-weight: 700; color: var(--lmc-text); display: flex; align-items: center; gap: 8px; margin: 0;
}
.app-main .nav-tabs-custom > .card-header .list-title > i { color: var(--lmc-brand); }
.app-main .nav-tabs-custom > .card-header .list-title .list-help { color: #94a3b8; margin-left: 4px; text-decoration: none; cursor: help; font-size: .92rem; }
.app-main .nav-tabs-custom > .card-header .list-title .list-help:hover { color: var(--lmc-brand); }
body.theme-dark .app-main .nav-tabs-custom > .card-header.crud-head-bar { background: #131c2e; border-bottom-color: #243049; }
body.theme-dark .app-main .nav-tabs-custom > .card-header .list-title { color: #e2e8f0; }

/* CRUD: esconde o breadcrumb do topo (Atalho | Início | Lista... ) — o título
   já está dentro do card. O token {%IWATALHO_CRUD%} fica oculto no DOM (Delphi
   continua achando o componente). E o card sobe pra ocupar o espaço. */
.app-main section.content > ol.breadcrumb,
section.content > ol.breadcrumb.float-end { display: none !important; }
/* padding-top no content; padding-bottom global garante que botoes inline
   (Salvar/Cancelar fora de form-toolbar) nao fiquem escondidos atras da
   barra de tarefas do Windows quando o usuario chega ao fim da pagina. */
.app-main section.content.container-fluid { padding-top: 6px; }
.app-main .app-content .container-fluid,
.app-main section.content { padding-bottom: 72px; }
.app-main section.content > .col-12.ui-sortable { margin-top: 0; }
/* footer FIXO (sticky): Cancelar | Salvar sempre visíveis sem rolar */
.app-main .crud-footer {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px; margin-top: 12px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(4px);
  border: 1px solid #eef2f6; border-radius: 12px;
  box-shadow: 0 -2px 14px rgba(15,23,42,.08);
}
body.theme-dark .app-main .crud-footer {
  background: rgba(19,28,46,.96); border-color: #243049; box-shadow: 0 -2px 14px rgba(0,0,0,.3);
}

/* ====================================================================
   PAGINAÇÃO (twbsPagination em #mostrapaginacao) — estilo BS5 moderno
   O plugin gera <ul id="mostrapaginacao"> sem a classe .pagination,
   então os links saíam colados. Estilizamos pelo id (read-only).
   ==================================================================== */
.app-main #mostrapaginacao, #mostrapaginacao {
  display: inline-flex; flex-wrap: wrap; gap: 5px;
  list-style: none; padding: 0; margin: 6px 0 0;
}
#mostrapaginacao > li { margin: 0; }
#mostrapaginacao > li > a,
#mostrapaginacao > li > .page-link,
#mostrapaginacao > li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 11px; margin: 0;
  border: 1px solid #e5e7eb; border-radius: 9px;
  color: #475569; background: #fff; text-decoration: none;
  font-size: .82rem; line-height: 1; cursor: pointer; transition: all .15s;
}
#mostrapaginacao > li > a:hover,
#mostrapaginacao > li > .page-link:hover { background: #eff6ff; border-color: #bfdbfe; color: var(--lmc-brand); }
#mostrapaginacao > li.active > a,
#mostrapaginacao > li.active > .page-link,
#mostrapaginacao > li.active > span {
  background: var(--lmc-brand); border-color: var(--lmc-brand); color: #fff; font-weight: 600;
}
#mostrapaginacao > li.disabled > a,
#mostrapaginacao > li.disabled > .page-link,
#mostrapaginacao > li.disabled > span { color: #cbd5e1; background: #f8fafc; pointer-events: none; }
body.theme-dark #mostrapaginacao > li > a,
body.theme-dark #mostrapaginacao > li > .page-link,
body.theme-dark #mostrapaginacao > li > span { background: #0b1220; border-color: #243049; color: #cbd5e1; }
body.theme-dark #mostrapaginacao > li.active > a,
body.theme-dark #mostrapaginacao > li.active > .page-link { background: var(--lmc-brand); border-color: var(--lmc-brand); color: #fff; }
/* MESMO desenho para toda barra com a classe .paginacao-erp — e o
   pintor não depende mais do id da lista de cliente (Marcio, 21/09:
   'pare tudo até padronizar todas as listas') */
.app-main ul.paginacao-erp, ul.paginacao-erp {
  display: inline-flex; flex-wrap: wrap; gap: 5px;
  list-style: none; padding: 0; margin: 6px 0 0;
}
ul.paginacao-erp > li { margin: 0; }
ul.paginacao-erp > li > a,
ul.paginacao-erp > li > .page-link,
ul.paginacao-erp > li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 11px; margin: 0;
  border: 1px solid #e5e7eb; border-radius: 9px;
  color: #475569; background: #fff; text-decoration: none;
  font-size: .82rem; line-height: 1; cursor: pointer; transition: all .15s;
}
ul.paginacao-erp > li > a:hover,
ul.paginacao-erp > li > .page-link:hover { background: #eff6ff; border-color: #bfdbfe; color: var(--lmc-brand); }
ul.paginacao-erp > li.active > a,
ul.paginacao-erp > li.active > .page-link,
ul.paginacao-erp > li.active > span {
  background: var(--lmc-brand); border-color: var(--lmc-brand); color: #fff; font-weight: 600;
}
ul.paginacao-erp > li.disabled > a,
ul.paginacao-erp > li.disabled > .page-link,
ul.paginacao-erp > li.disabled > span { color: #cbd5e1; background: #f8fafc; pointer-events: none; }
body.theme-dark ul.paginacao-erp > li > a,
body.theme-dark ul.paginacao-erp > li > .page-link,
body.theme-dark ul.paginacao-erp > li > span { background: #0b1220; border-color: #243049; color: #cbd5e1; }
body.theme-dark ul.paginacao-erp > li.active > a,
body.theme-dark ul.paginacao-erp > li.active > .page-link { background: var(--lmc-brand); border-color: var(--lmc-brand); color: #fff; }
/* "Exibindo de X a Y" mais discreto */
.app-main .dataTables_info { color: #64748b; font-size: .82rem; padding-top: 6px; }

/* ====================================================================
   LUCIDE (shim) — dimensiona os SVGs trocados no shell (sidebar/navbar)
   ==================================================================== */
.app-sidebar svg.lucide, .app-header svg.lucide { stroke-width: 1.9; flex-shrink: 0; }
/* ícones do menu lateral */
.app-sidebar .sidebar-menu a > svg.lucide { width: 19px; height: 19px; color: #64748b; }
.app-sidebar .sidebar-menu > li > a:hover > svg.lucide,
.app-sidebar .sidebar-menu li.menu-open > a > svg.lucide { color: #0f172a; }
.app-sidebar .sidebar-menu li.active > a > svg.lucide { color: #1a6fd4; }
.app-sidebar .sidebar-menu .treeview-menu a > svg.lucide { width: 16px; height: 16px; }
/* ícones da navbar (topbar) */
.app-header svg.lucide { width: 20px; height: 20px; vertical-align: -.2em; }
.app-header .nav-link svg.lucide { color: #475569; }
body.theme-dark .app-header .nav-link svg.lucide { color: #cbd5e1; }
/* no rail recolhido o ícone (svg) também centraliza.
   O piso de 18px é rede de segurança: o rail esconde o rótulo do item com
   `font-size: 0` no <a>, e qualquer tamanho escrito em `em` viraria ZERO ali
   — foi o que fez os ícones sumirem ao recolher o menu. O `lucide-shim.js` já
   resolve o `em` em pixel; isto garante o ícone visível mesmo assim. */
.sidebar-mini.sidebar-collapse .app-sidebar .sidebar-menu a > svg.lucide {
  margin: 0 !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

/* ====================================================================
   RODAPÉ ESPECIAL (PDV / Pedido / OS / Comanda) — preservar os botões
   VERTICAIS estilo app (ícone em cima, rótulo embaixo) + badge de
   contagem. Sobrepõe o .btn-app achatado (moderno) SÓ neste container.
   ==================================================================== */
/* ⚠️ SEM DEPENDER DE ANCESTRAL — reclamação repetida do Marcio: «a barra do
   PDV fica flutuando e não fica fixa no final como o original».

   A regra do ERP é `.app-main .fixed-bottom-toolbar`, e lá isso basta porque
   o IntraWeb sempre entrega a página dentro do `.app-main`. Aqui a página é
   montada por JavaScript, e o PDV abre PELADO (`pelada: true`,
   `MasterPDV.html`): enquanto o shell não termina de montar — ou em qualquer
   caminho que desenhe a barra fora do `.app-main` — o seletor não casa, a
   barra perde o `position: fixed` e cai no fluxo, aparecendo logo abaixo do
   conteúdo em vez de colada no rodapé. Depende do tamanho da janela e do
   tanto de conteúdo, e por isso aparecia para ele e não para mim.

   A regra sem ancestral fecha essa porta: a barra é fixa SEMPRE, monte o
   shell ou não. A regra com `.app-main` fica logo abaixo, intacta, porque é
   a do ERP e é ela que vale quando o shell existe. */
.fixed-bottom-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 1030;
  background: #fff; border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15,23,42,.08); padding: 8px 12px;
}
.app-main .fixed-bottom-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 1030;
  background: #fff; border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15,23,42,.08); padding: 8px 12px;
}
body.theme-dark .fixed-bottom-toolbar,
body.theme-dark .app-main .fixed-bottom-toolbar { background: #131c2e; border-top-color: #243049; }

/* box-header1 dentro da fixed-bottom-toolbar: herda o gradiente azul escuro
   definido acima — nenhuma sobrescrita necessária. */

.app-main .fixed-bottom-toolbar .btn-group {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 6px;
}
/* botão vertical: ícone em cima, texto embaixo */
.app-main .fixed-bottom-toolbar .btn-app,
.app-main .form-toolbar .btn-app {
  position: relative;
  display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-width: 70px; height: auto; margin: 0 !important; padding: 8px 10px !important;
  background: #f8fafc !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important;
  color: #475569 !important; font-size: .72rem !important; font-weight: 500 !important; line-height: 1.1 !important;
  box-shadow: none !important; text-align: center; transition: all .15s;
}
.app-main .fixed-bottom-toolbar .btn-app > i,
.app-main .form-toolbar .btn-app > i {
  display: block !important; width: auto !important; margin: 0 !important;
  font-size: 1.15rem !important; color: #64748b !important;
}
.app-main .fixed-bottom-toolbar .btn-app:hover,
.app-main .form-toolbar .btn-app:hover {
  background: #eff6ff !important; border-color: #bfdbfe !important; color: var(--lmc-brand) !important;
  transform: translateY(-1px);
}
.app-main .fixed-bottom-toolbar .btn-app:hover > i,
.app-main .form-toolbar .btn-app:hover > i { color: var(--lmc-brand) !important; }
body.theme-dark .app-main .fixed-bottom-toolbar .btn-app,
body.theme-dark .app-main .form-toolbar .btn-app {
  background: #0b1220 !important; border-color: #243049 !important; color: #cbd5e1 !important;
}
/* badge de contagem no canto superior direito do botão */
.app-main .fixed-bottom-toolbar .btn-app .badge,
.app-main .form-toolbar .btn-app .badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; line-height: 1; border-radius: 999px; color: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.2);
}
.app-main .fixed-bottom-toolbar .btn-app .badge.btn-success,
.app-main .form-toolbar .btn-app .badge.btn-success { background: #16a34a !important; }
.app-main .fixed-bottom-toolbar .btn-app .badge.btn-warning,
.app-main .form-toolbar .btn-app .badge.btn-warning { background: #f59e0b !important; }
.app-main .fixed-bottom-toolbar .btn-app .badge.btn-info,
.app-main .form-toolbar .btn-app .badge.btn-info    { background: #0ea5e9 !important; }
.app-main .fixed-bottom-toolbar .btn-app .badge.btn-danger,
.app-main .form-toolbar .btn-app .badge.btn-danger  { background: #dc2626 !important; }

/* ====================================================================
   LUCIDE GLOBAL — sizing dos ícones trocados fora do shell (grid, forms,
   botões, rodapés). Escala pelo tamanho da fonte (mimetiza o FontAwesome).
   ==================================================================== */
.app-main svg.lucide {
  width: 1.05em; height: 1.05em; vertical-align: -.14em; stroke-width: 1.9; flex-shrink: 0;
}
/* ícones de ação do GRID (coluna Ação: editar/excluir) */
.app-main .table svg.lucide, .app-main td svg.lucide, .app-main .Grid svg.lucide {
  width: 17px; height: 17px; vertical-align: middle;
}
/* botões grandes (footer do cadastro, btn-app) seguem o tamanho do texto */
.app-main .btn svg.lucide { width: 1.05em; height: 1.05em; }
/* rodapé especial (PDV/Pedido) quer ícone grande no botão vertical */
.app-main .fixed-bottom-toolbar .btn-app svg.lucide,
.app-main .form-toolbar .btn-app svg.lucide { width: 1.3rem !important; height: 1.3rem !important; }

/* ====================================================================
   MODAL — fundo DESFOCADO (não mais preto opaco). Evita backdrops
   empilhados (shim) que somavam até ficar preto.
   ==================================================================== */
.modal-backdrop, .modal-backdrop.show {
  background-color: rgba(15, 23, 42, .25) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* se houver mais de um backdrop empilhado, mostra só o primeiro (evita ficar preto) */
.modal-backdrop ~ .modal-backdrop { display: none !important; }

/* ====================================================================
   ALIVIAR O PESO — cards mais leves (sombra/borda suaves) no app inteiro.
   ==================================================================== */
.app-main .card, .app-main .box, .app-main .nav-tabs-custom {
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03) !important;
  border: 1px solid #eef2f6 !important;
}
.app-main .card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.06) !important; }
/* títulos de seção (box-title) mais leves */
.app-main .box-header, .app-main .card > .card-header { border-bottom: 1px solid #f1f5f9 !important; }
.app-main .box-title, .app-main .card-title { font-weight: 600; color: #334155; }
/* botões de ação dentro dos cards (Em aberto, Pagas, Consultar, Imprimir...)
   ficam leves/outline em vez de blocos cinza pesados */
.app-main .card .btn-secondary:not(.btn-app):not([onclick*="'Cancel'"]),
.app-main .box .btn-secondary:not(.btn-app):not([onclick*="'Cancel'"]) {
  background: #fff !important; border: 1px solid #e5e7eb !important; color: #475569 !important;
  box-shadow: none !important; font-weight: 500;
}
.app-main .card .btn-secondary:not(.btn-app):hover,
.app-main .box .btn-secondary:not(.btn-app):hover {
  background: #f8fafc !important; border-color: #cbd5e1 !important; color: var(--lmc-brand) !important;
}
body.theme-dark .app-main .card, body.theme-dark .app-main .box, body.theme-dark .app-main .nav-tabs-custom {
  border-color: #243049 !important;
}

/* Botões de ÍCONE nas colunas "Ação" das grades (senha, permissões, listas):
   no ERP (BS3/AdminLTE) o .btn ali sai PEQUENO e chapado; no BS5 o
   .btn-secondary vira bloco cinza gordo — o Marcio reprovou (21/09).
   Compacto e leve, alinhado ao resto do sistema novo. */
.app-main table td > .btn-secondary,
.app-main table td .btn-group > .btn-secondary {
  padding: 2px 8px !important; font-size: 12px !important; line-height: 1.5;
  background: #fff !important; border: 1px solid #e5e7eb !important;
  color: #475569 !important; box-shadow: none !important; border-radius: 6px;
}
.app-main table td > .btn-secondary:hover,
.app-main table td .btn-group > .btn-secondary:hover {
  background: #f8fafc !important; border-color: #cbd5e1 !important;
  color: var(--lmc-brand) !important;
}

/* "Salvar" = verde e "Cancelar" = vermelho em TODOS os cruds (padrão do
   cadastro de cliente; uniformidade pedida em 21/09 — marcado por JS no
   legacy-shell.js, mesmo mecanismo do Incluir) */
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]) {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important;
  border: 1px solid transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.22) !important; font-weight: 600;
}
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]) > i,
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]) > svg,
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]) > .fa { color: #fff !important; }
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]):hover { filter: brightness(1.05); }
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]) {
  background: linear-gradient(135deg,#dc2626,#ef4444) !important;
  border: 1px solid transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(220,38,38,.22) !important; font-weight: 600;
}
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]) > i,
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]) > svg,
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]) > .fa { color: #fff !important; }
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]):hover { filter: brightness(1.05); }

/* "Pesquisar" = AZUL com letra branca em todo o sistema (padrão da lista
   de bancos; marcado por JS no legacy-shell.js) */
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]) {
  background: linear-gradient(135deg, var(--lmc-brand), #3b82f6) !important;
  border: 1px solid transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(26,111,212,.25) !important; font-weight: 600;
}
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]) > i,
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]) > svg,
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]) > .fa { color: #fff !important; }
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]):hover { filter: brightness(1.05); }
/* TUDO dentro dos botões pintados sai BRANCO, em qualquer nível
   (ícone, barra, span) — Marcio, 21/09: "texto e ícone branco".

   ⚠️ O `fill: #fff` daqui serve para SVG de fonte antiga (ícone maciço, que
   se pinta pelo preenchimento). Ele NÃO pode valer para os ícones do Lucide,
   que são desenhos VAZADOS: como o seletor é universal (`*`), ele alcança o
   <circle>/<path> de dentro do SVG e enchia a lupa do «Pesquisar» de branco
   (queixa do Marcio, 22/09). Quem desfaz isso é o bloco «ÍCONE LUCIDE É
   SEMPRE VAZADO» no fim do `app.css`, que carrega depois desta folha. */
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]),
.app-main .btn-pesquisar-azul:not(.btn-app[data-acao-erp]) *,
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]),
.app-main .btn-salvar-verde:not(.btn-app[data-acao-erp]) *,
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]),
.app-main .btn-cancelar-vermelho:not(.btn-app[data-acao-erp]) *,
.app-main .btn-incluir-verde,
.app-main .btn-incluir-verde * { color: #fff !important; fill: #fff; }


/* "Incluir" = verde (marcado por JS em legacy-shell.js) */
.app-main .btn-incluir-verde {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important;
  border: 1px solid transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.22) !important; font-weight: 600;
}
.app-main .btn-incluir-verde > i, .app-main .btn-incluir-verde > svg { color: #fff !important; }
.app-main .btn-incluir-verde:hover {
  background: linear-gradient(135deg,#15803d,#16a34a) !important; color: #fff !important; transform: translateY(-1px);
}

/* abas com ícone: leve espaço entre ícone e rótulo */
.app-main .nav-tabs-custom > .nav-tabs > li > a > i,
.app-main .nav-tabs-custom > .nav-tabs > li > a > svg.lucide { margin-right: 5px; }

/* ====================================================================
   BARRAS .box-header (PDV: topo + status; e box-headers em geral) -> CLARAS
   Elimina as barras azuis/teal avulsas; deixa fundo claro e texto escuro.
   ==================================================================== */
.app-main .box-header, section.content .box-header {
  background: #fff !important; color: #334155 !important;
  border-bottom: 1px solid #eef2f6 !important;
}
.app-main .box-header h1, .app-main .box-header .box-title,
section.content .box-header h1, section.content .box-header .box-title { color: #334155 !important; }
.app-main .box-header i, section.content .box-header i { color: var(--lmc-brand); }
body.theme-dark .app-main .box-header, body.theme-dark section.content .box-header {
  background: #131c2e !important; color: #e2e8f0 !important; border-bottom-color: #243049 !important;
}

/* ====================================================================
   MODAIS — botões consistentes com o design system
   ==================================================================== */
.modal .btn, .modal-footer .btn { border-radius: 10px !important; font-weight: 500; }
/* Confirmar / OK (btn-info ciano antigo) -> verde (ação positiva) */
.modal .btn-info {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.2) !important;
}
.modal .btn-info:hover { background: linear-gradient(135deg,#15803d,#16a34a) !important; color: #fff !important; }
.modal .btn-info > i, .modal .btn-info > svg { color: #fff !important; }
/* botões neutros/dismiss dos modais (lista, cancelar) -> claros e leves */
.modal .btn-secondary, .modal .btn-light {
  background: #fff !important; border: 1px solid #e5e7eb !important; color: #475569 !important; box-shadow: none !important;
}
.modal .btn-secondary:hover, .modal .btn-light:hover {
  background: #f1f5f9 !important; color: var(--lmc-brand) !important;
}
/* cabeçalho de modal que ainda usa bg-primary fica na cor da marca */
.modal-header.bg-primary { background: var(--lmc-brand) !important; }
.modal-content { border-radius: 16px !important; }
/* botões de ação em bloco nos modais: TODOS do mesmo tamanho (largura cheia) */
.modal .modal-body .btn-block, .modal .btn-block,
.modal .modal-body .btn.btn-md:not(.dropdown-toggle) { width: 100% !important; display: flex; align-items: center; justify-content: center; margin: 0 0 8px; }
.modal .modal-body .btn-block:last-child, .modal .btn-block:last-child { margin-bottom: 0; }

/* Modal de fechamento de venda (Pedido/OS/NFE): cores fixas por acao
   — Fechar como orcamento = VERDE | Fechar como pedido = AZUL | Cancelar = VERMELHO.
   Por ID cobre as 2 variantes (normal e "M") nos 3 templates. */
#BTNFECHAORCA, #BTNFECHAORCAM {
  background: #16a34a !important; border-color: #16a34a !important; color: #fff !important;
}
#BTNFECHAPED, #BTNFECHAPEDM {
  background: #1a6fd4 !important; border-color: #1a6fd4 !important; color: #fff !important;
}
#BTNFECHAORCA:hover, #BTNFECHAORCAM:hover,
#BTNFECHAPED:hover, #BTNFECHAPEDM:hover { filter: brightness(.94); }
#BTNFECHAORCA > i, #BTNFECHAORCAM > i,
#BTNFECHAPED > i, #BTNFECHAPEDM > i { color: #fff !important; }
/* Cancelar (irmao dos botoes de fechamento no mesmo rodape) = VERMELHO */
#BTNFECHAORCA ~ .btn-secondary[data-bs-dismiss], #BTNFECHAORCAM ~ .btn-secondary[data-bs-dismiss],
#BTNFECHAPED ~ .btn-secondary[data-bs-dismiss],  #BTNFECHAPEDM ~ .btn-secondary[data-bs-dismiss] {
  background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important;
}
#BTNFECHAORCA ~ .btn-secondary[data-bs-dismiss] > i, #BTNFECHAORCAM ~ .btn-secondary[data-bs-dismiss] > i,
#BTNFECHAPED ~ .btn-secondary[data-bs-dismiss] > i,  #BTNFECHAPEDM ~ .btn-secondary[data-bs-dismiss] > i { color: #fff !important; }

/* ====================================================================
   Botões integrados ao campo dentro de .input-group (estilo append BS5).
   Antes dependia do wrapper BS3 <span class="input-group-btn">; com o
   unwrap, o botão é filho direto de .input-group (.input-group > .btn).
   ==================================================================== */
.app-main .input-group > .btn {
  height: auto; min-height: 38px; margin: 0;
  border: 1px solid #e5e7eb !important; border-left: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important; color: #475569 !important; box-shadow: none !important;
  padding: .35rem .65rem !important;
}
/* arredonda so o ULTIMO botao da sequencia (canto direito do input-group) */
.app-main .input-group > .btn:last-child,
.app-main .input-group > .btn.dropdown-toggle:last-child {
  border-radius: 0 9px 9px 0 !important;
}
.app-main .input-group > .btn:hover { background: #eff6ff !important; color: var(--lmc-brand) !important; }
.app-main .input-group > .btn > i,
.app-main .input-group > .btn > svg.lucide { color: inherit !important; }

/* DROPDOWN-TOGGLE em input-group: DESTAQUE em azul brand para chamar atencao
   (este eh o botao "mais acoes" — ex.: Financeiro/Creditos no Cliente). */
.app-main .input-group > .btn.dropdown-toggle {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: var(--lmc-brand) !important;
  font-weight: 600;
}
.app-main .input-group > .btn.dropdown-toggle:hover,
.app-main .input-group > .btn.dropdown-toggle.show {
  background: var(--lmc-brand) !important;
  border-color: var(--lmc-brand) !important;
  color: #fff !important;
}
.app-main .input-group > .btn.dropdown-toggle > i { color: inherit !important; }
.app-main .input-group > .btn.dropdown-toggle::after {
  margin-left: .4rem; vertical-align: middle; color: currentColor; opacity: .8;
}

/* menu do dropdown: visual moderno (substitui o azul/sublinhado padrao) */
.app-main .input-group > .dropdown-menu {
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
  margin-top: 6px; min-width: 220px;
}
.app-main .input-group > .dropdown-menu > .dropdown-item {
  border-radius: 8px; padding: 8px 12px; color: #334155; font-size: .9rem;
  display: flex; align-items: center; gap: 8px;
}
.app-main .input-group > .dropdown-menu > .dropdown-item:hover,
.app-main .input-group > .dropdown-menu > .dropdown-item:focus {
  background: #eff6ff; color: var(--lmc-brand);
}
/* o campo imediatamente antes do botão perde o arredondado da direita */
.app-main .input-group > .form-control:not(:last-child),
.app-main .input-group > .form-select:not(:last-child),
.app-main .input-group > select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.theme-dark .app-main .input-group > .btn { background: #131c2e !important; border-color: #243049 !important; color: #cbd5e1 !important; }

/* (removido) o remendo ":has" que encolhia colunas — estava vazando para a
   aba Crédito/Preços e espremendo os campos. As sub-abas do Histórico serão
   resolvidas pela reestruturação por aba (padrão da aba Dados). */

/* ====================================================================
   HISTÓRICO (tab_3) ainda usa markup .box — dá visual de card-seção +
   alinha os toolbars. Escopo em .box (que só existe nessa aba agora).
   ==================================================================== */
.app-main .tab-content .box { border-radius: 14px; border: 1px solid #eef2f6; overflow: hidden; }
.app-main .tab-content .box .box-header { padding: 14px 18px 6px; border-bottom: 0; }
.app-main .tab-content .box .box-title { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700; }
.app-main .tab-content .box .box-footer, .app-main .tab-content .box .box-body { padding: 4px 18px 16px; background: transparent; }
.app-main .tab-content .box .box-tools { display: none; }   /* botão "collapse" inútil */

/* preservar header colorido .box-header1 (Total card do Pedido/OS/Comanda):
   azul escuro = mesmo tom do rodapé do card "Total de vendas | Mês" do dashboard. */
.app-main .tab-content .box .box-header1 {
  background: linear-gradient(135deg,#1251a8,#1565c0) !important;
  padding: 12px 18px !important;
  border-bottom: 0 !important;
}
.app-main .tab-content .box .box-header1 .box-title,
.app-main .tab-content .box .box-header1 h3 {
  font-size: 1.25rem !important;
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}
.app-main .tab-content .box .box-header1 i { color: #fff !important; }
.app-main .tab-content .box .box-header1 .btn-box-tool i { color: #fff !important; opacity: .8; }

/* PDV: box-header (ícones caixa/atendente/cliente) — branco limpo, ícones na cor da marca.
   Total card azul fica como único destaque visual (herói da tela). */
.app-main .box:has(.pdv-total-footer) .box-header {
  background: #fff !important;
  border-bottom: 1px solid #e8edf2 !important;
  border-radius: 8px 8px 0 0;
}
.app-main .box:has(.pdv-total-footer) .box-header * { color: #1a6fd4 !important; }
.app-main .box:has(.pdv-total-footer) .box-header .pdv-cliente { color: #475569 !important; }

/* PDV: faixa "Total | Produtos | Desconto" sumindo — queixa de 21/09.
   `FrmPDV.html` (`<style>` embutido, linha ~20) tem `.box { overflow:
   hidden }` genérico, herdado do layout original (só para arredondar os
   cantos de OUTROS `.box` da tela — grade de produtos, à direita). Esse
   `.box` específico (o da coluna esquerda) mora dentro do `.col-lg-5`
   flex-column da mesma folha (`FrmPDV.html` ~linha 199) e, com
   `overflow: hidden`, o navegador às vezes mede a altura do `.box` ANTES
   do `{%IWLabeltp%}`/`{%IWLabeldc%}` chegarem no `box-footer` (o `pdv.js`
   escreve o texto por cima do placeholder já renderizado) e não refaz a
   conta depois — o rótulo "Produtos: | Desconto:" existe no DOM (dá para
   ler o texto pelo leitor de tela) mas fica cortado, invisível. `overflow:
   visible` aqui tira a única razão para clipar ESTE `.box` (ele não tem
   conteúdo lateral para esconder) sem mexer nos outros `.box` da tela. */
.app-main .box:has(.pdv-total-footer) { overflow: visible !important; }

/* PDV: card Total — mesmo azul do card "Total de vendas | Mês" do dashboard */
.app-main .pdv-total-footer {
  background: linear-gradient(135deg,#1a6fd4,#2878d8) !important;
  border-top: 0 !important;
  border-radius: 8px;
  margin: 8px 12px;
  padding: 14px 18px 0 !important;  /* sem padding-bottom: o h5-footer ocupa */
  text-align: center;
  overflow: hidden;
}
/* logo + contato */
.app-main .pdv-total-footer .logo-lg {
  display: block;
  margin-bottom: 10px;
  opacity: .9;
  font-size: .82rem;
}
.app-main .pdv-total-footer .logo-lg img { filter: none; }
/* "$ Total | R$ 0,00" — grande e negrito */
.app-main .pdv-total-footer h1 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 0 14px !important;
}
/* "Produtos: R$ 0,00 | Desconto: R$ 0,00" — faixa escura, igual ao rodapé "Detalhes" do dashboard */
.app-main .pdv-total-footer h5 {
  font-size: .95rem !important;
  font-weight: 400 !important;
  margin: 0 -18px !important;
  padding: 8px 18px !important;
  background: rgba(0,0,0,.12);
  opacity: 1;
}
/* todas as cores brancas sobre o azul */
.app-main .pdv-total-footer h1,
.app-main .pdv-total-footer h5,
.app-main .pdv-total-footer strong,
.app-main .pdv-total-footer i,
.app-main .pdv-total-footer a,
.app-main .pdv-total-footer span { color: #fff !important; }

/* Total card — solução definitiva de alinhamento.
   Coluna de RÓTULOS: 62% — suficiente para "Total de produtos |" sem corte.
   Coluna de VALORES: 38% — suficiente para "R$ 0,00".
   Altura fixa em px igual nas duas colunas = alinhamento linha-a-linha garantido.
   SEM overflow:hidden nos rótulos = texto nunca é cortado. */
.app-main .tab-content .box .box-footer .row.text-end {
  display: flex !important;
  flex-wrap: nowrap;
}
.app-main .tab-content .box .box-footer .row.text-end > .col-6:not(.text-start) {
  flex: 0 0 62% !important;
  max-width: 62% !important;
  padding: 0 4px 0 0 !important;
  min-width: 0;
}
.app-main .tab-content .box .box-footer .row.text-end > .col-6.text-start {
  flex: 0 0 38% !important;
  max-width: 38% !important;
  padding: 0 !important;
  min-width: 0;
}
/* altura fixa idêntica em AMBAS as colunas */
.app-main .tab-content .box .box-footer h5 {
  height: 22px !important;
  line-height: 22px !important;
  margin: 0 0 4px !important;
  white-space: nowrap !important;
  overflow: visible;   /* nunca corta o texto */
  display: block;
  font-size: .8rem !important;
}
.app-main .tab-content .box .box-footer h4 {
  height: 28px !important;
  line-height: 28px !important;
  margin: 2px 0 0 !important;
  white-space: nowrap !important;
  overflow: visible;
  display: block;
  font-size: .93rem !important;
  font-weight: 700 !important;
}
/* diferenciação visual */
.app-main .tab-content .box .box-footer .text-end  h5 { color: #64748b; font-weight: 500; }
.app-main .tab-content .box .box-footer .text-end  h4 { color: #475569; font-weight: 600; }
.app-main .tab-content .box .box-footer .text-start h5 { color: #1e293b; font-weight: 600; }
.app-main .tab-content .box .box-footer .text-start h4 { color: #0f172a; font-weight: 700; }
.app-main .tab-content .box .box-footer h4 strong    { font-weight: 700; }

/* form que envolve col-lg-9 + col-lg-3 (Pedido/OS/etc.): sem isso o form
   bloqueia o flex do .row e as colunas empilham verticalmente em vez de
   ficarem lado-a-lado. Faz o form virar flex container tambem, ocupando
   100% da .row e relaxando as colunas internas. POST/submit normal. */
.app-main .tab-content .row > form {
  display: flex !important;
  flex-wrap: wrap;
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* GUTTER que sumiu — achado no "Cadastro de carga" (queixa do Marcio,
   21/09): o Bootstrap dá o respiro de cada coluna pelo seletor `.row > *`
   (filho DIRETO do .row), não pela classe `.col-*` em si
   (`.col-lg-4{flex:0 0 auto;width:33.3%}` não tem padding nenhum — ver
   adminlte.min.css). Como o `<form>` do bloco acima é que fica entre o
   `.row` e as colunas, elas nunca recebem esse `padding: 0 calc(gutter/2)`
   e ficam coladas na margem negativa do `.row` — a 1ª coluna de cada linha
   fica encostada (às vezes até cortada pelo `overflow` do card ao redor:
   foi o "ódigo"/"ransportadora"/"F de embarque" cortados na borda
   esquerda). Repõe o MESMO padding que `.row > *` já dá a quem não passa
   por um `<form>` no meio — mesmo efeito de outras telas (Pedido/OS). */
.app-main .tab-content .row > form > [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
/* Período + botões eram colunas SOLTAS no box-footer (sem .row) -> empilhavam.
   box-footer vira flex: linhas internas (stat-cards/tabela) ficam 100%, e as
   colunas soltas (Período/Em aberto/Pagas/Email/Imprimir) ficam LADO A LADO. */
/* flex SÓ em box-footers de toolbar (sem sub-abas/tabs aninhadas dentro,
   senão espreme grids como o do Rastro Movimento/Entrega) */
.app-main .tab-content .box .box-footer:not(:has(.nav-tabs)):not(:has(.nav-tabs-custom)):not(:has(.tab-content)) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; }
.app-main .tab-content .box .box-footer > .row,
.app-main .tab-content .box .box-footer > .table-responsive,
.app-main .tab-content .box .box-footer > .scroll-modal { flex: 1 1 100%; }
.app-main .tab-content .box .box-footer > [class*="col-"] {
  flex: 0 0 auto; width: auto; max-width: none;
  display: flex; flex-direction: column; justify-content: flex-end;   /* conteúdo ancorado embaixo */
}
.app-main .tab-content .box .box-footer > [class*="col-"] > .mb-3,
.app-main .tab-content .box .box-footer > [class*="col-"] > .dropdown { margin: 0 !important; }
/* o </br> dos botões soltos desalinhava o Imprimir (dropdown) — esconde tudo
   e o conteúdo de cada coluna fica nivelado pela base */
.app-main .tab-content .box .box-footer > [class*="col-"] > br { display: none !important; }
.app-main .tab-content .box .box-footer .dropdown > .dropdown-toggle { margin: 0 !important; }
/* toolbar: colunas que só têm botão/dropdown encolhem e ficam lado a lado */
.app-main .tab-content .box .row > [class*="col-"]:has(> .mb-3 > .btn),
.app-main .tab-content .box .row > [class*="col-"]:has(> br + .mb-3 > .btn),
.app-main .tab-content .box .row > [class*="col-"]:has(> .dropdown),
.app-main .tab-content .box .box-footer > [class*="col-"]:has(> .mb-3 > .btn) {
  flex: 0 0 auto !important; width: auto !important; max-width: none !important;
}
.app-main .tab-content .box .btn-block { width: auto !important; display: inline-flex; align-items: center; gap: 6px; }
.app-main .tab-content .box .row > [class*="col-"] > br,
.app-main .tab-content .box .box-footer > br { display: none; }
/* toolbar dentro de .box .row (Cartão/Cheques: Consultar + Imprimir): nivela
   botões e dropdown pela BASE — sem empurrar só o btn-block (que desalinhava) */
.app-main .tab-content .box .row { align-items: flex-end; }
.app-main .tab-content .box .row > [class*="col-"] > .mb-3,
.app-main .tab-content .box .row > [class*="col-"] > .dropdown { margin-bottom: 0; }
body.theme-dark .app-main .tab-content .box { border-color: #243049; }

/* ====================================================================
   SWEETALERT (modais swalAlert "ATENÇÃO" etc.) — visual moderno, global
   ==================================================================== */
.sweet-overlay {
  background-color: rgba(15, 23, 42, .45) !important;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.sweet-alert {
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  padding: 26px 30px 22px !important;
}
.sweet-alert h2 {
  font-size: 1.45rem !important; font-weight: 700 !important; color: #1f2937 !important;
  margin: 12px 0 4px !important; line-height: 1.2 !important;
}
.sweet-alert p {
  font-size: .95rem !important; color: #64748b !important; line-height: 1.55 !important; font-weight: 400 !important;
}
/* botões modernos (cor da marca, arredondados) */
.sweet-alert button {
  border-radius: 10px !important; font-weight: 600 !important; font-size: .92rem !important;
  padding: 10px 30px !important; box-shadow: none !important; transition: all .15s !important;
  text-transform: none !important;
}
.sweet-alert button.confirm {
  background: var(--lmc-brand) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(26, 111, 212, .28) !important;
}
.sweet-alert button.confirm:hover { background: #1559aa !important; }
.sweet-alert button.cancel {
  background: #fff !important; border: 1px solid #e5e7eb !important; color: #475569 !important;
}
.sweet-alert button.cancel:hover { background: #f1f5f9 !important; }
/* o anel/ícone um pouco mais suave */
.sweet-alert .sa-icon { margin-top: 4px !important; }
/* dark mode */
body.theme-dark .sweet-alert { background: #131c2e !important; }
body.theme-dark .sweet-alert h2 { color: #e2e8f0 !important; }
body.theme-dark .sweet-alert p { color: #94a3b8 !important; }

/* ====================================================================
   PROPAGAÇÃO GLOBAL nos CRUDs sem abas — boxes com cara de card-seção
   + título-no-card (injetado via JS no .box-header / .card-header).
   ==================================================================== */
.app-main .box { border-radius: 14px; }
/* esconde o botão "collapse" legado (AdminLTE2) que não faz nada */
.app-main .box-header [data-widget="collapse"],
.app-main .box-tools .btn-box-tool { display: none !important; }
/* título-no-card quando o JS injeta dentro de um .box-header */
.app-main .box-header .list-title {
  font-size: .95rem; font-weight: 700; color: var(--lmc-text); display: flex; align-items: center; gap: 8px; margin: 0;
}
.app-main .box-header .list-title > i { color: var(--lmc-brand); }
.app-main .box-header .list-title .list-help { color: #94a3b8; margin-left: 4px; text-decoration: none; cursor: help; font-size: .92rem; }
.app-main .box-header .list-title .list-help:hover { color: var(--lmc-brand); }
body.theme-dark .app-main .box-header .list-title { color: #e2e8f0; }

/* ====================================================================
   GRID / tabelas das listas — visual moderno (global)
   ==================================================================== */
.app-main table.dataTable, .app-main .table-responsive > table, .app-main table.table {
  width: 100% !important; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .86rem;
}
.app-main table thead th {
  background: #f8fafc !important; color: #64748b !important; font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e5e7eb !important;
  padding: 11px 14px !important; white-space: nowrap; vertical-align: middle;
}
.app-main table tbody td { padding: 10px 14px !important; border-top: 1px solid #f1f5f9 !important; vertical-align: middle; color: #334155; }
.app-main table tbody tr { transition: background .12s; }
.app-main table tbody tr:hover { background: #f8fbff; }
/* coluna Ação: editar/excluir como ícones clicáveis com cor */
.app-main td svg.lucide, .app-main td span.fa, .app-main td i.fa { width: 18px; height: 18px; cursor: pointer; }
.app-main td a { display: inline-flex; align-items: center; justify-content: center; }
.app-main td a:hover { opacity: .75; }
.app-main td .lucide-square-pen, .app-main td .fa-edit, .app-main td .fa-pencil { color: #1a6fd4 !important; }
.app-main td .lucide-trash-2, .app-main td .fa-trash, .app-main td .fa-trash-o { color: #dc2626 !important; }
.app-main td .lucide-printer, .app-main td .fa-print { color: #475569 !important; }
.app-main td .lucide-zoom-in, .app-main td .fa-search-plus { color: #1a6fd4 !important; }
/* dark mode */
body.theme-dark .app-main table thead th { background: #0b1220 !important; color: #94a3b8 !important; border-bottom-color: #243049 !important; }
body.theme-dark .app-main table tbody td { border-top-color: #243049 !important; color: #cbd5e1; }
body.theme-dark .app-main table tbody tr:hover { background: #0e1626; }

/* ====================================================================
   MODAL HEADER — botão de fechar (X) legado (BS3 .close) misturado com o
   título. Reordena: título à esquerda, X à direita, e estiliza limpo.
   ==================================================================== */
.modal-header { display: flex !important; align-items: center; gap: 10px; }
.modal-header > .modal-title, .modal-header > h4, .modal-header > h3 { order: 1; margin: 0 auto 0 0; }
.modal-header > .close, .modal-header > button.close, .modal-header > a.close {
  order: 9; margin-left: auto !important; float: none !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  font-size: 1.4rem; line-height: 1; opacity: .7; cursor: pointer; padding: 0 2px; color: inherit !important;
}
.modal-header > .close:hover { opacity: 1; }
/* em header colorido o X fica branco */
.modal-header.bg-primary .close, .modal-header.text-bg-primary .close,
.modal-header.bg-primary .btn-close { color: #fff !important; filter: brightness(0) invert(1); }

/* ====================================================================
   TOTAIS CARD — card de resumo de valores (Pedido / OS / Comanda)
   Substitui a velha estrutura col-6 dentro de box-footer que quebrava
   com o display:flex global do box-footer.
   ==================================================================== */
.totais-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.totais-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  border-bottom: 1px solid #eef2f6;
  font-size: .83rem;
  color: #475569;
  width: 100%;
}
.totais-list li span:last-child {
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}
.totais-list li.totais-desconto span:first-child { color: #dc2626; }
.totais-list li.totais-desconto span:last-child  { color: #dc2626; }
.totais-list li.totais-sinal span:first-child { color: #16a34a; }
.totais-list li.totais-sinal span:last-child  { color: #16a34a; }
.totais-list li.totais-total {
  background: #eef4ff;
  padding: 8px 16px;
}
.totais-list li.totais-total span:first-child { color: #1e40af; font-weight: 600; font-size: .88rem; }
.totais-list li.totais-total span:last-child  { color: #1e40af; font-size: .95rem; }
.totais-forma {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 16px;
  background: rgba(0,0,0,.035);
  font-size: .82rem;
  color: #64748b;
  border-top: 1px solid #eef2f6;
  width: 100%;
}
/* garante que o box-footer do totais-card seja block, não flex */
.app-main .box-footer:has(.totais-list) {
  display: block !important;
  padding: 0 !important;
}

/* ====================================================================
   BOTÃO INCLUIR — alinhamento definitivo para QUALQUER form / container.
   Colunas que contêm apenas um .btn dentro de um .row ficam ancoradas
   ao fundo da linha (align-self:flex-end), nivelando com label+input.
   Cobre: .tab-content .box, .box-body, .card-body, .modal-body, form.
   ==================================================================== */
.app-main .row > [class*="col-"]:has(> .btn):not(:has(label)):not(:has(input)):not(:has(select)):not(:has(textarea)) {
  align-self: flex-end;
  padding-bottom: 1rem;
  margin-top: 0 !important;
}
/* remove br soltos dentro de .row (causam quebra de linha em flex) */
.app-main .row > br { display: none !important; }

/* ====================================================================
   CHECKBOXES (config do produto etc.) — alinhar caixa com o rótulo
   ==================================================================== */
.app-main .box input[type="checkbox"], .app-main .card-section input[type="checkbox"],
.app-main .box-footer input[type="checkbox"], .app-main .card-body input[type="checkbox"] {
  width: 16px; height: 16px; min-height: 0 !important; margin: 0 6px 0 0 !important; vertical-align: -2px;
  flex: 0 0 auto; cursor: pointer; accent-color: var(--lmc-brand);
}
.app-main .box label, .app-main .card-section label { vertical-align: middle; }
/* .form-check do BS5 espera .form-check-input (o IntraWeb não usa) -> o
   padding/float desalinham. Vira uma linha flex simples (caixa + rótulo). */
.app-main .form-check {
  padding-left: 0 !important; display: flex !important; align-items: center; gap: 7px; min-height: 0; margin: 0;
}
.app-main .form-check input[type="checkbox"], .app-main .form-check input[type="radio"] {
  float: none !important; margin: 0 !important; width: 16px; height: 16px; min-height: 0 !important;
  flex: 0 0 auto; cursor: pointer; accent-color: var(--lmc-brand);
}
.app-main .form-check label, .app-main .form-check-label { margin: 0 !important; cursor: pointer; line-height: 1.2; }

/* MEMOS/textareas: o IntraWeb renderiza com largura fixa inline -> força
   ocupar a coluna toda e ter altura decente. */
.app-main textarea, section.content textarea { width: 100% !important; box-sizing: border-box; min-height: 110px; }
/* colunas que contêm textarea ganham largura mínima boa (não ficam estreitas) */
.app-main .tab-content .row > [class*="col-"]:has(> .mb-3 > textarea),
.app-main .tab-content .row > [class*="col-"]:has(> textarea),
.app-main .card-section .row > [class*="col-"]:has(> .mb-3 > textarea) { flex: 1 1 340px; }

/* ====================================================================
   BOTÕES DOS MODAIS — cores (marcadas por JS) + tamanho consistente
   ==================================================================== */
.modal .mbtn-ok, .modal .mbtn-print, .modal .mbtn-cancel {
  min-width: 120px !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: none !important;
}
.modal .mbtn-ok {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important; border: 1px solid transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.22) !important;
}
.modal .mbtn-ok:hover { background: linear-gradient(135deg,#15803d,#16a34a) !important; color: #fff !important; }
.modal .mbtn-print {
  background: var(--lmc-brand) !important; border: 1px solid transparent !important; color: #fff !important;
  box-shadow: 0 3px 10px rgba(26,111,212,.22) !important;
}
.modal .mbtn-print:hover { background: #1559aa !important; color: #fff !important; }
.modal .mbtn-cancel {
  background: #fff !important; border: 1px solid #e5e7eb !important; color: #475569 !important;
}
.modal .mbtn-cancel:hover { background: #f1f5f9 !important; color: #334155 !important; }
.modal .mbtn-ok > i, .modal .mbtn-ok > svg, .modal .mbtn-print > i, .modal .mbtn-print > svg { color: #fff !important; }