/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD.CSS — Shell, sidebar, header, layout principal.
   Redesign: monochrome dark surfaces, refined typography, editorial
   spacing. All class names preserved — JS bound throughout.
   Font: Archivo (via --mc-font) across all dashboard chrome.
   ═══════════════════════════════════════════════════════════════════ */

/* ── App Shell ───────────────────────────────────────────────────── */
.app-shell {
  display:    flex;
  height:     100vh;
  overflow:   hidden;
  background: var(--color-surface-00);
  font-family: var(--mc-font, 'Archivo', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════ */
.sidebar {
  position:        relative;
  flex-shrink:     0;
  width:           var(--sidebar-w);
  height:          100vh;
  background:      var(--color-surface-00);
  border-right:    1px solid var(--color-border-subtle);
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  transition:      width 220ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index:         100;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* ── Logo ─────────────────────────────────────────────────────────── */
.sidebar-logo {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       0 var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
  min-height:    var(--header-h);
  flex-shrink:   0;
}

.sidebar-logo-icon {
  width:           32px;
  height:          32px;
  min-width:       32px;
  background:      var(--color-surface-05);
  border:          1px solid var(--color-border-default);
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--color-text-primary);
  font-size:       14px;
  flex-shrink:     0;
  transition:      border-color 140ms ease;
}

.sidebar-logo-text {
  font-size:      14px;
  font-weight:    700;
  color:          var(--color-text-primary);
  letter-spacing: -0.01em;
  white-space:    nowrap;
  overflow:       hidden;
  font-family:    var(--mc-font, 'Archivo', system-ui, sans-serif);
}
.sidebar-logo-text span {
  color:       var(--color-text-secondary);
  font-weight: 400;
}
.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: 2px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-border-subtle); border-radius: 1px; }

.sidebar-section-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--color-text-disabled);
  padding:        var(--sp-4) var(--sp-4) var(--sp-1);
  white-space:    nowrap;
  overflow:       hidden;
  font-family:    var(--mc-font, 'Archivo', system-ui, sans-serif);
}
.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:         calc(100% - var(--sp-4));
  padding:       7px var(--sp-3);
  border:        none;
  background:    transparent;
  color:         var(--color-text-secondary);
  font-size:     12px;
  font-weight:   500;
  text-align:    left;
  border-radius: 4px;
  margin:        1px var(--sp-2);
  transition:    background 140ms ease, color 140ms ease;
  white-space:   nowrap;
  overflow:      hidden;
  cursor:        pointer;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  letter-spacing: 0.01em;
}
.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color:      var(--color-text-sub);
}

/* PRESERVED: .active — JS bound */
.sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color:      var(--color-text-primary);
  font-weight: 600;
}
.sidebar-nav-item.active .nav-icon {
  color: var(--color-text-primary);
}

.nav-icon {
  width:           26px;
  min-width:       26px;
  height:          26px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  flex-shrink:     0;
  color:           var(--color-text-secondary);
  transition:      color 140ms ease;
}
.nav-label {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.sidebar.collapsed .nav-label { display: none; }

/* ── Sidebar Footer ───────────────────────────────────────────────── */
.sidebar-footer {
  padding:     var(--sp-3) var(--sp-3);
  border-top:  1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.sidebar-toggle {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  width:         100%;
  padding:       6px var(--sp-2);
  border:        1px solid var(--color-border-subtle);
  background:    transparent;
  border-radius: 4px;
  color:         var(--color-text-disabled);
  font-size:     11px;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  transition:    background 140ms ease, border-color 140ms ease, color 140ms ease;
  cursor:        pointer;
}
.sidebar-toggle:hover {
  background:   rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-default);
  color:        var(--color-text-secondary);
}
.sidebar.collapsed .nav-label { display: none; }

/* ══════════════════════════════════════════════════════════════════
   MAIN AREA
   ══════════════════════════════════════════════════════════════════ */
.main-area {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
  background:     var(--color-surface-00);
}

/* ══════════════════════════════════════════════════════════════════
   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(--color-surface-00);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink:   0;
  z-index:       50;
}

.header-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   12px;
  font-weight: 300;             /* "dash" — light */
  color:       var(--color-text-secondary);
  font-family: var(--mc-font, 'Archivo', system-ui, sans-serif);
}
.header-breadcrumb b {
  font-weight: 700;             /* "orizen" — bold */
  color:       var(--color-text-secondary);
}
.header-breadcrumb-sep {
  color:   var(--color-text-disabled);
  opacity: 1;
}

.header-spacer { flex: 1; }

