/* General Styles */
* {
    box-sizing: border-box; /* Ensures consistent sizing for all elements */
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

form {
    max-width: 900px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* Logo Styles */
#logo_img {
    display: block;
    margin: 0 auto 20px;
    max-width: 150px;
    padding: 10px;
}

/* Section Styles */
.part-1, .part-2 {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #D1CCBC;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Field Group Styles */
.field-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Increased gap to avoid overlap */
}

.field-group > div {
    flex: 1 1 45%; /* Allows flexibility */
    min-width: 250px; /* Adjusted for smaller screens */
}

label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px; /* Added more spacing for better readability */
}

input[type="select"],
input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
select {
    width: 100%; /* Full width */
    height: 40px; /* Consistent height for inputs */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc; /* Border color */
    border-radius: 5px; /* Rounded corners */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inner shadow */
    margin-bottom: 10px; /* Space below inputs */
    background-color: #f9f9f9; /* Background color */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition */
}

select {
    padding: 10px 10px; /* Extra padding for select dropdown */
}

select:hover {
    border-color: #000000; /* Highlight border color when hovered */
}

select:focus {
    outline: none; /* Removes default focus outline */
    border-color: #000000; /* Focused border color */
}

select.select--locked {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

input:focus,
select:focus {
    border-color: #000000;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* Common label styling for price-related fields */
.price-label,
.efprice-label,
.gfprice-label,
.tripTotalPrice-label,
.fuelSurcharge-label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
    color: #333; /* Adjust the color if needed */
}

/* Common paragraph styling for price-related fields */
.price,
.efprice,
.gfprice,
.tripTotalPrice,
.fuelSurcharge {
    font-size: 16px;
    font-weight: bold;
    color: #141414;
    margin-bottom: 8px;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey background */
    border-top: 16px solid #3498db; /* Blue spinner color */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Ensure it sits on top of other elements */
}

/* Spinner Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Button Styles */
button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff; /* White text */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
    background-color: #00aa0e; /* Default background color */
}

button:hover {
    transform: scale(1.1); /* Slight growth on hover */
    background-color: #01880c; /* Darker shade on hover */
}

button:hover {
    transform: translateY(-2px);
}

/* logout button */
button.logout {
    background-color: #cfc08f; /* Blue */
}

/* refresh buttom button */
button.refresh {
    background-color: #cfc08f; /* Blue */
    position: fixed;
    top: 0;
    left: 0;
}

/* Remove trip button */
button.remove-trip {
    padding: 10px 20px 10px;
    background-color: #fc0000; /* Blue */
}

/* Registration Button */
button.register-btn {
    background-color: #2196F3; /* Blue */
}

button.register-btn:hover {
    background-color: #1976D2;
}

/* Login Button */
button.login-btn {
    background-color: #FF9800; /* Orange */
}

button.login-btn:hover {
    background-color: #F57C00;
}

/* Trip Group Styles */
.trip-group {
    display: flex;
    flex-wrap: wrap; /* Ensures fields wrap on smaller screens */
    gap: 15px; /* Adds spacing between fields */
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #D1CCBC;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.trip-group label {
    font-size: 13px;
    font-weight: normal;
}

.trip-group input,
.trip-group select {
    font-size: 14px;
    margin-bottom: 5px;
}

/* Grand Total Styles */
.tripGrandTotal {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Loading Spinner Styles */
#loadingSpinner {
    text-align: center;
}

#loadingSpinner img {
    display: inline-block;
}

#loadingSpinner p {
    margin-top: 10px;
    font-size: 14px;
}

/* Notification Container */
.notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    z-index: 1000;
}

.notification {
    background-color: #f44336; /* Red for errors */
    color: white;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: fadein 0.5s;
}

.notification.success {
    background-color: #4CAF50; /* Green for success */
}

.notification.error {
    background-color: #f44336; /* Red for errors */
}

/* Ensures the overall .select2-selection has a minimum height */
.select2-container .select2-selection--single {
    height: 40px !important; /* matches your existing input height */
    min-height: 40px !important;
    border-radius: 5px !important; /* optional if you want the same rounding */
    padding: 5px 10px !important; /* optional if you'd like extra padding */
    display: flex !important; /* so we can center the text properly */
    align-items: center !important; /* vertical centering */
    margin-top: 0 !important; /* space above each label */
    margin-bottom: 8px !important; /* space between label and input */
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Ensures the text inside is vertically centered and spaced correctly */
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding-left: 0 !important; /* remove extra offset if needed */
}

/* The dropdown arrow on the right – tweak if it looks off */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important; /* adjust the arrow spacing if you like */
    display: flex !important;
    align-items: center !important;
}

/*
 Optionally, make the dropdown match your input width exactly
 (by default, Select2 tries to auto-size).
*/
.select2-container {
    width: 100% !important;
    max-width: 100% !important;
}


@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success Message Styling */
#success-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
    z-index: 1000;
    display: none; /* Initially hidden */
}

