/* Print Styles for HMS Dashboard */

/* ================================================================
   SCREEN STYLES (hidden on screen, shown during print)
   ================================================================ */

/* Hidden on screen */
.printable-bill {
  display: none;
  font-family: 'Courier New', monospace;
  font-size: 9pt;
  line-height: 1.3;
  color: black;
  background: white;
}

.printable-report {
  display: none;
}

/* ================================================================
   PRINT MEDIA RULES — single @media print block
   ================================================================ */
@media print {

  /* ---- Thermal receipt page setup (58mm) ---- */
  @page {
    size: 58mm auto;
    margin: 0;
  }

  /* ---- Reset body ---- */
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    color: black !important;
    width: 100% !important;
  }

  /* ---- HIDE EVERYTHING, then show only printable elements ---- */
  /* This uses the visibility trick:
     1. Hide all elements via visibility:hidden
     2. Make .printable-bill and children visible
     3. Position .printable-bill absolutely at top-left
     This approach works regardless of DOM nesting depth. */
  body * {
    visibility: hidden !important;
  }

  .printable-bill,
  .printable-bill * {
    visibility: visible !important;
  }

  .printable-report,
  .printable-report * {
    visibility: visible !important;
  }

  /* Reset layout containers so nothing offsets the printable element */
  #root,
  #root > div,
  main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
    position: static !important;
  }

  /* ---- PRINTABLE BILL (thermal receipt) ---- */
  .printable-bill {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 140mm;
    padding: 5mm !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: white !important;
  }

  /* Bill Header */
  .bill-header {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .restaurant-name {
    font-size: 13pt;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    line-height: 1.3;
  }

  .restaurant-address,
  .restaurant-contact,
  .restaurant-gst {
    font-size: 9pt;
    margin: 2px 0;
    line-height: 1.3;
  }

  /* Bill Divider */
  .bill-divider {
    border-top: 1px dashed #000;
    margin: 8px 0;
  }

  /* Bill Info Section */
  .bill-info {
    font-size: 9pt;
    margin: 8px 0;
    padding: 4px 0;
  }

  .bill-info-row {
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    line-height: 1.4;
  }

  /* Items List */
  .items-list {
    margin: 10px 0;
    padding: 6px 0;
    flex: 1;
    min-height: 40mm;
  }

  .item-row {
    margin: 0;
    padding: 7px 0;
    font-size: 9pt;
    line-height: 1.4;
    border-bottom: 1px dashed #000;
  }

  .item-name-qty {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
  }

  .item-name {
    font-weight: 500;
    flex: 1;
    padding-right: 5px;
  }

  .item-qty {
    font-weight: 600;
    white-space: nowrap;
  }

  .item-price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px;
  }

  .item-unit-price {
    font-size: 8.5pt;
    color: #374151;
  }

  .item-amount {
    text-align: right;
    font-weight: bold;
    font-size: 10pt;
  }

  /* Bill Totals */
  .bill-totals {
    margin: 12px 0 8px 0;
    padding-top: 6px;
    font-size: 9pt;
  }

  .bill-total-row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    line-height: 1.4;
  }

  .bill-grand-total {
    font-size: 12pt;
    font-weight: bold;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 2px double #000;
  }

  /* Payment Info */
  .payment-info {
    text-align: center;
    margin: 10px 0;
    padding: 6px 0;
    font-size: 10pt;
    font-weight: 600;
  }

  /* Bill Footer */
  .bill-footer {
    text-align: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed #000;
    font-size: 9pt;
    font-weight: 600;
  }

  .bill-footer p {
    margin: 3px 0;
    line-height: 1.4;
  }

  /* ---- PRINTABLE REPORT (A4) ---- */
  /* Note: @page rules cannot be scoped to elements in CSS.
     When printing reports, the thermal @page size still applies.
     The report content will still render correctly on the default page. */
  .printable-report {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: white !important;
  }

  .report-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
  }

  .report-title {
    font-size: 24pt;
    font-weight: bold;
    margin: 0;
  }

  .report-subtitle {
    font-size: 12pt;
    color: #666;
    margin: 5px 0;
  }

  .report-section {
    margin: 20px 0;
    page-break-inside: avoid;
  }

  .report-section-title {
    font-size: 16pt;
    font-weight: bold;
    margin: 10px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
  }

  .report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 10pt;
  }

  .report-table th {
    background: #f0f0f0 !important;
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
    font-weight: bold;
  }

  .report-table td {
    border: 1px solid #ccc;
    padding: 6px;
  }

  .report-summary {
    background: #f9f9f9 !important;
    border: 2px solid #000;
    padding: 15px;
    margin: 20px 0;
    page-break-inside: avoid;
  }

  .report-summary-item {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 12pt;
  }

  .report-summary-item.highlight {
    font-size: 16pt;
    font-weight: bold;
    border-top: 2px solid #000;
    padding-top: 10px;
    margin-top: 10px;
  }

  /* Hide charts in print */
  .recharts-wrapper,
  .recharts-container {
    display: none !important;
  }

} /* end @media print */