/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
/* Full-height box and form breathing room across the application */
.box.box-kasoko {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.box.box-kasoko > form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.box.box-kasoko .box-header {
  flex-shrink: 0 !important;
}

.box.box-kasoko .kasoko-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: auto !important;
}

.box.box-kasoko .kasoko-footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Tactile Circular PIN Dots (Kasoko Waiter Screen) */
.pin-slot {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 9999px !important;
  border: 2.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  display: inline-block !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.pin-slot.active {
  border-color: #E67436 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 5px rgba(230, 116, 54, 0.25) !important;
  transform: scale(1.2) !important;
}
.pin-slot.filled {
  border-color: #E67436 !important;
  background-color: #E67436 !important; /* Shaded in solid Kasoko orange */
  box-shadow: 0 2px 8px rgba(230, 116, 54, 0.5) !important;
  transform: scale(1.15) !important;
}
.pin-slot.error {
  border-color: #e11d48 !important;
  background-color: #e11d48 !important;
  box-shadow: 0 0 0 5px rgba(225, 29, 72, 0.25) !important;
}
.pin-slot.success {
  border-color: #10b981 !important;
  background-color: #10b981 !important;
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.25) !important;
}
.keypad-btn-pressed {
  background-color: #fff7ed !important;
  color: #E67436 !important;
  border-color: #E67436 !important;
  transform: scale(0.93) !important;
  box-shadow: 0 0 0 3px rgba(230, 116, 54, 0.2) !important;
}
@keyframes shakeKeypad {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.shake-error {
  animation: shakeKeypad 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Ensure inputs and textareas are always interactive regardless of ancestor user-select */
input, textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Sourcing Console Sticky Columns */
@media (min-width: 1024px) {
  .procurement-products-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 220px) !important;
    z-index: 20 !important;
  }

  .procurement-detail-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #ffffff !important;
  }
}

/* Print Stylesheet for Invoices & Receipts (Kasoko Modern Print) */
@media print {
  /* Hide application shell navigation, footers, toasts, and screen-only controls */
  header, footer, nav, aside,
  #notifications-toasts,
  .print\:hidden,
  [data-controller="dropdown"],
  .screen-only {
    display: none !important;
  }

  /* Reset layout constraints so print engine doesn't clip or scroll */
  html, body {
    background: #ffffff !important;
    color: #111827 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .h-screen, .max-h-screen {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Full-width document for print with high-contrast formatting */
  #printInvoice,
  #printCreditNote,
  #printSupplierProfile,
  #printProductReport {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 8mm 8mm !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #printInvoice table,
  #printCreditNote table,
  #printSupplierProfile table,
  #printProductReport table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  #printInvoice tr,
  #printCreditNote tr,
  #printSupplierProfile tr,
  #printProductReport tr,
  #printInvoice .avoid-page-break,
  #printCreditNote .avoid-page-break,
  #printSupplierProfile .avoid-page-break,
  #printProductReport .avoid-page-break {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  @page {
    size: A4 portrait;
    margin: 12mm 14mm;
  }
}

/* Typography refinements per modern-web-guidance (improve-text-layout-and-legibility) */
.invoice-title, .invoice-brand-title {
  text-wrap: balance;
}

.invoice-note, .invoice-address {
  text-wrap: pretty;
}

/* Responsive visibility guarantees for application shell & navbar */
@media (min-width: 640px) {
  .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .xl\:hidden {
    display: none !important;
  }
}