/* ============================================================
   shared/receipt.css — Kibo POS
   
   Thermal receipt aesthetic. Works for bar and counter.
   Load in any screen that uses generateReceipt():
     <link rel="stylesheet" href="../shared/receipt.css">
   
   Future: maps directly to 80mm ESC/POS thermal output.
   When printer integration arrives, this CSS becomes the
   on-screen preview — no redesign needed.
============================================================ */


/* ── OVERLAY ─────────────────────────────────────────────── */
.receipt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
  animation: rcpOverlayIn 0.22s ease-out both;
}

@keyframes rcpOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── MODAL WRAPPER ───────────────────────────────────────── */
.receipt-modal {
  width: 100%;
  max-width: 320px;
  max-height: 90vh;          /* prevents overflow on small screens */
  display: flex;
  flex-direction: column;
  animation: rcpSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rcpSlideIn {
  from { opacity: 0; transform: translateY(28px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}


/* ── THE PAPER ───────────────────────────────────────────── */
.receipt-paper {
  background: #fffef8;                 /* warm off-white — thermal paper */
  color: #111;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.65;
  padding: 24px 20px 16px;
  border-radius: 4px 4px 0 0;

  /* Scroll when items overflow */
  overflow-y: auto;
  max-height: 65vh;
  scrollbar-width: thin;
  scrollbar-color: #ccc #fffef8;       /* matches paper bg */

  /* Realistic paper shadow */
  box-shadow:
    0 2px 0 #e8e6dc,
    0 4px 0 #fffef8,
    0 6px 0 #e8e6dc;
}

.receipt-paper::-webkit-scrollbar       { width: 5px; }
.receipt-paper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }


/* Brand header */
.rcp-brand {
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.rcp-location {
  text-align: center;
  font-size: 0.72rem;
  color: #555;
  margin-bottom: 6px;
}

/* Dashed divider — exact thermal look */
.rcp-divider {
  color: #bbb;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  margin: 6px 0;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

/* Sale meta block */
.rcp-meta {
  font-size: 0.78rem;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0;
}


/* ── ITEMS ───────────────────────────────────────────────── */
.rcp-items { margin: 4px 0; }

.rcp-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  padding: 2px 0;
  gap: 8px;
}

.rcp-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rcp-item-price {
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
  min-width: 58px;
}


/* ── TOTALS ──────────────────────────────────────────────── */
.rcp-totals {
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rcp-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #333;
}

/* TOTAL line — bold, prominent */
.rcp-grand {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  letter-spacing: 0.03em;
  padding: 3px 0;
}

/* Change line */
.rcp-change {
  font-weight: 700;
  color: #000;
}


/* ── FOOTER ──────────────────────────────────────────────── */
.rcp-footer {
  text-align: center;
  font-size: 0.72rem;
  color: #666;
  margin-top: 10px;
  line-height: 1.9;
}


/* ── TEAR EDGE ───────────────────────────────────────────── */
/* Decorative perforated bottom — removed on print */
.receipt-paper::after {
  content: '';
  display: block;
  height: 8px;
  margin: 14px -20px -16px;
  background: repeating-linear-gradient(
    -45deg,
    #fffef8  0px,  #fffef8  6px,
    transparent   6px,  transparent  12px
  );
}


/* ── ACTION BUTTONS ──────────────────────────────────────── */
.receipt-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.receipt-print-btn {
  height: 50px;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 0 0 0 12px;
  transition: background 120ms ease;
  cursor: pointer;
  border: none;
}
.receipt-print-btn:hover  { background: #000; }
.receipt-print-btn:active { opacity: 0.85; }

.receipt-close-btn {
  height: 50px;
  background: #0bbfaa;              /* teal — works for both bar and counter */
  color: #000;
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 0 0 12px 0;
  transition: background 120ms ease, transform 120ms ease;
  cursor: pointer;
  border: none;
}
.receipt-close-btn:hover  { background: #089485; }
.receipt-close-btn:active { transform: scale(0.98); }


/* ── PRINT MEDIA ─────────────────────────────────────────── */
/* When staff taps Print:
   - Hide everything except the receipt paper
   - Remove overlay background, shadows, decorations
   - Full width for actual printer output                    */

@media print {
  body > * {
    display: none !important;
  }

  .receipt-overlay {
    display: flex !important;
    position: static !important;
    background: white !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    animation: none !important;
  }

  .receipt-modal {
    max-width: 100% !important;
    max-height: none !important;
    box-shadow: none !important;
    animation: none !important;
  }

  .receipt-paper {
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* Hide tear edge on print */
  .receipt-paper::after { display: none !important; }

  /* Hide buttons */
  .receipt-actions { display: none !important; }
}