/* ================================================================
   INVENTORYHUB — inventory_detail.css
   Lokasi: analisis/static/analisis/css/inventory_detail.css
   ================================================================ */

.detail-body { padding: 2rem 26px 3rem; max-width: 1000px; margin: 0 auto; }

/* Tombol Header Action */
.detail-header-action {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 700; color: var(--text-soft); font-family: 'Syne', sans-serif;
  transition: all 0.2s; padding: 8px 14px; border-radius: 8px;
}
.btn-back:hover { background: var(--bg-2); color: var(--primary); transform: translateX(-4px); }

.btn-export-pdf {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
  background: linear-gradient(135deg, #1e3a8a, var(--primary)); color: white;
  border-radius: var(--radius-sm); font-weight: 700; font-size: 0.85rem; font-family: 'Syne', sans-serif;
  transition: all 0.3s; box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}
.btn-export-pdf:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4); }

/* Main Hero Info */
.product-hero {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem;
  padding: 24px 30px; margin-bottom: 1.5rem;
  background: linear-gradient(to right, var(--bg-card), var(--primary-dim));
}
.hero-left { display: flex; align-items: center; gap: 20px; }
.product-icon {
  width: 60px; height: 60px; background: white; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid var(--primary-border);
}
.product-title { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; margin-bottom: 4px; }
.product-code { font-family: monospace; font-size: 0.9rem; font-weight: 600; color: var(--primary); background: white; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); display: inline-block; }

.hero-right { text-align: right; }
.cluster-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.badge-lg { font-size: 0.9rem; padding: 8px 16px; }

/* Grid 3 Stats */
.item-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; display: flex; align-items: center; gap: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-title { font-size: 0.8rem; font-weight: 600; color: var(--text-soft); margin-bottom: 2px; }
.stat-number { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1; }

@media (max-width: 768px) {
  .product-hero { flex-direction: column; align-items: flex-start; text-align: left; }
  .hero-right { text-align: left; }
  .item-stats-grid { grid-template-columns: 1fr; }
}