/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD.CSS — Shell, sidebar, header, layout principal.
   ═══════════════════════════════════════════════════════════════════ */

/* ── App Shell ───────────────────────────────────────────────────── */
.app-shell {
  display:  flex;
  height:   100vh;
  overflow: hidden;
  background: var(--c-bg);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  position:   relative;
  flex-shrink:0;
  width:      var(--sidebar-w);
  height:     100vh;
  background: var(--c-surface);
  border-right: 1px solid var(--c-divider);
  display:    flex;
  flex-direction:column;
  overflow:   hidden;
  transition: width var(--t-normal);
  z-index:    100;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* Logo */
.sidebar-logo {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-divider);
  min-height:  var(--header-h);
  flex-shrink: 0;
}
.sidebar-logo-icon {
  width:           36px;
  height:          36px;
  min-width:       36px;
  background:      var(--c-primary);
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-size:       16px;
}
.sidebar-logo-text {
  font-size:   var(--text-lg);
  font-weight: 800;
  color:       var(--c-text-primary);
  white-space: nowrap;
  overflow:    hidden;
}
.sidebar-logo-text span { color: var(--c-primary); }

.sidebar.collapsed .sidebar-logo-text { display: none; }

/* Nav */
.sidebar-nav {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    var(--sp-3) 0;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }

.sidebar-section-label {
  font-size:     var(--text-2xs);
  font-weight:   600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:         var(--c-text-tertiary);
  padding:       var(--sp-3) var(--sp-4) var(--sp-1);
  white-space:   nowrap;
  overflow:      hidden;
}
.sidebar.collapsed .sidebar-section-label { visibility: hidden; height: var(--sp-3); padding: 0; }

.sidebar-nav-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  width:       100%;
  padding:     var(--sp-2) var(--sp-4);
  border:      none;
  background:  transparent;
  color:       var(--c-text-secondary);
  font-size:   var(--text-sm);
  font-weight: 500;
  text-align:  left;
  border-radius:var(--r-md);
  margin:      1px var(--sp-2);
  width:       calc(100% - var(--sp-4));
  transition:  all var(--t-fast);
  white-space: nowrap;
  overflow:    hidden;
}
.sidebar-nav-item:hover  { background:var(--c-primary-light); color:var(--c-primary); }
.sidebar-nav-item.active { background:var(--c-primary-light); color:var(--c-primary); font-weight:600; }
.sidebar-nav-item.active .nav-icon { color:var(--c-primary); }

.nav-icon {
  width:           28px;
  min-width:       28px;
  height:          28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  flex-shrink:     0;
}
.nav-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar.collapsed .nav-label { display:none; }

/* Footer */
.sidebar-footer {
  padding:     var(--sp-3) var(--sp-4);
  border-top:  1px solid var(--c-divider);
  flex-shrink: 0;
}
.sidebar-toggle {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-2);
  width:          100%;
  padding:        var(--sp-2) var(--sp-2);
  border:         1px solid var(--c-border);
  background:     transparent;
  border-radius:  var(--r-md);
  color:          var(--c-text-tertiary);
  font-size:      var(--text-xs);
  transition:     all var(--t-fast);
}
.sidebar-toggle:hover { background:var(--c-surface-hover); color:var(--c-text-secondary); }
.sidebar.collapsed .nav-label { display:none; }

/* ── Main Area ───────────────────────────────────────────────────── */
.main-area {
  flex:       1;
  display:    flex;
  flex-direction: column;
  overflow:   hidden;
  min-width:  0;
}

/* ── Header ──────────────────────────────────────────────────────── */
.header {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-4);
  padding:        0 var(--sp-6);
  height:         var(--header-h);
  min-height:     var(--header-h);
  background:     var(--c-surface);
  border-bottom:  1px solid var(--c-divider);
  flex-shrink:    0;
  box-shadow:     var(--shadow-xs);
  z-index:        50;
}
.header-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-sm);
  color:       var(--c-text-tertiary);
}
.header-breadcrumb-sep { opacity:.5; }
.header-spacer { flex: 1; }

