/* ============================================================
   S-PRESSO STAFF DASHBOARD — payment.css
   Payment Log Tab
   v4 — modal form, dropdown selects, filters update metrics
============================================================ */

/* ── LAYOUT ── */
#payment-content {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px; max-width: 1400px; margin: 0 auto;
}

/* ── FILTER ROW ── */
.pay-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: 10px; padding: 12px 16px;
}
.pay-filter-row select,
.pay-filter-row input[type=date] {
  border: 1.5px solid var(--gray-200); border-radius: 6px;
  padding: 6px 10px; font-size: 0.84rem; color: var(--navy-800);
  font-family: inherit; background: var(--white); cursor: pointer; outline: none;
}
.pay-filter-row select:focus,
.pay-filter-row input[type=date]:focus { border-color: var(--navy-800); }
.pay-filter-sep    { color: var(--gray-200); font-size: 1.2rem; }
.pay-filter-summary { margin-left: auto; font-size: 0.78rem; color: var(--gray-400); font-weight: 600; }

/* ── METRICS ── */
.pay-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pay-metric {
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: 10px; padding: 14px 16px;
}
.pay-metric-label {
  font-size: 0.72rem; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.pay-metric-value  { font-size: 1.6rem; font-weight: 800; color: var(--navy-800); }
.pay-metric-gold .pay-metric-value  { color: var(--gold-600); }
.pay-metric-red .pay-metric-value   { color: #dc2626; }
.pay-metric-green .pay-metric-value { color: #10b981; }

/* ── BREAKDOWN ── */
.pay-breakdown {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: 10px; padding: 12px 16px;
}
.pay-bd-label  { font-size: 0.72rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.pay-bd-pill   { display: inline-flex; align-items: center; gap: 6px; background: var(--gray-100); border-radius: 20px; padding: 4px 12px; margin-right: 6px; }
.pay-bd-type   { font-size: 0.76rem; color: var(--gray-500); }
.pay-bd-amt    { font-size: 0.8rem; font-weight: 700; color: var(--navy-800); }
.pay-bd-empty  { font-size: 0.82rem; color: var(--gray-400); font-style: italic; }

/* ── ADD BUTTON ── */
.pay-add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-800); color: var(--white);
  border: none; border-radius: 8px; padding: 10px 20px;
  font-size: 0.88rem; font-weight: 700; cursor: pointer;
  font-family: inherit; align-self: flex-start; transition: opacity 0.15s;
}
.pay-add-btn:hover { opacity: 0.88; }

/* ── LOG CARD ── */
.pay-log-card {
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: 10px; padding: 16px 20px;
}
.pay-log-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-200);
}
.pay-log-title { font-size: 0.9rem; font-weight: 700; color: var(--navy-800); }
.pay-log-count { font-size: 0.78rem; color: var(--gray-400); font-weight: 600; }
.pay-table-wrap { overflow-x: auto; }
.pay-loading { text-align: center; padding: 30px; color: var(--gray-400); font-size: 0.88rem; }

