/* assets/css/trip-table.css */
/* Styles for the trip table and trip table v2 features. */

/* Trip Table Styles */
.trip-table-wrapper {
    width: 100%;
    overflow-x: auto;
}
.trip-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.trip-table th, .trip-table td {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.trip-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}
.year-row td {
    background-color: #f1f1f1;
    font-weight: 600;
}
.month-row td {
    background-color: #fbfbfb;
    font-weight: 500;
}
.trip-table tbody tr.trip-row:hover {
    background-color: #0d4edb !important;
    color: #ffffff;
    cursor: pointer;
}
.trip-table tbody tr.trip-row:hover td,
.trip-table tbody tr.trip-row:hover th {
    color: #ffffff;
}
.tour-status {
    display: inline-block;
    padding: 5px 15px;
    color: #343434;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tour-status.open      { background-color: #E3EE30; color: #343434; }
.tour-status.completed { background-color: #00ca2c; color: #343434; }
.tour-status.departed  { background-color: #A9BCE5; color: #343434; }
.tour-status.soon      { background-color: #800080; color: #ffffff; }
.tour-status.full      { background-color: #FF6347; color: #ffffff; }
.trip-table th.sortable {
    cursor: pointer;
}
.trip-table th.sortable::after {
    content: ' ▼';
    font-size: 12px;
    margin-left: 5px;
}
.trip-table th.sorted-asc::after {
    content: ' ▲';
}
@media (max-width: 768px) {
    .trip-table th,
    .trip-table td {
        font-size: 13px !important;
        padding: 6px !important;
    }
    .trip-table {
        width: 100% !important;
    }
    .trip-table td:first-child {
        padding-left: 5px !important;
    }
    .trip-table th.sortable::after {
        display:none !important;
    }
    .tour-status.soon {
        background-color: #800080;
        color: #ffffff !important;
    }
    .trip-table th:first-child,
    .trip-table td:first-child {
        width: 20%;
    }
    .trip-table th:nth-child(2),
    .trip-table td:nth-child(2) {
        width: 45%;
    }
    .trip-table th:nth-child(3),
    .trip-table td:nth-child(3) {
        width: 15%;
    }
    .trip-table th:nth-child(4),
    .trip-table td:nth-child(4) {
        width: 20%;
    }
    td.tour-status {
        min-width: 60px !important;
    }
}

/* Trip Table v2 Styles */
.dw-trip-v2-wrapper .trip-table-v2-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 2rem;
}
.dw-trip-v2-wrapper .trip-table-v2 {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "Noto Sans TC", sans-serif;
}
.dw-trip-v2-wrapper .trip-table-v2 th,
.dw-trip-v2-wrapper .trip-table-v2 td {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0.75rem 0.5rem;
  border: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}
.dw-trip-v2-wrapper .trip-table-v2 thead th {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
  font-weight: 600;
}
.dw-trip-v2-wrapper .trip-table-v2 .year-row td {
  background-color: #f1f1f1;
  font-weight: 600;
}
.dw-trip-v2-wrapper .trip-table-v2 .month-row td {
  background-color: #fbfbfb;
  font-weight: 500;
}
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover {
  background-color: #0d4edb !important;
  color: #ffffff;
  cursor: pointer;
}
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover td,
.dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover th {
  color: #ffffff;
}
.dw-trip-v2-wrapper .trip-table-v2 .tour-status {
  display: inline-block;
  font-size: 0.98em;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 16px;
  background: #f0f4ff;
  color: #0d4edb;
  margin-top: 2px;
  align-self: flex-start;
  text-align: center;
  line-height: 1.5;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.open      { background-color: #E3EE30; color: #343434; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.completed { background-color: #00ca2c; color: #343434; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.departed  { background-color: #A9BCE5; color: #343434; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.soon      { background-color: #800080; color: #ffffff; }
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.full      { background-color: #FF6347; color: #ffffff; }
.dw-trip-v2-wrapper .trip-table-v2 th.sortable {
  cursor: pointer;
}
.dw-trip-v2-wrapper .trip-table-v2 th.sortable::after {
  content: " ▼";
  font-size: 12px;
  margin-left: 5px;
}
.dw-trip-v2-wrapper .trip-table-v2 th.sorted-asc::after {
  content: " ▲";
}
@media (max-width: 768px) {
  .dw-trip-v2-wrapper .trip-table-v2 th,
  .dw-trip-v2-wrapper .trip-table-v2 td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(3),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(3) {
    display: none !important;
  }
  .dw-trip-v2-wrapper .trip-table-v2 {
    table-layout: auto;
  }
  .dw-trip-v2-wrapper .trip-table-v2 thead th:nth-child(4),
  .dw-trip-v2-wrapper .trip-table-v2 tbody td:nth-child(4) {
    width: auto !important;
  }
} 

/* --- Mobile: visually merge 行程日期 + 深度遊 for trip_table_v2 --- */
@media (max-width: 768px) {
  /* Hide thead and 2nd/3rd columns */
  .dw-trip-v2-wrapper .trip-table-v2 thead {
    display: none !important;
  }
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(2),
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(3) {
    display: none !important;
  }
  /* Force first column and row to block and full width */
  .dw-trip-v2-wrapper .trip-table-v2 tr.trip-row,
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word;
  }
  /* Inject trip title below date using ::after */
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1)::after {
    content: attr(data-title);
    display: block;
    color: #222;
    font-size: 1em;
    margin-top: 0.3em;
    border-top: 1px solid #eee;
    padding-top: 0.2em;
    font-weight: normal;
    white-space: normal;
    word-break: break-word;
  }
  /* Remove hover/active background for first column */
  .dw-trip-v2-wrapper .trip-table-v2 tr.trip-row:hover td:nth-child(1),
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1) {
    background: #fff !important;
    color: #222 !important;
  }
  /* Status column: as narrow as possible but readable */
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(4) {
    width: 1% !important;
    min-width: 60px !important;
    max-width: 90px !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
  }
  /* Remove any padding/margin from hidden columns */
  .dw-trip-v2-wrapper .trip-table-v2 td[style*='display: none'] {
    padding: 0 !important;
    margin: 0 !important;
  }
} 

@media (max-width: 768px) {
  /* Ensure the first column text is always dark, even on hover */
  .dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row:hover td:nth-child(1),
  .dw-trip-v2-wrapper .trip-table-v2 tbody tr.trip-row td:nth-child(1) {
    color: #222 !important;
    background: #fff !important;
  }
  /* Style the pseudo-element (title) for readability */
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1)::after {
    color: #343434 !important;
    font-weight: normal;
    font-size: 1em;
    margin-top: 2px;
    display: block;
    white-space: normal;
    word-break: break-word;
  }
} 

@media (max-width: 768px) {
  /* --- Fix: Force merged column to be full width and readable on mobile --- */
  .dw-trip-v2-wrapper .trip-table-v2 tr.trip-row,
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    box-sizing: border-box;
  }
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1)::before {
    content: attr(data-title);
    display: block;
    font-weight: normal;
    font-size: 1em;
    color: #343434;
    margin-bottom: 2px;
    white-space: normal;
    word-break: break-word;
    margin-top: 8px;
  }
  .dw-trip-v2-wrapper .trip-table-v2 td:nth-child(1)::after {
    content: "";
    display: block;
    height: 1px;
    background: #e0e0e0;
    margin: 6px 0 4px 0;
  }
} 

@media (max-width: 768px) {
  /* Hide the table on mobile */
  .dw-trip-v2-wrapper .trip-table-v2 {
    display: none !important;
  }
  /* Mobile trip list styles */
  .dw-trip-list-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dw-trip-list-year,
  .dw-trip-list-month {
    font-weight: bold;
    background: #f5f5f5;
    padding: 8px 12px;
    margin-top: 12px;
    border-radius: 4px;
    font-size: 1.1em;
  }
  .dw-trip-list-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin: 10px 0;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  .dw-trip-list-item:hover {
    box-shadow: 0 4px 16px rgba(13,78,219,0.10);
    border-color: #b3c6f7;
  }
  .dw-trip-list-title {
    font-size: 1.08em;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1a237e;
    word-break: break-word;
  }
  .dw-trip-list-date {
    font-size: 1em;
    color: #333;
    margin-bottom: 0;
    margin-right: 0;
  }
  .dw-trip-list-status {
    margin-top: 0;
    margin-bottom: 0;
  }
  .dw-trip-list-status {
    display: inline-block;
    font-size: 0.98em;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 16px;
    background: #f0f4ff;
    color: #0d4edb;
    margin-top: 2px;
    align-self: flex-start;
  }
  .dw-trip-list-status.full { background: #f0f4ff !important; color: #0d4edb !important; }
  .dw-trip-list-status.completed { background: #e8f5e9; color: #388e3c; }
  .dw-trip-list-status.soon { background: #fffde7; color: #fbc02d; }
  .dw-trip-list-status.open { background: #e3f2fd; color: #1976d2; }
  .dw-trip-list-price {
    font-size: 1.08em;
    font-weight: 700;
    color: #0d4edb;
    margin-bottom: 4px;
    margin-top: 0;
    font-family: "PPTelegraf", "Noto Sans TC", sans-serif;
    letter-spacing: 0.5px;
    word-break: break-word;
  }
} 

@media (max-width: 768px) {
  .dw-trip-list-date-status-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .dw-trip-list-date,
  .dw-trip-list-status {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0;
    vertical-align: middle;
  }
  .dw-trip-list-status {
    margin-top: 0;
    margin-bottom: 0;
  }
} 

.tour-status.full,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.full {
  background: #f0f4ff !important;
  background-color: #f0f4ff !important;
  color: #0d4edb !important;
}
.tour-status.completed,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.completed {
  background: #e8f5e9 !important;
  color: #388e3c !important;
}
.tour-status.soon,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.soon {
  background: #fffde7 !important;
  color: #fbc02d !important;
}
.tour-status.open,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.open {
  background: #e3f2fd !important;
  color: #1976d2 !important;
} 

.tour-status.departed,
.dw-trip-v2-wrapper .trip-table-v2 .tour-status.departed {
  background: #fbe9e7 !important;
  background-color: #fbe9e7 !important;
  color: #d84315 !important;
}

.dw-trip-list-status.departed {
  background: #fbe9e7 !important;
  color: #d84315 !important;
}