/* ===========================================================
   HENN SOFTWARE — Painel Administrativo — public2
   Tema "Aurora": sidebar escura fixa (não muda com o tema),
   barra superior flutuante em vidro, cards sem sombra com
   acento colorido na borda, botões em pílula.

   Ideia proposital: NÃO repetir o primeiro rascunho (sidebar
   clara que também virava escura). Aqui a sidebar é sempre
   escura — como Linear/Vercel/Stripe — e só o "quadro" de
   conteúdo claro/escuro muda com o botão de tema. Isso dá
   contraste visual permanente e deixa a marca (verde) se
   destacando sempre na faixa lateral.
   =========================================================== */

:root {
  /* ---- Marca ---- */
  --hs-primary: #6BB252;
  --hs-primary-dark: #4c8f38;
  --hs-primary-light: #eaf5e4;
  --hs-primary-ring: rgba(107, 178, 82, .28);
  --hs-accent: #f59e0b;
  --hs-aurora-2: #22d3ee; /* ciano — só decorativo (glow da sidebar) */
  --hs-aurora-3: #8b5cf6; /* violeta — só decorativo (glow da sidebar) */

  /* ---- Canvas (conteúdo) — modo claro por padrão ---- */
  --hs-bg: #eef1f6;
  --hs-surface: #ffffff;
  --hs-surface-2: #f6f8fb;
  --hs-surface-3: #eceff4;
  --hs-border: #e2e7ee;
  --hs-border-2: #d6dce6;
  --hs-text: #1a2232;
  --hs-text-muted: #667085;
  --hs-text-faint: #98a2b3;

  /* ---- Estado ---- */
  --hs-success: #16a34a;
  --hs-danger: #e1183f;
  --hs-warning: #d97706;
  --hs-info: #2563eb;

  /* ---- Forma ---- */
  --hs-radius-sm: 10px;
  --hs-radius: 16px;
  --hs-radius-lg: 20px;
  --hs-pill: 999px;

  /* ---- Sidebar: SEMPRE escura, não depende do tema ---- */
  --hs-side-bg: #0b1220;
  --hs-side-bg-2: #0e1830;
  --hs-side-border: rgba(255, 255, 255, .08);
  --hs-side-text: #c6d0e2;
  --hs-side-text-muted: #7c88a3;
  --hs-side-active-bg: rgba(107, 178, 82, .14);
  --hs-side-active-text: #ffffff;

  /* ---- Medidas ---- */
  --hs-sidebar-w: 272px;
  --hs-sidebar-header-h: 150px;
  --hs-topbar-h: 68px;
  --hs-gutter: 24px;

  /* ---- Compat com o resto do sistema (--henn-*) ---- */
  --henn-primary: var(--hs-primary);
  --henn-primary-dark: var(--hs-primary-dark);
  --henn-primary-light: var(--hs-primary-light);
  --henn-accent: var(--hs-accent);
  --henn-accent-light: #fcd34d;
  --henn-green: var(--hs-primary);
  --henn-green-dark: var(--hs-primary-dark);
  --henn-green-light: var(--hs-primary-light);
  --henn-green-muted: #dcefd3;
  --henn-bg: var(--hs-bg);
  --henn-bg-alt: var(--hs-surface-2);
  --henn-card: var(--hs-surface);
  --henn-sidebar: var(--hs-side-bg);
  --henn-text: var(--hs-text);
  --henn-text-muted: var(--hs-text-muted);
  --henn-text-light: var(--hs-text-faint);
  --henn-success: var(--hs-success);
  --henn-danger: var(--hs-danger);
  --henn-warning: var(--hs-warning);
  --henn-info: var(--hs-info);
  --henn-shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, .06);
  --henn-shadow: 0 2px 8px -2px rgba(16, 24, 40, .10);
  --henn-shadow-md: 0 8px 20px -6px rgba(16, 24, 40, .14);
  --henn-shadow-lg: 0 16px 32px -10px rgba(16, 24, 40, .16);
  --henn-shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, .22);
  --henn-border: var(--hs-border);
  --henn-border-light: var(--hs-surface-3);
  --henn-radius: var(--hs-radius);
  --henn-radius-sm: var(--hs-radius-sm);
  --henn-radius-lg: var(--hs-radius-lg);
  --henn-sidebar-w: var(--hs-sidebar-w);
  --henn-sidebar-header-h: var(--hs-sidebar-header-h);
  --henn-topbar-h: var(--hs-topbar-h);
}

