/* ---------- Responsive Table Wrapper ---------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* Make all tables responsive by default */
table {
    display: table;
    width: 100%;
    min-width: max-content;
}

/* Wrap tables in a scrollable container via JS or use this wrapper */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ---------- Base Table (General Styling) ---------- */
.base-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    color: #5E5E5E;
    font-family: 'RobotoSlab-Regular', serif;
    display: table;
}

/* Borders and padding */
.base-table th, .base-table td {
    border: 1px solid #212121;
    padding: 8px;
    text-align: left;
}

/* Header Background (Prevents Wrapping) */
.base-table th {
    background-color: #f2f2f2;
    white-space: nowrap; /* Prevents text wrapping */
}

/* ---------- Collapsible Table (Optional) ---------- */
.collapsible-table th {
    cursor: pointer; /* Indicates interactivity */
}

/* Default arrow (open state) placed inline to the left */
.collapsible-table th::before {
    content: "\25BC"; /* Downward triangle (▼) */
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px; /* Space between arrow and text */
    font-size: 12px;
    color: #5E5E5E;
}

/* When table is collapsed, change arrow to right arrow */
.collapsible-table.collapsed th::before {
    content: "\25B6"; /* Rightward triangle (▶) */
}

/* Hide rows when collapsed */
.collapsible-table .collapsedRow {
    display: none !important;
}

/* ---------- Dark Mode ---------- */
[data-bs-theme="dark"] .base-table {
    color: #b0b0b0;
}

[data-bs-theme="dark"] .base-table th,
[data-bs-theme="dark"] .base-table td {
    border-color: #404040;
}

[data-bs-theme="dark"] .base-table th {
    background-color: #2d2d2d;
    color: #f0f0f0;
}

[data-bs-theme="dark"] .collapsible-table th::before {
    color: #b0b0b0;
}

/* Generic tables in dark mode */
[data-bs-theme="dark"] table {
    color: #b0b0b0;
}

[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] table td {
    border-color: #404040;
}

[data-bs-theme="dark"] table th {
    background-color: #2d2d2d;
    color: #f0f0f0;
}