/* css/layout.css — estrutura da página, sidebar (container) e área de scroll */
/* LAYOUT BASE E SCROLL */
html, body { margin: 0 !important; padding: 0 !important; width: 100vw !important; height: 100vh !important; overflow: hidden !important; background-color: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.wrap { display: flex !important; flex-direction: column !important; width: 100vw !important; height: 100vh !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box; }
header.top, nav.top-nav-bar { flex: 0 0 auto !important; background: var(--bg); }
.app-layout { display: flex !important; flex-direction: row !important; flex: 1 1 0 !important; width: 100vw !important; overflow: hidden !important; box-sizing: border-box; position: relative; }

#mainSidebar, .sidebar {
  flex: 0 0 260px !important; width: 260px !important; min-width: 260px !important; height: 100% !important;
  background-color: var(--panel) !important; border-right: 1px solid var(--line);
  overflow-y: visible !important; overflow-x: visible !important; 
  box-sizing: border-box; z-index: 9999; transition: width 0.3s ease;
}

#mainSidebar.collapsed { flex: 0 0 60px !important; width: 60px !important; min-width: 60px !important; }

#mainSidebar.collapsed .notif-menu, 
#mainSidebar.collapsed .profile-menu {
  left: 100% !important;  
  bottom: 0 !important;   
  top: auto !important;
  margin-left: 12px !important; 
  max-height: none !important; 
}
.main-content { flex: 1 1 0 !important; min-width: 0 !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 24px !important; background-color: var(--bg) !important; position: relative; box-sizing: border-box; }

/* ==========================================================================
   RESPONSIVIDADE - SIDEBAR OFF-CANVAS (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
  /* Retira o peso do layout flex e transforma em menu flutuante (off-canvas) que cobre toda a tela */
  #mainSidebar:not(.collapsed) {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100% !important; 
    min-width: 100% !important;
    z-index: 99999;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
  }
}
/* ==========================================================================
   AJUSTES - CENTRAL DE NOTIFICAÇÕES
   ========================================================================== */
.popover.notif-menu {
  width: 420px !important;
  max-width: 90vw !important;
  padding: 16px !important;
}

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

.notif-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.notif-item em {
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--muted);
}