/* ---- Modo escuro: só o CANVAS muda. A sidebar já era escura. ---- */
:root[data-theme="dark"] {
  --hs-bg: #0e1218;
  --hs-surface: #171c24;
  --hs-surface-2: #1c222c;
  --hs-surface-3: #222935;
  --hs-border: #2a3240;
  --hs-border-2: #343d4d;
  --hs-text: #e7eaf0;
  --hs-text-muted: #9aa5b8;
  --hs-text-faint: #6e7889;

  --henn-bg: var(--hs-bg);
  --henn-card: var(--hs-surface);
  --henn-text: var(--hs-text);
  --henn-text-muted: var(--hs-text-muted);
  --henn-text-light: var(--hs-text-faint);
  --henn-border: var(--hs-border);
  --henn-border-light: var(--hs-surface-3);
  --henn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .4);
  --henn-shadow: 0 2px 10px -2px rgba(0, 0, 0, .5);
  --henn-shadow-md: 0 10px 24px -8px rgba(0, 0, 0, .55);
  --henn-shadow-lg: 0 18px 36px -10px rgba(0, 0, 0, .6);
}

/* ===========================================================
   Base
   =========================================================== */
* { box-sizing: border-box; }

html, body {
  background-color: var(--hs-bg) !important;
}

body {
  color: var(--hs-text);
  font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4, h5, h6 { color: var(--hs-text); }

a { color: var(--hs-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--hs-primary-dark); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hs-border-2); border-radius: var(--hs-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--hs-text-faint); }

/* ===========================================================
   Sidebar — sempre escura, com glow decorativo "aurora"
   =========================================================== */
.main-menu {
  width: var(--hs-sidebar-w) !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0 !important;
  background: var(--hs-side-bg) !important;
  border-right: 1px solid var(--hs-side-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .25) !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 110 !important;
  transition: transform .28s ease !important;
}

.main-menu .header {
  position: relative !important;
  height: var(--hs-sidebar-header-h) !important;
  padding: 20px 20px 16px !important;
  background: var(--hs-side-bg) !important;
  border-bottom: 1px solid var(--hs-side-border) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Glow decorativo: dois borrões de cor (verde + ciano/violeta) atrás da
   logo, só pra dar vida à faixa escura — nenhuma imagem, só gradientes. */
.main-menu .header::before,
.main-menu .header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: .35;
  pointer-events: none;
}
.main-menu .header::before {
  width: 160px; height: 160px;
  background: var(--hs-primary);
  top: -60px; left: -40px;
}
.main-menu .header::after {
  width: 140px; height: 140px;
  background: var(--hs-aurora-2);
  top: -30px; right: -50px;
}

.main-menu .header .logo2 {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  background-image: none !important;
  background: rgba(255, 255, 255, .94) !important;
  padding: 8px 14px !important;
  border-radius: var(--hs-radius-sm) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
}
/* Logo mantém as cores originais da marca (preto/verde/teal) — em vez
   de "embranquecer" tudo com um filtro, ela ganha um fundo claro em
   forma de chip, que fica elegante sobre a sidebar escura e preserva
   a identidade visual. */
.main-menu .header .logo2 img { max-height: 30px; width: auto; display: block; }

.main-menu .header .button-close {
  position: absolute !important;
  top: 16px; right: 16px;
  z-index: 2;
  display: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: var(--hs-pill);
  color: var(--hs-side-text);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--hs-side-border);
  font-size: 14px;
}
.main-menu .header .button-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.main-menu .header .user {
  position: relative; z-index: 1;
  margin-top: 14px;
}
.main-menu .header .user .name {
  color: #ffffff !important;
  font-size: 14px; font-weight: 600; margin: 0;
}
.main-menu .header .user .position {
  color: var(--hs-side-text-muted) !important;
  font-size: 12px; margin: 2px 0 0;
}
.main-menu .header .user .control-wrap { position: absolute; top: 2px; right: 0; }
.main-menu .header .user .js__drop_down_button {
  color: var(--hs-side-text-muted);
  cursor: pointer;
}
.main-menu .header .user .control-list {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius-sm) !important;
  box-shadow: var(--henn-shadow-lg) !important;
  overflow: hidden;
  min-width: 170px;
}
.main-menu .header .user .control-item a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; color: var(--hs-text) !important;
  font-size: 13px;
}
.main-menu .header .user .control-item a:hover {
  background: var(--hs-surface-2) !important;
  color: var(--hs-primary) !important;
}

