/* =========================================================
   VYRAX3D - FIX DEFINITIVO DE LAYOUT
   Corrige sidebar-container, sidebar fixa e conteúdo alinhado
   ========================================================= */

:root {
  --vy-sidebar-width: 260px;
  --vy-navbar-height: 64px;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  background: #0f172a !important;
}

.app-container,
.main-layout {
  width: 100% !important;
  min-height: 100vh !important;
  display: block !important;
  background: #0f172a !important;
}

/* 
   IMPORTANTE:
   Algumas páginas usam #sidebar.
   Outras usam #sidebar-container.
   Então corrigimos os dois.
*/
#sidebar,
#sidebar-container,
.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--vy-sidebar-width) !important;
  min-width: var(--vy-sidebar-width) !important;
  max-width: var(--vy-sidebar-width) !important;
  height: 100vh !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #1e293b !important;
  border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Evita que qualquer conteúdo interno estoure a sidebar */
#sidebar *,
#sidebar-container *,
.sidebar * {
  box-sizing: border-box !important;
}

/* Header da sidebar */
.sidebar-header {
  width: 100% !important;
  padding: 22px 18px 16px !important;
  text-align: left !important;
}

.sidebar-header img,
.sidebar-header .logo,
.sidebar .logo {
  display: block !important;
  max-width: 145px !important;
  max-height: 85px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 12px auto !important;
}

.sidebar-header h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  margin: 6px 0 4px !important;
  color: #f8fafc !important;
}

.sidebar-header p,
.sidebar-header small {
  color: #cbd5e1 !important;
}

/* Navegação */
.sidebar-nav {
  width: 100% !important;
  padding: 8px 0 16px !important;
  overflow-x: hidden !important;
}

.sidebar-section {
  width: 100% !important;
  margin: 0 0 14px !important;
}

.sidebar-title {
  display: block !important;
  padding: 10px 18px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #94a3b8 !important;
}

.nav-item,
.sidebar .nav-item,
#sidebar-container .nav-item,
#sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 11px 18px !important;
  color: #cbd5e1 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.nav-item:hover,
.sidebar .nav-item:hover,
#sidebar-container .nav-item:hover,
#sidebar .nav-item:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #ffffff !important;
}

.nav-item.active,
.sidebar .nav-item.active,
#sidebar-container .nav-item.active,
#sidebar .nav-item.active {
  background: rgba(99, 102, 241, 0.22) !important;
  border-left-color: #6366f1 !important;
  color: #ffffff !important;
}

.nav-item svg,
.sidebar .nav-item svg,
#sidebar-container .nav-item svg,
#sidebar .nav-item svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

/* Rodapé da sidebar */
.sidebar-footer {
  width: 100% !important;
  padding: 16px 18px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* Navbar superior */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--vy-sidebar-width) !important;
  right: 0 !important;
  height: var(--vy-navbar-height) !important;
  z-index: 900 !important;
  background: rgba(30, 41, 59, 0.98) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-sizing: border-box !important;
}

/* Conteúdo principal alinhado depois da sidebar */
.main-content,
main.main-content {
  margin-left: var(--vy-sidebar-width) !important;
  padding: calc(var(--vy-navbar-height) + 28px) 28px 28px !important;
  width: calc(100% - var(--vy-sidebar-width)) !important;
  max-width: calc(100% - var(--vy-sidebar-width)) !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Quando a página não tiver navbar, evita espaço exagerado */
body.no-navbar .main-content,
body.no-navbar main.main-content {
  padding-top: 28px !important;
}

/* Cards e grids não podem estourar largura */
.card,
.page-header,
.grid,
.table-container,
.pdv-page,
.calculator-grid {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Corrige imagens gigantes dentro da sidebar */
#sidebar-container img,
#sidebar img,
.sidebar img {
  max-width: 100% !important;
}

/* Responsivo */
@media (max-width: 768px) {
  #sidebar,
  #sidebar-container,
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
  }

  #sidebar.open,
  #sidebar-container.open,
  .sidebar.open {
    transform: translateX(0) !important;
  }

  .navbar {
    left: 0 !important;
  }

  .main-content,
  main.main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: calc(var(--vy-navbar-height) + 22px) 16px 20px !important;
  }
}

/* =========================================================
   PATCH MARKET - imagens e cards sem erro externo
   ========================================================= */
.product-card {
  min-height: 100%;
}

.product-img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #f8fafc;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.product-title {
  color: #f8fafc;
  line-height: 1.35;
}

.product-info {
  min-height: 180px;
}

.product-sales {
  white-space: nowrap;
}

.product-grid {
  align-items: stretch;
}