/* ============================================================
   Gmarket · Camada de tema (design system — identidade encarte)
   Carregada DEPOIS do material-dashboard.css para reskin global.
   Não altera marcação/JS: apenas estilo. Reversível (1 link).
   Identidade: vermelho da marca (#9E1B1B) + amarelo de oferta (#FFC107),
   base creme, Poppins nos títulos/botões, Inter no corpo. Direção "encarte".
   ============================================================ */

:root {
  /* PRIMÁRIA — vermelho de encarte (vivo, família da logo) — não muito escuro */
  --gm-primary: #C81E24;
  --gm-primary-600: #A5171D;
  --gm-primary-700: #7E1116;
  --gm-primary-050: #FDECEC;
  --gm-primary-100: #F8D5D6;

  /* ACENTO — amarelo de oferta (CTAs de destaque, selos de promoção) */
  --gm-accent: #FFC107;
  --gm-accent-600: #E5A800;
  --gm-accent-050: #FFF6DC;
  --gm-accent-ink: #3A2A00;

  /* DANGER — vermelho destrutivo, mais vivo p/ distinguir da marca vinho */
  --gm-danger: #E11D2A;
  --gm-danger-600: #C40711;

  /* SUCESSO / PREÇO — verde */
  --gm-success: #15803D;
  --gm-success-050: #E7F4EC;

  /* NEUTROS — base creme quente de encarte */
  --gm-bg: #FFF9F0;
  --gm-surface: #FFFFFF;
  --gm-surface-2: #FBF3E7;
  --gm-border: #ECE0D1;
  --gm-border-strong: #E0CFB9;
  --gm-text: #241A17;
  --gm-muted: #8C7B6E;

  /* Geometria — cantos generosos (encarte) */
  --gm-radius: 20px;
  --gm-radius-sm: 12px;

  /* Sombras quentes (viés vermelho) */
  --gm-shadow-sm: 0 2px 8px rgba(94, 15, 15, 0.06);
  --gm-shadow: 0 10px 30px rgba(94, 15, 15, 0.10);
  --gm-shadow-lg: 0 22px 50px rgba(94, 15, 15, 0.16);
  --gm-transition: 0.18s ease;

  /* Tipografia */
  --gm-font-display: 'Poppins', system-ui, 'Segoe UI', Roboto, sans-serif;
  --gm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Base / tipografia ===== */

/* body#body / body.bg-gray-250 vencem a classe utilitária cinza do template
   (senão o body fica cinza e aparece abaixo do conteúdo creme em toda tela) */

html,
body,
body#body,
body.bg-gray-250 {
  background-color: var(--gm-bg) !important;
  color: var(--gm-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.main-content { background-color: transparent !important; }

h1, h2, h3, h4, h5, h6 { color: var(--gm-text); letter-spacing: -0.02em; }

a { transition: color var(--gm-transition); }

/* ===== Cards ===== */

.card {
  border: 1px solid var(--gm-border) !important;
  border-radius: var(--gm-radius) !important;
  box-shadow: var(--gm-shadow) !important;
  background: var(--gm-surface);
  transition: box-shadow var(--gm-transition), transform var(--gm-transition);
}

.card { transition: box-shadow var(--gm-transition), transform var(--gm-transition) !important; }

.card:hover { box-shadow: var(--gm-shadow-lg) !important; transform: translateY(-2px); }

.card .card-header {
  background: transparent !important;
  border-bottom: 0 !important;
  border-top-left-radius: var(--gm-radius) !important;
  border-top-right-radius: var(--gm-radius) !important;
}

.card .card-footer {
  background: transparent !important;
  border-top: 0 !important;
}

/* ===== Botões ===== */

.btn {
  border-radius: var(--gm-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: transform var(--gm-transition), box-shadow var(--gm-transition),
    background-color var(--gm-transition), border-color var(--gm-transition), filter var(--gm-transition) !important;
  text-transform: none !important;
}

.btn:hover { transform: translateY(-1px); }

.btn:active { transform: translateY(1px); }

/* Primário (classe custom antiga "indigo" → vermelho de marca, com profundidade) */

.btn-indigo {
  background-color: var(--gm-primary) !important;
  border-radius: var(--gm-radius-sm) !important;
  color: #fff !important;
  box-shadow: 0 6px 0 var(--gm-primary-700) !important;
  transition: background-color var(--gm-transition), transform var(--gm-transition),
    box-shadow var(--gm-transition) !important;
}

.btn-indigo:hover,
.btn-indigo:focus {
  background-color: var(--gm-primary-600) !important;
  transform: translateY(-1px);
}

.btn-indigo:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--gm-primary-700) !important; }

/* Gradientes de marca do tema */

.bg-gradient-primary,
.btn.bg-gradient-primary {
  background-image: linear-gradient(135deg, var(--gm-primary), var(--gm-primary-700)) !important;
}

.bg-gradient-danger,
.btn.bg-gradient-danger {
  background-image: linear-gradient(135deg, var(--gm-danger), var(--gm-danger-600)) !important;
}

.btn.bg-gradient-primary:hover { box-shadow: 0 10px 24px rgba(158, 27, 27, 0.30); }

.btn.bg-gradient-danger:hover { box-shadow: 0 10px 24px rgba(225, 29, 42, 0.30); }

.btn-outline-primary {
  border-color: var(--gm-primary) !important;
  color: var(--gm-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--gm-primary) !important;
  color: #fff !important;
}

.text-primary { color: var(--gm-primary) !important; }

.text-danger { color: var(--gm-danger) !important; }

.text-success { color: var(--gm-success) !important; }

/* ===== Campos de formulário ===== */

.form-control,
.form-select,
.form-input,
.form-textarea {
  border: 1.5px solid var(--gm-border-strong) !important;
  border-radius: var(--gm-radius-sm) !important;
  padding: 0.62rem 0.85rem !important;
  color: var(--gm-text) !important;
  background-color: #fff !important;
  transition: border-color var(--gm-transition), box-shadow var(--gm-transition) !important;
}

.form-control:focus,
.form-select:focus,
.form-input:focus,
.form-textarea:focus {
  border-color: var(--gm-primary) !important;
  box-shadow: 0 0 0 3px var(--gm-primary-100) !important;
  outline: none !important;
}

.form-label,
label.form-check-label { color: #4A392F; font-weight: 600; }

.form-check-input:checked {
  background-color: var(--gm-primary) !important;
  border-color: var(--gm-primary) !important;
}

/* ===== <select> com .form-control ===== */

/* Vários <select> usam a classe .form-control (de input de texto) em vez de
   .form-select, então perdiam a seta do dropdown e pareciam um input comum
   ("dropdown dentro de um input"). Restaura a aparência padrão de select. */

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238C7B6E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

select.form-control[multiple] {
  background-image: none;
  padding-right: 0.85rem !important;
}

/* ===== Number inputs (spinner) ===== */

/* Padroniza altura/alinhamento e deixa as setas discretas dentro do campo. */

input[type="number"].form-control,
input[type="number"].form-select {
  text-align: left;
  -moz-appearance: textfield;
}

input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
  height: 1.6rem;
  margin-left: 4px;
}

/* ===== vue-select (v-select) — padroniza com os campos .form-select ===== */

/* Muitas telas aplicam `class="form-control style-chooser"` no <v-select>, o que
   desenhava uma caixa (form-control) POR FORA da caixa interna do vue-select
   (.vs__dropdown-toggle) — o efeito de "dropdown dentro de um input". Aqui o
   wrapper fica transparente e a .vs__dropdown-toggle passa a ser a única caixa,
   estilizada igual aos demais campos. */

.v-select { font-size: 0.88rem; }

.v-select.form-control,
.v-select.form-select {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--gm-radius-sm) !important;
}

.v-select .vs__dropdown-toggle {
  border: 1.5px solid var(--gm-border-strong);
  border-radius: var(--gm-radius-sm);
  background: #fff;
  padding: 0.18rem 0.4rem 0.4rem;
  min-height: 42px;
  transition: border-color var(--gm-transition), box-shadow var(--gm-transition);
}

.v-select .vs__dropdown-toggle:focus-within,
.v-select.vs--open .vs__dropdown-toggle {
  border-color: var(--gm-primary);
  box-shadow: 0 0 0 3px var(--gm-primary-100);
}

.v-select.vs--open .vs__dropdown-toggle {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.v-select .vs__search,
.v-select .vs__search:focus {
  margin: 4px 0 0;
  padding: 0 6px;
  color: var(--gm-text);
}

.v-select .vs__selected {
  background: var(--gm-primary-050);
  border: 1px solid var(--gm-primary-100);
  color: var(--gm-primary-700);
  border-radius: 8px;
  padding: 2px 8px;
  margin: 4px 4px 0 0;
  font-weight: 600;
}

.v-select .vs__deselect { fill: var(--gm-primary-600); margin-left: 6px; }

.v-select .vs__actions { padding-top: 4px; }

.v-select .vs__open-indicator,
.v-select .vs__clear { fill: var(--gm-muted); }

.v-select .vs__dropdown-menu {
  border: 1.5px solid var(--gm-primary);
  border-top: none;
  border-radius: 0 0 var(--gm-radius-sm) var(--gm-radius-sm);
  box-shadow: var(--gm-shadow);
  padding: 6px;
}

.v-select .vs__dropdown-option {
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--gm-text);
  white-space: normal;
}

.v-select .vs__dropdown-option--highlight {
  background: var(--gm-primary);
  color: #fff;
}

.v-select .vs__dropdown-option--selected {
  background: var(--gm-primary-050);
  color: var(--gm-primary-700);
}

.v-select .vs__no-options { color: var(--gm-muted); padding: 10px; }

/* ===== Tabelas ===== */

.table > thead th,
.table thead th {
  text-transform: uppercase;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  color: var(--gm-muted) !important;
  font-weight: 700 !important;
  background: var(--gm-surface-2) !important;
  border-bottom: 1px solid var(--gm-border) !important;
}

.table tbody tr { transition: background-color var(--gm-transition); }

.table tbody tr:hover { background-color: var(--gm-primary-050) !important; }

.table td, .table th { border-color: #F1E8DC !important; }

/* ===== Badges ===== */

.badge { border-radius: 999px !important; font-weight: 600; letter-spacing: 0.02em; }

/* ===== Topbar (navbar principal) ===== */

.navbar-main {
  border-radius: var(--gm-radius) !important;
  box-shadow: var(--gm-shadow-sm) !important;
  background: rgba(255, 255, 255, 0.80) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
}

/* ===== Modais ===== */

.modal-content {
  border: 0 !important;
  border-radius: var(--gm-radius) !important;
  box-shadow: var(--gm-shadow-lg) !important;
}

.modal-header, .modal-footer { border-color: var(--gm-border) !important; }

/* ===== Diálogo de confirmação unificado ===== */

.gm-confirm .modal-dialog { max-width: 432px; }

.gm-confirm .modal-content {
  position: relative;
  border: 1px solid var(--gm-border) !important;
  border-radius: var(--gm-radius) !important;
  box-shadow: var(--gm-shadow-lg) !important;
  padding: 2.1rem 1.75rem 1.6rem;
  overflow: hidden;
  text-align: center;
}

.gm-confirm .modal-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gm-primary), var(--gm-primary-600));
}

