/* Global Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */

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

/* Navbar Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */

/* Logo Row Styles */
.logo-row {
    display: flex;
    justify-content: center; /* Center logo horizontally */
    padding: 20px 0; /* Add some vertical padding */
    background-color: #b6b5b5; /* Optional: background color for the logo row */
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: navy; /* Dark background for the main navbar */
    color: white;
    padding: 0 20px;
    height: 50px; /* Adjust the height as needed */
}

.navbar-logo-img {
    width: 180px; /* Set the logo width */
    height: auto; /* Maintain aspect ratio */
}

.navbar a {
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
    .navbar, .admin-navbar {
        flex-direction: column;
        align-items: stretch;
        height: auto;
    }

    .navbar a, .admin-navbar-links a {
        text-align: center;
        padding: 10px; /* Smaller padding for smaller screens */
        width: 100%; /* Full width for better touch targets */
    }
}

/* Adding to center the navbar links */
.navbar-links {
    display: flex;
    margin: auto;
    justify-content: center; /* Linear center */
    align-items: center; /* Elevational (cross-axis) center */
    flex-grow: 0;
    padding: 0 2rem; /* Adjust the left and right padding as you want */
}

.navbar-links a {
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
}

.navbar-links a:hover { 
    background-color: #ddd;
    color: black;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
}

/* Wrapped in a MediaQuery for a justified centering */
@media screen and (min-width: 768px) {
    .navbar-links {
        justify-content: space-around; /* Changed to 'space-around' for an evening distribution */
    }
}

/* Adapting for responsiveness */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        height: auto; /* Auto-adjusts the height */
    }

    .navbar-logo, .navbar-links {
        width: 100%; /* Guarantees a container's estate */
        justify-content: center;
        padding: 0.5rem 0; /* You can add a small top and bottom padding for a better aspect */
    }

    .navbar-links a {
        padding: 10px; /* Possibly, increase the size of the tap targets on the smaller screen */
    }
}


/* Admin Navbar Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
.admin-navbar {
    background-color: red; /* Dark background for the admin bar */
    color: white;
    padding: 10px 0;
    text-align: center;
}

.admin-navbar-links a {
    color: white; /* White text for legibility */
    margin: 0 15px; /* Spacing between links */
    padding: 5px 10px; /* Padding for clickable area */
    text-decoration: none; /* No underlines */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.admin-navbar-links a:hover {
    background-color: #555; /* Slightly lighter background on hover */
}

/* Optional: Responsive adjustments */
@media (max-width: 768px) {
    .admin-navbar-links a {
        display: block; /* Stack links vertically on smaller screens */
        margin: 10px auto; /* Center links with automatic horizontal margins */
        width: 80%; /* Make links wider for easier clicking */
    }
}

/* Default Form Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
form {
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#view_vehicles_table {
    max-width: auto;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#edit_vehicle_form {
    max-width: 50%;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form container */
.form-container {
    max-width: 600px; /* Max form width */
    margin: 20px auto; /* Center the form */
    padding: 15px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form elements */
.form-container label {
    display: block; /* Make labels block to ensure they appear above the input */
    margin: 10px 0 5px; /* Add some space around labels */
}

.form-container input[type="text"],
.form-container input[type="number"],
.form-container input[type="datetime-local"],
.form-container select {
    width: 100%; /* Make input fields use full container width */
    padding: 8px;
    margin-bottom: 15px; /* Add some space below the input fields */
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-container input[type="file"] {
    margin-bottom: 15px; /* Add some space below the file input */
}

.form-container button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-container button:hover {
    background-color: #0056b3;
}

/* Tasks section */
.form-container .tasks-container {
    margin-top: 20px;
}

.form-container .tasks-container h4 {
    margin-top: 15px;
}

/* Task options */
.form-container .task-option {
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .form-container {
        width: 95%;
        padding: 10px;
    }
}

input[type="text"], select, input[type="number"], input[type="submit"], button {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="password"], select, input[type="number"], input[type="submit"], button {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="submit"], button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

input[type="submit"]:hover, button:hover {
    background-color: #0557af;
}

#deleteselected {
    background-color: red;
}

/* Table Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */

table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    border: 1px solid #000000;
}

th {
    /* background-color: #f9f9f9; */
    text-align: center;
    border: 1px solid #000000;
}

tr:nth-child(even) {
    /* background-color: #f2f2f2; */
    border: 1px solid #000000;
}

.stock-number {
    min-width: 120px; /* Adjust based on the actual width needed */
    white-space: nowrap; /* Prevent wrapping */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .navbar a, form, table {
        float: none;
        display: block;
        width: 100%;
        text-align: left;
    }

    form {
        padding: 20px;
    }

    table, th, td {
        display: block;
    }

    th, td {
        text-align: right;
    }

    td {
        text-align: left;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        position: absolute;
        top: 12px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        text-align: left;
        font-weight: bold;
    }
}

/* 2 Column Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
.container {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.table-column {
    flex: 3;
    max-width: 98%;
    margin: auto;
}

@media screen and (max-width: 768px) {
    .filter-column, .table-column {
        max-width: 100%;
    }
}

.filter-form {
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 5px;
}

.dropdowns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.reset-button{
    background-color: orange;
    color: #000000;
    width: auto;
    padding: 10px 20px;
    margin-right: 10px; /* Adjust space between buttons */
}

