/* Light/Dark Theme Variables */
:root {
    /*--bg-color: #2D6A0EFF;*/
    /*--text-color: #333;*/
    --container-bg: white;
    --button-bg: #007BFF;
    --button-hover: #0056b3;
    --table-header-bg: #007BFF;
    --table-header-text: white;
    --table-border: #ddd;
}

/* Dark Theme */
[data-theme="dark"] {
    /*--bg-color: #2D6A0EFF;*/
    /*--text-color: #fff;*/
    --container-bg: #2a2a2a;
    --button-bg: #4a90e2;
    --button-hover: #357ABD;
    --table-header-bg: #444;
    --table-header-text: #fff;
    --table-border: #555;
}

/* Apply Theme Colors */
body {
    font-family: Arial, sans-serif;
    background-color: none;
    color: var(--text-color);
    text-align: center;
    margin: 0;
    padding: 0;
    transition: background 0.3s, color 0.3s;
}

/* Expanding Full-Width Layout */
.dashboard-container {
    width: 98%;
    max-width: 1800px; /* Expands up to 1800px */
    margin: 30px auto;
    padding: 20px;
    background: var(--container-bg);
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, color 0.3s;
}

/* Optimized Top Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px;
}

.top-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vehicle-info {
    display: grid; /* Use CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Flexible number of columns */
    gap: 15px 20px; /* Spacing between rows and columns */
    margin: 20px auto; /* Center the container */
    padding: 10px; /* Inner spacing */
    background: var(--container-bg); /* Optional background color */
    border-radius: 7px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.vehicle-info p {
    margin: 0; /* Remove default margin */
    padding: 5px; /* Add internal space */
    font-size: 16px; /* Adjust font size */
    color: var(--text-color); /* Text color (optional) */
    background: var(--info-bg); /* Optional: Background highlight */
    border-radius: 7px; /* Rounded corners for individual items */
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for items */
}

.vehicle-info p strong {
    font-weight: bold; /* Highlight labels */
    color: var(--strong-text-color); /* Optional: Distinct label color */
}

.vehicle-info .value {
    text-align: left; /* Left-align the values */
    color: var(--text-color); /* Standard text color */
    grid-column: span 2; /* Values take up two grid spaces for prominence */
}

.query-results-row {
    display: flex; /* Enables flexbox layout */
    flex-wrap: wrap; /* Allow wrapping if items overflow horizontally */
    align-items: center; /* Vertically center-align items */
    justify-content: center;
    gap: 15px; /* Adds spacing between elements */
    margin: 20px 0; /* Optional: Add vertical spacing for the block */
}

.query-results-row h3 {
    margin: 0; /* Remove default margin for the heading */
    font-size: 18px; /* Adjust font size */
}

.query-results-row label,
.query-results-row input,
.query-results-row p,
.query-results-row button {
    margin: 0; /* Remove default margins */
    font-size: 14px; /* Standardize font size */
    color: white;
}


.query-results-row button {
    padding: 5px 10px; /* Add padding for buttons */
    cursor: pointer; /* Ensure buttons look clickable */
}

.query-results-row input[type="text"] {
    padding: 5px; /* Add padding inside the text box */
    font-size: 14px; /* Match font sizes */
    width: 200px; /* Set a reasonable width */
}

/* VIN Input & Buttons More Compact */
.vin-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}



input[type="text"] {
    width: 70%; /* Adjust for responsiveness */
    max-width: 250px; /* Ensure it doesn’t stretch too large */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 16px;
}

#logPeriodInput{
    width: 100px; /* Set the width */
    font-size: 16px; /* Adjust the font size */
    padding: 10px; /* Add padding inside the select box */
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
    backdrop-filter: blur(10px); /* Adds a frosted-glass effect */
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: white;
}


button {
    padding: 10px 15px;
    background: var(--button-bg);
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    margin: 5px;
}

button:hover {
    background: var(--button-hover);
}

/* Full-Screen Width Table */
.results-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--table-border);
    background: var(--container-bg);
    width: 100%;
}

