/* ============================================
   AP Couriers Contractor Enrollment - Design System
   Tokens mirror the AP Couriers operations portal so the two sites read as one brand.
   ============================================ */

/* --- CSS Custom Properties (Light Mode) --- */
:root {
    --primary: #2B5EA7;
    --primary-dark: #1E4A85;
    --primary-light: #3A7BD5;
    --primary-hover: #2451A0;
    --secondary: #8A9BB5;
    --secondary-light: #B0BED0;
    --accent: #C0C8D4;

    --bg-body: #f5f7fa;
    --bg-surface: #ffffff;
    --bg-navbar: #2B5EA7;
    --bg-footer: #1E4A85;
    --bg-muted: #e9ecf1;
    --bg-input: #ffffff;

    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-on-primary: #ffffff;
    --text-muted: #6b7280;
    --text-link: #2B5EA7;
    --text-link-hover: #1E4A85;

    --border-color: #d1d5db;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;

    --tabulator-header-bg: #2B5EA7;
    --tabulator-header-text: #ffffff;
    --tabulator-row-bg: #ffffff;
    --tabulator-row-alt-bg: #f8fafc;
    --tabulator-row-text: #1a1a2e;
    --tabulator-active-page-bg: #ffffff;
    --tabulator-active-page-text: #2B5EA7;
    --tabulator-border: #e2e8f0;

    --modal-header-bg: #2B5EA7;
    --modal-body-bg: #ffffff;
    --modal-body-text: #1a1a2e;
    --toast-header-bg: #2B5EA7;

    --btn-success-bg: #16a34a;
    --btn-success-hover: #15803d;
    --btn-danger-bg: #dc2626;
    --btn-danger-hover: #b91c1c;

    /* Legacy names still used below, mapped onto the tokens. */
    --header-text-color-light: var(--text-primary);
    --header-bg-color-light: var(--bg-muted);
    --header-text-color-dark: var(--text-primary);
    --header-bg-color-dark: var(--bg-muted);
}

/* --- Dark Mode Overrides --- */
body.dark-mode {
    --bg-body: #0f1117;
    --bg-surface: #1a1d28;
    --bg-navbar: #141722;
    --bg-footer: #141722;
    --bg-muted: #252836;
    --bg-input: #252836;

    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-on-primary: #e2e8f0;
    --text-muted: #718096;
    --text-link: #6ea8fe;
    --text-link-hover: #9ec5fe;

    --border-color: #2d3748;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    --tabulator-header-bg: #1a1d28;
    --tabulator-header-text: #e2e8f0;
    --tabulator-row-bg: #1a1d28;
    --tabulator-row-alt-bg: #1f2233;
    --tabulator-row-text: #e2e8f0;
    --tabulator-active-page-bg: #2B5EA7;
    --tabulator-active-page-text: #ffffff;
    --tabulator-border: #2d3748;

    --modal-header-bg: #1a1d28;
    --modal-body-bg: #1a1d28;
    --modal-body-text: #e2e8f0;
    --toast-header-bg: #1a1d28;
}

/* 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 var(--primary-light);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    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: var(--bg-body);
    color: var(--text-primary);
}

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

    body.dark-mode footer {
        background-color: var(--bg-footer);
        color: #ffffff;
    }

/* Navbar styles */
nav.navbar-custom {
    background-color: var(--bg-navbar) !important;
}

/* Dropdown menu dark mode styling */
body.dark-mode .dropdown-menu {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

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

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--bg-muted);
    color: var(--text-primary);
}

body.dark-mode .dropdown-divider {
    border-color: var(--border-color);
}

.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: var(--text-link);
    text-decoration: none;
}

    .customer-link:hover {
        color: var(--text-link-hover);
        text-decoration: underline;
    }

/* Adjust customer link visibility in dark mode */
body.dark-mode .customer-link {
    color: var(--text-link);
}

    body.dark-mode .customer-link:hover {
        color: var(--text-link-hover);
    }

/* 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: var(--text-link);
    text-decoration: none;
}

    .configuration-section a:hover {
        color: var(--text-link-hover);
        text-decoration: underline;
    }

/* Dark Mode Link Colors */
body.dark-mode .configuration-section a {
    color: var(--text-link);
}

    body.dark-mode .configuration-section a:hover {
        color: var(--text-link-hover);
        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: var(--text-link);
    text-decoration: none;
}