.filter-button {
    background-color: #0056b3;
    width: auto;
    padding: 10px 20px;
    margin-right: 10px; /* Adjust space between buttons */
}

@media screen and (max-width: 768px) {
    .dropdowns {
        flex-direction: column;
    }
}
/* Actions Toolbar Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
.button-row {
    margin: auto;
    margin-bottom: 10px; /* Space between buttons and table */
    text-align: center; /* Align buttons to the left */
}

.button-row button {
    margin-right: 10px; /* Space between buttons */
    padding: 10px; /* Padding inside buttons */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.button-group {
    display: flex;
    margin: auto;
    justify-content: start;
    gap: 10px; /* Adjust the space between buttons */
}

.button-group button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Optional: for rounded corners */
}

.button-group button:hover {
    background-color: #0056b3;
}

#addBtn{
    background-color: #2bbe2b;
}

#archiveBtn {
background-color: #ecca04;
}

#unarchiveBtn {
    background-color: #ecca04;
    }

#deleteBtn {
    background-color: red;
}

#exportBtn {
    background-color: #0056b3;
}
#importBtn {
    background-color: #0056b3;
}

@media print {
    body {
      width: 11in;
      height: 8.5in;
      margin: 0;
      transform-origin: 0 0;
    }
    .navbar, .admin-navbar, .logo-row, .filter-column, .button-group, .reset-button, .filter-button, #task_column_hide, #button-group-form, .how-to-use-container, .how-to-archive-container, .how-to-export-container {
      display: none; /* Hide elements that should not be printed */
    }
}


/* Container Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */

.welcome-container {
    width: 1440px; /* Set width as desired */
    padding: 20px; /* Add some padding inside the container */
    background-color: #ffffff; /* Background color for the container */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    border-radius: 8px; /* Optional: rounded corners */
    /* Adjust the below properties as necessary */
    text-align: center; /* Center the text inside the container */
    font-size: 20px; /* Set the font size */
    margin: auto;
}
.login-container {
    width: 360px; /* Set width as desired */
    padding: 20px; /* Add some padding inside the container */
    background-color: #ffffff; /* Background color for the container */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    border-radius: 8px; /* Optional: rounded corners */
    /* Adjust the below properties as necessary */
    text-align: center; /* Center the text inside the container */
    font-size: 20px; /* Set the font size */
    margin: auto;
}

