/* ═══════════════════════════════════════════════════════════════════
   AGING.CSS  — Estilos compartilhados para os blocos:
     • AgingSection (.aging-*)  — Envelhecimento dos Pedidos
     • LogisticsSection (.lg-*) — Logística Operacional

   Prefixos distintos evitam colisões.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   AGING SECTION — Mini KPI cards
   ══════════════════════════════════════════════════════════════════ */

.aging-kpi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   var(--sp-3);
  margin-bottom:         var(--sp-5);
}

.aging-kpi-card {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4);
  transition:    box-shadow .15s;
}
.aging-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

.aging-kpi-icon  { font-size: 20px; line-height: 1; margin-top: 2px; flex-shrink: 0; }
.aging-kpi-body  { min-width: 0; }
.aging-kpi-value {
  font-size: 22px; font-weight: 700;
  color: var(--c-text-primary); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aging-kpi-label { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); margin-top: 2px; }
.aging-kpi-sub   { font-size: 11px; color: var(--c-text-tertiary); margin-top: 2px; }

/* ── Gráficos auxiliares ─────────────────────────────────────────── */
.aging-charts-row {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-5);
}

.aging-chart-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4);
}
.aging-chart { width: 100%; }
.aging-chart-title { font-size: 13px; font-weight: 600; color: var(--c-text-secondary); margin-bottom: var(--sp-3); }

.aging-chart-bars  { display: flex; flex-direction: column; gap: 6px; }
.aging-bar-row     { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: var(--sp-2); }
.aging-bar-label   { font-size: 12px; color: var(--c-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aging-bar-track   { height: 14px; background: var(--c-border); border-radius: 7px; overflow: hidden; }
.aging-bar-fill    { height: 100%; border-radius: 7px; transition: width .4s ease; min-width: 4px; }
.aging-bar-value   { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); text-align: right; }

.aging-chart-empty {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-6);
  color: var(--c-text-tertiary); font-size: 13px;
}

/* ── Legenda de criticidade ──────────────────────────────────────── */
.aging-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-secondary, #f8fafc);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  margin-bottom: var(--sp-4); font-size: 12px;
}
.aging-legend-title { font-weight: 600; color: var(--c-text-secondary); }
.aging-legend-item  {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; border: 1px solid transparent;
}

/* ── Filtros ─────────────────────────────────────────────────────── */
.aging-table-wrap   { display: flex; flex-direction: column; gap: var(--sp-3); }
.aging-filters      {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-secondary, #f8fafc);
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
}
.aging-filter-search { position: relative; }
.aging-search-icon   {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--c-text-tertiary); font-size: 12px; pointer-events: none;
}
.aging-search-input {
  width: 100%; padding: 8px 12px 8px 34px;
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  background: var(--c-surface); font-size: 13px; color: var(--c-text-primary);
  outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.aging-search-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.aging-filter-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-2); }
.aging-filter-group { display: flex; flex-direction: column; gap: 4px; }
.aging-filter-label { font-size: 11px; font-weight: 600; color: var(--c-text-tertiary); text-transform: uppercase; letter-spacing: .4px; }
.aging-filter-select {
  padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); font-size: 12px; color: var(--c-text-primary);
  outline: none; cursor: pointer; transition: border-color .15s;
}
.aging-filter-select:focus,
.aging-filter-select:hover { border-color: var(--c-primary); }
.aging-filter-select.active { border-color: var(--c-primary); background: rgba(37,99,235,.04); color: var(--c-primary); font-weight: 600; }

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

