.menu-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.purchase-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.purchase-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  min-height: 94px;
  padding: 17px 19px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.purchase-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.purchase-stat::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; }
.purchase-stat strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 29px; line-height: 1; }
.purchase-stat-label { align-self: end; font-weight: 600; font-size: 14px; }
.purchase-stat small { color: var(--text-hint); font-size: 12px; }
.stat-purple::after { background: var(--primary); }
.stat-purple strong { color: var(--primary); }
.stat-orange::after { background: #f59e0b; }
.stat-orange strong { color: #d97706; }
.stat-green::after { background: #22a06b; }
.stat-green strong { color: #16875b; }

.purchase-card .card-header { align-items: flex-start; }
.purchase-help, .purchase-modal-sub, .purchase-section-tip, .purchase-file-tip {
  margin-top: 3px;
  color: var(--text-hint);
  font-size: 12px;
}
.purchase-filters { margin-bottom: 12px; }
.purchase-list-table th:last-child, .purchase-list-table td:last-child { min-width: 150px; }
.purchase-number { border: 0; padding: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.purchase-item-cell strong, .purchase-item-cell small, .purchase-date-cell span, .purchase-date-cell small, .purchase-people span, .purchase-people small { display: block; }
.purchase-item-cell strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.purchase-item-cell small, .purchase-date-cell small, .purchase-people small { margin-top: 2px; color: var(--text-hint); font-size: 11px; }
.purchase-money { font-weight: 600; }
.purchase-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.purchase-status-pending { color: #5b4ab8; background: #efedff; }
.purchase-status-invoice { color: #a96100; background: #fff3d6; }
.purchase-status-overdue { color: #b42318; background: #fee4e2; }
.purchase-status-completed { color: #16794d; background: #e3f7ed; }
.purchase-status-cancelled { color: #777; background: #eee; }
.purchase-actions { white-space: nowrap; }
.purchase-danger-text { color: var(--danger) !important; }
.purchase-empty { padding: 40px !important; text-align: center; color: var(--text-hint); }
.purchase-page-total { line-height: 32px; color: var(--text-hint); font-size: 12px; }

.purchase-modal { width: min(1120px, 95vw); max-height: 92vh; }
.purchase-modal .modal-body { padding: 20px 24px; }
.purchase-form-section { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.purchase-form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.purchase-section-title { margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.purchase-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.purchase-section-heading .purchase-section-title { margin-bottom: 0; }
.purchase-section-actions { display: flex; gap: 8px; }
.purchase-item-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); }
.purchase-item-table th, .purchase-item-table td { padding: 8px; }
.purchase-item-table tr:last-child td { border-bottom: 0; }
.purchase-item-table .form-control { min-width: 68px; height: 34px; padding: 0 8px; }
.purchase-item-identity { min-width: 190px; white-space: normal; }
.purchase-item-identity strong, .purchase-item-identity small { display: block; }
.purchase-item-identity small { margin-top: 1px; color: var(--text-hint); font-size: 11px; }
.purchase-item-name { margin-bottom: 4px; }
.purchase-inline-code { width: 100%; border: 0; border-bottom: 1px dashed var(--border); padding: 3px 2px; outline: none; color: var(--text-secondary); font-size: 11px; }
.purchase-last-history { margin-top: 5px; color: #6976c4; font-size: 10px; line-height: 1.35; }
.purchase-last-history.muted { color: #aaa; }
.purchase-unit-cost { color: #2b6f4e; font-weight: 600; }
.purchase-remove-item { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff1f0; color: var(--danger); font-size: 18px; cursor: pointer; }
.purchase-empty-item { padding: 24px !important; text-align: center; color: var(--text-hint); }
.purchase-total-line { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 10px 2px 0; }
.purchase-total-line span { color: var(--text-secondary); }
.purchase-total-line strong { min-width: 120px; text-align: right; color: var(--primary); font-size: 18px; }
.purchase-result-section { padding-top: 2px; }
.purchase-file-button { display: inline-flex !important; width: auto; margin: 0 0 8px !important; padding: 7px 12px; border: 1px dashed #a7afea; border-radius: 6px; color: var(--primary); font-weight: 500 !important; background: #fafaff; cursor: pointer; }
.purchase-file-button input { display: none; }
.purchase-file-button:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.purchase-file-list { display: grid; gap: 6px; }
.purchase-file-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 6px; background: #f7f8fa; color: var(--text-secondary); font-size: 12px; }
.purchase-file-item small { color: var(--text-hint); }
.purchase-file-new { background: #f0f7ff; color: #3178c6; }
.purchase-check-row { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 8px; cursor: pointer; font-size: 13px; }
.purchase-check-row input { width: 15px; height: 15px; accent-color: var(--primary); }
.purchase-no-invoice-reason { display: none; margin-top: 4px; }
.purchase-remark-section { padding-bottom: 0; }

.purchase-picker-search { width: 100%; margin-bottom: 12px; }
.purchase-picker-table { max-height: 55vh; border: 1px solid var(--border); border-radius: var(--radius-md); }
.purchase-picker-table thead { position: sticky; top: 0; z-index: 1; }
.purchase-picker-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
.purchase-wrap-cell { max-width: 330px; white-space: normal; }

@media (max-width: 980px) {
  .purchase-summary { grid-template-columns: 1fr; }
  .purchase-stat { min-height: 76px; }
  .purchase-modal { width: 96vw; }
  .purchase-section-heading { flex-direction: column; }
}

@media (max-width: 700px) {
  .purchase-form-section .form-row { grid-template-columns: 1fr; gap: 0; }
  .purchase-modal .modal-body { padding: 16px; }
  .purchase-section-actions { width: 100%; }
  .purchase-section-actions .btn { flex: 1; justify-content: center; }
}