/* ================================================================
   patients.css — Patient history table structure
   Do NOT change column class names — they are referenced in patients.js.
   ================================================================ */

/* ── Patients table ──────────────────────────────────────────── */
.patients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.patients-table thead tr {
  border-bottom: 1px solid var(--mint-dim);
}

.patients-table th {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: left;
  white-space: nowrap;
  color: var(--text-secondary);
}

.patients-table td {
  padding: 10px var(--sp-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

/* Zebra striping */
.patients-table__row:nth-child(even) td {
  background: var(--surface-overlay);
}

/* Row hover */
.patients-table__row:hover td {
  background: var(--mint-subtle);
}

/* Column widths */
.patients-table__col-receipt   { width: 18%; }
.patients-table__col-date      { width: 18%; white-space: nowrap; }
.patients-table__col-diagnosis { width: auto; }
.patients-table__col-amount    { width: 16%; }
.patients-table__col-action    { width: 1px; white-space: nowrap; }

/* Right-align amount and action columns — higher specificity than .patients-table th */
.patients-table .patients-table__col-amount,
.patients-table .patients-table__col-action { text-align: right; }

.patients-table__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.patients-table__row:last-child td {
  border-bottom: none;
}

/* ── View button inside table ────────────────────────────────── */
.btn--view-receipt {
  display: inline-flex;
}

/* ── Filter row ──────────────────────────────────────────────── */
.patients-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.patients-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.patients-sort {
  flex-shrink: 0;
}

/* ── Checkbox column ─────────────────────────────────────────── */
.patients-table__col-select { width: 36px; }
.receipt-checkbox { cursor: pointer; width: 16px; height: 16px; }

/* ── Bulk action bar ─────────────────────────────────────────── */
.bulk-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  z-index: 50;
}

/* ── Confirm modal ───────────────────────────────────────────── */
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.confirm-modal__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  max-width: 360px;
  width: 90%;
}
.confirm-modal__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  justify-content: flex-end;
}

/* ── Danger button ───────────────────────────────────────────── */
.btn--danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn--danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }