.tab-content {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Darker drop shadow */
}

.tab-button {
    position: relative;
    overflow: visible;
}

.tab-notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #dc3545;
    color: #ffffff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    z-index: 2;
}

.d-none {
    display: none;
}

a {
    text-decoration: none;
}

#main-image {
    width: 40%; /* Scales the image to 40% of its original size */
}

/* Enable horizontal scrolling for small screens */
.table-responsive-custom {
    overflow-x: auto; /* Add horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
}

/* Default desktop layout with balanced column widths */
#sortableTable th,
#sortableTable td {
    padding: 1rem;
    width: auto; /* Allow columns to expand naturally */
    white-space: nowrap; /* Prevent text wrapping */
}

body {
    background-color: #f2f2f2; /* Light off-white */
}

/* Softer warning palette: use orange instead of harsh yellow */
.bg-warning {
    background-color: #f4a261 !important;
    color: #1f2326 !important;
}

.text-warning {
    color: #c96a10 !important;
}

.btn-warning {
    background-color: #f4a261 !important;
    border-color: #f4a261 !important;
    color: #1f2326 !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e88d42 !important;
    border-color: #e88d42 !important;
    color: #1f2326 !important;
}

.btn-outline-warning {
    color: #c96a10 !important;
    border-color: #c96a10 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #c96a10 !important;
    border-color: #c96a10 !important;
    color: #ffffff !important;
}

/* Colorblind mode - Black and White with improved contrast */
body.colorblind-mode {
    filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -webkit-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -moz-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -ms-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -o-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
}

body.colorblind-mode * {
    filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -webkit-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -moz-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -ms-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -o-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
}

/* Ensure images and other elements get the filter */
body.colorblind-mode img,
body.colorblind-mode video,
body.colorblind-mode canvas,
body.colorblind-mode svg {
    filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -webkit-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -moz-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -ms-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
    -o-filter: grayscale(100%) contrast(1.15) brightness(0.95) !important;
}

/* Specifically improve readability of warning/yellow elements */
/* For text elements, use color override instead of filter to preserve backgrounds */
body.colorblind-mode .text-warning {
    color: #666666 !important; /* Dark gray for readability */
}

/* Remove filter from table cells with warning text to preserve their background */
body.colorblind-mode td.text-warning,
body.colorblind-mode th.text-warning {
    filter: none !important; /* Remove filter to preserve cell background */
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    /* Don't set background-color - let it inherit from table/row styling */
    color: #666666 !important; /* Dark gray text for readability */
}

/* For background and button elements, use filter */
body.colorblind-mode .bg-warning,
body.colorblind-mode .btn-warning,
body.colorblind-mode .badge-warning {
    filter: grayscale(100%) contrast(1.4) brightness(0.7) !important;
    -webkit-filter: grayscale(100%) contrast(1.4) brightness(0.7) !important;
    -moz-filter: grayscale(100%) contrast(1.4) brightness(0.7) !important;
    -ms-filter: grayscale(100%) contrast(1.4) brightness(0.7) !important;
    -o-filter: grayscale(100%) contrast(1.4) brightness(0.7) !important;
}

/* Colorblind mode toggle button */
#colorblindToggle.colorblind-toggle {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 9999 !important;
    padding: 8px 12px !important;
    background-color: #6c757d !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.3s !important;
    margin: 0 !important;
}

#colorblindToggle.colorblind-toggle:hover {
    background-color: #5a6268 !important;
}

#colorblindToggle.colorblind-toggle.active {
    background-color: #28a745 !important;
}

#colorblindToggle.colorblind-toggle.active:hover {
    background-color: #218838 !important;
}

.shadow-container {
    background-color: #f5f5f5; /* Slightly darker off-white for contrast */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Darker drop shadow */
}

.contract-details-container {
    background-color: #f8f9fa; /* Light grey background */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.contract-tables {
    max-height: 300px; /* Adjust max height as needed */
    overflow-y: auto;  /* Enables vertical scrolling */
}

