/* Mobile Utility Classes for Tasin System */

/* ========================================
   DISPLAY UTILITIES FOR MOBILE
   ======================================== */

/* Hide elements on mobile devices (max-width: 768px) */
@media (max-width: 768px) {
  .d-mobile-none {
    display: none !important;
  }

  .hide-mobile {
    display: none !important;
  }

  .mobile-hidden {
    display: none !important;
  }
}

/* Hide elements on small mobile devices (max-width: 576px) */
@media (max-width: 576px) {
  .d-sm-mobile-none {
    display: none !important;
  }

  .hide-sm-mobile {
    display: none !important;
  }

  .sm-mobile-hidden {
    display: none !important;
  }
}

/* Hide elements on extra small mobile devices (max-width: 480px) */
@media (max-width: 480px) {
  .d-xs-mobile-none {
    display: none !important;
  }

  .hide-xs-mobile {
    display: none !important;
  }

  .xs-mobile-hidden {
    display: none !important;
  }
}

/* ========================================
   SHOW UTILITIES FOR MOBILE ONLY
   ======================================== */

/* Show elements only on mobile devices */
.d-mobile-block {
  display: none !important;
}

.d-mobile-inline {
  display: none !important;
}

.d-mobile-inline-block {
  display: none !important;
}

.d-mobile-flex {
  display: none !important;
}

@media (max-width: 768px) {
  .d-mobile-block {
    display: block !important;
  }

  .d-mobile-inline {
    display: inline !important;
  }

  .d-mobile-inline-block {
    display: inline-block !important;
  }

  .d-mobile-flex {
    display: flex !important;
  }

  .show-mobile {
    display: block !important;
  }

  .mobile-visible {
    display: block !important;
  }
}

/* ========================================
   RESPONSIVE BREAKPOINT UTILITIES
   ======================================== */

/* Hide on tablet and up (min-width: 769px) */
@media (min-width: 769px) {
  .d-tablet-up-none {
    display: none !important;
  }

  .hide-tablet-up {
    display: none !important;
  }
}

/* Hide on desktop and up (min-width: 992px) */
@media (min-width: 992px) {
  .d-desktop-up-none {
    display: none !important;
  }

  .hide-desktop-up {
    display: none !important;
  }
}

/* Hide on large desktop and up (min-width: 1200px) */
@media (min-width: 1200px) {
  .d-lg-desktop-up-none {
    display: none !important;
  }

  .hide-lg-desktop-up {
    display: none !important;
  }
}

/* ========================================
   SPECIFIC MOBILE DISPLAY UTILITIES
   ======================================== */

/* Hide specific UI elements on mobile */
@media (max-width: 768px) {
  /* Hide action buttons on mobile */
  .mobile-hide-actions {
    display: none !important;
  }

  /* Hide secondary text/labels on mobile */
  .mobile-hide-secondary {
    display: none !important;
  }

  /* Hide icons on mobile to save space */
  .mobile-hide-icons {
    display: none !important;
  }

  /* Hide table headers on mobile */
  .mobile-hide-header {
    display: none !important;
  }

  /* Hide pagination info on mobile */
  .mobile-hide-pagination-info {
    display: none !important;
  }

  /* Hide toolbar elements on mobile */
  .mobile-hide-toolbar {
    display: none !important;
  }

  /* Hide breadcrumb on mobile */
  .mobile-hide-breadcrumb {
    display: none !important;
  }

  /* Hide sidebar on mobile */
  .mobile-hide-sidebar {
    display: none !important;
  }
}

/* ========================================
   MOBILE VISIBILITY HELPERS
   ======================================== */

/* Utility classes for common scenarios */
@media (max-width: 768px) {
  /* Collapse margins on mobile */
  .mobile-no-margin {
    margin: 0 !important;
  }

  /* Collapse padding on mobile */
  .mobile-no-padding {
    padding: 0 !important;
  }

  /* Full width on mobile */
  .mobile-full-width {
    width: 100% !important;
  }

  /* Center text on mobile */
  .mobile-text-center {
    text-align: center !important;
  }

  /* Stack elements vertically on mobile */
  .mobile-stack {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }
}

/* ========================================
   GRID AND TABLE MOBILE UTILITIES
   ======================================== */

/* Hide specific grid columns on mobile */
@media (max-width: 768px) {
  .mobile-hide-col {
    display: none !important;
  }

  /* Hide table columns on mobile */
  .mobile-hide-table-col {
    display: none !important;
  }

  /* Responsive table cell display */
  .mobile-table-cell-block {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 5px 0 !important;
  }
}

/* ========================================
   BUTTON AND FORM MOBILE UTILITIES
   ======================================== */

