/**
 * ELIC Responsive Fixes
 * แก้ไขปัญหา responsive สำหรับทุกหน้า
 */

/* ==========================================================================
   1. MOBILE FIRST - Container & Layout Fixes
   ========================================================================== */

/* ปรับ container ให้ไม่ล้นจอ */
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
  max-width: 100%;
  overflow-x: hidden;
}

/* ป้องกัน horizontal scroll */
body {
  overflow-x: hidden;
}

.page-content {
  overflow-x: hidden;
}

/* ==========================================================================
   2. TABLE RESPONSIVE FIXES
   ========================================================================== */

/* Force table-responsive wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* แก้ไข fixed width tables */
table[style*="width:2000px"],
table[style*="width:1800px"],
table[style*="width:1500px"] {
  min-width: 100% !important;
  width: max-content !important;
}

/* ตารางทั่วไป responsive */
.table {
  width: 100%;
  table-layout: auto;
}

/* หัวตารางไม่ตัดคำ */
.table th {
  white-space: nowrap;
}

/* ข้อมูลในตารางตัดคำได้ */
.table td {
  word-wrap: break-word;
  word-break: break-word;
}

/* ชื่อบริษัท/ที่อยู่ยาว */
.table td.company-name,
.table td.address,
.table td[data-wrap="true"] {
  white-space: normal;
  min-width: 200px;
  max-width: 350px;
}

/* ==========================================================================
   3. BUTTON RESPONSIVE FIXES
   ========================================================================== */

/* แก้ไข fixed width buttons */
button[style*="width: 300px"],
button[style*="width:300px"],
.btn[style*="width: 300px"],
.btn[style*="width:300px"] {
  width: auto !important;
  min-width: 120px;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* Button groups responsive */
.btn-group-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.btn-group-responsive .btn {
  flex: 1 1 auto;
  min-width: 120px;
}

/* ==========================================================================
   4. FORM RESPONSIVE FIXES
   ========================================================================== */

/* Labels ไม่ตัด */
.form-label {
  white-space: normal;
  word-wrap: break-word;
}

/* Input groups responsive */
.input-group {
  flex-wrap: wrap;
}

/* Select2 responsive */
.select2-container {
  width: 100% !important;
}

/* Fix: select ที่ใช้ form-control ไม่แสดงลูกศร dropdown */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
  cursor: pointer;
}

/* ==========================================================================
   5. CARD RESPONSIVE FIXES
   ========================================================================== */

.card {
  margin-bottom: 1rem;
  overflow: hidden;
}

.card-body {
  padding: 1rem;
}

/* ==========================================================================
   6. MODAL RESPONSIVE FIXES
   ========================================================================== */

.modal-dialog {
  margin: 0.5rem;
  max-width: calc(100% - 1rem);
}

.modal-xl {
  max-width: 95%;
}

.modal-body {
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
}

/* ==========================================================================
   7. ACCORDION RESPONSIVE FIXES
   ========================================================================== */

.accordion-button {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
}

.accordion-body {
  padding: 1rem;
  overflow-x: auto;
}

/* ==========================================================================
   8. TEXT UTILITIES FOR RESPONSIVE
   ========================================================================== */

/* ตัดข้อความยาว */
.text-truncate-responsive {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ข้อความตัดคำ */
.text-wrap-responsive {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ==========================================================================
   9. MOBILE SPECIFIC FIXES (< 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Sidebar overlay */
  .vertical-menu {
    position: fixed;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .vertical-menu.show {
    transform: translateX(0);
  }

  /* Content full width */
  .main-content {
    margin-left: 0 !important;
    padding: 0;
  }

  /* Page content padding */
  .page-content {
    padding: 10px !important;
  }

  /* Container fluid */
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Forms stack vertically */
  .row > [class*="col-lg-"],
  .row > [class*="col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Buttons full width */
  .btn-block-mobile {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Fixed buttons responsive */
  button[style*="width:"],
  .btn[style*="width:"] {
    width: 100% !important;
    max-width: 100%;
  }

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

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

  /* Tables scroll hint */
  .table-responsive::before {
    content: "← เลื่อนดูเพิ่มเติม →";
    display: block;
    text-align: center;
    padding: 5px;
    background: #f0f0f0;
    font-size: 12px;
    color: #666;
    border-radius: 4px 4px 0 0;
  }

  /* Modal fullscreen on mobile */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }

  .modal-content {
    height: 100%;
    border-radius: 0;
  }

  /* Card compact */
  .card-body {
    padding: 0.75rem;
  }

  /* Accordion compact */
  .accordion-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }

  .accordion-body {
    padding: 0.75rem;
  }

  /* Row fix */
  .row {
    margin-left: -5px;
    margin-right: -5px;
  }

  .row > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }

  /* Action buttons stack */
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .action-buttons .btn {
    width: 100%;
  }
}

/* ==========================================================================
   10. TABLET SPECIFIC FIXES (768px - 992px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* 2 columns layout */
  .row > .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row > .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Modal size */
  .modal-lg,
  .modal-xl {
    max-width: 90%;
  }
}

/* ==========================================================================
   11. PRINT FIXES
   ========================================================================== */

@media print {
  .btn,
  .sidebar,
  .topbar,
  .vertical-menu,
  .action-buttons,
  .hide-print {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .table {
    font-size: 10pt;
  }

  .card {
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */

/* Responsive visibility */
.d-mobile-none {
  display: block;
}

.d-mobile-block {
  display: none;
}

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

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

/* Flex utilities */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Full width on mobile */
.w-100-mobile {
  width: auto;
}

@media (max-width: 767.98px) {
  .w-100-mobile {
    width: 100% !important;
  }
}

/* Padding responsive */
.p-responsive {
  padding: 1.5rem;
}

@media (max-width: 767.98px) {
  .p-responsive {
    padding: 0.75rem;
  }
}

/* Margin responsive */
.mb-responsive {
  margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
  .mb-responsive {
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   13. FIX SPECIFIC COMPONENTS
   ========================================================================== */

/* Profile image responsive */
.profile-user .avatar-xl {
  width: 100px;
  height: 100px;
}

@media (max-width: 767.98px) {
  .profile-user .avatar-xl {
    width: 80px;
    height: 80px;
  }
}

/* File upload preview */
.preview-img {
  max-width: 100%;
  height: auto;
}

/* Step wizard responsive */
.step-arrow-nav .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

@media (max-width: 767.98px) {
  .step-arrow-nav {
    flex-direction: column;
  }

  .step-arrow-nav .nav-link {
    width: 100%;
    text-align: center;
  }
}

/* Timeline responsive */
.timeline {
  padding-left: 10px;
}

@media (max-width: 767.98px) {
  .timeline::before {
    left: 0;
  }

  .timeline .timeline-item {
    padding-left: 20px;
  }
}

/* ==========================================================================
   14. VALIDATION SUMMARY RESPONSIVE
   ========================================================================== */

#validation-summary {
  position: sticky;
  top: 60px;
  z-index: 100;
}

@media (max-width: 767.98px) {
  #validation-summary {
    top: 50px;
    font-size: 0.9rem;
  }

  #validation-summary ul {
    padding-left: 1rem;
  }
}