/* ═══════════════════════════════════════════════════════════════════
   MC.CSS — Mission Control visual layer.
   Extends the existing design system (base.css tokens).
   All class names are prefixed with mc- to avoid collisions.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ────────────────────────────────────────────────────────── */
.mc-shell {
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow:       hidden;
  background:     #0B1120;
  color:          #E2E8F0;
  font-family:    var(--font-sans);
}

/* ── Top header bar ───────────────────────────────────────────────── */
.mc-topbar {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-4);
  padding:         0 var(--sp-6);
  height:          56px;
  flex-shrink:     0;
  background:      #0D1526;
  border-bottom:   1px solid rgba(255,255,255,.07);
  position:        relative;
  z-index:         10;
}

.mc-topbar-brand {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-shrink: 0;
}

.mc-topbar-icon {
  width:            34px;
  height:           34px;
  background:       linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  border-radius:    var(--r-md);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            #fff;
  font-size:        15px;
  box-shadow:       0 0 14px rgba(59,130,246,.45);
  flex-shrink:      0;
}

.mc-topbar-title {
  font-size:   17px;
  font-weight: 800;
  color:       #F1F5F9;
  letter-spacing: -.3px;
  white-space: nowrap;
}

.mc-topbar-sub {
  font-size:  11px;
  color:      #64748B;
  white-space:nowrap;
  margin-top: 1px;
}

.mc-topbar-divider {
  width:      1px;
  height:     28px;
  background: rgba(255,255,255,.1);
  flex-shrink:0;
  margin:     0 var(--sp-2);
}

/* Filter status pill */
.mc-filter-status {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     4px 10px;
  background:  rgba(37,99,235,.18);
  border:      1px solid rgba(37,99,235,.35);
  border-radius: var(--r-full);
  font-size:   11px;
  color:       #93C5FD;
  white-space: nowrap;
}

.mc-filter-status.inactive {
  background:  rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
  color:       #475569;
}

.mc-topbar-spacer { flex: 1; }

/* Back button */
.mc-btn-back {
  display:      flex;
  align-items:  center;
  gap:          6px;
  padding:      7px 14px;
  background:   rgba(255,255,255,.06);
  border:       1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  color:        #CBD5E1;
  font-size:    12px;
  font-weight:  500;
  cursor:       pointer;
  transition:   all var(--t-fast);
  white-space:  nowrap;
  font-family:  var(--font-sans);
}
.mc-btn-back:hover {
  background:  rgba(255,255,255,.11);
  color:       #F1F5F9;
  border-color:rgba(255,255,255,.2);
}

/* ── Tab navigation bar ───────────────────────────────────────────── */
.mc-tabs {
  display:       flex;
  align-items:   center;
  gap:           2px;
  padding:       0 var(--sp-6);
  height:        46px;
  flex-shrink:   0;
  background:    #0D1526;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.mc-tab {
  display:      flex;
  align-items:  center;
  gap:          7px;
  padding:      8px 16px;
  border:       none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:   transparent;
  color:        #64748B;
  font-family:  var(--font-sans);
  font-size:    13px;
  font-weight:  500;
  cursor:       pointer;
  transition:   all var(--t-fast);
  position:     relative;
  white-space:  nowrap;
}
.mc-tab:hover {
  color:       #94A3B8;
  background:  rgba(255,255,255,.04);
}
.mc-tab.active {
  color:       #93C5FD;
  background:  rgba(59,130,246,.1);
  font-weight: 600;
}
.mc-tab.active::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
  border-radius: 2px 2px 0 0;
}

/* ── Filter bar in MC context ─────────────────────────────────────── */
.mc-filterbar-wrap {
  flex-shrink:  0;
  background:   #0F1929;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:      8px var(--sp-6);
}

