/* The staff dashboard's Live Check In tab (assets/pages/live-checkin.js): the parts the
   Tailwind build can't express from class names alone. The waiting-time colours change
   every two minutes, as they did in the pharmacy's own kiosk app. */

.ci-row { position: relative; overflow: hidden; }
.ci-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--ci-accent, #c8d6e6); }
.ci-urg-fresh { --ci-accent: #4bbd82; }
.ci-urg-low { --ci-accent: #8ecb4c; }
.ci-urg-medium { --ci-accent: #d8bd32; }
.ci-urg-high { --ci-accent: #e0a027; }
.ci-urg-urgent { --ci-accent: #e9782d; }
.ci-urg-very-urgent { --ci-accent: #df5248; }
.ci-urg-critical { --ci-accent: #b91c2b; }
.ci-row.is-done { --ci-accent: #c8d6e6; }

.ci-wait { display: grid; gap: 1px; width: 112px; padding: 6px 9px; color: var(--w-ink); border: 1px solid var(--w-line); border-radius: 9px; background: var(--w-bg); font-size: 11px; font-weight: 700; line-height: 1.2; }
.ci-wait strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.ci-wait-fresh { --w-bg: #e8f8f0; --w-line: #91d7b0; --w-ink: #096a3a; }
.ci-wait-low { --w-bg: #eff9df; --w-line: #b7db7d; --w-ink: #4e6b13; }
.ci-wait-medium { --w-bg: #fff8cf; --w-line: #e2cf64; --w-ink: #6c5900; }
.ci-wait-high { --w-bg: #fff0bf; --w-line: #e3b44d; --w-ink: #775000; }
.ci-wait-urgent { --w-bg: #ffe3c7; --w-line: #eb9d58; --w-ink: #833b00; }
.ci-wait-very-urgent { --w-bg: #ffdedb; --w-line: #e98980; --w-ink: #90271f; }
.ci-wait-critical { --w-bg: #bd2333; --w-line: #9f1624; --w-ink: #ffffff; box-shadow: 0 0 0 3px rgba(189, 35, 51, .1); }

.ci-status { min-height: 38px; padding: 0 30px 0 10px; border: 1px solid #d6e1ee; border-radius: 10px; background-color: #fff; font-size: 13px; font-weight: 650; }
.ci-status.status-needs_pharmacist { color: #7a3f0a; border-color: #dfa75c; background-color: #fff3dc; box-shadow: 0 0 0 3px rgba(223, 167, 92, .11); }
.ci-status.status-locating { color: #365d82; background-color: #f0f7fd; }
.ci-status.status-ready { color: #0759bd; border-color: #8ec0e8; background-color: #eaf6ff; }
.ci-status.status-in_progress { color: #1a4fa3; }

.ci-spin { animation: ci-spin 1s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ci-spin { animation: none; } }

.ci-help { animation: ci-pulse 1.6s ease-in-out infinite; }
@keyframes ci-pulse { 50% { box-shadow: 0 0 0 6px rgba(185, 62, 34, .14); } }
@media (prefers-reduced-motion: reduce) { .ci-help { animation: none; } }

/* The patient's check-in receipt, printed from the dashboard on the 62 mm thermal printer. */
.ci-receipt { width: 62mm; margin: 0 auto; padding: 4mm; color: #000; background: #fff; font-family: Arial, Helvetica, sans-serif; text-align: center; }
.ci-receipt img { display: block; width: 18mm; height: 18mm; margin: 0 auto 1mm; object-fit: contain; filter: grayscale(1) contrast(1.3); }
.ci-receipt .k { margin: 0; font-size: 7pt; font-weight: 700; letter-spacing: .12em; }
.ci-receipt h2 { margin: 1mm 0 2.5mm; font-size: 15pt; }
.ci-receipt .t { display: grid; gap: .5mm; padding: 2mm; border: .6mm solid #000; }
.ci-receipt .t span { font-size: 6.5pt; font-weight: 700; letter-spacing: .1em; }
.ci-receipt .t strong { font-family: "Courier New", monospace; font-size: 19pt; }
.ci-receipt dl { margin: 2.5mm 0 0; padding-top: 1.5mm; border-top: .3mm dashed #000; text-align: left; }
.ci-receipt dl div { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 2mm; padding: 1.5mm 0; border-bottom: .3mm dotted #666; }
.ci-receipt dl div.w { display: block; }
.ci-receipt dt { font-size: 8pt; }
.ci-receipt dd { margin: 0; font-size: 8.5pt; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ci-receipt dl div.w dt { margin-bottom: 1mm; font-weight: 800; }
.ci-receipt dl div.w dd { text-align: left; line-height: 1.35; }
.ci-receipt .s { margin: 2mm 0 0; font-size: 8pt; }
.ci-receipt .f { margin: 2.5mm 0 0; font-size: 8pt; line-height: 1.4; }
.ci-receipt-preview { padding: 10px; border-radius: 16px; background: #eef4fb; }
.ci-receipt-preview .ci-receipt { box-shadow: 0 6px 18px rgba(15, 30, 54, .12); }

@media print {
  @page ci-receipt { size: 62mm 120mm; margin: 0; }
  html.ci-printing body > :not(#print-area) { display: none !important; }
  html.ci-printing #print-area { position: static; padding: 0; page: ci-receipt; }
  html.ci-printing .ci-receipt { margin: 0; box-shadow: none; print-color-adjust: economy; }
}