:root {
  --primary: #0f6e5f;
  --primary-dark: #0a4f44;
  --bg: #f4f6f7;
  --card: #ffffff;
  --border: #dfe4e6;
  --text: #1f2a2e;
  --muted: #6b7a7f;
  --danger: #b3261e;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-dark); color: #fff; padding: 12px 24px; flex-wrap: wrap; gap: 12px;
}
.brand-name { font-weight: 700; font-size: 18px; margin-right: 8px; }
.brand-address { opacity: 0.85; font-size: 12px; margin-right: 8px; }
.brand-sub { opacity: 0.8; font-size: 13px; }
.field-error { color: var(--danger); font-size: 12px; margin: -6px 0 10px; }
.tabs { display: flex; gap: 6px; }
.tab-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.tab-btn.active { background: #fff; color: var(--primary-dark); font-weight: 600; }
.today-summary { font-size: 13px; opacity: 0.9; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-badge {
  font-size: 12px; background: rgba(255,255,255,0.15); padding: 5px 10px; border-radius: 12px;
  text-transform: capitalize;
}
.btn.small { padding: 6px 10px; font-size: 12px; }
.hint { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.date-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.date-label input { margin-top: 2px; }

.bill-type-toggle { display: flex; gap: 24px; align-items: center; padding: 12px 20px; }
.bill-type-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.bill-type-toggle input { width: auto; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tag.opd { background: #e3f2ef; color: var(--primary-dark); }
.tag.ipd { background: #fdece0; color: #b5561a; }

main { max-width: 1100px; margin: 20px auto; padding: 0 16px 60px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 12px; font-size: 16px; color: var(--primary-dark); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.row input, .row select { flex: 1; min-width: 160px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.form-grid .span-2 { grid-column: span 2; }

input, select {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
  background: #fff; color: var(--text);
}

.btn {
  padding: 9px 16px; border-radius: 6px; border: 1px solid var(--primary); background: var(--primary);
  color: #fff; cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #fff; color: var(--primary-dark); }
.btn.large { font-size: 16px; padding: 12px 24px; }
.btn.primary { background: var(--primary); }
.link-btn { background: none; border: none; color: var(--primary-dark); text-decoration: underline; cursor: pointer; font-size: 13px; }

.results-list { max-height: 180px; overflow-y: auto; margin-bottom: 10px; }
.result-item {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px;
  cursor: pointer; font-size: 13px; display: flex; justify-content: space-between;
}
.result-item:hover { background: #eef7f5; }

.or-divider { text-align: center; color: var(--muted); font-size: 12px; margin: 10px 0; }

.selected-box { background: #eef7f5; border: 1px solid var(--primary); border-radius: 6px; padding: 8px 10px; margin-top: 8px; font-size: 13px; }
.hidden { display: none !important; }

/* Login */
.login-screen {
  position: fixed; inset: 0; background: linear-gradient(160deg, var(--primary-dark), var(--primary));
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.login-card {
  background: #fff; border-radius: 12px; padding: 32px 30px; width: 320px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.login-card h2 { margin: 0 0 4px; color: var(--primary-dark); }
.login-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.login-card h3 { margin: 10px 0 14px; font-size: 15px; color: var(--text); }
.login-card input { width: 100%; margin-bottom: 10px; }
.login-card hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cart-table, .data-table { margin-top: 10px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.totals-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.totals { display: flex; gap: 24px; flex-wrap: wrap; }
.totals > div { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.totals strong { font-size: 18px; color: var(--text); }
.totals .net strong { color: var(--primary-dark); font-size: 22px; }

.small-btn { padding: 4px 8px; font-size: 12px; border-radius: 4px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
.small-btn.danger { color: var(--danger); border-color: var(--danger); }

/* Receipt */
.receipt-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex;
  align-items: flex-start; justify-content: center; overflow-y: auto; z-index: 100; padding: 30px 10px;
}
.receipt-box { background: #fff; width: 380px; padding: 20px; border-radius: 8px; }
.receipt-actions { display: flex; gap: 8px; margin-bottom: 14px; justify-content: flex-end; }
.receipt { font-size: 12px; line-height: 1.25; }
.receipt h3 { margin: 0 0 2px; text-align: center; }
.receipt .address { text-align: center; font-size: 10px; color: #555; margin-bottom: 2px; }
.receipt .center { text-align: center; }
.receipt div { margin: 1px 0; }
.receipt hr { border: none; border-top: 1px dashed #999; margin: 4px 0; }
.receipt table { font-size: 11px; border-collapse: collapse; }
.receipt table td { padding: 1px 0; border: none; }
.receipt .totals-line { display: flex; justify-content: space-between; padding: 0; }
.receipt .grand { font-weight: 700; font-size: 13px; border-top: 1px solid #333; padding-top: 3px; margin-top: 3px; }

.print-only { display: none; }

@media print {
  /* Most printers — especially POS/thermal receipt printers — refuse to mark a small strip
     right at the physical paper edge no matter what @page margin CSS asks for. If that
     hardware-enforced strip is bigger than the margin we reserve, the very first lines
     (hospital name, patient name, age/gender) are the first thing to get sliced off, since
     they sit closest to the top edge. 10mm plus the extra top padding below gives real
     breathing room on both narrow receipt rolls and normal A4 printers. */
  body:not(.print-report-mode) * { visibility: hidden; }
  body:not(.print-report-mode) .receipt-box, body:not(.print-report-mode) .receipt-box * { visibility: visible; }
  body:not(.print-report-mode) .receipt-box { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; padding: 8px 18px 12px; box-shadow: none; }
  .no-print { display: none !important; }
  .receipt-overlay { position: static; background: none; padding: 0; }
  /* Bumped +1pt (11px -> 12px, table 11px -> 12px, grand-total 13px -> 14px) and set bold,
     per request — printed output only; the on-screen sizes above (.receipt etc.) are
     untouched so nothing changes in the app itself, only what comes out of the printer. */
  .receipt { font-size: 12px; line-height: 1.2; font-weight: 700; }
  .receipt hr { margin: 3px 0; }
  .receipt .address { font-size: 11px; }
  .receipt table { font-size: 12px; font-weight: 700; }
  .receipt .grand { font-size: 14px; font-weight: 700; }

  body.print-report-mode * { visibility: hidden; }
  body.print-report-mode #reportPrintArea, body.print-report-mode #reportPrintArea * { visibility: visible; }
  body.print-report-mode #reportPrintArea { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; padding: 8px 6px 12px; box-shadow: none; }
  body.print-report-mode .print-only { display: block !important; }
  body.print-report-mode .data-table { table-layout: fixed; width: 100%; font-size: 12px; font-weight: 700; }
  body.print-report-mode .data-table td, body.print-report-mode .data-table th { word-break: break-word; overflow-wrap: break-word; }

  body.print-ledger-mode * { visibility: hidden; }
  body.print-ledger-mode #ledgerPrintArea, body.print-ledger-mode #ledgerPrintArea * { visibility: visible; }
  body.print-ledger-mode #ledgerPrintArea { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; padding: 8px 6px 12px; }
  body.print-ledger-mode .print-only { display: block !important; }
  body.print-ledger-mode .data-table { table-layout: fixed; width: 100%; font-size: 12px; font-weight: 700; }
  body.print-ledger-mode .data-table td, body.print-ledger-mode .data-table th { word-break: break-word; overflow-wrap: break-word; }

  /* Left/right margin widened (10mm -> 18mm) per request — receipts printed on A5 sheets
     were sitting too close to the side edges. Top/bottom left at 10mm. */
  @page { margin: 10mm 18mm; }
}