/* ── TABLE ── */
.pay-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pay-table th {
  text-align: left; font-size: 0.7rem; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 7px 10px; border-bottom: 2px solid var(--gray-200); white-space: nowrap;
}
.pay-table td { padding: 9px 10px; border-bottom: 1px solid var(--gray-100); color: var(--navy-800); vertical-align: middle; }
.pay-table tr:last-child td { border-bottom: none; }
.pay-table tr:hover td { background: #fafafa; }
.pay-row-unpaid td       { background: #fff7ed; }
.pay-row-unpaid:hover td { background: #fff3e0; }
.pay-td-time { font-family: monospace; font-weight: 600; color: var(--gray-400); white-space: nowrap; }
.pay-td-room { font-weight: 700; }
.pay-td-amt  { font-weight: 700; text-align: right; white-space: nowrap; }
.pay-td-note { color: var(--gray-400); font-style: italic; max-width: 140px; }

/* ── BADGES ── */
.pay-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 0.73rem; font-weight: 700; white-space: nowrap; }
.pay-b-cash    { background: #dcfce7; color: #166534; }
.pay-b-card    { background: #dbeafe; color: #1e40af; }
.pay-b-stripe  { background: #ede9fe; color: #6d28d9; }
.pay-b-paypay  { background: #fee2e2; color: #991b1b; }
.pay-b-aupay   { background: #ffedd5; color: #9a3412; }
.pay-b-merpay  { background: #d1fae5; color: #065f46; }
.pay-b-unpaid  { background: #fef3c7; color: #92400e; }
.pay-bc-cash   { background: #f0fdf4; color: #166534; }
.pay-bc-card   { background: #eff6ff; color: #1e40af; }
.pay-bc-stripe { background: #f5f3ff; color: #6d28d9; }
.pay-bc-paypay { background: #fff1f1; color: #991b1b; }
.pay-bc-aupay  { background: #fff8f0; color: #9a3412; }
.pay-bc-merpay { background: #f0fdf6; color: #065f46; }
.pay-bc-unpaid { background: #fffdf0; color: #92400e; }

/* ── MODAL ── */
.pay-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
}
.pay-modal {
  background: var(--white); border-radius: 12px; padding: 24px;
  width: 100%; max-width: 640px; display: flex; flex-direction: column;
  gap: 16px; max-height: 90vh; overflow-y: auto;
}
.pay-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--gray-200);
}
.pay-modal-title { font-size: 1rem; font-weight: 700; color: var(--navy-800); }
.pay-modal-close {
  background: none; border: none; font-size: 1.1rem;
  color: var(--gray-400); cursor: pointer; padding: 2px 6px;
  border-radius: 4px; font-family: inherit;
}
.pay-modal-close:hover { background: var(--gray-100); }

/* ── FORM GRID ── */
.pay-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-fgroup { display: flex; flex-direction: column; gap: 5px; }
.pay-fgroup-full { grid-column: 1 / -1; }
.pay-fgroup label {
  font-size: 0.72rem; font-weight: 700; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pay-fgroup input,
.pay-fgroup select,
.pay-fgroup textarea {
  border: 1.5px solid var(--gray-200); border-radius: 6px;
  padding: 8px 10px; font-size: 0.88rem; color: var(--navy-800);
  font-family: inherit; background: var(--white); outline: none;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.pay-fgroup select { text-overflow: ellipsis; }
.pay-fgroup input:focus,
.pay-fgroup select:focus,
.pay-fgroup textarea:focus { border-color: var(--navy-800); }
.pay-fgroup input[readonly].pay-autofilled,
.pay-fgroup select:disabled.pay-autofilled { background: #f0fdf4; border-color: #10b981; color: #065f46; cursor: default; }
.pay-fgroup textarea { resize: vertical; min-height: 60px; }

/* ── AUTO-FILL INDICATOR ── */
.pay-autofill-ind { font-size: 0.74rem; min-height: 16px; margin-top: -2px; }
.pay-hint-ok   { color: #10b981; font-weight: 600; }
.pay-hint-warn { color: #f59e0b; font-weight: 600; }

/* ── FORM ACTIONS ── */
.pay-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.pay-btn-cancel {
  padding: 9px 18px; border-radius: 7px; border: 1.5px solid var(--gray-200);
  background: var(--white); color: var(--gray-600); font-size: 0.88rem;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.pay-btn-save {
  padding: 9px 22px; border-radius: 7px; border: none;
  background: var(--navy-800); color: var(--white); font-size: 0.88rem;
  font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.15s;
}
.pay-btn-save:hover    { opacity: 0.88; }
.pay-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) { .pay-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  {
  .pay-metrics    { grid-template-columns: repeat(2, 1fr); }
  .pay-form-grid  { grid-template-columns: 1fr; }
  .pay-fgroup-full { grid-column: 1; }
  .pay-table th:nth-child(8), .pay-table td:nth-child(8),
  .pay-table th:nth-child(9), .pay-table td:nth-child(9) { display: none; }
  .pay-filter-row { flex-direction: column; align-items: stretch; }
  .pay-filter-row select,
  .pay-filter-row input[type=date] { width: 100%; }
  .pay-filter-sep { display: none; }
  .pay-filter-summary { margin-left: 0; text-align: right; }
}

/* ── Button row + Other Transaction styling ── */
.pay-button-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pay-add-btn-other {
  background: var(--white);
  color: var(--navy-800);
  border: 1px solid var(--gray-200);
}
.pay-add-btn-other:hover {
  background: var(--gray-50);
  border-color: var(--gold-500);
}
.pay-add-btn-other:hover { opacity: 0.88; }
.pay-row-other { background: rgba(220,38,38,0.04); }
.pay-row-other .pay-td-amt { color: #dc2626; font-weight: 600; }
.pay-modal-hint { padding: 8px 16px; font-size: 0.78rem; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

/* ── EDIT + DELETE ROW ACTIONS ── */
.pay-td-actions { white-space: nowrap; text-align: right; padding-right: 10px; }
.pay-action-btn {
  background: var(--gray-100); border: none; border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer; color: var(--navy-800);
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; transition: background 0.12s, color 0.12s;
}
.pay-action-btn:hover { background: var(--gray-200); }
.pay-edit-btn { color: var(--navy-800); }
.pay-delete-btn { background: #fee2e2; color: #dc2626; }
.pay-delete-btn:hover { background: #fecaca; color: #b91c1c; }