.main-menu .content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 12px 0 24px !important;
}

/* ---- Navegação ---- */
.navigation .title {
  background: transparent !important;
  color: var(--hs-side-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 18px 20px 8px !important;
  margin: 0 !important;
}

.navigation .menu { list-style: none; margin: 0 0 4px; padding: 0 10px; }

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

.navigation .menu li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 9px 12px !important;
  border-radius: var(--hs-radius-sm) !important;
  color: var(--hs-side-text) !important;
  font-size: 13.5px;
  position: relative;
}

.navigation .menu li > a .menu-icon {
  font-size: 17px !important;
  width: 20px; flex-shrink: 0; text-align: center;
  color: var(--hs-primary) !important;
  padding-top: 0 !important;
}

.navigation .menu li > a span:not(.menu-arrow) { flex: 1 1 auto; }

.navigation .menu li > a .menu-arrow {
  font-size: 11px !important;
  color: var(--hs-side-text-muted) !important;
  transition: transform .2s ease;
}

.navigation .menu li:hover > a {
  background: rgba(255, 255, 255, .05) !important;
  color: #ffffff !important;
}

/* Indicador de item ativo: barra verde à esquerda, sem preencher o fundo
   inteiro — propositalmente diferente de um "bloco colorido". */
.navigation .menu li.current > a,
.navigation .menu li.active > a {
  background: var(--hs-side-active-bg) !important;
  color: var(--hs-side-active-text) !important;
}
.navigation .menu li.current > a::before,
.navigation .menu li.active > a::before {
  content: "";
  position: absolute;
  left: -10px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hs-primary);
}

.navigation .menu li.active > a .menu-arrow { transform: rotate(180deg); }

.navigation .sub-menu { list-style: none; margin: 2px 0 4px; padding: 0 0 0 30px; }
.navigation .sub-menu li a {
  display: block !important;
  padding: 7px 10px !important;
  border-radius: var(--hs-radius-sm) !important;
  color: var(--hs-side-text-muted) !important;
  font-size: 13px !important;
}
.navigation .sub-menu li a:hover { color: #ffffff !important; background: rgba(255, 255, 255, .05) !important; }
.navigation .sub-menu li.current a { color: var(--hs-primary) !important; font-weight: 600; }

/* ===========================================================
   Backdrop (mobile) — some ao tocar fora do menu
   =========================================================== */
.hs-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 12, 20, .55);
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
html.menu-active .hs-backdrop { opacity: 1; visibility: visible; }

/* ===========================================================
   Topbar — barra flutuante em "vidro", separada da sidebar
   =========================================================== */
#testando.hs-topbar-nova {
  position: fixed !important;
  top: var(--hs-gutter) !important;
  left: calc(var(--hs-sidebar-w) + var(--hs-gutter)) !important;
  right: var(--hs-gutter) !important;
  z-index: 95 !important;
  height: var(--hs-topbar-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  background: var(--hs-surface) !important;
  background: color-mix(in srgb, var(--hs-surface) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius-lg) !important;
  box-shadow: var(--henn-shadow-md) !important;
  transition: left .28s ease, background-color .25s ease, border-color .25s ease;
}

#testando.hs-topbar-nova .pull-left,
#testando.hs-topbar-nova .pull-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
}

#testando.hs-topbar-nova .page-title { margin: 0 !important; }

#testando.hs-topbar-nova a,
#testando.hs-topbar-nova .ico-item {
  color: var(--hs-text-muted) !important;
  opacity: 1 !important;
  font-size: 18px !important;
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 !important;
  border-radius: var(--hs-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  vertical-align: middle !important;
}
#testando.hs-topbar-nova a:before,
#testando.hs-topbar-nova .ico-item:before {
  color: inherit !important;
  opacity: 1 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  top: 0 !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
#testando.hs-topbar-nova a:hover,
#testando.hs-topbar-nova .ico-item:hover {
  color: var(--hs-primary-dark) !important;
  background: var(--hs-primary-light) !important;
  border-color: var(--hs-primary-ring) !important;
}