.aging-btn-ghost {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-md);
  background: transparent; color: var(--c-text-secondary);
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s;
}
.aging-btn-ghost:hover { background: var(--c-surface-hover, #f1f5f9); border-color: var(--c-text-tertiary); }

.aging-btn-export {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 6px 14px; border: none; border-radius: var(--radius-md);
  background: var(--c-primary); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
  margin-left: auto;
}
.aging-btn-export:hover { background: var(--c-primary-dark, #1d4ed8); }

/* ── Tabela aging ────────────────────────────────────────────────── */
.aging-table-meta { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.aging-data-table td { font-size: 12px; padding: 7px 10px; }
.aging-data-table th { font-size: 11px; padding: 8px 10px; }
.aging-order-id { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--c-text-secondary); }
.aging-days-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.aging-row-green  { background: rgba(5,150,105,.03); }
.aging-row-yellow { background: rgba(217,119,6,.04); }
.aging-row-orange { background: rgba(234,88,12,.05); }
.aging-row-red    { background: rgba(220,38,38,.06); }
.aging-row:hover  { filter: brightness(.97); }


/* ══════════════════════════════════════════════════════════════════
   LOGISTICS SECTION  (.lg-*)
   Painel executivo: big-numbers, gráficos compactos, tabela.
   ══════════════════════════════════════════════════════════════════ */

/* ── 6 Big-Number cards ──────────────────────────────────────────── */
.lg-big-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   var(--sp-3);
  margin-bottom:         var(--sp-5);
}

.lg-big-card {
  position:      relative;
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4) var(--sp-4) var(--sp-4);
  border-top:    3px solid var(--lg-accent, var(--c-primary));
  transition:    box-shadow .15s, transform .15s;
  overflow:      hidden;
}
.lg-big-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform:  translateY(-1px);
}

.lg-big-icon {
  width:           38px;
  min-width:       38px;
  height:          38px;
  background:      color-mix(in srgb, var(--lg-accent, var(--c-primary)) 12%, transparent);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       16px;
  color:           var(--lg-accent, var(--c-primary));
  flex-shrink:     0;
}

.lg-big-body  { min-width: 0; flex: 1; }
.lg-big-value {
  font-size:     26px;
  font-weight:   800;
  color:         var(--c-text-primary);
  line-height:   1.1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  letter-spacing: -.5px;
}
.lg-big-label { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); margin-top: 3px; }
.lg-big-sub   { font-size: 11px; color: var(--c-text-tertiary); margin-top: 2px; }

/* Ícone de alerta no canto superior direito */
.lg-big-alert {
  position:  absolute;
  top:       10px;
  right:     10px;
  font-size: 13px;
}
.lg-big-alert-alert    { color: #d97706; }
.lg-big-alert-critical { color: #dc2626; animation: lg-pulse 2s ease-in-out infinite; }

@keyframes lg-pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: .45; }
}

/* ── Alerta no título da seção ───────────────────────────────────── */
.lg-header-alert        { font-size: 15px; }
.lg-header-alert-alert  { color: #d97706; }
.lg-header-alert-critical { color: #dc2626; }

/* ── Grid de 4 gráficos compactos ────────────────────────────────── */
.lg-charts-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-4);
}

.lg-chart-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-3) var(--sp-4) var(--sp-4);
  display:       flex;
  flex-direction:column;
}

.lg-chart-header {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  margin-bottom: var(--sp-2);
}
.lg-chart-icon  { font-size: 12px; color: var(--c-primary); }
.lg-chart-title {
  font-size:   12px;
  font-weight: 600;
  color:       var(--c-text-secondary);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.lg-chart-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         var(--sp-8) var(--sp-4);
  color:           var(--c-text-tertiary);
  font-size:       12px;
  text-align:      center;
}

/* ── Legenda compacta ────────────────────────────────────────────── */
.lg-legend {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--sp-2);
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--c-bg-secondary, #f8fafc);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  font-size:     12px;
}
.lg-legend-title { font-weight: 600; color: var(--c-text-secondary); }
.lg-legend-item  {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 10px;
  border-radius: 12px;
  font-size:     11px;
  font-weight:   600;
  border:        1px solid transparent;
}

/* ── Filtros da tabela ───────────────────────────────────────────── */
.lg-table-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
}

.lg-filters {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  padding:        var(--sp-4);
  background:     var(--c-bg-secondary, #f8fafc);
  border:         1px solid var(--c-border);
  border-radius:  var(--radius-lg);
}

.lg-filter-search-wrap {
  position: relative;
}
.lg-search-icon {
  position:       absolute;
  left:           12px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--c-text-tertiary);
  font-size:      12px;
  pointer-events: none;
}
.lg-search-input {
  width:         100%;
  padding:       9px 12px 9px 34px;
  border:        1px solid var(--c-border);
  border-radius: var(--radius-md);
  background:    var(--c-surface);
  font-size:     13px;
  color:         var(--c-text-primary);
  outline:       none;
  transition:    border-color .15s, box-shadow .15s;
  box-sizing:    border-box;
}
.lg-search-input:focus {
  border-color: var(--c-primary);
  box-shadow:   0 0 0 3px rgba(37,99,235,.1);
}

