/* 0.1 List Equipment & Manajemen Keluar Masuk Unit
   Gaya teks, komposisi warna & kontras shadcn/ui (docs/DESIGN_STYLE.md) + Taste Skill craftsmanship.
   Dibatasi ke #tab-prodListEquipment dan dialog .le-modal-content di dalam #modalKonten. */

#tab-prodListEquipment,
.le-modal-content {
  --le-fg: #09090b;
  --le-fg-2: #27272a;
  --le-muted: #71717a;
  --le-subtle: #a1a1aa;
  --le-bg: #ffffff;
  --le-muted-bg: #f4f4f5;
  --le-soft-bg: #fafafa;
  --le-border: #e4e4e7;
  --le-primary: #18181b;
  --le-primary-hover: #27272a;
  --le-primary-fg: #fafafa;
  --le-ring: rgba(9, 9, 11, 0.12);

  --le-ok: #0f766e;
  --le-ok-bg: #f0fdfa;
  --le-ok-line: #5eead4;

  --le-warn: #b45309;
  --le-warn-bg: #fffbeb;
  --le-warn-line: #fcd34d;

  --le-bad: #b91c1c;
  --le-bad-bg: #fef2f2;
  --le-bad-line: #fca5a5;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--le-fg);
  font-feature-settings: "cv11", "ss01";
}

#tab-prodListEquipment :where(td, th, b, strong, input, .le-num),
.le-modal-content :where(input, b, strong, .le-num) {
  font-variant-numeric: tabular-nums;
}

#tab-prodListEquipment :where(button, input, select, textarea),
.le-modal-content :where(button, input, select, textarea) {
  font-family: inherit;
}

/* Kanvas Halaman */
#tab-prodListEquipment .le-canvas {
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  border-radius: 12px;
  padding: 20px 22px 24px;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
}

/* Header Halaman */
#tab-prodListEquipment .le-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--le-border);
}

#tab-prodListEquipment .le-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--le-fg);
}

#tab-prodListEquipment .le-desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--le-muted);
}

#tab-prodListEquipment .le-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tombol */
:is(#tab-prodListEquipment, .le-modal-content) .le-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--le-border);
  background: var(--le-bg);
  color: var(--le-fg);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn:hover:not(:disabled) {
  background: var(--le-muted-bg);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn:active:not(:disabled) {
  transform: translateY(1px);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--primary {
  background: var(--le-primary);
  border-color: var(--le-primary);
  color: var(--le-primary-fg);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--primary:hover:not(:disabled) {
  background: var(--le-primary-hover);
  border-color: var(--le-primary-hover);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--warn {
  background: var(--le-warn-bg);
  border-color: var(--le-warn-line);
  color: var(--le-warn);
  font-weight: 600;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--warn:hover:not(:disabled) {
  background: #fef3c7;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--ok {
  background: var(--le-ok-bg);
  border-color: var(--le-ok-line);
  color: var(--le-ok);
  font-weight: 600;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--ok:hover:not(:disabled) {
  background: #ccfbf1;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--danger {
  background: var(--le-bg);
  border-color: var(--le-bad-line);
  color: var(--le-bad);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--danger:hover:not(:disabled) {
  background: var(--le-bad-bg);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--sm {
  font-size: 12px;
  padding: 4px 9px;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--link {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--le-muted);
  font-size: 12.5px;
  padding: 5px 8px;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-btn--link:hover:not(:disabled) {
  color: var(--le-fg);
  background: var(--le-muted-bg);
}

/* Sub-Tab Garis Bawah (docs/DESIGN_STYLE.md) */
#tab-prodListEquipment .le-subtabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--le-border);
  margin: 12px 0 16px;
  gap: 12px;
  flex-wrap: wrap;
}

#tab-prodListEquipment .le-subtabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

#tab-prodListEquipment .le-subtab-btn {
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--le-muted);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#tab-prodListEquipment .le-subtab-btn:hover {
  color: var(--le-fg);
}

#tab-prodListEquipment .le-subtab-btn.is-active {
  color: var(--le-fg);
  font-weight: 600;
  border-bottom-color: var(--le-primary);
}

#tab-prodListEquipment .le-subtab-count {
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 6.5px;
  border-radius: 9999px;
  background: var(--le-muted-bg);
  color: var(--le-fg-2);
}

#tab-prodListEquipment .le-subtab-btn.is-active .le-subtab-count {
  background: var(--le-primary);
  color: var(--le-primary-fg);
}

/* Kartu KPI Ringkasan */
#tab-prodListEquipment .le-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  #tab-prodListEquipment .le-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #tab-prodListEquipment .le-kpi-grid {
    grid-template-columns: 1fr;
  }
}

#tab-prodListEquipment .le-kpi-card {
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tab-prodListEquipment .le-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#tab-prodListEquipment .le-kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--le-fg);
}

#tab-prodListEquipment .le-kpi-val-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

#tab-prodListEquipment .le-kpi-val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--le-fg);
  line-height: 1.2;
}