.selected-results-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--table-border);
    background: var(--container-bg);
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 10px;
    border: 1px solid var(--table-border);
    text-align: left;
    font-size: 16px;
    font-weight: normal;
}

th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    position: sticky;
    top: 0;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #003fb1;


}

/* Search Box */
#searchBox {
    width: 60%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 16px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-container {
        width: 98%;
    }

    input[type="text"] {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        width: 100%;
        padding: 15px;
    }

    .top-bar {
        flex-direction: column;
        gap: 10px;
    }

    input[type="text"] {
        width: 90%;
    }
}

/* Style for login input fields */
.login-container input[type="text"],
.login-container input[type="password"] {
    width: 70%; /* Adjust for responsiveness */
    max-width: 250px; /* Ensure it doesn’t stretch too large */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 16px;
    margin-bottom: 15px; /* Space between textboxes */
    color: #fff !important;
}

/* Center the login form */
.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background: var(--container-bg);
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}


.login-container button[type="submit"]:hover {
    background: var(--button-hover);
}
/* Style the label holding the checkbox */
label[for="filterAmbiguous"] {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and text */
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color); /* You can replace with a fixed color if not using variables */
    margin: 10px 0; /* Adjusts spacing */
}

/* Position the checkbox relative to its label */
#filterAmbiguous {
    width: 15px; /* Checkbox size */
    height: 15px;
    align-items: flex-start;
    cursor: pointer; /* Makes it clear that it's clickable */
    accent-color: var(--accent-color); /* Add custom colors based on modern browser support */
}


.user-form, .user-list, .device-list {
    margin-bottom: 20px;
}

/* Ensure input styling remains unchanged */
.user-form input {
    width: 70%; /* Adjust for responsiveness */
    max-width: 250px; /* Ensure it doesn’t stretch too large */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 7px;
    font-size: 16px;
    margin-bottom: 15px; /* Space between textboxes */
}

/* Flexbox container to align user & device lists side by side */
.user-device-container {
    display: flex;
    justify-content: space-between; /* Spread tables apart */
    gap: 20px; /* Adds spacing between tables */
}

/* Ensure both tables take equal width */
.user-list, .device-list {
    flex: 1;
    max-width: 48%; /* Keeps tables balanced */
}

/* Table styling */
.user-list table, .device-list table {
    width: 100%;
    border-collapse: collapse;
}

/* Shared styles for both tables */
.user-list th, .user-list td, .device-list th, .device-list td {
    padding: 7px;
    border: 1px solid var(--table-border);
    text-align: left;
    font-size: 16px;
    font-weight: normal;
}

/* Ensure headers match */
.user-list th, .device-list th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    position: sticky;
    top: 0;
}

/* Responsive: Stack tables on smaller screens */
@media (max-width: 900px) {
    .user-device-container {
        flex-direction: column; /* Stack tables */
        align-items: center;
    }

    .user-list, .device-list {
        max-width: 100%; /* Full width */
    }
}

.delete-btn {
    background-color: #ff4d4d; /* Red delete button */
    color: white;
    border: none;
    padding: 7px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.delete-btn:hover {
    background-color: #cc0000;
}


.alert {
    margin: 10px 0;
    padding: 12px;
    border-radius: 7px;
}
.alert.success { background-color: #d4edda; color: #155724; }
.alert.error { background-color: #f8d7da; color: #721c24; }


#partnergroup {
    width: 200px; /* Set the width */
    height: 40px; /* Set the height */
    font-size: 16px; /* Adjust the font size */
    padding: 5px; /* Add padding inside the select box */
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
    backdrop-filter: blur(10px); /* Adds a frosted-glass effect */
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: white;
}
#partnergroup option {
    background: rgba(58, 58, 58, 0.9); /* Dark background for dropdown options */
    color: white; /* White text for visibility */
    padding: 10px;
    font-size: 16px;
    border-radius: 7px; /* Add rounded corners */
}


#role {
    width: 200px; /* Set the width */
    height: 40px; /* Set the height */
    font-size: 16px; /* Adjust the font size */
    padding: 5px; /* Add padding inside the select box */
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
    backdrop-filter: blur(10px); /* Adds a frosted-glass effect */
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: white;
}
#role option {
    background: rgba(58, 58, 58, 0.9); /* Dark background for dropdown options */
    color: white; /* White text for visibility */
    padding: 10px;
    font-size: 16px;
    border-radius: 7px; /* Add rounded corners */
}