body.dark-mode .lineup-email-link {
    color: var(--text-link);
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

.route-link {
    color: var(--text-link);
    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: var(--text-link);
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

.link-button-blue {
    color: var(--text-link);
    text-decoration: none;
    &:hover

{
    text-decoration: underline;
}

}

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

{
    background-color: var(--modal-header-bg);
    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: var(--toast-header-bg);
    color: white;
    text-align: center;
    .toast-title

{
    margin: 0 auto;
}

}

.pricing-section {
    background-color: var(--primary);
    color: white;
    display: none;
}

.tabulator-col, .tabulator-header-contents, .tabulator-footer, .tabulator-page, .tabulator-paginator {
    background-color: var(--tabulator-header-bg) !important;
    color: var(--tabulator-header-text) !important;
}

    .tabulator-page.active {
        background-color: var(--tabulator-active-page-bg) !important;
        color: var(--tabulator-active-page-text) !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: var(--primary);
    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;
}

.form-control-plaintext {
    color: white !important;
}

.brand-logo {
    margin-top:3%;
}

/* Breadcrumb current-page item: follow the page text color so it stays
   readable in both light and dark mode (Bootstrap defaults it to a muted
   color that disappears against the dark-mode background). */
.breadcrumb-item.active {
    color: inherit !important;
}

/* Muted helper text (Bootstrap .text-muted) is too dark to read against the
   dark-mode background. Lighten it in dark mode the way Bootstrap's own dark
   theme does. Covers the Potential Sites description and any other muted text. */
body.dark-mode .text-muted {
    color: #adb5bd !important;
}

/* Same problem, different class. Bootstrap's .form-text takes its colour from
   --bs-secondary-color, a dark grey, which is unreadable on the dark-mode
   background. Every hint and helper line under a form control uses it. */
body.dark-mode .form-text {
    color: #adb5bd !important;
}

/* A plain Bootstrap .table keeps its light background in dark mode, so light
   text sitting on it disappears - and .text-muted cells are lightened by the
   rule above, which made them light grey ON WHITE. Give the table the page's
   own colours instead. Scoped to .table-dark-aware so the existing tables that
   were built against the light background are left exactly as they are. */
body.dark-mode .table-dark-aware {
    --bs-table-bg: transparent;
    --bs-table-color: #ffffff;
    --bs-table-striped-bg: rgba(255, 255, 255, .045);
    --bs-table-striped-color: #ffffff;
    --bs-table-hover-bg: rgba(255, 255, 255, .075);
    --bs-table-hover-color: #ffffff;
    --bs-table-border-color: #3a3a3a;
    color: #ffffff;
}

    body.dark-mode .table-dark-aware thead th {
        color: #ffffff;
        border-bottom-color: #4a4a4a;
    }

/* Applications tables - selected rows and the Name-column note icon. */
/* Double-clicking a row opens its detail page; never let the browser
   select cell text on that double-click. */
.tabulator-row {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.tabulator-row.tabulator-selected {
    background-color: #cfe2ff !important;
}
body.dark-mode .tabulator-row.tabulator-selected {
    background-color: #6f8fbe !important;
}
body.dark-mode .tabulator-row.tabulator-selected,
body.dark-mode .tabulator-row.tabulator-selected .tabulator-cell {
    color: #1a1a1a !important;
}

/* Applicant-name link: keep a readable link color on the light table rows
   even in dark mode (the global dark-mode rule turns all links white). */
.app-name-text,
body.dark-mode .app-name-text {
    color: var(--text-link);
}
.app-name-text:hover,
body.dark-mode .app-name-text:hover {
    color: var(--text-link-hover);
}
body.dark-mode .tabulator-row.tabulator-selected .app-name-text {
    color: #1a1a1a;
}

/* Tabulator right-click context menu - dark mode readability. */
body.dark-mode .tabulator-menu {
    background-color: #2b2b2b;
    border: 1px solid #555;
}
body.dark-mode .tabulator-menu .tabulator-menu-item {
    color: #e0e0e0;
}
body.dark-mode .tabulator-menu .tabulator-menu-item:hover,
body.dark-mode .tabulator-menu .tabulator-menu-item.tabulator-menu-item-active {
    background-color: #4a6da3;
    color: #ffffff;
}
body.dark-mode .tabulator-menu .tabulator-menu-separator {
    border-top: 1px solid #555;
}
.note-icon {
    cursor: pointer;
    opacity: 0.4;
    white-space: nowrap;
}
.note-icon.note-icon-has-notes {
    opacity: 1;
}
.note-icon-badge {
    font-size: 0.7em;
    font-weight: bold;
    vertical-align: super;
    margin-left: 1px;
}
.note-entry {
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
}
.note-entry:last-child {
    border-bottom: none;
}

/* Rich-text email editor (Quill) - give the editing surface a usable height. */
.rich-text-editor-surface .ql-editor {
    min-height: 220px;
}

/* Call List lookup editors on the System page. One row per value, aligned to a header, with a
   visible row boundary - thirteen unseparated rows of inputs were unreadable. */
.cl-lookup-head {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .7;
    padding: 0 .25rem .35rem;
    border-bottom: 2px solid rgba(128, 128, 128, .35);
    margin-bottom: .35rem;
}

.cl-lookup-row {
    padding: .35rem .25rem;
    border-bottom: 1px solid rgba(128, 128, 128, .18);
}

    .cl-lookup-row:hover {
        background-color: rgba(128, 128, 128, .08);
    }

/* A retired value stays visible and editable, just visibly stood down. */
.cl-retired input[type="text"],
.cl-retired .form-select {
    opacity: .55;
}

.cl-lookup-new {
    border-bottom: none;
    margin-top: .5rem;
    padding-top: .6rem;
    border-top: 2px solid rgba(128, 128, 128, .35);
}