.header-file-badge {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  padding:     var(--sp-1) var(--sp-3);
  background:  var(--c-success-light);
  border:      1px solid rgba(5,150,105,.2);
  border-radius:var(--r-full);
  font-size:   var(--text-xs);
}
.header-file-badge-dot {
  width:        7px;
  height:       7px;
  border-radius:50%;
  background:   var(--c-success);
  flex-shrink:  0;
}
.header-file-badge-name {
  max-width:   180px;
  overflow:    hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color:       var(--c-success);
}
.header-actions { display:flex; gap:var(--sp-2); align-items:center; }

/* ── Content ─────────────────────────────────────────────────────── */
.content {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    var(--sp-6);
}

/* ── Sections ────────────────────────────────────────────────────── */
.content-section {
  margin-bottom: var(--sp-8);
  animation:     fadeIn var(--t-normal) both;
}

.section-header {
  display:       flex;
  align-items:   flex-start;
  justify-content:space-between;
  margin-bottom: var(--sp-4);
}
.section-title {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-xl);
  font-weight: 700;
  color:       var(--c-text-primary);
  margin-bottom:var(--sp-1);
}
.section-title-icon {
  color:      var(--c-primary);
  font-size:  var(--text-lg);
  flex-shrink:0;
}
.section-subtitle {
  font-size:   var(--text-sm);
  color:       var(--c-text-tertiary);
}

/* ── Charts Grid ─────────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  gap:     var(--sp-4);
  margin-bottom: var(--sp-4);
}
.charts-grid:last-child { margin-bottom: 0; }
.charts-grid-1 { grid-template-columns: 1fr; }
.charts-grid-2 { grid-template-columns: 1fr 1fr; }
.charts-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.charts-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) { .charts-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .charts-grid-2, .charts-grid-3 { grid-template-columns: 1fr; } }

/* ── Tabs ────────────────────────────────────────────────────────── */
.tabs-bar {
  display:       flex;
  gap:           var(--sp-1);
  border-bottom: 2px solid var(--c-divider);
  margin-bottom: var(--sp-4);
  overflow-x:    auto;
}
.tab-btn {
  display:        flex;
  align-items:    center;
  gap:            var(--sp-2);
  padding:        var(--sp-2) var(--sp-4);
  border:         none;
  border-bottom:  2px solid transparent;
  margin-bottom: -2px;
  background:     transparent;
  color:          var(--c-text-tertiary);
  font-size:      var(--text-sm);
  font-weight:    500;
  white-space:    nowrap;
  transition:     all var(--t-fast);
}
.tab-btn:hover { color:var(--c-text-primary); }
.tab-btn.active {
  color:        var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight:  600;
}
.tab-count {
  padding:       1px 7px;
  border-radius: var(--r-full);
  background:    var(--c-neutral-light);
  font-size:     var(--text-2xs);
  font-weight:   600;
  color:         var(--c-text-tertiary);
}
.tab-btn.active .tab-count {
  background: var(--c-primary-light);
  color:      var(--c-primary);
}
.tab-panel { animation: fadeIn var(--t-fast) both; }

/* ── Status badges (inline na tabela) ───────────────────────────── */
.status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  border-radius: var(--r-full);
  font-size:     var(--text-xs);
  font-weight:   600;
  white-space:   nowrap;
}
.status-badge.entregue  { background:var(--c-success-light); color:var(--c-success); }
.status-badge.cancelado { background:var(--c-danger-light);  color:var(--c-danger); }
.status-badge.separacao { background:var(--c-warning-light); color:var(--c-warning); }
.status-badge.producao  { background:var(--c-secondary-light);color:var(--c-secondary); }
.status-badge.enviado   { background:var(--c-info-light);    color:var(--c-info); }
.status-badge.aguardando{ background:var(--c-neutral-light); color:var(--c-neutral); }
.status-badge.default   { background:var(--c-neutral-light); color:var(--c-neutral); }