/* Fullscreen Particle Background */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    height: 100vh; /* Full height */
    z-index: -1; /* Push behind all elements */
    background: linear-gradient(45deg, #474770, #3a5288, #365a91); /* Fallback gradient */
    z-index: -1;
}

/* Make All Main Containers Semi-Transparent */
.dashboard-container,
.login-container,
.vehicle-info,
.results-container,
.selected-results-container {
    position: relative;
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
    backdrop-filter: blur(10px); /* Adds a frosted-glass effect */
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: white; /* Ensure text is visible */
}

/* Buttons & Inputs */
input[type="text"], input[type="password"], button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

/* Table Styles to Match */
table {
    background: rgba(255, 255, 255, 0.1);
}

th, td {
    background: rgba(255, 255, 255, 0.2);
}

/* Dark Mode Adjustments */
[data-theme="dark"] #particles-js {
    background: linear-gradient(45deg, #0f0f0f, #1a1a1a);
}

[data-theme="dark"] .dashboard-container,
[data-theme="dark"] .login-container,
[data-theme="dark"] .vehicle-info,
[data-theme="dark"] .results-container {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

#searchBox {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

/* Make placeholder text always white */
input::placeholder,
textarea::placeholder {
    color: white !important;
    opacity: 80%; /* Ensures full opacity */
}

/* Also for browsers that need vendor prefixes */
::-webkit-input-placeholder {
    color: white !important;
    opacity: 80%;
}
::-moz-placeholder {
    color: white !important;
    opacity: 80%;
}
:-ms-input-placeholder {
    color: white !important;
    opacity: 80%;
}
:-moz-placeholder {
    color: white !important;
    opacity: 80%;
}

#file {
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    border-radius: 7px;
    font-size: 16px;
    cursor: pointer;
}

/* Flex layout and consistent styling */
.dropdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}

/* Match your existing transparent dropdown style */
#engineDropdown,
#newDropdown {
    width: 200px;
    height: 40px;
    font-size: 16px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: white;
}

#engineDropdown option,
#newDropdown option {
    background: rgba(58, 58, 58, 0.9);
    color: white;
    padding: 10px;
    font-size: 16px;
    border-radius: 7px;
}

.input-section {
  display: none;
}

.input-section.active {
  display: flex;
  justify-content: center;  /* centers everything horizontally */
  align-items: center;      /* optional: aligns vertically */
  flex-direction: row;      /* make items line up in one row */
  gap: 15px;                /* spacing between items */
  margin: 30px auto;        /* optional: space around the section */
  /*flex-wrap: wrap;          !* allows wrapping if screen is too narrow *!*/
}

.input-row {
  display: inline-flex;
  justify-content: center;  /* centers everything horizontally */
  align-items: center;      /* optional: aligns vertically */
  flex-direction: row;      /* make items line up in one row */
  gap: 15px;                /* spacing between items */

  /*flex-wrap: wrap;          !* allows wrapping if screen is too narrow *!*/
}



#sw-input-section form {
    display: flex; /* 'flex' works like 'inline-flex' with more flexibility */
    flex-direction: row;
    align-items: center; /* Align items vertically to center */
    gap: 10px; /* Add even spacing */
}


#sw-input-section input[type="text"] {
    height: auto; /* Ensure default auto height */
    padding: 10px; /* Adjust padding as needed */
    font-size: 14px; /* Match rest of the page styling */
    width: auto; /* Remove the global width setting */
    max-width: 250px; /* Reapply if you want it responsive */
    line-height: normal; /* Reset to default for text alignment */
    box-sizing: border-box; /* Avoid inherited issues with box model */
}