.gm-confirm--warning .modal-content::before {
  background: linear-gradient(90deg, var(--gm-accent), var(--gm-accent-600));
}

.gm-confirm__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--gm-surface-2);
  color: var(--gm-muted);
  cursor: pointer;
  transition: background var(--gm-transition), color var(--gm-transition);
}

.gm-confirm__close:hover { background: var(--gm-primary-050); color: var(--gm-primary); }

.gm-confirm__close svg { width: 17px; height: 17px; }

.gm-confirm__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.35rem auto 1.05rem;
}

.gm-confirm__icon svg { width: 28px; height: 28px; }

.gm-confirm__icon.is-danger { background: var(--gm-primary-050); color: var(--gm-danger); }

.gm-confirm__icon.is-warning { background: var(--gm-accent-050); color: #9A6A00; }

.gm-confirm__title {
  font-family: var(--gm-font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gm-text);
  margin: 0;
}

.gm-confirm__text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gm-muted);
  margin: 0.5rem auto 0;
  max-width: 32ch;
}

.gm-confirm__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.7rem;
}

.gm-confirm__actions .gm-btn {
  flex: 1 1 0;
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

/* entrada suave */

.gm-confirm.fade .modal-dialog {
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease-out;
}

.gm-confirm.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gm-confirm.fade .modal-dialog { transition: none; transform: none; opacity: 1; }
}

/* ===== Dropdowns ===== */

.dropdown-menu {
  border: 1px solid var(--gm-border) !important;
  border-radius: var(--gm-radius-sm) !important;
  box-shadow: var(--gm-shadow) !important;
}

/* ===== Scrollbar moderna ===== */

* {
  scrollbar-width: thin;
  scrollbar-color: #D8C7B2 transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }

*::-webkit-scrollbar-thumb {
  background: #D8C7B2;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background: #C4AE93; background-clip: content-box; }

/* ============================================================
   SIDEBAR (barra lateral) — nova identidade (vermelho vinho profundo)
   Reskin global do #sidenav-main sem tocar marcação/JS.
   ============================================================ */

:root {
  --gm-sidebar-bg: #FFFFFF;
  --gm-sidebar-ink: #5A4A3E;
  --gm-sidebar-ink-strong: #241A17;
}

/* Sidebar CLEAN (clara) com toques de vermelho */

#sidenav-main.sidenav {
  background: var(--gm-sidebar-bg) !important;
  border: 0 !important;
  border-right: 1px solid var(--gm-border) !important;
  box-shadow: var(--gm-shadow-sm) !important;
}

/* barra lateral clara → scrollbar discreta */

#sidenav-main.sidenav::-webkit-scrollbar-thumb { background: #E0CFB9; background-clip: content-box; }

/* separadores e cabeçalho */

#sidenav-main hr.horizontal.dark,
#sidenav-main hr { background-color: var(--gm-border) !important; opacity: 1; border: 0; }

#sidenav-main .sidenav-header img { filter: none; }

/* ícone de fechar (mobile) escuro sobre fundo claro */

#sidenav-main #iconSidenav.text-dark { color: var(--gm-muted) !important; opacity: 1 !important; }

/* itens de navegação */

#sidenav-main .navbar-nav .nav-item { margin-bottom: 9px !important; }

#sidenav-main .nav-link {
  color: var(--gm-sidebar-ink) !important;
  border-radius: 11px !important;
  padding: 11px 14px !important;
  margin: 0 10px !important;
  font-weight: 500 !important;
  transition: background-color var(--gm-transition), color var(--gm-transition) !important;
}