/* Hambúrguer: só existe no layout empilhado (abaixo do breakpoint) */
#testando.hs-topbar-nova .menu-mobile-button {
  display: none !important;
}

/* Botão de tema claro/escuro: dois ícones empilhados, um some conforme
   o tema atual (controlado pelo atributo data-theme no <html>). */
.hs-theme-toggle { position: relative; }
.hs-theme-toggle i { font-size: 18px; line-height: 1; }
.hs-theme-toggle i.mdi-weather-night { display: none; }
:root[data-theme="dark"] .hs-theme-toggle i.mdi-weather-sunny { display: none; }
:root[data-theme="dark"] .hs-theme-toggle i.mdi-weather-night { display: inline; }

.main-content {
  padding-top: calc(var(--hs-topbar-h) + var(--hs-gutter) * 2) !important;
}

/* ===========================================================
   Conteúdo — cards planos com acento colorido na borda
   =========================================================== */
.main-content {
  margin-left: calc(var(--hs-sidebar-w) + var(--hs-gutter)) !important;
  margin-right: var(--hs-gutter) !important;
  padding-bottom: 40px;
  min-height: calc(100vh - var(--hs-topbar-h));
}

.box-content.card,
.card.box-content {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius) !important;
  box-shadow: none !important;
  margin-bottom: var(--hs-gutter) !important;
  overflow: hidden;
}

.box-title {
  position: relative !important;
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 16px 20px 16px 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--hs-border) !important;
  display: flex !important;
  align-items: center !important;
}
.box-title::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--hs-primary);
}
.box-title .menu-icon { color: var(--hs-primary) !important; margin-right: 8px; }

.main-content .box-content:not(.card) { padding: 20px; color: var(--hs-text); }

/* ---- Grid ---- */
.row { display: flex !important; flex-wrap: wrap !important; margin-left: -10px !important; margin-right: -10px !important; }
.row.small-spacing { margin-left: -6px !important; margin-right: -6px !important; }
.row > [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; }
.row.small-spacing > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }

.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 480px) {
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
}

/* ===========================================================
   Botões — pílula, preenchimento sólido
   =========================================================== */
.btn, .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-default {
  border-radius: var(--hs-pill) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: filter .15s ease, background-color .15s ease !important;
}
.btn:hover { filter: brightness(.95); }

