/* Prevent horizontal overflow from breaking the menu: page stays one viewport wide, content scrolls inside */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Mobile modal improvements - ensure dismiss buttons are easily tappable */
.modal {
  z-index: 10500 !important;
}
.modal-backdrop {
  z-index: 10400 !important;
}
.modal-dialog {
  z-index: 10501 !important;
  pointer-events: auto !important;
}
.modal-content {
  pointer-events: auto !important;
}
@media (max-width: 767.98px) {
  .modal .btn-close {
    width: 48px !important;
    height: 48px !important;
    padding: 14px !important;
    opacity: 1 !important;
    background-size: 18px !important;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 10502 !important;
  }
  .modal .modal-header {
    position: relative;
    z-index: 10502 !important;
  }
  .modal .modal-footer {
    position: relative;
    z-index: 10502 !important;
  }
  .modal .modal-footer .btn {
    min-height: 48px;
    min-width: 100px;
    padding: 12px 20px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 10503 !important;
  }
  .modal-dialog-centered {
    min-height: calc(100% - 1rem);
    margin: 0.5rem;
  }
  .modal-content {
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
  }
  /* Ensure modal is above any canvas or overlay elements */
  #documentExpiryModal {
    z-index: 10600 !important;
  }
  #documentExpiryModal .modal-dialog {
    z-index: 10601 !important;
  }
  #documentExpiryModal .modal-content {
    z-index: 10602 !important;
  }
}

/* Flatpickr mobile fix - ensure inputs remain interactive */
.flatpickr-input:not([disabled]),
.flatpickr-mobile:not([disabled]) {
  pointer-events: auto !important;
  opacity: 1 !important;
  -webkit-appearance: none;
}
@media (max-width: 767.98px) {
  .flatpickr-input,
  .flatpickr-mobile,
  input[type="text"].form-control#start_date,
  input[type="text"].form-control#end_date {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px;
  }
}
.layout-wrapper {
  overflow-x: hidden;
  max-width: 100%;
}
/* Content area scrolls horizontally when tables are wide (responsive); page itself does not expand */
.layout-page,
.content-wrapper {
  min-width: 0;
  max-width: 100%;
}
.content-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Container that holds the main content and tables */
.container-xxl.container-p-y {
  min-width: 0;
  max-width: 100%;
}

/* Mobile menu toggle: reliable tap on iOS, minimum touch target */
.layout-menu-toggle-btn {
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
}
.layout-menu-toggle-btn:hover {
  color: inherit;
}

/* LTR & RTL: show hamburger icon consistently (same as English version) */
.nav-menu-icon-rtl {
  display: none !important;
}
.nav-menu-icon-ltr {
  display: inline-block !important;
}
/* Ensure nav menu toggle is always visible and on top in RTL mobile (iPhone fix) */
@media (max-width: 1199.98px) {
  html[dir="rtl"] .nav-menu-toggle-wrap {
    position: relative;
    z-index: 9999;
  }
  html[dir="rtl"] .layout-menu-toggle-btn {
    min-width: 48px;
    min-height: 48px;
  }
}

/* Mobile: hide only the shortcut buttons (and clock) in the top navbar; keep hamburger, notifications, user */
@media (max-width: 1199.98px) {
  .nav-shortcuts {
    display: none !important;
  }
  /* Hide duplicate notifications + profile (desktop block inside collapse); keep only the d-xl-none block */
  #layout-navbar .navbar-collapse .navbar-nav.ms-auto {
    display: none !important;
  }
}

/* RTL (Arabic) + mobile: menu slides from right, same width as LTR (responsive sidebar) */
@media (max-width: 1199.98px) {
  html[dir="rtl"] .layout-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 260px !important;
    max-width: 80vw !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    padding-right: env(safe-area-inset-right, 0);
    padding-left: env(safe-area-inset-left, 0);
    box-sizing: border-box;
    z-index: 9998 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    visibility: visible !important;
    pointer-events: none;
    transition: transform 0.3s ease, visibility 0.3s ease;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
  }
  html[dir="rtl"].layout-menu-expanded .layout-menu {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    pointer-events: auto;
  }
  html[dir="rtl"] .layout-container {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  /* Overlay above content so menu shows on top on every page */
  html[dir="rtl"] .layout-overlay {
    z-index: 9997 !important;
  }
}

