/* Invoice modal finishing layer.
   Keeps the school theme stable at open and makes desktop invoices fit as a
   complete single-window document without an internal scrollbar. */

@keyframes hianma-invoice-brand-fallback-reveal {
  0%, 99% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

html body .accounting-invoice-overlay .accounting-print-invoice {
  opacity: 0;
  visibility: hidden;
  animation: hianma-invoice-brand-fallback-reveal .01s linear .7s forwards;
  background-clip: padding-box;
  transition: opacity .08s ease;
}

/* themeStyle is only present once the active school's branding has resolved. */
html body .accounting-invoice-overlay .accounting-print-invoice[style*="--primary"] {
  opacity: 1;
  visibility: visible;
  animation: none;
}

/* Desktop/tablet landscape: the complete invoice must be visible at once.
   There is no internal scroll surface. The invoice shell clips all header,
   body and footer backgrounds to its rounded perimeter so every corner stays
   visibly rounded. */
@media (min-width: 761px) {
  html body .accounting-invoice-overlay {
    padding: 10px !important;
    overflow: hidden !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice {
    width: min(1000px, calc(100vw - 20px)) !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background-clip: padding-box !important;
    isolation: isolate;
    scrollbar-width: none !important;
    overscroll-behavior: none;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-header {
    padding: 20px 30px 16px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-info-grid {
    padding: 12px 30px 0 !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-info-card {
    min-height: 50px !important;
    padding: 8px 10px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-table {
    margin: 12px 30px 0 !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-table-head {
    min-height: 34px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-row {
    min-height: 43px !important;
    padding: 7px 12px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-summary {
    padding: 12px 30px 16px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-closing-note,
  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-total-card {
    min-height: 66px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-actions {
    padding: 12px 30px 14px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice .accounting-invoice-actions button {
    min-height: 40px !important;
  }
}

/* Phones still need a scrollable document when the physical viewport is too
   short; keep that behaviour isolated to mobile only. */
@media (max-width: 760px) {
  html body .accounting-invoice-overlay {
    padding: 8px !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice {
    max-height: calc(100dvh - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary, #8a817b) 30%, #d9d4cf) transparent;
    overscroll-behavior: contain;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar {
    width: 7px;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar-button,
  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar-button:single-button,
  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar-button:start,
  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar-button:end {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar-track {
    margin-block: 16px;
    background: transparent;
    border-radius: 999px;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary, #8a817b) 30%, #d9d4cf);
    background-clip: padding-box;
  }
}

@media print {
  html body .accounting-invoice-overlay {
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .accounting-invoice-overlay .accounting-print-invoice {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto;
  }
}