#success-message h2 {
    color: #141414;
    margin-bottom: 10px;
}

#success-message p {
    color: #333;
    font-size: 16px;
}

#success-message button {
    padding: 10px 20px;
    background-color: #cfc08f;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#success-message button:hover {
    transform: scale(1.05);
    background-color: #bcb8a6;
}

/* Overlay Background to Dim the Rest of the Page */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none; /* Initially hidden */
}


/* Responsive Styles */
@media (max-width: 768px) {
    form {
        padding: 15px; /* Adjusted padding for smaller screens */
    }

    .field-group > div {
        flex: 1 1 100%; /* Full width on smaller screens */
        margin-bottom: 15px; /* Adds spacing between fields */
    }

    .trip-group {
        flex-direction: column; /* Ensures fields stack vertically */
    }
}

:root {
    /* Brand palette */
    --brand-primary: #41393D; /* slate‑700 */
    --brand-accent: #cfc08f; /* existing accent */
    --brand-accent-dark: #bcb08a;
}

/* ===== Page header ===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: var(--brand-primary);
    color: #fff;
    padding: 0.75rem 1.25rem;
    position: sticky; /* stays visible when scrolling */
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.page-header .logo_img {
    max-width: 80px;
    height: auto;
    margin: 0; /* override old margin‑bottom */
}

.page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .03em;
    flex: 1; /* pushes actions to the right */
    text-align: center;
    color: white;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ===== Pricing-review modal ===== */
.modal-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center;
    z-index:2000;
}
.modal{
    width:min(650px,90%);
    max-height:80vh; overflow:auto;
    background:#fff; border-radius:12px;
    padding:1.5rem 2rem;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.modal h2{margin-top:0}
.modal table{width:100%; border-collapse:collapse; margin:1rem 0}
.modal th,.modal td{padding:.5rem .75rem; text-align:left}
.modal th{background:#eee}
.modal tfoot td{font-weight:700; border-top:2px solid #ccc}
.modal .actions{display:flex; justify-content:flex-end; gap:1rem; margin-top:1rem}
.modal button{background:var(--brand-accent);}
.modal button:hover{background:var(--brand-accent-dark);}


/* Slightly soften global buttons & reuse brand accent */
button {
    background: var(--brand-accent);
}

button:hover {
    background: var(--brand-accent-dark);
}

/* Refresh button no longer needs absolute positioning */
button.refresh {
    position: static;
}

@media (max-width: 600px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title {
        text-align: left;
        font-size: 1rem;
    }

    .page-actions {
        justify-content: flex-end;
    }
}

.field-group > div,
.trip-group > div {        /* trip-group is also flex */
    min-width: 0;         /* override the “content-based” minimum */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;   /* prevent wrapping */
}

.select2-container,
.select2-container .select2-selection--single {
    max-width: 100%;
}

.field-pair > .editable-field,
.field-pair > .original-field {
    min-width: 0;         /* override the default ‘auto’ */
}

/* Make the long Select2 label truncate cleanly */
.select2-container--default .select2-selection--single .select2-selection__rendered{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ── Quotes dashboard overrides ─────────────────────────────── */

/* DataTable headings in brand colours */
#quotesTable thead th {
    background: #cfc08f;
    color: #000000;
}

/* Hover and zebra stripes */
#quotesTable tbody tr:nth-child(even) { background: #f7f7f7; }
#quotesTable tbody tr:hover          { background: #eee; }

/* Converted rows keep the greyed-out look already set in markup */
.converted { opacity: .55; text-decoration: line-through; }
.closed    { opacity:.55; color:#b02a37;}

    /* Make the table scroll on narrow phones */
.dataTables_wrapper { overflow-x: auto; }

/* Brand the export buttons */
.dt-button {
    background: var(--brand-accent);
    border: none;
    color: #fff;
    padding: .35rem .75rem;
}
.dt-button:hover,
.dt-button:active {
    background: var(--brand-accent-dark);
}

/* Pagination buttons */
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* Override Bootstrap’s default outline button so “👁 Review” matches accent */
.btn-outline-primary.review {
    --bs-btn-color: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
}
.btn-outline-primary.review:hover,
.btn-outline-primary.review:focus {
    color: #fff;
    background: var(--brand-accent);
    border-color: var(--brand-accent-dark);
}

.modal-header {
    background: var(--brand-primary);
    color: #fff;
}         /* red-ish */

.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-accent) #eee;
}
.custom-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--brand-accent); border-radius: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: #eee; border-radius: 8px; }

/* nicer focus ring on buttons inside the modal */
.modal button:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ================================
   DASHBOARD-ONLY LAYER (namespaced)
   Won't affect other pages because it's under .dashboard
   ================================ */
.dashboard .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
}

.dashboard .page-title {
    font-size: 22px;
    margin: 6px 0 18px 0;
}

.dashboard .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.dashboard .logo { font-weight: 700; }
.dashboard .header-actions { display: flex; gap: 8px; }