/* Sidebar logo styling */
.sidebar-logo-container {
  height: 124px;
  padding: 10px;
}
.sidebar-logo-container .app-brand-link {
  width: 100%;
}
.sidebar-logo {
  width: 100%;
  height: 104px;
  object-fit: cover;
}

/* Mobile: constrain sidebar logo for both LTR and RTL */
@media (max-width: 1199.98px) {
  .sidebar-logo-container {
    height: auto !important;
    max-height: 70px !important;
    padding: 8px !important;
  }
  .sidebar-logo {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }
}

/* iPhone specific: ensure modals are tappable and no transparent layer blocks inputs */
@supports (-webkit-touch-callout: none) {
  .modal {
    -webkit-overflow-scrolling: touch;
  }
  .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .modal .btn-close,
  .modal .btn {
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
  /* Force modal content into its own layer so it sits above any layout overlay */
  .modal.show .modal-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
    z-index: 10510 !important;
    isolation: isolate;
  }
  .modal.show .modal-body {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
  }
  .modal.show .modal-body input,
  .modal.show .modal-body select,
  .modal.show .modal-body textarea,
  .modal.show .modal-body [contenteditable] {
    pointer-events: auto;
    touch-action: manipulation;
  }
}

/* Sneat: .content-backdrop is position:fixed after main column; invisible .fade layer can still capture taps on iOS */
.content-backdrop.fade:not(.show) {
  pointer-events: none !important;
}

/* When a modal is open: kill Sneat overlays that sit *outside* .layout-container and paint above nested modals */
body.modal-open .content-backdrop,
body.modal-open .layout-overlay {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
}

#invoice-POS {
    background: #FFF;
    color:#000000;
    font-weight: bolder;
  }

   .table_invoice  {
    color: #000000;
    font-weight: bolder;
  }

  #invoice-POS ::selection {
    background: #f31544;
    color: #FFF;
  }
  #invoice-POS ::moz-selection {
    background: #f31544;
    color: #FFF;
  }
  
  #invoice-POS p {
    font-size: 0.7em;
    color: #666;
    line-height: 1.2em;
  }
  #invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot {
    /* Targets all id with 'col-' */
    border-bottom: 1px solid #EEE;
  }
  
  #invoice-POS #mid {
    min-height: 80px;
  }
  #invoice-POS #bot {
    min-height: 50px;
  }
  
  #invoice-POS .tabletitle {
    font-size: 0.5em;
    background: #eee;
  }
  
  #invoice-POS .item {
    width: 24mm;
  }

/* Legacy PWA floating controls (removed from layout; hide if cached HTML still references them) */
@media (max-width: 1199.98px) {
  .mobile-pwa-actions,
  #pwa-install-btn,
  #pwa-push-btn,
  #pwa-test-push-btn {
    display: none !important;
  }
}

/* iOS/PWA: fixed bottom nav can sit above modal content in nested stacking contexts — disable while Bootstrap modal is open */
body.modal-open .mobile-bottom-nav {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========== Print / PDF (reports): mobile Safari/Chrome use viewport width; widen + print CSS ========== */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html,
  body {
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .layout-menu,
  aside.layout-menu,
  #layout-menu,
  .layout-navbar,
  .layout-menu-toggle,
  .layout-navbar .navbar-nav-right,
  .mobile-bottom-nav,
  .cd-pwa-install-banner,
  .layout-overlay,
  .drag-target,
  .cd-report-filters {
    display: none !important;
  }

  .layout-wrapper,
  .layout-container,
  .layout-page,
  .content-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .container,
  .container-fluid,
  .container-xxl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .container-xxl.flex-grow-1.container-p-y {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .card-header .btn,
  .card-header a.btn {
    display: none !important;
  }

  .table-responsive {
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
  }

  .table {
    width: 100% !important;
    font-size: 8pt !important;
    border-collapse: collapse !important;
  }

  .table th,
  .table td {
    padding: 0.2rem 0.35rem !important;
    vertical-align: top !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  tr {
    page-break-inside: avoid;
  }

  a[href]::after {
    content: none !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  td .btn,
  td a.btn {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    display: inline !important;
    color: inherit !important;
  }

  .pagination {
    display: none !important;
  }
}