/* =========================================================================
   MOBILE PWA VIEWPORT LOCK & SAFE AREA (FOR IOS SAFARI & ANDROID)
   Prevents entire window from scrolling, guarantees bottom nav stays pinned!
   ========================================================================= */
@media screen and (max-width: 768px) {
  html, body {
    height: 100% !important;
    height: 100dvh !important;
    width: 100vw !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #main-content {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: 96px !important;
  }

  #mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px) !important;
    background-color: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
}

/* Custom Scrollbars */

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}



::-webkit-scrollbar-track {

  background: rgba(15, 23, 42, 0.6);

}



::-webkit-scrollbar-thumb {

  background: rgba(71, 85, 105, 0.6);

  border-radius: 9999px;

}



::-webkit-scrollbar-thumb:hover {

  background: rgba(99, 102, 241, 0.8);

}



/* Print Invoice Styling (A4 / A5 / Thermal) */

/* Print Invoice Styling (A4 / A5 / Mobile / Desktop) */

/* Print Invoice Styling (A4 / A5 / Mobile / Desktop) */

/* Print Invoice Styling (A4 / A5 / Mobile / Desktop) - 100% BLACK BOLD, ZERO BLURRY TEXT */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm 10mm 10mm;
  }

  /* Reset HTML and BODY completely to pure white */
  html, body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Hide entire application shell and non-print elements */
  #main-sidebar,
  #mobile-header,
  #mobile-bottom-nav,
  header,
  nav,
  aside,
  main,
  #pos-view,
  #orders-view,
  #products-view,
  #customers-view,
  #expenses-view,
  #commissions-view,
  #reports-view,
  .toast,
  #toast,
  #btn-modal-delete-order,
  #btn-modal-edit-order,
  #modal-pay-controls,
  /* Hide all secondary and background modals when printing */
  #customer-detail-modal,
  #customer-debt-modal,
  #pay-debt-modal,
  #new-customer-modal,
  #edit-customer-modal,
  #users-modal,
  #edit-user-modal,
  #user-salary-edit-modal,
  #branding-settings-modal,
  #seller-payslip-modal,
  #modal-stock-alerts,
  #emergency-unlock-modal,
  #mobile-more-menu-modal,
  #audit-log-modal,
  #edit-order-modal,
  #edit-product-modal,
  #variants-modal,
  #bom-modal,
  #new-product-modal,
  #image-lightbox-modal,
  #new-expense-modal,
  #edit-expense-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Specific rule for is-printing-invoice */
  body.is-printing-invoice div[id$="-modal"]:not(#order-detail-modal),
  body.is-printing-invoice #customer-detail-modal,
  body.is-printing-invoice #modal-stock-alerts {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Hide internal profit box for admin/accountant when printing */
  #modal-order-profit-box,
  #modal-order-profit-box * {
    display: none !important;
    visibility: hidden !important;
  }

  /* Neutralize Order Detail Modal & Card for pure white paper print */
  #order-detail-modal,
  #order-detail-modal > div {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  /* Hide backdrop overlay, header bar, and footer buttons when printing */
  #order-detail-modal > div[onclick*="closeModal"],
  #order-detail-modal > div.fixed,
  #order-detail-modal > div > div:first-child,
  #order-detail-modal > div > div:last-child,
  #order-detail-modal button,
  #modal-pay-controls {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Printable Invoice Area: Pure white, full width */
  #invoice-print-area {
    display: block !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* The same clean print layout for payslip modal */
  #payslip-modal {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #payslip-modal > div[onclick*="closeModal"],
  #payslip-modal > div.fixed,
  #payslip-modal > div.relative > div:first-child,
  #payslip-modal > div.relative > div:last-child {
    display: none !important;
    visibility: hidden !important;
  }
  #payslip-modal > div.relative {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Make invoice print area flow naturally at 100% width of paper */
  #invoice-print-area {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    color: #000000 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* TOÀN BỘ CHỮ TRÊN BẢN IN LÀ MÀU ĐEN ĐẬM #000000 (KHẮC PHỤC CHỮ MỜ/ẨN) */
  #invoice-print-area,
  #invoice-print-area *,
  #invoice-print-area span,
  #invoice-print-area p,
  #invoice-print-area strong,
  #invoice-print-area div,
  #invoice-print-area td,
  #invoice-print-area th,
  #invoice-print-area h2,
  #invoice-print-area h3,
  #invoice-print-area h4 {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

  /* Header Row: Khóa cố định, luôn cân đối, logo sắc nét */
  #invoice-header-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #invoice-company-logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
  }

  #invoice-company-logo {
    display: block !important;
    visibility: visible !important;
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast !important;
  }

  #invoice-print-area #invoice-company-name {
    display: block !important;
    visibility: visible !important;
    color: #000000 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }

  #invoice-print-area #invoice-company-desc {
    display: block !important;
    visibility: visible !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
  }

    #invoice-print-area #invoice-company-address {
    display: block !important;
    visibility: visible !important;
    color: #000000 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin: 1px 0 0 0 !important;
    line-height: 1.3 !important;
  }

  #invoice-print-area #invoice-company-contact {
    display: block !important;
    visibility: visible !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* BỎ CHỮ ĐÃ GIAO */
  #modal-order-status,
  #invoice-print-area #modal-order-status {
    display: none !important;
    visibility: hidden !important;
  }

  /* Customer Info Box */
  #invoice-print-area .grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #000000 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  #invoice-print-area .grid.grid-cols-2 span {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #000000 !important;
  }

  #invoice-print-area #modal-cust-name {
    color: #000000 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-top: 2px !important;
  }

  #invoice-print-area #modal-cust-phone {
    color: #000000 !important;
    font-weight: 800 !important;
  }

  #invoice-print-area #modal-cust-address {
    color: #000000 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  /* Items Table Styling (Fixed Layout, 30% - 8% - 18% - 14% - 30%) */
  #invoice-print-area h4 {
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
  }

  #invoice-items-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1.5px solid #000000 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    page-break-inside: auto !important;
  }

  #invoice-items-table thead {
    display: table-header-group !important;
  }

  #invoice-items-table th {
    background-color: #f1f5f9 !important;
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 12.5px !important;
    padding: 7px 6px !important;
    border-bottom: 2px solid #000000 !important;
    border-top: none !important;
  }

  #invoice-items-table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  #invoice-items-table td {
    padding: 7px 6px !important;
    font-size: 12.5px !important;
    color: #000000 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    vertical-align: middle !important;
    word-break: break-word !important;
  }

  /* Tên sản phẩm 2 dòng rõ nét */
  #invoice-items-table td.col-product .col-prod-line1 {
    font-weight: 900 !important;
    color: #000000 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #invoice-items-table td.col-product .col-prod-line2 {
    font-weight: 700 !important;
    color: #000000 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-top: 1px !important;
  }

  #invoice-items-table td.col-qty {
    text-align: center !important;
    font-weight: 900 !important;
    font-size: 13.5px !important;
    color: #000000 !important;
  }

  #invoice-items-table td.col-price {
    text-align: right !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #000000 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #invoice-items-table td.col-note {
    text-align: center !important;
    font-size: 12px !important;
    color: #000000 !important;
  }

  #invoice-items-table td.col-amount {
    text-align: right !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    color: #000000 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Financial summary block (5 lines) - 100% ĐEN ĐẬM SẮC NÉT */
  #invoice-print-area .border-t-2.border-slate-800 {
    border-top: 2px solid #000000 !important;
    padding-top: 10px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  #invoice-print-area .border-t-2.border-slate-800 > div {
    margin-bottom: 6px !important;
  }

  #invoice-print-area #modal-order-subtotal,
  #invoice-print-area #modal-paid-amt,
  #invoice-print-area #modal-order-remaining,
  #invoice-print-area #modal-prev-debt {
    color: #000000 !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
  }

  #invoice-print-area .bg-amber-500\/10,
  #invoice-print-area .bg-indigo-500\/15 {
    background-color: #ffffff !important;
    border: 1.5px solid #000000 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
  }

  #modal-final-debt {
    color: #000000 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
  }

  /* Hiển thị đầy đủ, rõ nét Tên Nhân Viên Bán Hàng */
  #invoice-seller-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px !important;
    padding: 6px 4px !important;
    border-bottom: 1px dashed #000000 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  #invoice-seller-row span:first-child {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #000000 !important;
  }

  #modal-order-seller-name {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #000000 !important;
  }

  #invoice-footer-note {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-align: center !important;
    margin-top: 12px !important;
    padding-top: 6px !important;
    border-top: 1px solid #000000 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* Tối ưu bộ chọn ngày HTML5 & Biểu tượng lịch */
input[type="date"] {
  cursor: pointer;
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  filter: invert(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
  padding: 2px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.15);
}