/* Override FilterBar colours for dark background */
.mc-filterbar-wrap .filter-bar {
  background:   transparent;
  border:       none;
  box-shadow:   none;
  padding:      0;
}
.mc-filterbar-wrap .filter-bar-header,
.mc-filterbar-wrap .filter-bar-title {
  color: #94A3B8;
}
.mc-filterbar-wrap .filter-select select,
.mc-filterbar-wrap .filter-date input {
  background:   #1E293B;
  border-color: rgba(255,255,255,.1);
  color:        #CBD5E1;
}
.mc-filterbar-wrap .filter-select select:focus,
.mc-filterbar-wrap .filter-date input:focus {
  border-color: #3B82F6;
  box-shadow:   0 0 0 2px rgba(59,130,246,.25);
}
.mc-filterbar-wrap .btn-reset,
.mc-filterbar-wrap .filter-toggle-btn {
  background:  rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  color:       #94A3B8;
}
.mc-filterbar-wrap .active-filter-tag {
  background:  rgba(37,99,235,.2);
  border-color:rgba(37,99,235,.4);
  color:       #93C5FD;
}
.mc-filterbar-wrap .active-filter-tag button { color: #93C5FD; }
.mc-filterbar-wrap label { color: #64748B; }

/* ── Scrollable page content ──────────────────────────────────────── */
.mc-content {
  flex:       1;
  overflow-y: auto;
  padding:    var(--sp-6) var(--sp-6) var(--sp-10);
  scrollbar-width: thin;
  scrollbar-color: #1E293B transparent;
}
.mc-content::-webkit-scrollbar { width: 6px; }
.mc-content::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 3px; }

/* ── Page header ──────────────────────────────────────────────────── */
.mc-page-header {
  margin-bottom: var(--sp-6);
}
.mc-page-title {
  font-size:   22px;
  font-weight: 800;
  color:       #F1F5F9;
  letter-spacing: -.4px;
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}
.mc-page-title i {
  font-size:  18px;
  opacity:    .8;
}
.mc-page-subtitle {
  font-size:  12px;
  color:      #475569;
  margin-top: 3px;
}

/* ── Section label ────────────────────────────────────────────────── */
.mc-section-label {
  font-size:    10px;
  font-weight:  700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:        #475569;
  margin:       var(--sp-6) 0 var(--sp-3);
}

/* ── KPI row ──────────────────────────────────────────────────────── */
.mc-kpi-row {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   var(--sp-3);
  margin-bottom:         var(--sp-5);
}
@media (max-width: 1400px) {
  .mc-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mc-kpi-row { grid-template-columns: 1fr; }
}

/* KPI card */
.mc-kpi {
  background:   #131F35;
  border:       1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  padding:      var(--sp-4) var(--sp-5);
  position:     relative;
  overflow:     hidden;
  transition:   border-color var(--t-fast), box-shadow var(--t-fast);
}
.mc-kpi:hover {
  border-color: rgba(255,255,255,.14);
  box-shadow:   0 4px 20px rgba(0,0,0,.3);
}

.mc-kpi-accent {
  position:      absolute;
  top:           0; left: 0; right: 0;
  height:        2px;
  border-radius: 0 0 0 0;
}
.mc-kpi-accent.blue    { background: linear-gradient(90deg,#3B82F6,#60A5FA); }
.mc-kpi-accent.green   { background: linear-gradient(90deg,#10B981,#34D399); }
.mc-kpi-accent.purple  { background: linear-gradient(90deg,#8B5CF6,#A78BFA); }
.mc-kpi-accent.orange  { background: linear-gradient(90deg,#F59E0B,#FBB140); }
.mc-kpi-accent.red     { background: linear-gradient(90deg,#EF4444,#F87171); }
.mc-kpi-accent.cyan    { background: linear-gradient(90deg,#06B6D4,#22D3EE); }
.mc-kpi-accent.neutral { background: linear-gradient(90deg,#475569,#64748B); }

.mc-kpi-label {
  font-size:  11px;
  color:      #64748B;
  font-weight:500;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:   hidden;
  text-overflow:ellipsis;
}

.mc-kpi-value {
  font-size:    26px;
  font-weight:  800;
  color:        #F1F5F9;
  line-height:  1;
  letter-spacing:-.5px;
  margin-bottom:6px;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow:ellipsis;
}

.mc-kpi-footer {
  font-size:  11px;
  color:      #475569;
  white-space:nowrap;
  overflow:   hidden;
  text-overflow:ellipsis;
}

/* color modifiers */
.mc-kpi.is-danger  { border-color: rgba(239,68,68,.25); }
.mc-kpi.is-danger .mc-kpi-value { color: #FCA5A5; }
.mc-kpi.is-warning { border-color: rgba(245,158,11,.2); }
.mc-kpi.is-warning .mc-kpi-value { color: #FCD34D; }
.mc-kpi.is-success .mc-kpi-value { color: #6EE7B7; }

/* ── Chart grids ──────────────────────────────────────────────────── */
.mc-charts-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-5);
}
.mc-charts-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-5);
}
.mc-charts-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-5);
}
.mc-charts-2-1 {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-5);
}
.mc-charts-1-2 {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-5);
}

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

/* col-span helpers */
.mc-col-span-2 { grid-column: span 2; }
.mc-col-span-3 { grid-column: span 3; }
.mc-col-span-4 { grid-column: span 4; }
@media (max-width: 1400px) {
  .mc-col-span-2, .mc-col-span-3, .mc-col-span-4 { grid-column: span 1; }
}

/* ── Chart card ───────────────────────────────────────────────────── */
.mc-card {
  background:   #131F35;
  border:       1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  padding:      var(--sp-4) var(--sp-5);
  display:      flex;
  flex-direction:column;
  transition:   border-color var(--t-fast);
  min-width:    0;
}
.mc-card:hover { border-color: rgba(255,255,255,.12); }

.mc-card-header {
  display:      flex;
  align-items:  flex-start;
  justify-content:space-between;
  margin-bottom:var(--sp-3);
  gap:          var(--sp-2);
}
.mc-card-title {
  font-size:  13px;
  font-weight:700;
  color:      #CBD5E1;
}
.mc-card-sub {
  font-size:  11px;
  color:      #475569;
  margin-top: 2px;
}
.mc-card-badge {
  font-size:  10px;
  padding:    2px 8px;
  border-radius:var(--r-full);
  background: rgba(59,130,246,.15);
  color:      #93C5FD;
  border:     1px solid rgba(59,130,246,.25);
  white-space:nowrap;
  flex-shrink:0;
}

.mc-chart-area {
  flex:     1;
  min-width:0;
}

/* ECharts container inside mc-card */
.mc-echarts {
  width:  100%;
}

/* ── Ranking card ─────────────────────────────────────────────────── */
.mc-ranking-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction:column;
  gap:        var(--sp-2);
}

.mc-ranking-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   12px;
}

.mc-rank-num {
  width:       20px;
  flex-shrink: 0;
  font-size:   10px;
  font-weight: 700;
  color:       #475569;
  text-align:  right;
}

.mc-rank-bar-wrap {
  flex:        1;
  height:      6px;
  background:  rgba(255,255,255,.06);
  border-radius:3px;
  overflow:    hidden;
}
.mc-rank-bar {
  height:      100%;
  border-radius:3px;
  background:  linear-gradient(90deg,#3B82F6,#60A5FA);
  transition:  width .4s ease;
  min-width:   2px;
}
.mc-rank-bar.green  { background: linear-gradient(90deg,#10B981,#34D399); }
.mc-rank-bar.purple { background: linear-gradient(90deg,#8B5CF6,#A78BFA); }
.mc-rank-bar.orange { background: linear-gradient(90deg,#F59E0B,#FBBF24); }

.mc-rank-label {
  flex:         1;
  color:        #CBD5E1;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow:ellipsis;
  min-width:    80px;
  max-width:    180px;
}
.mc-rank-value {
  font-size:   11px;
  font-weight: 600;
  color:       #94A3B8;
  white-space: nowrap;
  text-align:  right;
  min-width:   64px;
}

/* ── Detail table ─────────────────────────────────────────────────── */
.mc-table-wrap {
  overflow-x: auto;
  margin-top: var(--sp-2);
  border-radius:var(--r-md);
  border:     1px solid rgba(255,255,255,.07);
}

.mc-table {
  width:          100%;
  border-collapse:collapse;
  font-size:      12px;
}

.mc-table thead th {
  padding:        8px 12px;
  text-align:     left;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color:          #475569;
  background:     rgba(255,255,255,.03);
  border-bottom:  1px solid rgba(255,255,255,.07);
  white-space:    nowrap;
  cursor:         pointer;
  user-select:    none;
}
.mc-table thead th:hover { color: #94A3B8; }
.mc-table thead th.sorted { color: #93C5FD; }

.mc-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition:    background var(--t-fast);
}
.mc-table tbody tr:last-child { border-bottom: none; }
.mc-table tbody tr:hover { background: rgba(255,255,255,.03); }

.mc-table tbody td {
  padding: 8px 12px;
  color:   #94A3B8;
  white-space:nowrap;
  vertical-align:middle;
}
.mc-table tbody td.primary  { color: #CBD5E1; font-weight: 500; }
.mc-table tbody td.mono     { font-family: var(--font-mono); font-size: 11px; color:#64748B; }
.mc-table tbody td.right    { text-align: right; }
.mc-table tbody td.center   { text-align: center; }

/* Dias badge in dark table */
.mc-days-badge {
  display:      inline-flex;
  align-items:  center;
  padding:      2px 8px;
  border-radius:var(--r-full);
  font-size:    10px;
  font-weight:  600;
}
.mc-days-badge.green  { background: rgba(16,185,129,.15); color:#6EE7B7; border:1px solid rgba(16,185,129,.25); }
.mc-days-badge.yellow { background: rgba(245,158,11,.12); color:#FCD34D; border:1px solid rgba(245,158,11,.22); }
.mc-days-badge.orange { background: rgba(234,88,12,.15);  color:#FCA5A5; border:1px solid rgba(234,88,12,.25); }
.mc-days-badge.red    { background: rgba(239,68,68,.18);  color:#FCA5A5; border:1px solid rgba(239,68,68,.28); }

/* Status badge dark variant */
.mc-status {
  display:      inline-block;
  padding:      2px 8px;
  border-radius:var(--r-full);
  font-size:    10px;
  font-weight:  600;
  background:   rgba(255,255,255,.06);
  color:        #94A3B8;
}
.mc-status.entregue    { background:rgba(16,185,129,.15); color:#6EE7B7; }
.mc-status.cancelado   { background:rgba(239,68,68,.15);  color:#FCA5A5; }
.mc-status.enviado     { background:rgba(59,130,246,.15); color:#93C5FD; }
.mc-status.separacao   { background:rgba(245,158,11,.12); color:#FCD34D; }
.mc-status.producao    { background:rgba(139,92,246,.15); color:#C4B5FD; }
.mc-status.aguardando  { background:rgba(100,116,139,.15);color:#94A3B8; }

/* ── Empty / loading states ───────────────────────────────────────── */
.mc-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-12) var(--sp-6);
  color:           #475569;
  text-align:      center;
  gap:             var(--sp-3);
}
.mc-empty i { font-size: 32px; opacity: .4; }
.mc-empty p { font-size: 13px; margin: 0; }
.mc-empty small { font-size: 11px; opacity: .6; }

/* ── Pagination ───────────────────────────────────────────────────── */
.mc-pagination {
  display:     flex;
  align-items: center;
  justify-content:space-between;
  padding-top: var(--sp-3);
  font-size:   11px;
  color:       #475569;
}
.mc-pagination-controls { display: flex; gap: 4px; }
.mc-pag-btn {
  padding:      4px 9px;
  border:       1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);
  background:   transparent;
  color:        #64748B;
  font-size:    11px;
  cursor:       pointer;
  font-family:  var(--font-sans);
  transition:   all var(--t-fast);
}
.mc-pag-btn:hover:not(:disabled) { background:rgba(255,255,255,.07); color:#CBD5E1; }
.mc-pag-btn.active { background:rgba(59,130,246,.2); border-color:rgba(59,130,246,.4); color:#93C5FD; }
.mc-pag-btn:disabled { opacity:.3; cursor:default; }

/* ── Gauge ring (CSS fallback if ECharts not available) ───────────── */
.mc-gauge-wrap {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         var(--sp-3) 0;
}

/* ── Scrollbar on dark bg ─────────────────────────────────────────── */
.mc-content::-webkit-scrollbar-track { background: transparent; }

/* ── Mission Control entry button (in dashboard header) ───────────── */
.btn-mc {
  display:      flex;
  align-items:  center;
  gap:          6px;
  padding:      7px 14px;
  background:   linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  border:       none;
  border-radius:var(--r-md);
  color:        #fff;
  font-size:    12px;
  font-weight:  600;
  cursor:       pointer;
  font-family:  var(--font-sans);
  transition:   opacity var(--t-fast), box-shadow var(--t-fast);
  box-shadow:   0 2px 8px rgba(37,99,235,.35);
  white-space:  nowrap;
}
.btn-mc:hover {
  opacity:    .9;
  box-shadow: 0 4px 14px rgba(37,99,235,.45);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-topbar { padding: 0 var(--sp-4); }
  .mc-tabs   { padding: 0 var(--sp-4); overflow-x: auto; }
  .mc-content{ padding: var(--sp-4); }
  .mc-topbar-sub  { display: none; }
  .mc-kpi-value   { font-size: 20px; }
}

@media (max-width: 600px) {
  .mc-topbar-title { font-size: 14px; }
  .mc-tab          { font-size: 12px; padding: 6px 10px; }
}