/* Additional styles for filters, pagination, and status badges */

/* Filters Section */
.view-reservations-filters {display: grid;grid-template-columns: repeat(2,1fr);grid-template-rows: repeat(4 , auto); gap: 15px;margin-bottom: 25px;flex-wrap: wrap; padding:1px;}
.view-reservations-filters > div { /* flex: 1; */ min-width: 180px; }
.filter-date-range { grid-area: 3 / 1 / 3 / -1; }
.filter-payment{ grid-area: 2 / 1 / 2 / -1; }

.filter-search { position: relative; }

/* .filter-search .search-input { width: 100%; padding: 10px 35px 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } */

.search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0.5; }

/* .filter-select, .date-input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: #fff; } */

.filter-date-range { display: flex; gap: 10px; align-items: center; }

.filter-date-range input { flex: 1; }
.reset-filters-btn {  background-color: var(--wdt_Booking_PrimaryColor);
    color: var(--wdt_Booking_AccentTxtColor);
    border-width: 0;
    cursor: pointer;
    display: inline-block;
    font-weight: var(--wdtFontWeight_Base, 500);
    line-height: normal;
    margin-top: 10px;
    outline: none;
    padding: var(--wdtPadding_Btn);
    text-decoration: none;
    -webkit-border-radius: var(--wdtRadius_2X);
    border-radius: var(--wdtRadius_2X);
    -webkit-transition: var(--wdt_Booking_Ad-Transition);
    transition: var(--wdt_Booking_Ad-Transition);
    font-size: 1rem;
    font-family: unset; grid-area: 4/1/4/-1; }
/* .reset-filters-btn:hover { background: #5a6268; } */

/* Sortable Columns */
.sortable { cursor: pointer; position: relative; user-select: none; }

.sort-icon { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; }

.sort-icon.asc { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--wdtAccentTxtColor , #333); }

.sort-icon.desc { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--wdtAccentTxtColor , #333); }
/* Row Striping */
.tbl-view-reservations tbody tr:nth-child(even) { background-color: #f9f9f9; }

/* Status Badges */
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; text-align: center; }

.status-pending { background: #fff3cd; color: #856404; }

.status-confirmed { background: #d4edda; color: #155724; }

.status-completed {background: #d5ecbf;color: #11734b;}

.status-failed{ background: #ffcfc9; color: #b10202; }

.status-cancelled { background: #f8d7da; color: #721c24; }

/* No Records Message */
.no-records-row td { text-align: center; padding: 40px 20px !important; }

.no-records-message { text-align: center; }

.no-records-icon { font-size: 48px; display: block; margin-bottom: 10px; }

.no-records-message p { margin: 0; font-size: 16px; color: #666;
}

/* Pagination */
.table-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 15px 0; flex-wrap: wrap; }

.pagination-info { color: #666; font-size: 14px; margin-top: 10px; }

.pagination-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pagination-btn, .page-number { background-color: var(--wdt_Booking_PrimaryColor);color: var(--wdt_Booking_AccentTxtColor);border-width: 0;
    cursor: pointer;display: inline-block;font-weight: var(--wdtFontWeight_Base, 500);line-height: normal;margin-top: 10px;
    outline: none;padding: var(--wdtPadding_Btn);text-decoration: none;-webkit-border-radius: var(--wdtRadius_2X);
    border-radius: var(--wdtRadius_2X);-webkit-transition: var(--wdt_Booking_Ad-Transition);transition: var(--wdt_Booking_Ad-Transition);font-size: 1rem;}

.pagination-btn:hover:not(:disabled),
.page-number:hover:not(.active) { background: var(--wdt_Booking_SecondaryColor); border-color: var(--wdt_Booking_SecondaryColor); }
.page-number.active { background: var(--wdt_Booking_SecondaryColor); color: var(--wdt_Booking_AccentTxtColor , #ffffff); border-color: var(--wdt_Booking_SecondaryColor); }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.page-dots { padding: 0 5px; color: #666; }

.items-per-page { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.items-per-page label { font-size: 14px; color: #666; white-space: nowrap; }

.items-per-page select { padding: 8px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }

/* Table Container */
.tbl-view-reservation-container { overflow-x: auto; }

.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* padding-bottom: 20px; */
    scrollbar-color: var(--wdt_Booking_LinkHoverColor) transparent;
    border: 1px solid var(--wdtBorderColor);
    }

.tbl-view-reservations {width: max-content;border-collapse: collapse;margin-bottom: 0;}

.tbl-view-reservations th,
.tbl-view-reservations td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0; }

.tbl-view-reservations th { font-weight: 600; }
.page-numbers{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Welcome Message */
.dt-sc-view-reservations > p:first-child { font-size: var(--wdtFontSize_Base,16px); 
  margin-bottom: 15px; color: var(--wdtBodyTxtColor); }

.pagination-info { color: var(--wdtBodyTxtColor); font-size: var(--wdtFontSize_Ext,14px); margin-top: 10px; }
.dt-sc-view-reservations .dt-sc-title h3 { margin-bottom: 20px; padding-bottom: 10px; display: inline-block; }
/* Responsive Styles for View Reservations Table */

/* Tablet Styles */
@media screen and (max-width: 1024px) {
    .view-reservations-filters { flex-wrap: wrap; gap: 15px; }
    
    .view-reservations-filters > div { flex: 1 1 calc(50% - 15px); min-width: 200px; }
    
    .filter-date-range { flex: 1 1 100%; flex-direction: row; justify-content: flex-start; }
    
    .reset-filters-btn { flex: 0 0 auto; }
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .dt-sc-view-reservations { padding: 10px; }
    .view-reservations-filters { flex-direction: column; }
    .view-reservations-filters > div { flex: 1 1 100%; }
    
    .filter-date-range { flex-direction: column; }
    
    .filter-date-range span { display: none; }
    
    .filter-date-range input { width: 100%; }
    
    /* Convert table to card layout on mobile */
    /* .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } */
    
    .tbl-view-reservations { min-width: 600px; }
    
    /* Alternative: Card layout for better mobile experience */

    
    /* .table-footer { flex-direction: column; gap: 15px; align-items: center; } */
    
    .pagination-controls { order: 1; }
    
    .pagination-info { order: 2; text-align: center; }
    
    .items-per-page { order: 3; }
    
    .page-numbers { flex-wrap: wrap; justify-content: center; }
    
    /* .page-number { padding: 6px 10px; font-size: 12px; } */
}

/* Small Mobile Styles */
/* @media screen and (max-width: 380px) {
    .pagination-controls { flex-wrap: wrap; justify-content: center; gap: 10px; }
    
    .pagination-btn { padding: 6px 12px; }
    
    .page-numbers { order: 1; width: 100%; justify-content: center; }
    
    #prev-page { order: 2; }
    
    #next-page { order: 3; }
    
    .filter-search input,
    .filter-select,
    .date-input { font-size: 14px; padding: 8px 10px; }
} */

/* Landscape orientation for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .view-reservations-filters { flex-direction: row; flex-wrap: wrap; }
    
    .view-reservations-filters > div { flex: 1 1 auto; }
    
    .filter-date-range { flex-direction: row; }
    
    .filter-date-range span { display: inline; }
}
@media screen and (max-width: 767px){
    .view-reservations-filters{
        grid-template-columns: repeat(1 , 1fr);
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .sortable,
    .pagination-btn,
    .page-number, .reset-filters-btn, .filter-select { min-height: 44px; }
    
    .sortable { padding: 12px 20px 12px 12px; }
}