.lg-filter-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap:                   var(--sp-2);
}

.lg-filter-group { display: flex; flex-direction: column; gap: 4px; }
.lg-filter-label {
  font-size:      11px;
  font-weight:    600;
  color:          var(--c-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.lg-filter-select {
  padding:       6px 10px;
  border:        1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background:    var(--c-surface);
  font-size:     12px;
  color:         var(--c-text-primary);
  outline:       none;
  cursor:        pointer;
  transition:    border-color .15s;
}
.lg-filter-select:focus,
.lg-filter-select:hover { border-color: var(--c-primary); }
.lg-filter-select.active {
  border-color: var(--c-primary);
  background:   rgba(37,99,235,.04);
  color:        var(--c-primary);
  font-weight:  600;
}

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

.lg-btn-ghost {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       6px 12px;
  border:        1px solid var(--c-border);
  border-radius: var(--radius-md);
  background:    transparent;
  color:         var(--c-text-secondary);
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all .15s;
}
.lg-btn-ghost:hover { background: var(--c-surface-hover, #f1f5f9); border-color: var(--c-text-tertiary); }

.lg-btn-export {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       6px 14px;
  border:        none;
  border-radius: var(--radius-md);
  background:    var(--c-primary);
  color:         #fff;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s;
  margin-left:   auto;
}
.lg-btn-export:hover { background: var(--c-primary-dark, #1d4ed8); }

/* ── Tabela logística ────────────────────────────────────────────── */
.lg-data-table td { font-size: 12px; padding: 7px 10px; }
.lg-data-table th { font-size: 11px; padding: 8px 10px; }

/* ID do pedido em fonte mono */
.lg-order-id {
  font-family:   var(--font-mono, 'JetBrains Mono', monospace);
  font-size:     11px;
  color:         var(--c-text-secondary);
}

/* Badge de dias com cor de criticidade */
.lg-days-badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: 10px;
  font-size:     11px;
  font-weight:   700;
  white-space:   nowrap;
}

/* Links clicáveis nas células */
.lg-clickable {
  cursor:          pointer;
  color:           var(--c-text-primary);
  font-weight:     500;
  border-bottom:   1px dashed transparent;
  transition:      all .12s;
}
.lg-clickable:hover {
  color:        var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.lg-clickable-sec {
  color:       var(--c-text-secondary);
  font-weight: 400;
}
.lg-clickable-sec:hover {
  color: var(--c-secondary, #7c3aed);
  border-bottom-color: var(--c-secondary, #7c3aed);
}

/* Linhas com fundo de criticidade */
.lg-row-green  { background: rgba(5,150,105,.025); }
.lg-row-yellow { background: rgba(217,119,6,.03);  }
.lg-row-orange { background: rgba(234,88,12,.04);  }
.lg-row-red    { background: rgba(220,38,38,.05);  }
.lg-row-none   { background: transparent; }

.lg-row:hover { filter: brightness(.97); }

/* ── Responsividade ──────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .lg-big-grid    { grid-template-columns: repeat(3, 1fr); }
  .lg-charts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .lg-big-grid    { grid-template-columns: repeat(2, 1fr); }
  .lg-charts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .lg-big-grid    { grid-template-columns: repeat(2, 1fr); }
  .lg-charts-grid { grid-template-columns: 1fr; }
  .lg-filter-grid { grid-template-columns: repeat(2, 1fr); }
  .aging-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .aging-charts-row { grid-template-columns: 1fr; }
  .aging-filter-grid { grid-template-columns: repeat(2, 1fr); }
  .aging-bar-row { grid-template-columns: 100px 1fr 30px; }
}

@media (max-width: 480px) {
  .lg-big-grid    { grid-template-columns: 1fr 1fr; }
  .lg-big-value   { font-size: 20px; }
  .lg-filter-grid { grid-template-columns: 1fr; }
  .aging-kpi-grid { grid-template-columns: 1fr 1fr; }
  .aging-kpi-value { font-size: 18px; }
  .aging-filter-grid { grid-template-columns: 1fr; }
}