#tab-prodListEquipment .le-kpi-unit {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--le-muted);
}

#tab-prodListEquipment .le-kpi-sub {
  font-size: 12px;
  color: var(--le-muted);
}

/* Progress Bar 6px full-rounded */
#tab-prodListEquipment .le-progress-track {
  height: 6px;
  border-radius: 9999px;
  background: var(--le-border);
  overflow: hidden;
  width: 100%;
}

#tab-prodListEquipment .le-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--le-ok);
  transition: width 0.25s ease;
}

/* Badge Status dengan Dot 6px & Border Tingkat-300 */
:is(#tab-prodListEquipment, .le-modal-content) .le-badge {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  font-size: 12px;
  font-weight: 600;
  padding: 2.5px 8.5px;
  border-radius: 6px;
  border: 1px solid var(--le-border);
  background: var(--le-muted-bg);
  color: #52525b;
  white-space: nowrap;
  line-height: 1.35;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

:is(#tab-prodListEquipment, .le-modal-content) .le-badge--ok {
  background: var(--le-ok-bg);
  color: var(--le-ok);
  border-color: var(--le-ok-line);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-badge--warn {
  background: var(--le-warn-bg);
  color: var(--le-warn);
  border-color: var(--le-warn-line);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-badge--bad {
  background: var(--le-bad-bg);
  color: var(--le-bad);
  border-color: var(--le-bad-line);
}

:is(#tab-prodListEquipment, .le-modal-content) .le-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--le-muted-bg);
  color: var(--le-fg-2);
  border: 1px solid var(--le-border);
  white-space: nowrap;
}

/* Population Highlights */
#tab-prodListEquipment .le-highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  #tab-prodListEquipment .le-highlights-grid {
    grid-template-columns: 1fr;
  }
}

#tab-prodListEquipment .le-highlight-card {
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
}

#tab-prodListEquipment .le-highlight-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  gap: 8px;
}

#tab-prodListEquipment .le-highlight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--le-fg);
}

#tab-prodListEquipment .le-highlight-meta {
  font-size: 12px;
  color: var(--le-muted);
}

#tab-prodListEquipment .le-highlight-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#tab-prodListEquipment .le-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--le-border);
  background: var(--le-soft-bg);
  font-size: 12px;
  color: var(--le-fg-2);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#tab-prodListEquipment .le-highlight-pill:hover {
  background: var(--le-muted-bg);
  border-color: #d4d4d8;
}

#tab-prodListEquipment .le-highlight-pill-count {
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  color: var(--le-fg);
  font-weight: 600;
  font-size: 11.5px;
  padding: 0.5px 6px;
  border-radius: 4px;
}

/* Slicer Bar */
#tab-prodListEquipment .le-slicer-bar {
  background: var(--le-soft-bg);
  border: 1px solid var(--le-border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

#tab-prodListEquipment .le-slicer-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#tab-prodListEquipment .le-slicer-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

#tab-prodListEquipment .le-slicer-group label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--le-muted);
  white-space: nowrap;
}