#sidenav-main .nav-link .nav-link-text,
#sidenav-main .nav-link i { color: inherit !important; }

#sidenav-main .nav-link i { opacity: 0.92 !important; }

/* ícones SVG de traço fino da sidebar */

#sidenav-main .nav-link .nav-svg-icon {
  width: 19px;
  height: 19px;
  flex: none;
  color: inherit;
  stroke: currentColor;
  opacity: 0.95;
}

#sidenav-main .nav-link { display: flex !important; align-items: center; }

#sidenav-main .nav-link .nav-link-text { margin-left: 0 !important; }

#sidenav-main .nav-link { color: var(--gm-sidebar-ink) !important; }

#sidenav-main .nav-link:hover {
  background: var(--gm-primary-050) !important;
  color: var(--gm-primary) !important;
  transform: none !important;
}

/* estado ativo — pílula vermelha suave + barra de marca + ícone vermelho */

#sidenav-main .nav-link.active {
  background: var(--gm-primary-050) !important;
  color: var(--gm-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  position: relative;
}

#sidenav-main .nav-link.active i,
#sidenav-main .nav-link.active .nav-svg-icon,
#sidenav-main .nav-link:hover i,
#sidenav-main .nav-link:hover .nav-svg-icon { color: var(--gm-primary) !important; }

#sidenav-main .nav-link.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--gm-primary);
}

/* item "selecionado" do rodapé (changelog) */

#sidenav-main .nav-link.selected {
  background: var(--gm-primary-050) !important;
  color: var(--gm-primary) !important;
}

#sidenav-main .nav-footer { border-top: 1px solid var(--gm-border); padding-top: 6px; }

/* ============================================================
   Refinos de topbar/dropdown herdados do Material Dashboard.
   ============================================================ */

.navbar-main .nav-link,
.navbar-main .breadcrumb-item a { color: var(--gm-text) !important; }

/* item de dropdown do usuário: hover de marca consistente (vermelho) */

.dropdown-menu .block:hover,
.dropdown a.block:hover { background-color: var(--gm-primary) !important; color: #fff !important; }

/* ============================================================
   GEOMETRIA & DENSIDADE
   Sidebar colada/reta + tudo mais compacto.
   ============================================================ */

#sidenav-main.sidenav {
  margin: 0 !important;
  border-radius: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 15.625rem !important;
  max-width: 15.625rem !important;
}

#sidenav-main .sidenav-header {
  padding: 1.3rem 0.75rem 0.6rem !important;
  margin-bottom: 0.6rem !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#sidenav-main .sidenav-header > .align-middle { width: 100% !important; text-align: center !important; }

#sidenav-main .sidenav-header a { display: inline-block; }

#sidenav-main .sidenav-header img { max-height: 52px; width: auto; margin: 0 auto; display: block; }

@media (min-width: 1200px) {
  #sidenav-main.sidenav {
    transform: none !important;
    width: 15.625rem !important;
    max-width: 15.625rem !important;
  }
  #sidenav-main .nav-link-text {
    opacity: 1 !important;
    width: auto !important;
    display: inline !important;
  }
  #sidenav-main .sidenav-header,
  #sidenav-main .sidenav-header img { opacity: 1 !important; }
  .sidenav.fixed-start + .main-content { margin-left: 15.625rem !important; }
}

/* --- Topbar enxuta e encostada ao topo --- */

.navbar.navbar-main {
  margin: 0.75rem 1rem 1.1rem 1rem !important;
  padding: 0.35rem 0.85rem !important;
  min-height: unset !important;
}

/* --- Densidade global --- */

h1, .h1 { font-size: 1.85rem !important; }

h2, .h2 { font-size: 1.45rem !important; }

h3, .h3 { font-size: 1.2rem !important; }

h4, .h4 { font-size: 1.05rem !important; }

h5, .h5 { font-size: 0.92rem !important; }

h6, .h6 { font-size: 0.8rem !important; }

.main-content > div > .px-4 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

/* Cards mais compactos */

.card > .card-body,
.card .card-body { padding: 1.1rem 1.25rem !important; }

.card .card-header { padding: 1rem 1.25rem 0.25rem !important; }

.card { margin-bottom: 1.25rem !important; }

/* Botões — dimensões moderadas (grandes p/ CTA, mas sem estourar tabelas densas) */

.btn { padding: 0.55rem 1.1rem !important; font-size: 0.86rem !important; }

.btn.btn-sm { padding: 0.38rem 0.75rem !important; font-size: 0.78rem !important; }

.btn.btn-lg { padding: 0.8rem 1.6rem !important; font-size: 1rem !important; }

/* botões de ícone / de ação em tabelas: compactos */

.btn.btn-icon-only, .btn.btn-icon,
.btn.btn-icon-only.btn-sm { padding: 0.42rem 0.55rem !important; line-height: 1; }

.btn i { font-size: 0.95em; }

/* Inputs compactos */

.form-control, .form-select {
  padding: 0.5rem 0.8rem !important;
  font-size: 0.88rem !important;
}

/* Tabelas compactas */

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

.table > :not(caption) > * > * { padding: 0.58rem 0.75rem !important; }

.table > thead th, .table thead th { font-size: 0.66rem !important; }

/* Badges compactos */

.badge { padding: 0.35em 0.7em !important; font-size: 0.7rem !important; }

.nav-link i, .btn i, .card-header i { line-height: 1; }

/* ============================================================
   TIPOGRAFIA — Inter no corpo, Poppins nos títulos/botões
   (NÃO tocar fontes dos cartazes/editor — só o "chrome" da app)
   ============================================================ */

/* Corpo: Inter */

body,
.main-content,
.navbar, .card, .modal-content, .dropdown-menu,
.form-control, .form-select, .form-label,
input, select, textarea, .table, p, .gm-page-sub, .gm-card .desc {
  font-family: var(--gm-font-body) !important;
}

/* Display: Poppins (títulos, botões, KPIs, badges, marca) — peso e arredondado da logo */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .badge, .navbar-brand, .gm-btn,
.gm-page-title, .gm-card-title, .gm-kpi-value, .gm-kpi-label, .gm-badge,
.gm-price, .navbar-main .breadcrumb-item {
  font-family: var(--gm-font-display) !important;
}

