/* Table with transparent background (0.75) showing image behind */
.position-relative {
    position: relative;
}

.table-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Place behind the table */
    opacity: 0.7; /* Set the image opacity to 0.7 */
    pointer-events: none; /* Allow clicks to pass through */
    background-color: white;
}
/* Base card styling - add border-top for all cards */
.card {
    position: relative;
    z-index: 1; /* Place above the background image */
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */
    border: none; /* Optional: removes card border */
    z-index: 50;
}

/* Special exception for table cards - remove the border-top */
#live-table-container .card,
.app-content-section .position-relative .card {
    border-top: none;
    border-top-left-radius: 0;
}

/* Remove any shadow between tabs and table */
.card-body {
    box-shadow: none;
    position: relative;
    background-color: rgba(132, 237, 125, 0.85); /* --primary-color with 0.3 opacity */
    border: 4px solid var(--secondary-color);
    border-top: none;
}


/* Make sure the table itself is also transparent */
table.table {
    background-color: transparent;
}

/* Optional: Style table rows for better readability */
table.table tr td, table.table tr th {
    background-color: transparent; /* Ensure cells are transparent too */
}

/* Remove striped rows style */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
}

/* Additional rule to override Bootstrap's hover effect if needed */
.table-hover > tbody > tr:hover {
    background-color: transparent !important;
}

/* Make all rows transparent */
table.table tbody tr {
    background-color: transparent !important;
}

/* Keep table header in the original primary color */
table.table thead tr th {
    background-color: var(--primary-color) !important;
    color: white; /* Assuming you want white text on the primary color background */
}

/* Increase table header height and ensure it appears solid */
table.table thead {
    position: relative;
    z-index: 50; /* Higher than the navigation z-index */
}

table.table thead tr {
    height: 60px; /* Increased height */
}

table.table thead tr th {
    padding-top: 20px; /* Additional padding to increase height */
    padding-bottom: 20px; /* Additional padding to increase height */
}

/* Remove any striping effects */
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
}

.table-hover > tbody > tr:hover > * {
   background-color: transparent !important;
}
.table {
    --bs-table-hover-color: inherit !important;
    --bs-table-hover-bg: transparent !important;
}


/* Table background image styling */
.table-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-image {
    width: 65%; /* Reduced size to 75% (25% smaller) */
    height: 65%; /* Reduced size to 75% (25% smaller) */
    object-fit: contain;
    transform: scaleX(-1); /* Mirrors the image horizontally */
}

table.table tbody tr {
    border: none !important; /* Remove borders from table rows */
}