@media (max-width: 768px) {
  /* Hide button text, show icon only */
  .mobile-icon-only .btn-text {
    display: none !important;
  }

  /* Stack form elements on mobile */
  .mobile-form-stack {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Hide form labels on mobile */
  .mobile-hide-label {
    display: none !important;
  }

  /* Action buttons responsive styling */
  .action-buttons {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .btn-action {
    min-width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
  }

  .btn-action .btn-text {
    font-size: 10px !important;
    margin-left: 2px !important;
  }

  /* Compact grid cells on mobile */
  .k-grid-content td {
    padding: 6px 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Mobile grid header adjustments */
  .k-grid-header .k-header {
    padding: 8px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }
}

/* ========================================
   PRINT UTILITIES
   ======================================== */

/* Hide elements when printing */
@media print {
  .print-hidden {
    display: none !important;
  }

  .no-print {
    display: none !important;
  }
}

/* Show elements only when printing */
.print-only {
  display: none !important;
}

@media print {
  .print-only {
    display: block !important;
  }
}

/* ========================================
   CUSTOM RESPONSIVENESS OVERRIDES (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
  /* Prevent horizontal wiggle on page container and body */
  html, body, .page-container, .main-content {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Force modal dialog wrappers to stretch and fit mobile viewports */
  .modal-dialog,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg,
  .custom-wide-modal,
  #orderModal .modal-dialog,
  #orderDetailsModal .modal-dialog,
  #orderGroupModal .modal-dialog,
  #priceManagementModal .modal-dialog,
  #supplierProductsModal .modal-dialog,
  #roleModal .modal-dialog,
  #addProductModal .modal-dialog {
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }

  /* Ensure modal content padding is not too wide */
  .modal-body {
    padding: 12px !important;
    overflow-x: hidden !important;
  }
  
  .modal-footer {
    padding: 10px !important;
  }

  /* Prevent table content inside modals from shrinking and force horizontal scrolling instead */
  .modal-body .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 1rem;
  }

  /* Set explicit minimum table widths inside modals to avoid squeezing */
  #orderModal .table {
    min-width: 950px !important;
  }

  #customer-price-table {
    min-width: 950px !important;
  }

  #supplierProductsModal .table {
    min-width: 800px !important;
  }

  .permission-matrix {
    min-width: 700px !important;
  }

  #orderDetailsModal .table-hover {
    min-width: 1100px !important;
  }

  /* Enforce min-widths for form controls inside table cells to remain visible and editable */
  .table input.form-control,
  .table select.form-select,
  .table select,
  .table .product-select,
  .table .customer-select,
  .table .item-note-input {
    font-size: 13px !important;
    height: 32px !important;
    padding: 4px 8px !important;
  }

  /* Select dropdowns */
  .table select,
  .table select.form-select,
  .table .product-select,
  .table .customer-select {
    min-width: 180px !important;
    width: 180px !important;
  }

  /* Note/description text fields */
  .table .item-note-input,
  .table .product-description,
  .table input[type="text"] {
    min-width: 150px !important;
    width: 150px !important;
  }

  /* Price and money fields */
  .table .unit-price-input,
  .table .processing-fee-input,
  .table .selling-price,
  .table .additional-costs-input,
  .table .total-price-input {
    min-width: 110px !important;
    width: 110px !important;
  }

  /* Small numeric fields like quantity, percentage, etc. */
  .table .quantity-input,
  .table .wastage-input,
  .table .tax-input,
  .table .profit-input,
  .table .priority,
  .table input[type="number"] {
    min-width: 75px !important;
    width: 75px !important;
  }

  /* Order details: Force key-value tables in detail previews to stack vertically */
  #orderDetailsModal .table-borderless tbody,
  #orderDetailsModal .table-borderless tr,
  #orderDetailsModal .table-borderless td {
    display: block !important;
    width: 100% !important;
  }
  
  #orderDetailsModal .table-borderless tr {
    margin-bottom: 8px !important;
  }

  #orderDetailsModal .table-borderless td {
    padding: 6px 0 !important;
    border-bottom: 1px solid #f1f3f5 !important;
  }
  
  #orderDetailsModal .table-borderless td:last-child {
    border-bottom: none !important;
  }

  #orderDetailsModal .table-borderless td strong {
    display: inline-block;
    min-width: 180px;
  }

  /* Prevent action buttons or control headers from breaking layout */
  .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Stack button sections inside modals */
  #supplierProductsModal .d-flex.justify-content-between,
  #priceManagementModal .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #supplierProductsModal .d-flex.justify-content-between button,
  #supplierProductsModal .d-flex.justify-content-between div,
  #priceManagementModal .d-flex.justify-content-between button,
  #priceManagementModal .d-flex.justify-content-between div {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 4px !important;
  }
  
  #supplierProductsModal .d-flex.justify-content-between div {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  #supplierProductsModal .d-flex.justify-content-between div button {
    margin-bottom: 0 !important;
  }

  /* Fix footer button layout */
  .modal-footer button {
    flex: 1;
    min-width: 80px;
  }
  
  /* Fix specific multi-column forms inside modals */
  .modal-body .row > .col-md-4,
  .modal-body .row > .col-md-6,
  .modal-body .row > .col-md-3,
  .modal-body .row > .col-md-2 {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}