/* File badge — monochrome, no green tint */
.header-file-badge {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  padding:       4px var(--sp-3);
  background:    rgba(255, 255, 255, 0.05);
  border:        1px solid var(--color-border-default);
  border-radius: 9999px;
  font-size:     11px;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  transition:    border-color 140ms ease;
}
.header-file-badge:hover { border-color: var(--color-border-strong); }

.header-file-badge-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   var(--color-semantic-positive-text);
  flex-shrink:  0;
}
.header-file-badge-name {
  max-width:     180px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-weight:   500;
  color:         var(--color-text-sub);
}

.header-actions {
  display:     flex;
  gap:         var(--sp-2);
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════════════════ */
.content {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    var(--sp-6);
  scrollbar-width: thin;
  scrollbar-color: #2A2A2A transparent;
}
.content::-webkit-scrollbar         { width: 5px; }
.content::-webkit-scrollbar-track   { background: transparent; }
.content::-webkit-scrollbar-thumb   { background: #2A2A2A; border-radius: 9999px; }
.content::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

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

/* Section header row — flex layout with label + action, generous breathing */
.section-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   var(--space-6, var(--sp-6));
  gap:             var(--space-4, var(--sp-4));
  flex-wrap:       wrap;
}

/* Section label — overline anatomy from DS */
.section-label-overline {
  font-size:      var(--font-size-2xs, 10px);
  font-weight:    var(--font-weight-semibold, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-text-tertiary);
  font-family:    var(--font-family-base, 'Archivo', system-ui, sans-serif);
  margin-bottom:  var(--space-1, 4px);
}

.section-title {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2, var(--sp-2));
  font-size:      var(--font-size-md, 17px);
  font-weight:    var(--font-weight-semibold, 600);
  color:          var(--color-text-primary);
  margin-bottom:  var(--space-1, 4px);
  letter-spacing: -0.02em;
  font-family:    var(--font-family-base, 'Archivo', system-ui, sans-serif);
  line-height:    var(--line-height-snug, 1.22);
}

.section-title-icon {
  color:      var(--color-text-secondary);
  font-size:  14px;
  flex-shrink: 0;
}

.section-subtitle {
  font-size:   var(--font-size-xs, 11px);
  color:       var(--color-text-tertiary);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
  line-height: var(--line-height-base, 1.5);
  max-width:   600px;
}

/* Data section label — separator with horizontal line, DS anatomy */
.data-section-label {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4, 16px);
  margin-bottom: var(--space-6, 24px);
  min-width:     0;
}

.data-section-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border-subtle);
  min-width:  0;
}

.data-section-label span {
  font-size:      var(--font-size-2xs, 10px);
  font-weight:    var(--font-weight-semibold, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-text-disabled);
  white-space:    nowrap;
  flex-shrink:    0;
  font-family:    var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* ── 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; } }
@media (max-width: 480px)  { .charts-grid-4 { grid-template-columns: 1fr; } }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tabs-bar {
  display:       flex;
  gap:           0;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--sp-5);
  overflow-x:    auto;
  scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  padding:       10px var(--sp-4);
  border:        none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background:    transparent;
  color:         var(--color-text-secondary);
  font-size:     12px;
  font-weight:   500;
  white-space:   nowrap;
  cursor:        pointer;
  transition:    color 140ms ease, border-color 140ms ease;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  letter-spacing: 0.01em;
}
.tab-btn:hover { color: var(--color-text-sub); }

/* PRESERVED: .active — JS bound */
.tab-btn.active {
  color:              var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
  font-weight:        600;
}

.tab-count {
  padding:       1px 6px;
  border-radius: 9999px;
  background:    rgba(255, 255, 255, 0.08);
  border:        1px solid var(--color-border-subtle);
  font-size:     10px;
  font-weight:   600;
  color:         var(--color-text-secondary);
}
.tab-btn.active .tab-count {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-border-default);
  color:       var(--color-text-primary);
}

.tab-panel { animation: fadeIn var(--t-fast) both; }

/* ── Status badges (inline na tabela) ─────────────────────────────── */
/* PRESERVED: all .status-badge subclasses — JS bound */
.status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 9px;
  border-radius: 9999px;
  font-size:     10px;
  font-weight:   600;
  white-space:   nowrap;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  letter-spacing: 0.04em;
  border:        1px solid transparent;
}

