/* Base Styles */
body {
    font-family: "Inter", sans-serif;
    background-color: #1a1a1a;
    color: #e0e0e0;
    padding: 1rem; /* Equivalent to p-4 */
}
.main-container {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Heading */
.section-heading {
    font-size: 1.5rem; /* Equivalent to text-2xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #f0f0f0; /* Equivalent to text-gray-800, adjusted for theme */
    padding: 1.5rem; /* Equivalent to p-6 */
    border-bottom: 1px solid #444; /* Equivalent to border-b border-gray-200, adjusted */
}

/* Button Container */
.button-group {
    padding: 1.5rem; /* Equivalent to p-6 */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem; /* Equivalent to gap-4 */
}

/* Search Container */
.search-section {
    padding: 1.5rem; /* Equivalent to p-6 */
    border-top: 1px solid #444; /* Equivalent to border-t border-gray-200, adjusted */
}
.search-label {
    display: block;
    color: #e0e0e0; /* Equivalent to text-gray-700, adjusted */
    font-size: 0.875rem; /* Equivalent to text-sm */
    font-weight: 700; /* Equivalent to font-bold */
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
}
.search-input {
    padding: 0.5rem 0.75rem; /* Equivalent to py-2 px-3 */
    border: 1px solid #555;
    border-radius: 0.25rem; /* Equivalent to rounded */
    width: 100%;
    max-width: 300px; /* Limit max width on larger screens */
    font-size: 1rem; /* Equivalent to text-base/16px */
    line-height: 1.25; /* Equivalent to leading-tight */
    background-color: #3a3a3a;
    color: #e0e0e0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Equivalent to shadow */
    -webkit-appearance: none; /* Equivalent to appearance-none */
    -moz-appearance: none;
    appearance: none;
}
.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Equivalent to focus:shadow-outline */
}
.search-input::placeholder {
    color: #aaa;
}

/* Table Container */
.table-wrapper {
    overflow-x: auto;
}
.data-table-container {
    min-width: 100%;
}

/* Table Styles */
.sortable-paginated-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Retained from original CSS */
}
.sortable-paginated-table th,
.sortable-paginated-table td {
    border: 1px solid #444;
    padding: 8px;
    text-align: left;
}
.sortable-paginated-table th {
    background-color: #333;
    color: #f0f0f0;
    cursor: pointer;
    position: relative;
}
.sortable-paginated-table th:hover {
    background-color: #444;
}
.sortable-paginated-table th.sorted-asc::after {
    content: ' \25B2';
    font-size: 0.8em;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #90caf9;
}
.sortable-paginated-table th.sorted-desc::after {
    content: ' \25BC';
    font-size: 0.8em;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #90caf9;
}
.sortable-paginated-table tbody td {
    color: #e0e0e0;
    padding: 0.5rem 1rem; /* py-2 px-4 */
}
.pax-name-cell {
    color: #f0f0f0; /* Lighter text for Pax name */
    font-weight: 500; /* font-medium */
    position: relative;
}
.pax-name-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Pagination Styles */
.pagination-section {
    padding: 1.5rem; /* Equivalent to p-6 */
    border-top: 1px solid #444;
    text-align: center;
}
.page-link {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #555;
    text-decoration: none;
    color: #e0e0e0;
    border-radius: 3px;
    background-color: #3a3a3a;
}
.page-link.active {
    background-color: #007bff;
    font-weight: bold;
    color: #ffffff;
    border-color: #007bff;
}
.page-link:hover:not(.active) {
    background-color: #555;
    color: #ffffff;
}

/* Button Styling */
.data-toggle-button {
    padding: 10px 15px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
.data-toggle-button:hover {
    background-color: #0056b3;
}

/* Collapsible Details (Mobile Specific) */
.collapsible-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    padding: 0 8px;
    background-color: #353535; /* bg-gray-50 adjusted for theme */
    border-radius: 0.25rem; /* rounded-md */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1); /* shadow-inner adjusted */
    margin-top: 0.5rem; /* mt-2 */
}
.collapsible-details.expanded {
    max-height: 9999px;
    opacity: 1;
    padding: 8px;
}
.collapsible-details p {
    font-size: 0.875rem; /* text-sm */
    color: #c0c0c0; /* text-gray-700 adjusted */
}
.collapsible-details p span.font-semibold {
    font-weight: 600; /* font-semibold */
    color: #f0f0f0; /* adjusted for theme */
}

/* Toggle Icon (Mobile Specific) */
.toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #4a4a4a;
    color: #90caf9;
    font-weight: bold;
    font-size: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    user-select: none; /* select-none */
    flex-shrink: 0;
}

/* Responsive Adjustments */
@media (max-width: 767px) { /* Equivalent to Tailwind's default mobile */
    .hide-on-mobile-header,
    .hide-on-mobile-cell {
        display: none;
    }
    .collapsible-details-container,
    .toggle-icon-container {
        display: block; /* Show details and icon on mobile */
    }
    body {
        padding: 1rem; /* Responsive padding for mobile */
    }
    .main-container {
        margin: 0.5rem; /* Adjust margin for smaller screens */
    }
    .search-input {
        max-width: none; /* Full width on mobile */
    }
}

@media (min-width: 768px) { /* Equivalent to Tailwind's md breakpoint */
    .hide-on-mobile-header,
    .hide-on-mobile-cell {
        display: table-cell; /* Show on desktop */
    }
    .collapsible-details-container,
    .toggle-icon-container {
        display: none; /* Hide collapsible details and icon on desktop */
    }
    body {
        padding: 2rem; /* Equivalent to sm:p-8 */
    }
}