/* Cards */
.dashboard .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.dashboard .card {
    border: 1px solid var(--border, #e5e7eb);
    background: #fff;
    border-radius: 14px;
    padding: 16px;
}
.dashboard .card-title { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; }
.dashboard .card-subtitle { margin: 0 0 12px 0; color: var(--muted, #6b7280); }
.dashboard .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons (classed) — leaves your global element <button> rules intact */
.dashboard .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 14px;
    font: 500 14px/1 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    cursor: pointer;
    background: #f7f7f8;
    color: #111;
    transition: background .15s, box-shadow .15s, border-color .15s, transform .05s;
    text-decoration: none; /* supports <a class="btn"> */
}
.dashboard .btn:hover { background: #efeff0; }
.dashboard .btn:active { transform: translateY(1px); }
.dashboard .btn:focus-visible { outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; }

.dashboard .btn-ghost { background: transparent; }
.dashboard .btn-ghost:hover { background: #f3f4f6; }

.dashboard .btn-primary {
    background: var(--brand-accent, #cfc08f);
    color: #fff;
}
.dashboard .btn-primary:hover { background: var(--brand-accent-dark, #bcb08a); }

/* Loading state on classed buttons only (doesn't touch your global buttons) */
.dashboard .btn.is-loading {
    position: relative;
    color: transparent !important;
}
.dashboard .btn.is-loading::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px;
    border: 3px solid rgba(0,0,0,.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: dash-spin .8s linear infinite;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* ---------- File Picker Modal (namespaced) ---------- */
.dashboard .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
}

.dashboard .modal {
    width: min(640px, 100%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    outline: 1px solid rgba(0,0,0,.06);
    transform: scale(.96);
    opacity: 0;
    transition: transform .2s ease-out, opacity .2s ease-out;
}
.dashboard .modal.is-open { transform: scale(1); opacity: 1; }

.dashboard .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid #f0f0f0;
}
.dashboard .modal-title {
    font: 600 18px/1.2 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #111;
}

.dashboard .modal-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 24px 10px 24px;
}

/* Search inside modal */
.dashboard .search-wrap { position: relative; flex: 1; }
.dashboard .search-input {
    width: 100%; height: 40px; border: 1px solid #dcdcdc; border-radius: 10px;
    padding: 0 38px 0 12px; font: 500 14px/1 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #111; background: #fff;
}
.dashboard .search-input::placeholder { color: #9ca3af; }
.dashboard .search-input:focus { outline: 2px solid rgba(37,99,235,.35); border-color: var(--brand-accent, #cfc08f); }
.dashboard .search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .65; }

.dashboard .file-count { font: 500 12px/1.2 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #6b7280; white-space: nowrap; }

/* List */
.dashboard .picker-list {
    padding: 0 16px 18px 16px; max-height: 55vh; overflow: auto; margin: 0;
}
.dashboard .picker-list::-webkit-scrollbar { width: 8px; height: 8px; }
.dashboard .picker-list::-webkit-scrollbar-thumb { background: var(--brand-accent, #cfc08f); border-radius: 8px; }
.dashboard .picker-list::-webkit-scrollbar-track { background: #eee; border-radius: 8px; }

.dashboard .picker-row { list-style: none; }
.dashboard .picker-row-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 10px; border-radius: 10px; transition: background .12s ease;
}
.dashboard .picker-row-inner:hover,
.dashboard .picker-row-inner:focus-within { background: #f7f7f8; }

.dashboard .file-btn {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    background: transparent; border: 0; padding: 8px; border-radius: 8px; cursor: pointer;
}
.dashboard .file-btn:focus-visible { outline: 2px solid rgba(37,99,235,.35); }
.dashboard .file-icon { font-size: 20px; }
.dashboard .file-name {
    font: 600 14px/1.2 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #222;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard .file-meta { font: 500 12px/1.2 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #6b7280; margin-left: auto; }

/* SR-only helper (safe) */
.dashboard .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================================
   Optional Dark Mode (dashboard only)
   Toggle by: <body class="dashboard dark">
   ================================ */
.dashboard.dark {
    --text: #e5e7eb;
    --muted: #9ca3af;
    --bg: #0b0f17;
    --card: #0f1722;
    --border: #1f2937;
}
.dashboard.dark .app-header { background: #0f1722; border-bottom-color: var(--border); }
.dashboard.dark .card { background: var(--card); border-color: var(--border); }
.dashboard.dark .btn { background: #111827; color: #e5e7eb; }
.dashboard.dark .btn:hover { background: #0f1722; }
.dashboard.dark .modal { background: #0f1722; outline-color: rgba(255,255,255,.05); }
.dashboard.dark .modal-header { border-bottom-color: #17202d; }
.dashboard.dark .picker-row-inner:hover,
.dashboard.dark .picker-row-inner:focus-within { background: #131b27; }
.dashboard.dark .search-input { background: #0b0f17; border-color: #1f2937; color: #e5e7eb; }
.dashboard.dark .picker-list::-webkit-scrollbar-thumb { background: var(--brand-accent, #cfc08f); }