/* ==========================================================================
   DESIGN SYSTEM & GLOBAL STYLES (Gustavo Sarturi Dashboard)
   ========================================================================== */

:root {
  /* Typography */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Color Palette */
  --color-bg-main: #f4f6f9;
  --color-card-bg: #ffffff;
  
  --color-sidebar-bg: #2a2a2a;
  --color-sidebar-hover: #333333;
  --color-sidebar-active: #f04903; /* Laranja Vibrante */
  --color-sidebar-text: #c2c2c2;
  --color-sidebar-text-active: #ffffff;
  
  /* Modern Accent Colors */
  --color-primary: #f04903;
  --color-text-dark: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  
  /* Transitions */
  --transition-speed: 0.3s;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-main);
  color: var(--color-text-dark);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.dashboard-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ==========================================================================
   SIDEBAR (MENU LATERAL)
   ========================================================================== */

.sidebar {
  background-color: var(--color-sidebar-bg);
  width: 60px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-speed) var(--transition-timing);
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar:hover {
  width: 260px;
}

/* Sidebar Header */
.sidebar-header {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 15px;
  overflow: hidden;
  white-space: nowrap;
}

.hamburger {
  font-size: 20px;
  color: var(--color-sidebar-text);
  min-width: 24px;
  text-align: center;
  cursor: default;
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s var(--transition-timing), max-width 0.2s var(--transition-timing);
  white-space: nowrap;
  pointer-events: none;
  display: inline-block;
}

.sidebar:hover .sidebar-title {
  opacity: 1;
  max-width: 180px;
}

/* Sidebar Navigation Items */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 15px 0;
  gap: 8px;
  flex-grow: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 18px;
  color: var(--color-sidebar-text);
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, padding var(--transition-speed) var(--transition-timing), gap var(--transition-speed) var(--transition-timing);
  white-space: nowrap;
  border: none;
  background: transparent;
  width: calc(100% - 16px);
  margin: 0 8px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

/* Adjust padding and gap when collapsed to center the icon */
.sidebar:not(:hover) .nav-item {
  padding: 12px 10px !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Completely remove collapsed text, titles, chevrons and non-first children from layout */
.sidebar:not(:hover) .nav-text,
.sidebar:not(:hover) .chevron-icon,
.sidebar:not(:hover) .sidebar-title,
.sidebar:not(:hover) .nav-item > *:not(:first-child) {
  display: none !important;
}

.nav-item i,
.nav-item svg {
  min-width: 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}

.nav-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s var(--transition-timing), max-width 0.2s var(--transition-timing);
  white-space: nowrap;
  pointer-events: none;
  display: inline-block;
}

.sidebar:hover .nav-text {
  opacity: 1;
  max-width: 180px;
}

/* Hover & Active States */
.nav-item:hover {
  background-color: var(--color-sidebar-hover);
  color: #ffffff;
}

.nav-item.active {
  background-color: var(--color-sidebar-active) !important;
  color: var(--color-sidebar-text-active) !important;
}

/* Parent group toggle when active (sidebar is expanded): transparent background, orange text and icon */
.sidebar:hover .nav-group-toggle.active {
  background-color: transparent !important;
  color: var(--color-sidebar-active) !important;
}
.sidebar:hover .nav-group-toggle.active i,
.sidebar:hover .nav-group-toggle.active svg {
  color: var(--color-sidebar-active) !important;
}

/* Parent group toggle when active (sidebar is collapsed): solid orange background to match individual items */
.sidebar:not(:hover) .nav-group-toggle.active {
  background-color: var(--color-sidebar-active) !important;
  color: var(--color-sidebar-text-active) !important;
}
.sidebar:not(:hover) .nav-group-toggle.active i,
.sidebar:not(:hover) .nav-group-toggle.active svg {
  color: var(--color-sidebar-text-active) !important;
}

/* Active sub-item: soft background tint, brand orange text, and a sharp left indicator line */
.sub-item.active {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-sidebar-active) !important;
  border-left-color: var(--color-sidebar-active) !important;
  border-radius: 0 6px 6px 0 !important;
}
.sub-item.active i,
.sub-item.active svg {
  color: var(--color-sidebar-active) !important;
}

/* Accordion Group Submenu */
.nav-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-group-toggle {
  justify-content: flex-start;
  position: relative;
}

.chevron-icon {
  margin-left: auto;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s var(--transition-timing), max-width 0.2s var(--transition-timing);
  white-space: nowrap;
}

.sidebar:hover .chevron-icon {
  opacity: 1;
  max-width: 20px;
}

.nav-group.open .chevron-icon {
  transform: rotate(180deg);
}

.nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-speed) var(--transition-timing);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
}

/* Dynamic behavior to collapse submenus immediately when mouse leaves sidebar */
.sidebar:not(:hover) .nav-group-items {
  max-height: 0 !important;
}

.nav-group.open .nav-group-items {
  max-height: 200px;
}

