/* CSS Variables for Theming */
:root {
    --header-text-color-light: #000000;
    --header-bg-color-light: #dddddd;
    --header-text-color-dark: #000000;
    --header-bg-color-dark: #dddddd;
    /* New variables for borders */
    --border-color-light: #000000; /* Black for Light Mode */
    --border-color-dark: #ffffff; /* White for Dark Mode */
}

/* Set border-color based on theme */
body.dark-mode {
    --border-color: var(--border-color-dark);
}

body:not(.dark-mode) {
    --border-color: var(--border-color-light);
}

/* Base font size */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Focus styles for accessibility */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Ensure full height and flex layout */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    margin-bottom: 60px; /* Matches the footer's bottom margin */
}

main {
    flex: 1;
}

/* Dark mode styles for the page */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

    body.dark-mode a {
        color: #ffffff;
    }

    body.dark-mode footer {
        background-color: #333333;
        color: #ffffff;
    }

/* Navbar styles */
nav.navbar-custom {
    background-color: #600507 !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    background-position: center;
}

/* Highlight for new rows added by the "Copy Data to Tomorrow" button */
.new-row {
    background-color: #fffbcc; /* Light yellow for new rows */
    transition: background-color 0.3s ease; /* Smooth transition when removing the highlight */
}

/* Styles for tables */
.table-container {
    max-height: 900px; /* Adjust the height as needed */
    overflow-y: auto; /* Enables vertical scrollbar */
    overflow-x: auto; /* Enables horizontal scrollbar */
    border: 1px solid #dee2e6; /* Adds a border around the table */
    position: relative; /* Necessary for sticky positioning */
}

    /* Fixed Table Layout */
    .table-container table {
        width: 100%;
    }

    /* Sticky Table Header */
    .table-container thead th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa; /* Matches Bootstrap's table header color */
        z-index: 2; /* Ensures headers stay above table body */
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); /* Adds shadow for better visibility */
        vertical-align: bottom;
        text-align: center;
    }

    /* Light mode */
    .table-container thead th {
        color: var(--header-text-color-light);
        background-color: var(--header-bg-color-light);
    }

    /* Light mode table background color */
    .table-container table {
        background-color: #fdfdfd; /* Lightened color */
    }

/* Dark mode */
body.dark-mode .table-container table thead th {
    color: var(--header-text-color-dark);
    background-color: var(--header-bg-color-dark);
}

/* Example widths */
th, td {
    width: 150px; /* Ensures columns don't get too narrow */
    word-wrap: break-word; /* Ensures long text wraps within cells */
}

/* Narrow checkbox column */
.checkbox-col {
    width: 40px;
    text-align: center;
}

/* Table header input/select styling */
.table-container thead th input,
.table-container thead th select {
    margin-top: 5px;
    width: 90%; /* Adjusted for better fit */
}

/* Custom Checkboxes */
input[type="checkbox"] {
    appearance: none; /* Reset default OS styling */
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid black; /* Black border */
    background-color: white; /* White interior */
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

    input[type="checkbox"]:checked {
        background-color: white; /* Keep it white when checked */
    }

        input[type="checkbox"]:checked::after {
            content: "\2713"; /* The checkmark glyph */
            color: black; /* Black checkmark */
            position: absolute;
            left: 1px; /* Adjust to center properly */
            top: -3px;
            font-size: 18px; /* Checkmark size */
            font-weight: bold;
            line-height: 18px; /* Helps center the glyph */
        }

/* Light blue background for editing rows */
.editing {
    background-color: #e6f7ff;
    color: #000; /* Ensure text remains readable */
}

/* Responsive Modal Table 
#routesTable {
    margin-top: 15px;
}*/

@media (max-width: 575.98px) {
    .modal-lg {
        max-width: 90%; /* Ensures the modal doesn't exceed 90% of the viewport on small devices */
    }
}

/* Adjust widths for columns */
.account-no-col {
    width: 15%;
}

.customer-name-col {
    width: 20%;
}

.terms-col, .invoice-no-source-col, .upload-destination-col {
    width: 15%;
}

.active-col {
    width: 8%;
    text-align: center;
}

/* Override-specific styles */
.override-fields {
    display: none; /* Hidden by default */
}

    .override-fields.active {
        display: flex;
        gap: 10px;
    }

/* Default styles for the Dark Mode button */
.navbar-custom .navbar-color-btn {
    background-color: transparent; /* Matches navbar background */
    color: white; /* Default to white for consistency */
    border: none; /* Remove default button border */
}

/* Dark mode styles */
body.dark-mode .navbar-custom .navbar-color-btn {
    color: white; /* Ensure text is white in dark mode */
}

/* Remove banded row coloring */
#customersTable tbody tr {
    background-color: transparent;
}

/* Style customer links */
.customer-link {
    color: #007bff; /* Bootstrap's default link color */
    text-decoration: none;
}

    .customer-link:hover {
        color: #0056b3; /* Darker shade for hover */
        text-decoration: underline;
    }

/* Adjust customer link visibility in dark mode */
body.dark-mode .customer-link {
    color: #66b3ff; /* Lighter blue for dark mode */
}

    body.dark-mode .customer-link:hover {
        color: #3399ff; /* Slightly darker blue for hover in dark mode */
    }