.profile-container {
    width: 480px; /* Set width as desired */
    padding: 20px; /* Add some padding inside the container */
    background-color: #ffffff; /* Background color for the container */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    border-radius: 8px; /* Optional: rounded corners */
    /* Adjust the below properties as necessary */
    text-align: center; /* Center the text inside the container */
    font-size: 20px; /* Set the font size */
    margin: auto;
}

.add-vehicle-form-container {
    width: 960px; /* Set width as desired */
    padding: 20px; /* Add some padding inside the container */
    background-color: #ffffff; /* Background color for the container */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    border-radius: 8px; /* Optional: rounded corners */
    /* Adjust the below properties as necessary */
    text-align: center; /* Center the text inside the container */
    font-size: 20px; /* Set the font size */
    margin: auto;
}

.import-vehicles-form-container {
    width: 960px; /* Set width as desired */
    padding: 20px; /* Add some padding inside the container */
    background-color: #ffffff; /* Background color for the container */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    border-radius: 8px; /* Optional: rounded corners */
    /* Adjust the below properties as necessary */
    text-align: center; /* Center the text inside the container */
    font-size: 20px; /* Set the font size */
    margin: auto;
}

.import-csv-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/* If the screen width is smaller than the container, adjust the layout */
@media screen and (max-width: 1440px) {
    .welcome-container {
        width: 90%; /* Make the container width responsive */
        margin: 10px; /* Add margin to ensure some space around the container */
    }
}

.import-instructions-container {
    width: 960px;
    margin: auto;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.import-instructions-container h2 {
    color: #333;
    margin-top: 0;
}

.import-instructions-container ol {
    margin-left: 20px;
}

.import-instructions-container li {
    margin-bottom: 10px;
}

.import-instructions-container p {
    color: #666;
}

.download-template-btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.download-template-btn:hover {
    background-color: #0056b3;
}

.how-to-use-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 95%;
}

.how-to-use-container h2 {
    color: #333;
}

.how-to-use-container ul {
    list-style-type: disc;
    padding-left: 20px;
}

.how-to-use-container li {
    margin-bottom: 10px;
}

.how-to-use-container ul ul {
    list-style-type: circle;
}


.how-to-add-vehicle-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 95%;
}

.how-to-add-vehicle-container h2 {
    color: #333;
}

.how-to-add-vehicle-container p, ol {
    margin: 10px 0;
}

.how-to-add-vehicle-container li {
    margin-bottom: 10px;
}

.how-to-archive-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 95%;
}

.how-to-archive-container h2, h3 {
    color: #333;
}

.how-to-archive-container p, ol {
    margin: 10px 0;
}

.how-to-archive-container li {
    margin-bottom: 10px;
}

.how-to-export-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 95%;
}

.how-to-export-container h2, h3 {
    color: #333;
}

.how-to-export-container p, ol {
    margin: 10px 0;
}

.how-to-export-container li {
    margin-bottom: 10px;
}

.manage-users-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 80%;
}


.view-users-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 80%;
}



.dashboard {
    background: #e9ecef;
    border-left: 5px solid #007BFF;
    margin: 20px 0;
    padding: 15px;
    border-radius: 5px;
}

.dashboard h2 {
    margin-top: 0;
}

ul {
    padding: 0;
    list-style-type: none;
}