.sub-item {
  width: calc(100% - 24px);
  padding: 10px 15px;
  font-size: 0.88rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-left: 3px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* ==========================================================================
   MAIN CONTENT AREA & CARDS
   ========================================================================== */

main {
  flex: 1;
  margin-left: 60px; /* Offset for collapsed sidebar */
  background-color: var(--color-bg-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontally centered */
  justify-content: flex-start; /* Top-aligned */
  padding: 2.5rem 1.5rem;
  transition: margin-left var(--transition-speed) var(--transition-timing);
  box-sizing: border-box;
}

/* When sidebar expands, if layout is responsive we can offset the content slightly, 
   but keeping a fixed margin-left of 60px makes the sidebar float elegantly over the page 
   without triggers of structural reflow on layout. Or we can push it.
   Let's keep it floating over the page (fixed 60px offset) or push. Let's make it push for a premium grid experience! */
.sidebar:hover + main {
  margin-left: 260px;
}

.card {
  background-color: var(--color-card-bg);
  max-width: 850px;
  width: 100%;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
  margin-bottom: 2rem;
  animation: fadeIn 0.4s var(--transition-timing) forwards;
  position: relative;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Title & Header for dynamic subpages */
.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}

.page-description {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}

/* Loading Spinner */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ==========================================================================
   DESIGN SYSTEM COMPONENTS
   ========================================================================== */

/* 1. MathJax latex PROCESS block styling */
.tex2jax_process {
  font-size: 1.05rem;
}
.math-block {
  background-color: #f8fafc;
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin: 1.5rem 0;
  overflow-x: auto;
}

/* 2. Callouts (Balões de Nota) */
.callout {
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-left: 5px solid;
  border-radius: 4px 8px 8px 4px;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}

.callout-info {
  background-color: hsl(210, 100%, 97%);
  border-color: hsl(210, 100%, 50%);
  color: hsl(210, 100%, 20%);
}

.callout-warning {
  background-color: hsl(45, 100%, 96%);
  border-color: hsl(45, 100%, 45%);
  color: hsl(45, 100%, 20%);
}

.callout-danger {
  background-color: hsl(0, 100%, 97%);
  border-color: hsl(0, 100%, 60%);
  color: hsl(0, 100%, 25%);
}

.callout-success {
  background-color: hsl(120, 70%, 97%);
  border-color: hsl(120, 80%, 35%);
  color: hsl(120, 85%, 15%);
}

.callout-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

/* 3. Delivery Items (Listas de Entrega) */
.delivery-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 1.5rem 0;
}

.delivery-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  background-color: #f8fafc;
  border-left: 5px solid #cbd5e1;
  border-radius: 0 8px 8px 0;
  transition: transform 0.25s var(--transition-timing), box-shadow 0.25s var(--transition-timing);
  box-shadow: var(--shadow-sm);
  gap: 15px;
}

.delivery-item:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-md);
}

.delivery-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.delivery-title {
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: 0.98rem;
}

.delivery-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Delivery Variations */
.delivery-item.pendente {
  border-left-color: #3b82f6;
}

.delivery-item.urgente {
  border-left-color: #ef4444;
}

.delivery-item.concluido {
  background-color: rgba(34, 197, 94, 0.06);
  border-left-color: #22c55e;
}

.delivery-item.celebracao {
  background: linear-gradient(135deg, #fdf2f8 0%, #f5e6ff 100%);
  border-left-color: #d946ef;
}

/* Status Pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-pill.pendente {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-pill.urgente {
  background-color: #fee2e2;
  color: #991b1b;
}

.status-pill.concluido {
  background-color: #dcfce7;
  color: #166534;
}

.status-pill.celebracao {
  background-color: #fae8ff;
  color: #86198f;
}

/* 4. Tables & Data Grids */
.modern-table-container {
  width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.modern-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}

.modern-table th {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  background-color: #f8fafc;
  border-bottom: 2px solid var(--color-border);
}

.modern-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-dark);
  transition: background-color 0.15s;
}

.modern-table tbody tr:last-child td {
  border-bottom: none;
}

.modern-table tbody tr:hover td {
  background-color: #f8fafc;
}

/* ==========================================================================
   DASHBOARD SPECIFIC WIDGETS
   ========================================================================== */

.widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.widget-card {
  background-color: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 15px;
}

.widget-icon-wrapper {
  background-color: #ffebe3;
  color: var(--color-primary);
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-icon-wrapper.blue {
  background-color: #e3f2fd;
  color: #2196f3;
}

.widget-icon-wrapper.green {
  background-color: #e8f5e9;
  color: #4caf50;
}

.widget-details {
  display: flex;
  flex-direction: column;
}

.widget-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.widget-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-top: 2px;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 320px;
  margin: 1.5rem 0;
}

/* ==========================================================================
   PRINT MEDIA RULES
   ========================================================================== */

@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt;
  }
  
  /* Remove navigation and headers not needed in print */
  .sidebar,
  .sidebar-header,
  .hamburger,
  .chevron-icon {
    display: none !important;
  }
  
  .dashboard-wrapper {
    display: block !important;
  }
  
  main {
    margin-left: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  .card {
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
    overflow: visible !important;
    page-break-inside: avoid;
  }
  
  .delivery-item {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 5px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    transform: none !important;
    page-break-inside: avoid;
  }
  
  .delivery-item.concluido {
    background-color: rgba(34, 197, 94, 0.05) !important;
  }
  
  .delivery-item.celebracao {
    background: #faf5ff !important;
  }
  
  .callout {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 5px solid !important;
    page-break-inside: avoid;
  }
  
  .modern-table-container {
    border: 1px solid #cbd5e1 !important;
    overflow: visible !important;
  }
  
  .modern-table tr:hover td {
    background-color: transparent !important;
  }
  
  .modern-table th {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #94a3b8 !important;
  }
  
  .modern-table td {
    border-bottom: 1px solid #e2e8f0 !important;
  }
  
  /* Ensure page breaks nicely */
  h1, h2, h3 {
    page-break-after: avoid;
  }
}