/* ==================================================
   SUPPLY CHAIN WORKSPACE
   FILE: /clients/css/workspaces/supply-chain.css

   PURPOSE:
   Supply Chain workspace-specific styling.

   OWNS:
   - supply chain metric density
   - telemetry chart sizing
   - supply chain visual tuning
   - supply chain modal sizing
   - operational governance layouts

   DOES NOT OWN:
   - platform shell
   - sidebar layout
   - workspace mounting
   - global responsive behavior
   - shared card framework
================================================== */


/* ==================================================
   RANGE TOOLBAR
================================================== */

.sc-exception-toolbar {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  margin-bottom: 14px;

}

.sc-range-filter {

  display: flex;

  align-items: center;

  gap: 8px;

}

.sc-range-filter label {

  font-size: 11px;

  font-weight: 700;

  color: #64748b;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.sc-range-filter select {

  padding: 6px 10px;

  border-radius: 8px;

  border: 1px solid #cbd5e1;

  background: white;

  font-size: 12px;

  font-weight: 600;

  color: #0f172a;

  cursor: pointer;

}


/* ==================================================
   SUPPORTING METRICS LAYOUT
================================================== */

.supporting-metrics {
  gap: 10px;
}

.supporting-item {
  position: relative;

  padding: 10px 8px 8px;

  min-height: 118px;
}


/* ==================================================
   EXCEPTION TILES
================================================== */

.exception-tile {
  position: relative;
}


/* ==================================================
   METRIC TITLE ROW
================================================== */

.metric-title-row {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 4px;
}


/* ==================================================
   SOURCE BADGES
================================================== */

.metric-source-badge {
  position: absolute;

  top: 6px;
  left: 6px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: rgba(34, 197, 94, 0.18);
  color: #15803d;

  border: 1px solid rgba(34, 197, 94, 0.22);

  font-size: 7px;
  font-weight: 700;

  display: none;

  align-items: center;
  justify-content: center;

  line-height: 1;

  z-index: 2;
}


/* ==================================================
   TREND CHARTS
================================================== */

.aging-chart {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 8px;

  height: 82px;

  margin-top: 4px;
}

.aging-column {
  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  gap: 2px;
}

.aging-value {
  font-size: 11px;

  font-weight: 800;

  color: #0f172a;

  line-height: 1;
}

.aging-bar {
  width: 22px;

  border-radius: 6px 6px 0 0;

  background: #2563eb;

  min-height: 6px;
}

.aging-label {
  margin-top: 4px;

  font-size: 10px;

  font-weight: 700;

  color: #475569;

  line-height: 1;
}


/* ==================================================
   STATUS CHARTS
================================================== */

.status-chart {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 8px;

  height: 82px;

  margin-top: 4px;
}

.status-bar-column {
  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  gap: 2px;
}

.status-count {
  font-size: 11px;

  font-weight: 800;

  color: #0f172a;

  line-height: 1;
}

.status-bar {
  width: 22px;

  border-radius: 6px 6px 0 0;

  background: #2563eb;

  min-height: 6px;
}

.status-label {
  margin-top: 4px;

  font-size: 10px;

  font-weight: 700;

  color: #475569;

  line-height: 1;
}


/* ==================================================
   MODAL TABLE WIDTH
================================================== */

.metric-modal-content {
  width: 98vw;
  max-width: 98vw;
}

.metric-modal-body {
  overflow-x: auto;
}

.metric-table {
  min-width: 1800px;
}


/* ==================================================
   SUPPLY CHAIN METRIC EMPHASIS
================================================== */

.exception-tile .metric-value {
  font-size: 54px;

  font-weight: 900;

  color: #0f172a;

  line-height: 1;
}

.exception-tile .metric-label {
  font-size: 12px;

  font-weight: 700;

  color: #64748b;

  text-align: center;

  margin-top: 6px;
}


/* ==================================================
   TELEMETRY TILE BALANCE
================================================== */

.supporting-item .metric-title {
  font-size: 11px;

  font-weight: 700;

  color: #0f172a;

  text-align: center;
}


/* ==================================================
   GOVERNANCE PLACEHOLDER TILES
================================================== */

.supporting-item.placeholder {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #94a3b8;

  font-size: 13px;

  font-weight: 700;

}

/* ==================================================
   QUALIFIED SUPPLIER RECON
================================================== */

.recon-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recon-value {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.recon-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}