/* Align filter inputs with headers for Customers table */
#customersTable thead th {
    padding-bottom: 10px; /* Add some spacing between header text and filter inputs */
}

    #customersTable thead th input,
    #customersTable thead th select {
        margin-top: -10px; /* Add spacing above the filter inputs */
        width: 90%; /* Adjust width for better alignment */
    }

/* Dual Listbox Styling */
.dual-listbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dual-listbox .available-container,
    .dual-listbox .selected-container {
        width: 45%;
    }

    .dual-listbox select {
        width: 100%;
        height: 200px;
    }

    .dual-listbox .buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .dual-listbox .buttons button {
            width: 60px;
        }

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .dual-listbox {
        flex-direction: column;
        align-items: stretch;
    }

        .dual-listbox .available-container,
        .dual-listbox .selected-container {
            width: 100%;
        }

        .dual-listbox .buttons {
            flex-direction: row;
            justify-content: center;
            gap: 10px;
            margin: 10px 0;
        }
}

/* Search Input Styling (if implemented) */
.dual-listbox .available-container input[type="text"] {
    margin-bottom: 10px;
}

/* Center checkboxes and set column width for the "Active" column */
.active-col {
    width: 5%; /* Adjust this percentage as needed to match the desired width */
    text-align: center; /* Horizontally center the checkbox */
    vertical-align: middle; /* Vertically center the checkbox within the cell */
}

table {
    margin-bottom: unset !important;
}

/* Configuration Sections */
.configuration-section {
    border: 2px solid var(--border-color) !important;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px; /* Space between main sections */
    background-color: transparent; /* Optional: Adjust if you want a background color */
}

/* Subcategories within Configuration Sections */
.subcategory {
    border: 1px solid var(--border-color) !important;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px; /* Space between subcategories */
    background-color: transparent; /* Optional: Adjust if you want a background color */
}

/* Link Colors in Configuration Sections */
.configuration-section a {
    color: #007bff; /* Bootstrap's default link color */
    text-decoration: none;
}

    .configuration-section a:hover {
        color: #0056b3; /* Darker shade for hover */
        text-decoration: underline;
    }

/* Dark Mode Link Colors */
body.dark-mode .configuration-section a {
    color: #66b3ff; /* Lighter blue for dark mode */
}

    body.dark-mode .configuration-section a:hover {
        color: #3399ff; /* Slightly darker blue for hover in dark mode */
        text-decoration: underline;
    }

/* Specific styling for Add buttons to have white text */
.configuration-section a.btn {
    color: white !important;
}

/* Optional: Background Colors for Configuration Sections */
.configuration-section {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    transition: background-color 0.3s ease;
}

body.dark-mode .configuration-section {
    background-color: rgba(255, 255, 255, 0.05); /* Even more transparent for dark mode */
}

/* Optional: Background Colors for Subcategories */
.subcategory {
    background-color: rgba(0, 123, 255, 0.05); /* Light blue tint */
    transition: background-color 0.3s ease;
}

body.dark-mode .subcategory {
    background-color: rgba(0, 123, 255, 0.1); /* Slightly more visible in dark mode */
}

.user-active {
}

.user-inactive {
}

body.dark-mode .modal-body label {
    color: black;
}

body.dark-mode .eod-email-link {
    color: #007bff;
    text-decoration: none;
}

body.dark-mode .lineup-email-link {
    color: #007bff;
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

.route-link {
    color: #007bff;
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

body.dark-mode a {
    color: white;
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

body.dark-mode .link-button {
    color: white;
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

body.dark-mode .link-button-blue {
    color: #007bff;
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

.link-button-blue {
    color: #007bff;
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

body.dark-mode .modal {
    color: black;
    .modal-header

{
    background-color: #600507;
    color: white;
    text-align: center;
    .modal-title

{
    margin: 0 auto;
}

}
}


body.dark-mode .toast {
    color: black;
    background-color: lightgrey;
}


body.dark-mode .toast-header {
    background-color: #600507;
    color: white;
    text-align: center;
    .toast-title

{
    margin: 0 auto;
}

}

.pricing-section {
    background-color: #600507;
    color: white;
    display: none;
}

.tabulator-col, .tabulator-header-contents, .tabulator-footer, .tabulator-page, .tabulator-paginator {
    background-color: #600507 !important;
    color: white !important;
}

    .tabulator-page.active {
        background-color: white !important;
        color: black !important;
    }

.tabulator-cell input[type="number"]::-webkit-inner-spin-button,
.tabulator-cell input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tabulator-cell input[type="number"] {
    -moz-appearance: textfield; /* For Firefox */

    appearance: textfield;
}

/* Use the .pricing-section class from your site.css for background and text colors.
               Since .pricing-section has display: none by default, override it here for the accordion. */
.accordion-body.pricing-section, .accordion-body.emails-section, .accordion-body.region-child-section {
    background-color: #600507;
    color: white;
    display: block !important;
}

/* Center the accordion header text */
.accordion-header .accordion-button {
    justify-content: center !important;
}

.region-accordion-button {
    justify-content: center !important;
}

    .region-accordion-button::after {
        display: none;
    }

.accordion-header .accordion-button::after {
    display: none;
}

.mt-2em {
    margin-top: 2em !important;
}