.btn-primary { background: var(--hs-primary) !important; color: #fff !important; }
.btn-success { background: var(--hs-success) !important; color: #fff !important; }
.btn-danger  { background: var(--hs-danger) !important; color: #fff !important; }
.btn-warning { background: var(--hs-warning) !important; color: #fff !important; }
.btn-info    { background: var(--hs-info) !important; color: #fff !important; }
.btn-default {
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  border-color: var(--hs-border) !important;
}
.btn-default:hover { background: var(--hs-surface-2) !important; }

/* ===========================================================
   Formulários
   =========================================================== */
.form-control, .adminputbox, .form-controlv,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="tel"],
select, textarea {
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-border-2) !important;
  border-radius: var(--hs-radius-sm) !important;
  box-shadow: none !important;
}
.form-control:focus, .adminputbox:focus, .form-controlv:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--hs-primary) !important;
  box-shadow: 0 0 0 3px var(--hs-primary-ring) !important;
  outline: none !important;
}
label { color: var(--hs-text); }

/* ===========================================================
   Tabelas
   =========================================================== */
.table { color: var(--hs-text); }
.table > thead > tr > th {
  border-bottom: 2px solid var(--hs-border) !important;
  color: var(--hs-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table > tbody > tr > td,
.table > tbody > tr > th { border-top: 1px solid var(--hs-border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--hs-surface-2) !important; }
.table-hover > tbody > tr:hover { background-color: var(--hs-primary-light) !important; }
table.tbl-qa { background: var(--hs-surface-2) !important; }
table.tbl-qa .table-row td { background: var(--hs-surface) !important; }

/* ===========================================================
   Badges / labels / alertas
   =========================================================== */
.badge { border-radius: var(--hs-pill) !important; }
.label { border-radius: var(--hs-radius-sm) !important; font-weight: 600 !important; }
.label-success, .badge-success { background: var(--hs-success) !important; }
.label-danger, .badge-danger   { background: var(--hs-danger) !important; }
.label-warning, .badge-warning { background: var(--hs-warning) !important; }
.label-info, .badge-info       { background: var(--hs-info) !important; }
.label-default                 { background: var(--hs-text-faint) !important; }

.alert { border-radius: var(--hs-radius-sm) !important; border: 1px solid transparent !important; }
.alert-success { background: #eafbf0 !important; color: #166534 !important; }
.alert-danger  { background: #fde9ec !important; color: #991b3a !important; }
.alert-warning { background: #fef6e7 !important; color: #92570a !important; }
.alert-info    { background: #e9f1fe !important; color: #1e4ba0 !important; }
:root[data-theme="dark"] .alert-success { background: rgba(22,163,74,.15) !important; color: #86efac !important; }
:root[data-theme="dark"] .alert-danger  { background: rgba(225,24,63,.15) !important; color: #fca5b5 !important; }
:root[data-theme="dark"] .alert-warning { background: rgba(217,119,6,.15) !important; color: #fcd34d !important; }
:root[data-theme="dark"] .alert-info    { background: rgba(37,99,235,.15) !important; color: #93c5fd !important; }

/* ===========================================================
   Paginação / abas / modais / breadcrumb / painéis
   =========================================================== */
.pagination > li > a, .pagination > li > span {
  border-radius: var(--hs-radius-sm) !important;
  margin: 0 3px !important;
  border: 1px solid var(--hs-border) !important;
  color: var(--hs-text) !important;
  background: var(--hs-surface) !important;
}
.pagination > .active > a, .pagination > .active > span {
  background: var(--hs-primary) !important;
  border-color: var(--hs-primary) !important;
  color: #fff !important;
}

.nav-tabs { border-bottom: 1px solid var(--hs-border) !important; }
.nav-tabs > li > a {
  border-radius: var(--hs-radius-sm) var(--hs-radius-sm) 0 0 !important;
  color: var(--hs-text-muted) !important;
  border: 1px solid transparent !important;
}
.nav-tabs > li.active > a {
  color: var(--hs-primary) !important;
  border-color: var(--hs-border) var(--hs-border) transparent !important;
  background: var(--hs-surface) !important;
}

.modal-content {
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  border-radius: var(--hs-radius) !important;
  border: 1px solid var(--hs-border) !important;
}
.modal-header, .modal-footer { border-color: var(--hs-border) !important; }

.breadcrumb {
  background: transparent !important;
  padding: 0 0 12px !important;
  color: var(--hs-text-muted);
}
.breadcrumb > li + li::before { color: var(--hs-text-faint); }

.panel {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius) !important;
  box-shadow: none !important;
}
.panel-heading {
  border-radius: var(--hs-radius) var(--hs-radius) 0 0 !important;
  background: var(--hs-surface-2) !important;
  border-bottom: 1px solid var(--hs-border) !important;
  color: var(--hs-text) !important;
}
.panel-footer {
  background: var(--hs-surface-2) !important;
  border-top: 1px solid var(--hs-border) !important;
}

/* ===========================================================
   Responsivo
   =========================================================== */
@media (max-width: 1100px) {
  #testando.hs-topbar-nova { left: calc(var(--hs-sidebar-w) + 16px) !important; right: 16px !important; top: 16px !important; }
  .main-content { margin-right: 16px !important; }
}

@media (max-width: 1023.98px) {
  .main-menu { transform: translateX(-100%) !important; }
  html.menu-active .main-menu { transform: translateX(0) !important; }
  .main-menu .header .button-close { display: inline-flex; }

  #testando.hs-topbar-nova {
    left: 16px !important;
    right: 16px !important;
    top: 16px !important;
  }
  #testando.hs-topbar-nova .menu-mobile-button { display: inline-flex !important; }

  .main-content {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

@media (max-width: 639.98px) {
  #testando.hs-topbar-nova { border-radius: var(--hs-radius) !important; padding: 0 10px !important; }
  .main-content { margin-left: 10px !important; margin-right: 10px !important; }
  .box-title { padding: 14px 16px 14px 20px !important; font-size: 14px !important; }
}

@media (min-width: 1680px) {
  .main-content { max-width: 1520px; }
}

@media print {
  .main-menu, #testando.hs-topbar-nova, .hs-backdrop { display: none !important; }
  .main-content { margin: 0 !important; padding-top: 0 !important; }
}