/* Directive 08 — /platform/sales_preparation (수동 판매 준비 콘솔).
   Small, additive stylesheet: the page reuses the existing .cy-* platform classes;
   only the state badges and the §P progress bar need their own rules. Propshaft picks
   this file up through the layout's stylesheet_link_tag :app (assets:precompile is
   required before it is served — see the deploy gate in docs/HOW_TO_USE_AUTOMATION.md). */

.sp-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.sp-state--off { background: #f1f3f5; color: #343a40; border-color: #ced4da; }
.sp-state--preparing { background: #fff3bf; color: #7a5c00; border-color: #ffd43b; }
.sp-state--ready { background: #d3f9d8; color: #1b5e20; border-color: #69db7c; }
.sp-state--stale { background: #ffe3e3; color: #8a1c1c; border-color: #ffa8a8; }

.sp-banner {
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 6px solid #d9480f;
  background: #fff4e6;
  color: #5c2b00;
  font-size: 17px;
}

.sp-banner strong { display: block; margin-bottom: 4px; }

.sp-progress {
  height: 18px;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
  border: 1px solid #ced4da;
  margin: 10px 0 6px;
}

.sp-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #74c0fc, #4dabf7);
  transition: width 0.4s ease;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.sp-grid__cell {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 10px 14px;
}

.sp-grid__cell dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; }
.sp-grid__cell dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; }

.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }

.sp-counts { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.sp-count {
  padding: 4px 12px;
  border-radius: 8px;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  font-weight: 600;
}
.sp-count--ready { background: #d3f9d8; border-color: #69db7c; }
.sp-count--warning { background: #fff3bf; border-color: #ffd43b; }
.sp-count--blocked { background: #ffe3e3; border-color: #ffa8a8; }
.sp-count--unknown { background: #e7f5ff; border-color: #a5d8ff; }

.sp-muted { color: #6c757d; font-size: 14px; }

.sp-limit input {
  width: 120px;
  padding: 6px 8px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 15px;
}

.sp-workflow {
  margin: 10px 0;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px dashed #adb5bd;
  border-radius: 10px;
  font-size: 15px;
}

@media (max-width: 700px) {
  .sp-actions .cy-btn { width: 100%; justify-content: center; }
  .sp-grid { grid-template-columns: 1fr; }
}