.status-badge.entregue {
  background:   var(--color-semantic-positive-dim);
  color:        var(--color-semantic-positive-text);
  border-color: var(--color-semantic-positive-border);
}
.status-badge.cancelado {
  background:   var(--color-semantic-negative-dim);
  color:        var(--color-semantic-negative-text);
  border-color: var(--color-semantic-negative-border);
}
.status-badge.separacao {
  background:   var(--color-semantic-warning-dim);
  color:        var(--color-semantic-warning-text);
  border-color: var(--color-semantic-warning-border);
}
.status-badge.producao {
  background:   rgba(167, 139, 250, 0.10);
  color:        #A78BFA;
  border-color: rgba(167, 139, 250, 0.22);
}
.status-badge.enviado {
  background:   var(--color-semantic-info-dim);
  color:        var(--color-semantic-info-text);
  border-color: var(--color-semantic-info-border);
}
.status-badge.aguardando {
  background:   rgba(255, 255, 255, 0.05);
  color:        var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}
.status-badge.default {
  background:   rgba(255, 255, 255, 0.05);
  color:        var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS — Mobile-first
   ════════════════════════════════════════════════════════════════════ */

/* ── ≤1024 px — Tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
  /* Sidebar: colapsar automaticamente */
  .sidebar           { width: var(--sidebar-w-collapsed, 52px); }
  .sidebar-logo-text { display: none; }
  .nav-label         { display: none; }
  .sidebar-section-label { visibility: hidden; height: 0; padding: 0; }
  .sidebar-toggle .nav-label { display: none; }

  /* Header: reduzir padding */
  .header { padding: 0 var(--sp-4); gap: var(--sp-3); }

  /* Content */
  .content { padding: var(--sp-4); }

  /* Section title */
  .section-title { font-size: 15px; }
}

/* ── ≤768 px — Tablet portrait ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header: empilhar em múltiplas linhas se necessário */
  .header         { padding: 0 var(--sp-3); gap: var(--sp-2); height: auto; min-height: var(--header-h); flex-wrap: wrap; }
  .header-actions { gap: var(--sp-1); }

  /* File badge: encurtar nome */
  .header-file-badge-name { max-width: 120px; }

  /* Content */
  .content { padding: var(--sp-3); }

  /* Section header */
  .section-header { margin-bottom: var(--sp-4); gap: var(--sp-3); }
  .section-title  { font-size: 14px; }

  /* Tabs */
  .tabs-bar { margin-bottom: var(--sp-4); }
  .tab-btn  { padding: 9px var(--sp-3); font-size: 11px; }

  /* Charts grid: ≥2 col → 1 col */
  .charts-grid-2,
  .charts-grid-3,
  .charts-grid-4 { grid-template-columns: 1fr; }
}

/* ── ≤480 px — Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Sidebar: ocultar completamente (overlay-based seria ideal, mas sem JS extra) */
  .sidebar { display: none; }

  /* Header: compacto */
  .header  { padding: 0 var(--sp-3); height: 48px; min-height: 48px; flex-wrap: nowrap; }

  /* Esconder breadcrumb secundário */
  .header-breadcrumb-sep,
  .header-breadcrumb > span:last-child { display: none; }

  /* File badge: ocultar em mobile */
  .header-file-badge { display: none; }

  /* Actions: garantir toque ≥40px */
  .header-actions > button,
  .header-actions > .btn-mc { min-height: 40px; min-width: 40px; }

  /* Texto "Mission Control" → apenas ícone */
  .btn-mc > span { display: none; }

  /* Content */
  .content { padding: var(--sp-3) var(--sp-2) var(--sp-5); }

  /* Section title */
  .section-title         { font-size: 13px; }
  .section-label-overline { font-size: 9px; }
  .section-subtitle      { font-size: 10px; }

  /* Tabs: touch targets maiores */
  .tab-btn  { padding: 10px var(--sp-3); min-height: 40px; font-size: 11px; }

  /* Data section label */
  .data-section-label { gap: var(--sp-2); margin-bottom: var(--sp-4); }
}

/* ── ≤360 px — Small mobile ───────────────────────────────────────── */
@media (max-width: 360px) {
  .header { padding: 0 var(--sp-2); }
  .content { padding: var(--sp-2); }
  .tab-btn { padding: 8px var(--sp-2); font-size: 10px; }
}

/* ── Touch: desabilitar hover em dispositivos sem mouse ──────────── */
@media (hover: none) and (pointer: coarse) {
  .sidebar-nav-item:hover { background: transparent; color: var(--color-text-secondary); }
  .tab-btn:hover          { color: var(--color-text-secondary); }

  /* Touch targets mínimos */
  .sidebar-nav-item { min-height: 44px; }
  .tab-btn          { min-height: 44px; }
  .btn-reset,
  .filter-toggle-btn { min-height: 40px; }
}