li {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

li:last-child {
    border-bottom: none;
}

/* Links and buttons */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.sign-out-link {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #dc3545;
    color: white;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}

.sign-out-link:hover {
    background-color: #c82333;
}
/* Recent Changes Ticker Styles */
/* ___________________________________________________________ */
/* ___________________________________________________________ */
/* ___________________________________________________________ */

.recent-changes-container {
    background-color: #000000;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 60%;
}

.change-log {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.change-log:last-child {
    border-bottom: none;
}

.change-log p {
    margin: 5px 0;
}

.change-line {
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px solid #eee;
    padding: 5px 0;
}

/* CSS styles for change log categories */
.change-add-car {
    background-color: #2bbe2b; /* Green */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}

.change-delete-car {
    background-color: #dc3545; /* Red */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}

.change-archive-car {
    background-color: #f0c02f; /* Yellow */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}

.change-unarchive-car {
    background-color: #f0c02f; /* Cyan */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}

.change-import-csv {
    background-color: #0056b3; /* Cyan */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}
.change-import-vehicle {
    background-color: #2bbe2b; /* Blue */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}

.change-status-update {
    background-color: #f19f06; /* Orange */
    color: #000000;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}
.change-updated-car {
    background-color: #2634f1; /* Red */
    color: #ffffff;
    margin: 10px;
    padding: 10px;
    border: #868686 solid 2px;
    border-radius: 5px;
    font-weight: bold;
}

.change-line {
    margin-bottom: 5px; /* Space between entries */
}



.task-cell {
    max-height: 100px; /* Adjust based on your needs */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Hides horizontal scrollbar */
    display: block; /* Converts the cell to block layout to apply height and overflow */
}

.recent-activity-explanation-container {
    width: 960px;
    background-color: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 95%;
}

.activity-feed {
    max-height: 640px; /* Adjust based on your preference */
    overflow-y: auto; /* Enables vertical scrolling */
    padding: 10px; /* Optional: Adds some padding inside the container */
    border: 1px solid #ccc; /* Optional: Adds a border around the container */
    border-radius: 5px; /* Optional: Rounds the corners of the container */
    margin-bottom: 20px; /* Optional: Adds some space below the container */
}

.recent-changes-stock-number {
    color: white;
}




.vehicle-overview-container {
    max-width: 1440px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.vehicle-overview-flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.vehicle-image-container {
    flex: 1 1 300px;
    text-align: center;
}

.vehicle-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
}

.vehicle-info-container {
    flex: 2 1 400px;
}

.vehicle-overview-container h2 {
    color: #007bff;
    font-size: 28px;
    margin-bottom: 20px;
}

.vehicle-overview-container p {
    color: #333;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.vehicle-overview-container p strong {
    font-weight: bold;
    color: #222;
}

.vehicle-overview-container a {
    color: #007bff;
    text-decoration: none;
}

.vehicle-overview-container a:hover {
    text-decoration: underline;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .vehicle-overview-flex {
        flex-direction: column;
        align-items: center;
    }

    .vehicle-image-container, .vehicle-info-container {
        flex-basis: 100%;
    }
}

.vehicle-overview-container .vehicle-details-row {
    display: flex;
    justify-content: start;
    gap: 20px; /* Adjust the gap as needed */
}

.vehicle-overview-container .vehicle-details-row p {
    margin: 0; /* Remove default margin to align better in the row */
}





.status-pending {
    background-color: red;
    color: #000000; /* Optional: change text color for better readability */
}

.status-in-progress {
    background-color: yellow;
    color: black; /* Adjust text color if needed */
}

.status-completed {
    background-color: #00cc66;
    color: #000000;
}

.update-success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.update-error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.update-form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.update-form h2 {
    margin-top: 0;
}

.update-form input[type="text"],
.update-form select,
.update-form textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.update-form input[type="submit"] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.update-form input[type="submit"]:hover {
    background-color: #45a049;
}









.vehicle-cards {
    width: 100%; /* Vehicle cards span the full width of the main content */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vehicle-card {
    display: flex;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px; /* Space between cards */
    align-items: flex-start; /* Align items to the top of the container */
}

.vehicle-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.vehicle-selection a {
    display: block;
    color: #fff;
    padding: 5px 10px;
    margin-top: 5px; /* Space between buttons */
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.vehicle-selection input[type="checkbox"] {
    margin-bottom: 10px; /* Space between checkbox and edit link */
}

.vehicle-info {
    flex-grow: 1; /* Allow vehicle info to take up the remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.vehicle-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #007bff;
}

.vehicle-header a {
    text-decoration: none;
    color: #007bff;
}

.vehicle-header a:hover {
    text-decoration: underline;
}

.vehicle-main-info,
.vehicle-status-details,
.vehicle-additional-details,
.vehicle-progress-details,
.vehicle-active-time-details {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.edit-link {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.edit-link:hover {
    background-color: #0056b3;
}

.status-pending,
.status-in-progress,
.status-completed,
.overdue {
    border-left: 10px solid; /* Define only the border width and style here */
    padding-left: 12px;
}

.edit-link {
    background-color: #007bff;
}

.delete-link {
    background-color: #dc3545;
}

.archive-link {
    background-color: #ffc107;
}

.unarchive-link {
    background-color: #ffc107;
}

.vehicle-selection {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start of the container (left side) */
    justify-content: center; /* Center items vertically */
    padding-right: 20px; /* Add some space between this column and the next */
}

.vehicle-selection a:hover {
    opacity: 0.8;
}
.vehicle-selection *:last-child {
    margin-bottom: 0; /* Remove bottom margin from the last element */
}

.status-pending {
    border-color: #ffc107;
}

.status-in-progress {
    border-color: #17a2b8;
}

.status-completed {
    border-color: #28a745;
}

.overdue {
    border-color: #dc3545;
}

/* Custom styling for specific info types can be added here */
.vehicle-info span,
.vehicle-main-info span,
.vehicle-status-details span,
.vehicle-additional-details span,
.vehicle-progress-details span,
.vehicle-active-time-details span {
    white-space: nowrap; /* Prevent wrapping and keep the content in a single line */
    color: #333;
}

.vehicle-image {
    padding-right: 10px; /* Adjust as needed */
}

.vehicle-image img {
    width: 256px; /* or whatever size you prefer */
    height: auto; /* maintain aspect ratio */
    
    object-fit: cover; /* ensure the image covers the area without stretching */
}









/* Container for both filter panel and vehicle cards to manage spacing */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;
    margin: auto;
}

/* Filter panel styles */
.filter-pane {
    width: 100%; /* Full width of the main content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* Center form items */
}

.dropdowns {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.form-group {
    flex: 1; /* Each form group will take equal space */
    min-width: 150px; /* Prevents the select boxes from becoming too small */
}

/* Styles for filter and reset buttons */
.filter-button,
.reset-button {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #e7e7e7;
    cursor: pointer;
    border-radius: 4px;
    margin: 5px; /* Add margin to prevent sticking to the dropdown */
}

.filter-button:hover,
.reset-button:hover {
    background-color: #d7d7d7;
}


/* Adjusts the form group to make sure they don't become too narrow */
.form-group select,
.form-group input[type="text"] {
    min-width: 120px;
}

/* Styles for buttons when on smaller screens */
@media (max-width: 768px) {
    .filter-form {
        justify-content: center;
    }

    .filter-button,
    .reset-button {
        width: 100%;
        margin-top: 10px;
    }

    .form-actions {
        width: 100%;
        order: 3; /* Move buttons to the bottom on smaller screens */
    }
}






/* Sticky button container */
.sticky-button-container {
    height: 180px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* Match your site's color scheme */
    border-top: 1px solid #ccc;
    text-align: center; /* Center the button inside the container */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow at the top of the sticky bar */
}

/* Style the button within the sticky container for better visibility and interaction */
.sticky-button-container button {
    height: 180px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.sticky-button-container button:hover {
    background-color: #0056b3;
}




.admin-navbar-links {
    position: relative;
    display: inline-block;
}

.admin-navbar-reports-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.admin-navbar-reports-dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.admin-navbar-reports-dropdown a:hover {
    background-color: #f1f1f1;
}

.admin-navbar-reports:hover .admin-navbar-reports-dropdown {
    display: block;
}

.admin-navbar-links {
    position: relative;
    display: inline-block;
}

.admin-navbar-dropdown {
    display: inline-block;
}

.admin-navbar-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.admin-navbar-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.admin-navbar-dropdown-content a:hover {
    background-color: #f1f1f1;
}

.admin-navbar-dropdown:hover .admin-navbar-dropdown-content {
    display: block;
}