/*
 * 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;
  container-type: inline-size;
}

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

/* =========================================================================
 * Low-Resolution & Small Laptop Adaptations (720p / 768p / 13"-14" Scaled)
 * Prevents the "keyhole" vertical scroll trap & tightens chrome density
 * ========================================================================= */
@media (max-height: 850px), (max-width: 1366px) {
  .box.box-kasoko,
  .box.box-kasoko > form,
  .box.box-kasoko > turbo-frame {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 1 0 auto !important;
  }

  .box.box-kasoko .kasoko-body {
    overflow-y: visible !important;
    overflow-x: auto !important;
    min-height: 20rem !important;
    flex: 1 0 auto !important;
  }
}

@media (max-height: 820px) {
  .app-shell-footer {
    display: none !important;
  }

  .app-shell-main {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .box.box-kasoko .box-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .box.box-kasoko .kasoko-footer {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .pos-shortcuts-bar {
    display: none !important;
  }
}

/* Top navigation compact sizing on 1024px–1366px laptop screens */
@media (min-width: 1024px) and (max-width: 1366px) {
  .top-nav-bar > a,
  .top-nav-bar > div > button {
    padding: 0.3125rem 0.4375rem !important;
    font-size: 0.71875rem !important;
  }
}

/* Responsive table container queries & sticky headers (modern-web-guidance: responsive-table, typography) */
.kasoko-table-container {
  container-type: inline-size;
  overflow-x: auto;
  max-inline-size: 100%;
}

.box.box-kasoko table thead th,
.kasoko-table-container table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  text-wrap: balance;
}

@container (width < 1200px) {
  .box.box-kasoko table th,
  .box.box-kasoko table td,
  .kasoko-table-container table th,
  .kasoko-table-container table td {
    padding-inline: 0.625rem !important;
    padding-block: 0.5rem !important;
  }

  /* Keep primary identifier column sticky during horizontal scroll on narrow screens */
  .box.box-kasoko table tbody tr > td:first-child,
  .box.box-kasoko table tbody tr > th:first-child,
  .kasoko-table-container table tbody tr > td:first-child,
  .kasoko-table-container table tbody tr > th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 5;
    background-color: #ffffff;
  }
}

/* Fluid KPI metric numbers that scale smoothly without overflowing 4-col laptop grids */
.kpi-fluid-value {
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.875rem) !important;
  line-height: 1.2 !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;
  }
}