/* ====== Base ====== */
body.body-internal {
  background-color: #f8f9fa;
}
.table-responsive {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background-color: #fff;
}
.table thead th {
  background-color: #f7f9fc;
  color: #555;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  border-bottom: 2px solid #e9ecef;
  padding: 1rem 0.75rem;
  text-align: left;
}
.table tbody tr {
  transition: background-color 0.2s ease-in-out;
}
.table tbody tr:hover {
  background-color: #f1f3f5;
}
.table td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  border-top: 1px solid #e9ecef;
}
.table-link a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}
.table-link a:hover {
  text-decoration: underline;
}
.table-service {
  font-size: 14px;
  color: #666;
  max-width: 250px;
  white-space: normal;
}

/* Status badge */
.status-badge {
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-badge svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.status-completed { background-color: #e9f7ef; color: #28a745; }
.status-completed svg { fill: #28a745; }
.status-inprogress { background-color: #e6f7ff; color: #007bff; }
.status-inprogress svg { fill: #007bff; }
.status-pending, .status-processing { background-color: #fff8e1; color: #ff9800; }
.status-pending svg, .status-processing svg { fill: #ff9800; }
.status-partial { background-color: #f2e6ff; color: #6f42c1; }
.status-partial svg { fill: #6f42c1; }
.status-canceled { background-color: #fbe9e7; color: #dc3545; }
.status-canceled svg { fill: #dc3545; }

/* Buttons */
.btn-actions {
  background-color: #007bff;
  color: #fff !important;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}
.btn-actions:hover { background-color: #0056b3; transform: translateY(-1px); }
.btn-actions.disabled, .btn-actions:disabled { background-color: #ced4da; cursor: not-allowed; transform: none; opacity: 0.65; }
.component_button_cancel .btn-actions { background-color: #dc3545; }
.component_button_cancel .btn-actions:hover { background-color: #c82333; }

/* Search bar & filter pills */
.orders-history__margin-search .card {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
.orders-history__margin-search .form-control { border-radius: 8px 0 0 8px; border-right: 0; }
.orders-history__margin-search .btn-big-secondary { border-radius: 0 8px 8px 0; }
.nav-pills .nav-link {
  border-radius: 20px;
  padding: 8px 15px;
  margin-right: 5px;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s ease;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #007bff; }

/* Row checkbox (ซ้ายสุด) */
th.__checkbox-col__ {
    width: 40px;
}
td:has(> label.order-checkbox) {
    width: 40px;
    padding-left: 15px !important;
}
label.order-checkbox {
  --border-default: #d1d6dc;
  --border-hover: #007bff;
  --active: #007bff;
  display: inline-block;
  width: 20px; height: 20px;
  cursor: pointer;
  position: relative;
  margin: 0;
}
label.order-checkbox:hover input:not(:checked) { --border: var(--border-hover); }
.order-checkbox input { display: none; }
.order-checkbox .checkbox-visual {
  width: 20px; height: 20px;
  border: 2px solid var(--border, var(--border-default));
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.order-checkbox .checkbox-visual svg {
  width: 14px; height: 14px;
  stroke: #fff; stroke-width: 2; fill: none;
  opacity: 0; transform: scale(0.5);
  transition: all 0.2s;
}
.order-checkbox input:checked + .checkbox-visual { background-color: var(--active); border-color: var(--active); }
.order-checkbox input:checked + .checkbox-visual svg { opacity: 1; transform: scale(1); }

/* === UPDATED STYLE FOR DISABLED CHECKBOX === */
.order-checkbox-input:disabled + .checkbox-visual {
  background-color: #f1f3f5;
  border-color: #dee2e6 !important;
  cursor: not-allowed;
  opacity: 0.6;
}
.order-checkbox-input:disabled:checked + .checkbox-visual {
    background-color: #adb5bd;
    border-color: #adb5bd !important;
}
/* === END OF UPDATE === */

/* Selection tools (ปุ่มล้างที่เลือกทั้งหมด) */
.selection-tools {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 16px;
}
.selection-tools .clear-selected {
  background: transparent; border: none; color: #0ea5e9;
  font-weight: 700; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.selection-tools .clear-selected svg { width: 18px; height: 18px; }

/* Toast (TH) */
.copy-toast {
  position: fixed;
  bottom: -100px; left: 50%; transform: translateX(-50%);
  background-color: #333; color: #fff; padding: 12px 24px; border-radius: 8px;
  font-size: 14px; z-index: 9999;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.copy-toast.show { bottom: 30px; }
.copy-toast.error { background: #dc2626; border: 2px solid #fecaca; font-weight: 800; }
.copy-toast.error.show { bottom: auto; top: 24px; }
@keyframes toast-shake {
  10%, 90% { transform: translateX(-50%) translateY(0); }
  20%, 80% { transform: translateX(calc(-50% - 2px)); }
  30%, 50%, 70% { transform: translateX(calc(-50% + 4px)); }
  40%, 60% { transform: translateX(calc(-50% - 4px)); }
}
.copy-toast.error.animate { animation: toast-shake 0.5s; }

/* Service/Link column wrapper */
.scroll-inline {
  display: block;
  max-width: 250px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-inline::-webkit-scrollbar { height: 4px; }
.scroll-inline::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2px; }

td[data-label="ลิงก์"] .scroll-inline,
td[data-label="Link"] .scroll-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Re-order links */
.service-id-reorder-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease-in-out;
}
.service-id-reorder-link:hover { color: #007bff; }
.service-id-reorder-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}
.service-id-reorder-link:hover svg { transform: scale(1.1); }

.emptied-service { font-style: italic; color: #6c757d; }

/* Refund link */
td[data-label="สถานะ"] a.refund-link,
td[data-label="Status"] a.refund-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
td[data-label="สถานะ"] a.refund-link:hover,
td[data-label="Status"] a.refund-link:hover { filter: brightness(0.9); }

/* URL copy icon next to link */
.url-copy-btn {
  background: transparent;
  border: none;
  margin-right: 8px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
  color: #6c757d;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.url-copy-btn:hover {
  background: #e9ecef;
  color: #212529;
}
.url-copy-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ทำให้ลิงก์สถานะเป็นแค่เนื้อหาสถานะ (ไม่คลุมทั้งเซลล์) */
td[data-label="สถานะ"] a.refund-link,
td[data-label="Status"] a.refund-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/*
** ===============================================================
** [NEW] สไตล์สำหรับช่อง "บริการ" รูปแบบใหม่ (23/08/2025)
** ===============================================================
*/
.service-cell-content-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.service-reorder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #495057;
  flex-shrink: 0;
}
.service-reorder-icon:hover {
  color: #007bff;
}
.service-reorder-icon svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
.service-reorder-icon:hover svg {
  transform: scale(1.1);
}

/* [UPDATED 23/08/2025] - ทำให้ช่องสั้นลงและไม่มีขอบ */
.service-input-like-wrapper {
  max-width: 250px; /* << กำหนดความกว้างสูงสุดให้สั้นลง */
  flex-grow: 1;
  border: none; /* << เอาเส้นขอบออก */
  background-color: transparent; /* << เอาพื้นหลังออก */
  padding: 0; /* << เอาระยะห่างภายในออก */
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  color: #495057;
}
.service-input-like-wrapper::-webkit-scrollbar {
  height: 4px;
  background-color: transparent; /* ทำให้พื้นหลัง scrollbar โปร่งใส */
}
.service-input-like-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2px;
}
/* ======================== [END OF NEW] ======================== */


/* ====== การแสดงผลแบบ "การ์ด" บนมือถือ (<992px) ====== */
@media (max-width: 991.98px) {
  .orders-history__margin-table .table-responsive { overflow: visible !important; }
  .orders-history__margin-table .table { display: block; min-width: initial !important; }
  .orders-history__margin-table thead { display: none; }
  .orders-history__margin-table tbody { display: block; }

  .orders-history__margin-table tbody tr {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    margin: 12px 0;
    overflow: visible;
  }

  .orders-history__margin-table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-top: 1px solid #e9ecef;
    padding: 12px 14px;
    word-break: break-word;
  }

  .orders-history__margin-table tbody td:nth-child(1),
  .orders-history__margin-table tbody td:nth-child(2) { border-top: 0; }

  .orders-history__margin-table tbody tr { position: relative; padding-top: 40px; }
  .orders-history__margin-table tbody td:first-child {
    position: absolute; top: 0; left: 0; padding: 12px 14px; width: auto;
  }
  .orders-history__margin-table tbody td[data-label="ID"] {
    position: absolute; top: 0; right: 0; padding: 12px 14px; font-weight: 700; font-size: 16px; width: auto;
  }
  .orders-history__margin-table tbody td[data-label="ID"]::before { content: none; }
  .orders-history__margin-table tbody td[data-label="วันที่"] { border-top: 1px solid #e9ecef; }

  .orders-history__margin-table tbody td:not([data-label="ID"])::before {
    content: attr(data-label);
    color: #6c757d;
    font-weight: 600;
    flex: 0 0 40%;
    max-width: 42%;
  }

  .scroll-inline { display: block; max-width: 100%; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td[data-label="ลิงก์"] .scroll-inline, td[data-label="Link"] .scroll-inline { width: 100%; text-align: right; }
  .url-copy-btn { margin-right: 4px; }

  td[data-label="สถานะ"] a, td[data-label="Status"] a { text-decoration: none; }

  /* กันกรณีธีมฝัง .modal ไว้ในตารางบนมือถือ: ดัน z-index ให้ชัดและใช้ fixed */
  .orders-history__margin-table .modal-backdrop { position: fixed; z-index: 2000 !important; }
  .orders-history__margin-table .modal { position: fixed; z-index: 2005 !important; }

  /*
  ** ===============================================================
  ** [NEW-MOBILE] จัดการแสดงผลช่องบริการบนมือถือ (23/08/2025)
  ** ===============================================================
  */
  .orders-history__margin-table tbody td[data-label="บริการ"] .service-cell-content-wrapper,
  .orders-history__margin-table tbody td[data-label="Service"] .service-cell-content-wrapper {
    /* ทำให้ wrapper ของเนื้อหา (ไอคอน + input) กินพื้นที่ส่วนที่เหลือทางขวา */
    flex-grow: 1;
    justify-content: flex-end; /* จัดไอคอนและ input ไปทางขวาของพื้นที่ */
    min-width: 0; /* ป้องกันไม่ให้ flex item ล้น container */
  }

  .service-input-like-wrapper {
    max-width: 85%; /* จำกัดความกว้างสูงสุดของช่อง input เพื่อให้ไอคอนแสดงผลได้ */
  }
}

/*
** ===============================================================
** [NEW] เพิ่มลูกเล่น Hover ให้นูนขึ้นสำหรับตาราง Order (23/08/2025)
** ===============================================================
*/

/* 1. กำหนดให้การเปลี่ยนแปลงค่า transform และ box-shadow เกิดขึ้นอย่างนุ่มนวล */
.orders-history__margin-table .table tbody tr {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. เมื่อนำเมาส์ไปวางบนแถว (tr:hover) */
.orders-history__margin-table .table tbody tr:hover {
  position: relative; /* ทำให้ z-index ทำงานได้ */
  z-index: 2; /* ทำให้แถวที่เลือก ลอยอยู่เหนือแถวถัดไป */
  transform: translateY(-2px); /* ขยับแถวขึ้นบน 2px เพื่อสร้างมิติ */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* เพิ่มเงาฟุ้งๆ ให้ดูเหมือนลอยขึ้น */
}