:is(#tab-prodListEquipment, .le-modal-content) :is(.le-input, .le-select, .le-textarea) {
  font-size: 13px;
  color: var(--le-fg);
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(#tab-prodListEquipment, .le-modal-content) :is(.le-input, .le-select, .le-textarea):focus {
  border-color: var(--le-fg);
  box-shadow: 0 0 0 2px var(--le-ring);
}

#tab-prodListEquipment .le-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--le-fg-2);
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Panel & Tabel Data */
#tab-prodListEquipment .le-table-panel {
  background: var(--le-bg);
  border: 1px solid var(--le-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
  overflow: hidden;
}

#tab-prodListEquipment .le-table-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--le-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

#tab-prodListEquipment .le-table-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--le-fg);
}

#tab-prodListEquipment .le-table-sub {
  font-size: 12.5px;
  color: var(--le-muted);
}

#tab-prodListEquipment .le-table-wrap {
  overflow-x: auto;
  max-height: 580px;
}

#tab-prodListEquipment table.le-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

#tab-prodListEquipment table.le-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--le-soft-bg);
  color: var(--le-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  padding: 9px 11px;
  border-bottom: 1px solid var(--le-border);
  border-right: 1px solid var(--le-muted-bg);
  white-space: nowrap;
  vertical-align: middle;
}

#tab-prodListEquipment table.le-table thead tr:nth-child(2) th {
  top: 37px;
  font-size: 12px;
  padding: 6px 10px;
}

#tab-prodListEquipment table.le-table :is(th, td).center {
  text-align: center;
}

#tab-prodListEquipment table.le-table :is(th, td).right {
  text-align: right;
}

#tab-prodListEquipment table.le-table tbody td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--le-muted-bg);
  border-right: 1px solid var(--le-muted-bg);
  color: var(--le-fg);
  vertical-align: middle;
  white-space: nowrap;
}

#tab-prodListEquipment table.le-table tbody tr:hover td {
  background: var(--le-soft-bg);
}

#tab-prodListEquipment table.le-table tbody tr.is-exited td {
  background: #fafafa;
  color: var(--le-muted);
}

#tab-prodListEquipment table.le-table tbody tr.is-exited:hover td {
  background: #f4f4f5;
}

#tab-prodListEquipment .le-unit-code {
  font-weight: 600;
  color: var(--le-fg);
}

#tab-prodListEquipment .le-subline {
  display: block;
  font-size: 11.5px;
  color: var(--le-muted);
  margin-top: 1px;
}

#tab-prodListEquipment .le-qr-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--le-fg-2);
  background: var(--le-soft-bg);
  border: 1px solid var(--le-border);
  border-radius: 6px;
  padding: 2.5px 7px;
  cursor: pointer;
}

#tab-prodListEquipment .le-qr-btn:hover {
  background: var(--le-muted-bg);
}

#tab-prodListEquipment .le-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Segmented Control (Tab 2) */
#tab-prodListEquipment .le-seg {
  display: inline-flex;
  background: var(--le-muted-bg);
  border: 1px solid var(--le-border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

#tab-prodListEquipment .le-seg-btn {
  border: 1px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--le-muted);
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#tab-prodListEquipment .le-seg-btn.is-on {
  background: var(--le-bg);
  color: var(--le-fg);
  font-weight: 600;
  border-color: rgba(228, 228, 231, 0.8);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.06);
}

/* Modal Content (.le-modal-content di dalam #modalKonten) */
.le-modal-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.le-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--le-border);
}

.le-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--le-fg);
}

.le-modal-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--le-muted);
}

.le-form-sec {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--le-fg);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--le-muted-bg);
  margin-top: 2px;
}

.le-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.le-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .le-grid-2,
  .le-grid-3 {
    grid-template-columns: 1fr;
  }
}

.le-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.le-field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--le-fg);
}

.le-field small {
  font-size: 11.5px;
  color: var(--le-muted);
}

.le-alert {
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.45;
}

.le-alert--warn {
  background: var(--le-warn-bg);
  border: 1px solid var(--le-warn-line);
  color: #92400e;
}

.le-alert--info {
  background: var(--le-soft-bg);
  border: 1px solid var(--le-border);
  color: var(--le-fg-2);
}

.le-alert-title {
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--le-fg);
}

.le-alert--warn .le-alert-title {
  color: var(--le-warn);
}

.le-alert ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.le-modal-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--le-border);
}