/* Optional: Fix table header while scrolling */
.contract-tables thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

/* Improve desktop space utilization */
@media (min-width: 992px) {
    /* Large screens and desktops */
    #sortableTable th:nth-child(1), /* Customer */
    #sortableTable td:nth-child(1) {
        width: 20%; /* Allocate more space for Customer */
    }

    #sortableTable th:nth-child(2), /* Vehicle */
    #sortableTable td:nth-child(2) {
        width: 20%;
    }

    #sortableTable th:nth-child(3), /* Start Date */
    #sortableTable td:nth-child(3),
    #sortableTable th:nth-child(4), /* End Date */
    #sortableTable td:nth-child(4) {
        width: 15%; /* Compact date columns */
    }

    #sortableTable th:nth-child(5), /* Status */
    #sortableTable td:nth-child(5) {
        width: 10%; /* Small for Status */
    }

    #sortableTable th:nth-child(6), /* Balance Owed */
    #sortableTable td:nth-child(6) {
        width: 20%; /* Highlight financial data */
    }
}

@media (max-width: 768px) {
    #main-image {
        width: 60%; /* Scale the image for small screens */
        margin: 0 auto; /* Center it */
    }

    .btn-group .btn {
        font-size: 14px; /* Smaller buttons on small screens */
        padding: 0.3rem;
    }

    #sortableTable th:first-child,
    #sortableTable td:first-child {
        max-width: 120px; /* Set your desired max width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflow text */
        text-overflow: ellipsis; /* Add ellipsis for truncated text */
    }

    /* Adjust table font size and spacing */
    #sortableTable {
        font-size: 12px; /* Reduce font size for small screens */
    }

    #sortableTable th,
    #sortableTable td {
        padding: 4px; /* Adjust padding for better fit */
    }

    /* Hide less critical columns on small screens */
    #sortableTable th:nth-child(5), /* Vehicle */
    #sortableTable td:nth-child(5),
    #sortableTable th:nth-child(3), /* Start Date */
    #sortableTable td:nth-child(3),
    #sortableTable th:nth-child(4), /* End Date */
    #sortableTable td:nth-child(4) {
        display: none;
    }

    #sortableTable th:first-child,
    #sortableTable td:first-child {
        max-width: 120px; /* Set your desired max width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflow text */
        text-overflow: ellipsis; /* Add ellipsis for truncated text */
    }

    /* Adjust table font size and spacing */
    #customersTable {
        font-size: 12px; /* Reduce font size for small screens */
    }

    #customersTable th,
    #customersTable td {
        padding: 4px; /* Adjust padding for better fit */
    }

    /* Hide less critical columns on small screens */
    #customersTable th:nth-child(2), /* Email */
    #customersTable td:nth-child(2),
    #customersTable th:nth-child(4), /* End Date */
    #customersTable td:nth-child(4) {
        display: none;
    }

    /* Adjust table font size and spacing */
    #carsTable {
        font-size: 12px; /* Reduce font size for small screens */
    }

    #carsTable th,
    #carsTable td {
        padding: 4px; /* Adjust padding for better fit */
    }

    /* Hide less critical columns on small screens */
    #carsTable th:nth-child(3), /* Plate */
    #carsTable td:nth-child(3),
    #carsTable th:nth-child(4), /* State */
    #carsTable td:nth-child(4) {
        display: none;
    }

    #customer-details-table th:nth-child(2),
    #customer-details-table th:nth-child(3),
    #customer-details-table td:nth-child(2),
    #customer-details-table td:nth-child(3) {
        display: none;
    }

    .toll-table th:nth-child(1),
    .toll-table td:nth-child(1),
    .toll-table th:nth-child(4),
    .toll-table td:nth-child(4) {
        display: none;
    }

}

/* Alternative styling for improved visibility */
@media (max-width: 480px) {
    #sortableTable, #customersTable, #carsTable th,
    #sortableTable, #customersTable, #carsTable td {
        font-size: 12px; /* Further reduce font size for very small screens */
    }
}