/* --- Títulos de página: fortes, escuros, com respiro --- */

.main-content h1,
.main-content .card h1 { font-weight: 700 !important; letter-spacing: -0.02em; }

.main-content .row > h1,
.main-content h1.text-2xl,
.main-content h1.text-primary {
  color: var(--gm-text) !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.85rem !important;
  padding-left: 0.15rem !important;
}

.main-content > div > .px-4 { padding-left: 1.6rem !important; padding-right: 1.6rem !important; padding-top: 0.6rem !important; }

/* --- Botões: repaginados (todas as variantes) — profundidade nos sólidos --- */

.btn {
  border-radius: var(--gm-radius-sm) !important;
  font-weight: 600 !important;
  border-width: 1.5px !important;
}

.btn-primary, .btn.bg-primary {
  background: var(--gm-primary) !important; border-color: var(--gm-primary) !important; color: #fff !important;
  box-shadow: 0 6px 0 var(--gm-primary-700) !important;
}

.btn-primary:hover { background: var(--gm-primary-600) !important; }

.btn-primary:active { box-shadow: 0 2px 0 var(--gm-primary-700) !important; }

.btn-info { background: var(--gm-primary) !important; border-color: var(--gm-primary) !important; color: #fff !important; }

.btn-info:hover { background: var(--gm-primary-600) !important; }

.btn-secondary { background: #F1E8DC !important; border-color: var(--gm-border) !important; color: #4A392F !important; }

.btn-secondary:hover { background: #E9DCC9 !important; color: var(--gm-text) !important; }

.btn-success { background: var(--gm-success) !important; border-color: var(--gm-success) !important; color: #fff !important; box-shadow: 0 6px 0 #0F5C2C !important; }

.btn-success:hover { background: #12833c !important; }

.btn-success:active { box-shadow: 0 2px 0 #0F5C2C !important; }

.btn-danger { background: var(--gm-danger) !important; border-color: var(--gm-danger) !important; color: #fff !important; box-shadow: 0 6px 0 var(--gm-danger-600) !important; }

.btn-danger:hover { background: var(--gm-danger-600) !important; }

.btn-danger:active { box-shadow: 0 2px 0 var(--gm-danger-600) !important; }

/* Warning = amarelo de oferta */

.btn-warning { background: var(--gm-accent) !important; border-color: var(--gm-accent) !important; color: var(--gm-accent-ink) !important; box-shadow: 0 6px 0 var(--gm-accent-600) !important; }

.btn-warning:hover { filter: brightness(1.03); }

.btn-warning:active { box-shadow: 0 2px 0 var(--gm-accent-600) !important; }

/* Outline */

.btn-outline-primary { border-color: var(--gm-primary) !important; color: var(--gm-primary) !important; background: transparent !important; }

.btn-outline-primary:hover { background: var(--gm-primary) !important; color: #fff !important; }

.btn-outline-secondary { border-color: var(--gm-border-strong) !important; color: #4A392F !important; background: #fff !important; }

.btn-outline-secondary:hover { border-color: var(--gm-primary) !important; color: var(--gm-primary) !important; background: var(--gm-primary-050) !important; }

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

.btn-outline-danger:hover { background: var(--gm-danger) !important; color: #fff !important; }

/* --- Badges: pílulas suaves de marca --- */

.badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .02em; }

.badge.bg-success, .badge.badge-success { background: var(--gm-success-050) !important; color: var(--gm-success) !important; }

.badge.bg-danger,  .badge.badge-danger  { background: rgba(225,29,42,.12) !important; color: var(--gm-danger) !important; }

.badge.bg-warning, .badge.badge-warning { background: var(--gm-accent) !important; color: var(--gm-accent-ink) !important; }

.badge.bg-info,    .badge.badge-info,
.badge.bg-primary, .badge.badge-primary { background: var(--gm-primary-050) !important; color: var(--gm-primary) !important; }

.badge.bg-secondary { background: #F1E8DC !important; color: #4A392F !important; }

.badge.bg-gradient-primary { background-image: linear-gradient(135deg, var(--gm-primary), var(--gm-primary-700)) !important; color: #fff !important; }

/* --- Tabelas: cabeçalho claro e discreto --- */

.table > thead > tr > th,
.table thead th {
  background: var(--gm-surface-2) !important;
  color: var(--gm-muted) !important;
  text-transform: uppercase !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--gm-border) !important;
}

.table thead.bg-gradient-primary,
.table thead.bg-gradient-primary th,
.table thead.text-white,
.table thead.text-white th,
.table thead .text-white {
  background-image: none !important;
  background: var(--gm-surface-2) !important;
  color: var(--gm-muted) !important;
}

.table tbody td { color: var(--gm-text); border-color: #F1E8DC !important; }

.table tbody tr:hover { background: var(--gm-primary-050) !important; }

/* ============================================================
   CLASSES DE COMPONENTE DO DESIGN SYSTEM (.gm-*)
   Usadas diretamente nas telas reescritas.
   ============================================================ */

.gm-page { padding: 0.35rem 0.35rem 1.6rem; }

.gm-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; }

.gm-page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-text); margin: 0; line-height: 1.05; }

.gm-page-sub { font-size: 0.83rem; color: var(--gm-muted); margin: 0.2rem 0 0; }

.gm-card { background: #fff; border: 1px solid var(--gm-border); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow); }

.gm-card-pad { padding: 1.15rem 1.25rem; }

.gm-card-title { font-size: 0.95rem; font-weight: 700; color: var(--gm-text); margin: 0 0 0.15rem; display: flex; align-items: center; gap: 0.5rem; }

.gm-card-title svg { width: 17px; height: 17px; color: var(--gm-primary); }

/* Preço — destaque de varejo */

.gm-price { font-family: var(--gm-font-display); font-weight: 700; color: var(--gm-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* KPI */

.gm-kpi { display: flex; align-items: center; gap: 0.9rem; background: #fff; border: 1px solid var(--gm-border); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow); padding: 1rem 1.1rem; transition: box-shadow 0.18s, transform 0.18s; height: 100%; }

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

.gm-kpi-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(135deg, var(--gm-primary), var(--gm-primary-700)); box-shadow: 0 6px 14px rgba(158, 27, 27, 0.30); }

.gm-kpi-ico.accent { background: linear-gradient(135deg, var(--gm-accent), var(--gm-accent-600)); box-shadow: 0 6px 14px rgba(255, 193, 7, 0.32); color: var(--gm-accent-ink); }

.gm-kpi-ico.accent i, .gm-kpi-ico.accent svg { color: var(--gm-accent-ink); }

.gm-kpi-ico svg { width: 22px; height: 22px; }

.gm-kpi-ico i { font-size: 19px; color: #fff; }

.gm-kpi-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gm-muted); line-height: 1.2; }

.gm-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--gm-text); line-height: 1.1; font-variant-numeric: tabular-nums; }

.gm-kpi-msg { font-size: 0.72rem; color: var(--gm-muted); margin-top: 0.1rem; }

/* Botões do design system */

.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.52rem 1rem; border-radius: var(--gm-radius-sm); font-size: 0.85rem; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.16s, box-shadow 0.16s, background-color 0.16s, border-color 0.16s, color 0.16s, filter 0.16s; text-decoration: none; line-height: 1.2; }

.gm-btn:hover { transform: translateY(-1px); }

.gm-btn:active { transform: translateY(1px); }

.gm-btn svg { width: 16px; height: 16px; }

.gm-btn-primary { background: var(--gm-primary); color: #fff; box-shadow: 0 6px 0 var(--gm-primary-700); }

.gm-btn-primary:hover { background: var(--gm-primary-600); color: #fff; }

.gm-btn-primary:active { box-shadow: 0 2px 0 var(--gm-primary-700); }

.gm-btn-accent { background: var(--gm-accent); color: var(--gm-accent-ink); box-shadow: 0 6px 0 var(--gm-accent-600); }

.gm-btn-accent:hover { color: var(--gm-accent-ink); filter: brightness(1.03); }

.gm-btn-accent:active { box-shadow: 0 2px 0 var(--gm-accent-600); }

.gm-btn-outline { background: #fff; border-color: var(--gm-primary); color: var(--gm-primary); }

.gm-btn-outline:hover { background: var(--gm-primary); color: #fff; }

.gm-btn-ghost { background: var(--gm-surface-2); border-color: var(--gm-border); color: #4A392F; }

.gm-btn-ghost:hover { border-color: var(--gm-primary); color: var(--gm-primary); }

.gm-btn-outline-accent { background: #fff; border-color: var(--gm-accent-600); color: #9a6a00; }

.gm-btn-outline-accent:hover { background: var(--gm-accent); color: var(--gm-accent-ink); }

.gm-btn-danger { background: var(--gm-danger); color: #fff; box-shadow: 0 6px 0 var(--gm-danger-600); }

.gm-btn-danger:hover { background: var(--gm-danger-600); color: #fff; }

.gm-btn-danger:active { box-shadow: 0 2px 0 var(--gm-danger-600); }

.gm-btn-sm { padding: 0.36rem 0.7rem; font-size: 0.78rem; border-radius: 9px; }

/* Botão de ação (ícone) em tabelas */

.gm-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--gm-border); background: #fff; color: var(--gm-primary); transition: all 0.16s; cursor: pointer; }

.gm-act:hover { background: var(--gm-primary); border-color: var(--gm-primary); color: #fff; transform: translateY(-1px); }

.gm-act.danger { color: var(--gm-danger); }

.gm-act.danger:hover { background: var(--gm-danger); border-color: var(--gm-danger); color: #fff; }

.gm-act svg { width: 15px; height: 15px; }

/* Tabela do design system */

.gm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }

.gm-table thead th { text-align: left; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; color: var(--gm-muted); font-weight: 700; padding: 0.6rem 0.8rem; background: var(--gm-surface-2); border-bottom: 1px solid var(--gm-border); white-space: nowrap; }

.gm-table tbody td { padding: 0.6rem 0.8rem; border-bottom: 1px solid #F1E8DC; color: var(--gm-text); vertical-align: middle; }

.gm-table tbody tr:last-child td { border-bottom: 0; }

.gm-table tbody tr:hover { background: var(--gm-primary-050); }

.gm-table .num { font-variant-numeric: tabular-nums; font-weight: 700; }

.gm-table .muted { color: var(--gm-muted); font-size: 0.78rem; }

/* Badge do design system */

.gm-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3em 0.75em; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: .02em; }

.gm-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.gm-badge.ok { background: var(--gm-success-050); color: var(--gm-success); }

.gm-badge.warn { background: rgba(217, 139, 0, 0.16); color: #a06400; }

.gm-badge.danger { background: rgba(225, 29, 42, 0.12); color: var(--gm-danger); }

.gm-badge.info { background: var(--gm-primary-050); color: var(--gm-primary); }

/* Selo de oferta — amarelo sólido (linguagem de encarte) */

.gm-badge.offer { background: var(--gm-accent); color: var(--gm-accent-ink); text-transform: uppercase; }

/* ============================================================
   CORREÇÕES DE IDENTIDADE (v-fixes) — contraste, PrimeVue, z-index, campos
   ============================================================ */

/* --- Texto legível em TODOS os estados dos botões sólidos ---
   (corrige hover deixando o texto preto/ilegível em botão vermelho) */

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-indigo, .btn-indigo:hover, .btn-indigo:focus, .btn-indigo:active,
.btn.bg-gradient-primary, .btn.bg-gradient-primary:hover, .btn.bg-gradient-primary:focus,
.btn.bg-gradient-danger, .btn.bg-gradient-danger:hover, .btn.bg-gradient-danger:focus {
  color: #fff !important;
}

.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  color: var(--gm-accent-ink) !important;
}

/* botões do design system (.gm-btn) — inclui <a> como botão */

a.gm-btn-primary, .gm-btn-primary, .gm-btn-primary:hover, .gm-btn-primary:focus, .gm-btn-primary:active,
a.gm-btn-outline:hover, .gm-btn-outline:hover, .gm-btn-outline:focus {
  color: #fff !important;
}

a.gm-btn-accent, .gm-btn-accent, .gm-btn-accent:hover, .gm-btn-accent:focus,
a.gm-btn-outline-accent:hover, .gm-btn-outline-accent:hover {
  color: var(--gm-accent-ink) !important;
}

.gm-btn-ghost:hover, .gm-btn-outline:not(:hover) { color: var(--gm-primary); }

/* --- Botões PrimeVue (.p-button) — usados em modais/telas — na identidade --- */

.p-button {
  background: var(--gm-primary) !important;
  border-color: var(--gm-primary) !important;
  color: #fff !important;
  border-radius: var(--gm-radius-sm) !important;
  font-family: var(--gm-font-display) !important;
  font-weight: 600 !important;
  transition: background-color var(--gm-transition), border-color var(--gm-transition), color var(--gm-transition) !important;
}

.p-button:enabled:hover, .p-button:hover { background: var(--gm-primary-600) !important; border-color: var(--gm-primary-600) !important; color: #fff !important; }

.p-button:focus { box-shadow: 0 0 0 3px var(--gm-primary-100) !important; }

.p-button.p-button-secondary { background: #F1E8DC !important; border-color: var(--gm-border) !important; color: #4A392F !important; }

.p-button.p-button-secondary:enabled:hover { background: #E9DCC9 !important; color: var(--gm-text) !important; }

.p-button.p-button-success { background: var(--gm-success) !important; border-color: var(--gm-success) !important; color: #fff !important; }

.p-button.p-button-danger { background: var(--gm-danger) !important; border-color: var(--gm-danger) !important; color: #fff !important; }

.p-button.p-button-danger:enabled:hover { background: var(--gm-danger-600) !important; border-color: var(--gm-danger-600) !important; }

.p-button.p-button-warning { background: var(--gm-accent) !important; border-color: var(--gm-accent) !important; color: var(--gm-accent-ink) !important; }

.p-button.p-button-outlined { background: #fff !important; color: var(--gm-primary) !important; border-color: var(--gm-primary) !important; }

.p-button.p-button-outlined:enabled:hover { background: var(--gm-primary-050) !important; color: var(--gm-primary) !important; }

.p-button.p-button-text { background: transparent !important; border-color: transparent !important; color: var(--gm-primary) !important; }

.p-button.p-button-text:enabled:hover { background: var(--gm-primary-050) !important; color: var(--gm-primary) !important; }

/* checkbox/radio PrimeVue na cor de marca */

.p-checkbox .p-checkbox-box.p-highlight, .p-radiobutton .p-radiobutton-box.p-highlight { background: var(--gm-primary) !important; border-color: var(--gm-primary) !important; }

.p-inputtext:enabled:focus { border-color: var(--gm-primary) !important; box-shadow: 0 0 0 3px var(--gm-primary-100) !important; }

/* --- Modais sempre ACIMA da sidebar (corrige modal atrás da barra lateral) --- */

.modal { z-index: 1090 !important; }

.modal-backdrop { z-index: 1080 !important; }

.modal-dialog { z-index: 1091; }

/* --- SweetAlert2 (diálogos de confirmação em todo o sistema) na identidade --- */

.swal2-popup {
  border-radius: var(--gm-radius) !important;
  font-family: var(--gm-font-body) !important;
  border: 1px solid var(--gm-border) !important;
}

.swal2-title { font-family: var(--gm-font-display) !important; color: var(--gm-text) !important; font-weight: 700 !important; }

.swal2-html-container, .swal2-content { color: var(--gm-text) !important; }

.swal2-actions { gap: 0.6rem; }

.swal2-styled {
  border-radius: var(--gm-radius-sm) !important;
  font-family: var(--gm-font-display) !important;
  font-weight: 600 !important;
  padding: 0.7rem 1.3rem !important;
  transition: background-color .16s, transform .12s, box-shadow .12s !important;
}

.swal2-styled.swal2-confirm {
  background: var(--gm-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 0 var(--gm-primary-700) !important;
}

.swal2-styled.swal2-confirm:hover { background: var(--gm-primary-600) !important; }

.swal2-styled.swal2-confirm:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--gm-primary-700) !important; }

.swal2-styled.swal2-deny, .swal2-styled.swal2-cancel {
  background: #F1E8DC !important;
  color: #4A392F !important;
  box-shadow: none !important;
}

.swal2-styled.swal2-deny:hover, .swal2-styled.swal2-cancel:hover { background: #E9DCC9 !important; color: var(--gm-text) !important; }

.swal2-styled:focus { box-shadow: 0 0 0 3px var(--gm-primary-100) !important; }

.swal2-icon.swal2-warning { border-color: var(--gm-accent-600) !important; color: var(--gm-accent-600) !important; }

.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--gm-success) !important; }

.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--gm-success-050) !important; }

.swal2-icon.swal2-error { border-color: var(--gm-danger) !important; }

.swal2-loader { border-color: var(--gm-primary) transparent var(--gm-primary) transparent !important; }

/* --- Campos: sem "borda dentro de borda" (grupos/wrappers) --- */

.input-group { border-radius: var(--gm-radius-sm); }

.input-group > .form-control, .input-group > .form-select { box-shadow: none !important; }

.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.input-group-text { background: var(--gm-surface-2) !important; border: 1.5px solid var(--gm-border-strong) !important; color: var(--gm-muted) !important; border-radius: var(--gm-radius-sm); }

/* ============================================================
   COMPAT — classes utilitárias antigas (indigo / reds crus) → tokens
   Remapeia sem precisar editar ~45 telas. Vermelho antigo ≈ novo #C81E24.
   ============================================================ */

/* indigo antigo → vermelho de marca */

.text-indigo-400, .text-indigo-500, .text-indigo-600,
.hover\:text-indigo-500:hover, .hover\:text-indigo-600:hover,
.focus\:text-indigo-500:focus, .focus\:text-indigo-600:focus,
.group:hover .group-hover\:text-indigo-600 { color: var(--gm-primary) !important; }

.bg-indigo-100 { background-color: var(--gm-primary-050) !important; }

.bg-indigo-500 { background-color: var(--gm-primary) !important; }

.border-indigo-500 { border-color: var(--gm-primary) !important; }

/* reds crus do tailwind (usados como marca/erro) → tokens */

.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900,
.hover\:text-red-600:hover, .hover\:text-red-700:hover, .hover\:text-red-800:hover, .hover\:text-red-900:hover,
.focus\:text-red-800:focus, .group-hover\:text-red-800 { color: var(--gm-primary) !important; }

.bg-red-500, .bg-red-600 { background-color: var(--gm-primary) !important; }

.bg-red-700, .bg-red-800, .bg-red-900,
.hover\:bg-red-700:hover, .hover\:bg-red-800:hover, .hover\:bg-red-900:hover { background-color: var(--gm-primary-600) !important; }

.border-red-200, .border-red-300 { border-color: var(--gm-primary-100) !important; }

.border-red-700, .border-red-800, .border-red-900 { border-color: var(--gm-primary) !important; }

/* estados/banners crus → paleta da identidade */

.bg-orange-500 { background-color: var(--gm-accent) !important; color: var(--gm-accent-ink) !important; }

.bg-green-500, .bg-green-600 { background-color: var(--gm-success) !important; }

.text-green-600, .text-green-700 { color: var(--gm-success) !important; }

/* outline dark/warning → tokens da identidade */

.btn-outline-dark { border-color: var(--gm-border-strong) !important; color: #4A392F !important; background: #fff !important; }

.btn-outline-dark:hover { background: var(--gm-surface-2) !important; color: var(--gm-text) !important; border-color: var(--gm-primary) !important; }

.btn-outline-warning { border-color: var(--gm-accent-600) !important; color: #9a6a00 !important; background: #fff !important; }

.btn-outline-warning:hover { background: var(--gm-accent) !important; color: var(--gm-accent-ink) !important; border-color: var(--gm-accent) !important; }

/* Backdrop dos modais — mais escuro/quente (melhora legibilidade do conteúdo) */

.modal-backdrop { background-color: #1a1310 !important; }

.modal-backdrop.show { opacity: 0.62 !important; }

/* ============================================================
   TOUR (Shepherd.js) — botões e balão na identidade Gmarket
   ============================================================ */

.shepherd-element { border-radius: var(--gm-radius) !important; box-shadow: var(--gm-shadow-lg) !important; border: 1px solid var(--gm-border) !important; }

.shepherd-content { border-radius: var(--gm-radius) !important; overflow: hidden; background: var(--gm-surface) !important; }

.shepherd-header { background: linear-gradient(135deg, var(--gm-primary), var(--gm-primary-700)) !important; padding: 0.85rem 1.1rem !important; }

.shepherd-title { color: #fff !important; font-family: var(--gm-font-display) !important; font-weight: 700 !important; font-size: 1rem !important; }

.shepherd-cancel-icon { color: rgba(255, 255, 255, 0.9) !important; }

.shepherd-cancel-icon:hover { color: #fff !important; }

.shepherd-text { color: var(--gm-text) !important; font-family: var(--gm-font-body) !important; font-size: 0.9rem !important; padding: 1rem 1.1rem !important; }

.shepherd-footer { padding: 0 1.1rem 1rem !important; gap: 0.5rem; }

.shepherd-button {
  background: var(--gm-primary) !important;
  color: #fff !important;
  border-radius: var(--gm-radius-sm) !important;
  font-family: var(--gm-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  padding: 0.5rem 1rem !important;
  transition: background-color .16s !important;
}

.shepherd-button:not(:disabled):hover { background: var(--gm-primary-600) !important; color: #fff !important; }

.shepherd-button.shepherd-button-secondary { background: var(--gm-surface-2) !important; color: #4A392F !important; }

.shepherd-button.shepherd-button-secondary:not(:disabled):hover { background: #E9DCC9 !important; color: var(--gm-text) !important; }

.shepherd-arrow:before { background: var(--gm-surface) !important; }

/* ============================================================
   MODO-FOCO DO EDITOR (gerar_cartazes) — recolhe a sidebar
   para dar mais espaço. Ativado por body.gm-focus-mode.
   Especificidade alta p/ vencer a regra @min-width:1200px.
   ============================================================ */

body.gm-focus-mode #sidenav-main.sidenav {
  transform: translateX(-110%) !important;
  box-shadow: none !important;
}

body.gm-focus-mode .sidenav.fixed-start + .main-content { margin-left: 0 !important; }

body.gm-focus-mode .navbar.navbar-main { margin-left: 1rem !important; margin-right: 1rem !important; }

body.gm-focus-mode .main-content { transition: margin-left var(--gm-transition); }

/* Botão flutuante "Mais espaço" do editor (recolher sidebar) */

.gm-focus-toggle {
  position: fixed;
  top: 12px;
  right: 18px;
  z-index: 1035;
  box-shadow: var(--gm-shadow) !important;
}

body.gm-focus-mode .gm-focus-toggle { right: 18px; }

/* Hambúrguer sempre visível (opção de retrair a sidebar no desktop também) */

#btnsidebar { display: block !important; cursor: pointer; }

#sidenav-toggler-icon { color: var(--gm-primary) !important; font-size: 1.1rem; }

/* ============================================================
   SIDEBAR RETRÁTIL (rail de ícones) — toggle persistente
   Recolhe a sidebar para uma faixa só com ícones; ao passar o
   mouse ela reabre temporariamente (fly-out) mostrando os rótulos.
   ============================================================ */

#sidenav-main.sidenav {
  transition: width var(--gm-transition), max-width var(--gm-transition),
              box-shadow var(--gm-transition) !important;
}

.sidenav.fixed-start + .main-content {
  transition: margin-left var(--gm-transition);
}

#sidenav-main .nav-link .nav-link-text {
  transition: opacity var(--gm-transition);
  white-space: nowrap;
}

/* Marca compacta: só aparece no modo recolhido */

#sidenav-main .sidenav-header .gm-logo-mark { display: none; max-height: 42px; width: auto; margin: 0 auto; }

@media (min-width: 1200px) {
  body.gm-sidebar-collapsed #sidenav-main.sidenav {
    width: 5.4rem !important;
    max-width: 5.4rem !important;
  }
  body.gm-sidebar-collapsed .sidenav.fixed-start + .main-content {
    margin-left: 5.4rem !important;
  }
  body.gm-sidebar-collapsed #sidenav-main .nav-link-text {
    opacity: 0 !important;
    width: 0 !important;
    display: none !important;
  }
  body.gm-sidebar-collapsed #sidenav-main .nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.gm-sidebar-collapsed #sidenav-main .sidenav-header .gm-logo-full { display: none !important; }
  body.gm-sidebar-collapsed #sidenav-main .sidenav-header .gm-logo-mark { display: block !important; }
  /* botão flutuante de tutorial não cabe no rail estreito */
  body.gm-sidebar-collapsed #sidenav-main .btn-question-tutorial-div { display: none !important; }
  body.gm-sidebar-collapsed #sidenav-main.sidenav:hover .btn-question-tutorial-div { display: flex !important; }

  /* Fly-out: ao passar o mouse, reabre por cima do conteúdo */
  body.gm-sidebar-collapsed #sidenav-main.sidenav:hover {
    width: 15.625rem !important;
    max-width: 15.625rem !important;
    box-shadow: var(--gm-shadow-lg) !important;
    z-index: 1040 !important;
  }
  body.gm-sidebar-collapsed #sidenav-main.sidenav:hover .nav-link-text {
    opacity: 1 !important;
    width: auto !important;
    display: inline !important;
  }
  body.gm-sidebar-collapsed #sidenav-main.sidenav:hover .nav-link {
    justify-content: flex-start !important;
    padding-left: 1rem !important;
  }
  body.gm-sidebar-collapsed #sidenav-main.sidenav:hover .gm-logo-full { display: block !important; }
  body.gm-sidebar-collapsed #sidenav-main.sidenav:hover .gm-logo-mark { display: none !important; }
}

/* ============================================================
   TILE de item (modelos / planos de fundo) — mockup seção 05
   ============================================================ */

.gm-tile {
  background: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  overflow: hidden;
  box-shadow: var(--gm-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gm-tile:hover { transform: translateY(-4px); box-shadow: var(--gm-shadow); }

.gm-tile-thumb {
  position: relative;
  height: 180px;
  background:
    radial-gradient(circle at 30% 22%, var(--gm-primary-050), transparent 62%),
    linear-gradient(135deg, var(--gm-surface-2), var(--gm-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gm-border);
  padding: 14px;
  overflow: hidden;
}

.gm-tile-thumb img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 6px; box-shadow: var(--gm-shadow-sm); }

.gm-tile-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--gm-accent); color: var(--gm-accent-ink);
  font-family: var(--gm-font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 999px;
}

.gm-tile-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

.gm-tile-title {
  font-family: var(--gm-font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--gm-text); margin: 0; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gm-tile-desc { color: var(--gm-muted); font-size: 0.8rem; margin: 0; line-height: 1.35; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.gm-tile-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ============================================================
   RESPONSIVIDADE GLOBAL (mobile-first retrofit)
   ------------------------------------------------------------
   Camada única que torna todo o "chrome" da aplicação usável em
   celular/tablet, sem alterar marcação página a página. Corrige:
   overflow horizontal, empilhamento de colunas, tabelas, topbar,
   modais, paddings e a gaveta lateral. Breakpoints alinhados ao
   Bootstrap 5: sm<576, md<768, lg<992, xl<1200.
   ============================================================ */

/* --- 0. Guarda de overflow horizontal: nada pode "vazar" a tela --- */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Elementos de mídia nunca estouram o container */

.main-content img,
.main-content video,
.main-content canvas,
.main-content svg:not(.nav-svg-icon):not(.gm-btn svg),
.modal img,
.modal video {
  max-width: 100%;
}

.main-content img,
.modal img { height: auto; }

/* ============================================================
   1. GAVETA LATERAL NO MOBILE (< 1200px)
   O tema Material desliza a #sidenav-main via .g-sidenav-pinned.
   Aqui garantimos largura confortável, conteúdo em largura cheia,
   e um backdrop para fechar tocando fora.
   ============================================================ */

@media (max-width: 1199.98px) {
  /* Conteúdo ocupa a largura toda — sem margem reservada p/ sidebar */
  .sidenav.fixed-start + .main-content,
  body.gm-sidebar-collapsed .sidenav.fixed-start + .main-content {
    margin-left: 0 !important;
  }

  /* A sidebar é uma gaveta fixa fora da tela; entra quando "pinned" */
  #sidenav-main.sidenav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 16rem !important;
    max-width: 85vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1046 !important;
    box-shadow: var(--gm-shadow-lg) !important;
    transition: transform var(--gm-transition) !important;
  }
  /* Fechada por padrão (fora da tela) */
  body.g-sidenav-hidden #sidenav-main.sidenav,
  #sidenav-main.sidenav {
    transform: translateX(-105%) !important;
  }
  /* Aberta quando o body está "pinned" */
  body.g-sidenav-pinned #sidenav-main.sidenav {
    transform: translateX(0) !important;
  }

  /* Backdrop atrás da gaveta */
  .gm-sidenav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 10, 0.45);
    z-index: 1045;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gm-transition), visibility var(--gm-transition);
  }
  body.g-sidenav-pinned .gm-sidenav-backdrop {
    opacity: 1;
    visibility: visible;
  }
  /* Trava o scroll do corpo enquanto a gaveta está aberta */
  body.g-sidenav-pinned { overflow: hidden; }
}

/* No desktop o backdrop nunca aparece */

@media (min-width: 1200px) {
  .gm-sidenav-backdrop { display: none !important; }
}

/* ============================================================
   2. TOPBAR adaptável
   ============================================================ */

@media (max-width: 1199.98px) {
  .navbar.navbar-main { margin: 0.6rem 0.75rem 0.9rem 0.75rem !important; }
  #btnsidebar { display: inline-flex !important; }
}

@media (max-width: 767.98px) {
  .gm-topbar__inner { flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 0.5rem; }
  .gm-account { max-width: 42vw; }
  .gm-account-dd.p-dropdown .p-dropdown-label.p-inputtext { max-width: 30vw; }
}

@media (max-width: 400px) {
  /* Em telas muito estreitas, poupa espaço escondendo o nome da conta ativa */
  .gm-account:not(.gm-account--switch) .gm-account__name { display: none; }
}

/* ============================================================
   3. PADDING do conteúdo — mais enxuto em telas pequenas
   ============================================================ */

@media (max-width: 767.98px) {
  .main-content > div > .px-4 {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
  .card > .card-body,
  .card .card-body,
  .gm-card-pad { padding: 0.9rem 0.95rem !important; }
}

/* ============================================================
   4. EMPILHAMENTO DE COLUNAS no celular
   Muitas telas usam .col-N do Bootstrap SEM breakpoint (col-4,
   col-6...), que mantêm a proporção mesmo no celular e espremem
   o conteúdo. Aqui damos um comportamento mobile-first razoável:
   - < 576px: colunas estreitas viram 50%; col-6+ viram 100%.
   - Não afeta colunas com breakpoint explícito (col-md-*, etc.),
     nem a sidebar.
   ============================================================ */

@media (max-width: 575.98px) {
  .main-content .row > .col-1,
  .main-content .row > .col-2,
  .main-content .row > .col-3,
  .main-content .row > .col-4,
  .main-content .row > .col-5,
  .modal .row > .col-1,
  .modal .row > .col-2,
  .modal .row > .col-3,
  .modal .row > .col-4,
  .modal .row > .col-5 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .main-content .row > .col-6,
  .main-content .row > .col-7,
  .main-content .row > .col-8,
  .main-content .row > .col-9,
  .main-content .row > .col-10,
  .main-content .row > .col-11,
  .modal .row > .col-6,
  .modal .row > .col-7,
  .modal .row > .col-8,
  .modal .row > .col-9,
  .modal .row > .col-10,
  .modal .row > .col-11 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============================================================
   5. TABELAS — sempre com scroll horizontal, nunca estouram
   Envolvемos qualquer tabela solta num contexto rolável. Onde já
   existe .table-responsive, respeitamos. Como fallback global,
   fazemos wrappers comuns rolarem no eixo X.
   ============================================================ */

.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
  /* Contêineres comuns de tabela passam a rolar horizontalmente */
  .main-content .card-body > .table,
  .gm-card > .gm-table,
  .gm-card-pad > .gm-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* Tabela dentro de wrapper .table-responsive mantém largura mínima legível */
  .table-responsive > table,
  .table-responsive > .table { min-width: 640px; }
}

/* ============================================================
   6. MODAIS full-width no celular
   ============================================================ */

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl { max-width: calc(100% - 1rem) !important; }
  .modal-body { padding: 1rem !important; }
  /* Rodapés de modal empilham os botões */
  .modal-footer { flex-wrap: wrap; }
  .modal-footer > .btn,
  .modal-footer > .gm-btn { flex: 1 1 auto; }
}

/* ============================================================
   7. TIPOGRAFIA e cabeçalhos de página no celular
   ============================================================ */

@media (max-width: 575.98px) {
  h1, .h1, .gm-page-title { font-size: 1.35rem !important; }
  h2, .h2 { font-size: 1.2rem !important; }
  .main-content .row > h1,
  .main-content h1.text-2xl,
  .main-content h1.text-primary { font-size: 1.25rem !important; }
  /* Cabeçalho de página: título em cima, ação embaixo ocupando a linha */
  .gm-page-head { align-items: stretch; gap: 0.75rem; }
  .gm-page-head > :last-child { width: 100%; }
  .gm-page-head .gm-btn,
  .gm-page-head .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   8. UTILITÁRIOS de flex — evitam linhas que não quebram
   Aplicado a barras de ação comuns (justify-content-between/end
   com d-flex) para que quebrem em telas estreitas.
   ============================================================ */

@media (max-width: 575.98px) {
  .main-content .d-flex.justify-content-between:not(.flex-nowrap),
  .main-content .d-flex.justify-content-end:not(.flex-nowrap) { flex-wrap: wrap; }
}

/* --- Grades de tiles (modelos/planos de fundo) adaptáveis --- */

@media (max-width: 575.98px) {
  .gm-tile-thumb { height: 150px; }
}