.assetMenuHidden {
    display: none;
}

.assetMenu {
    position: absolute;
    top: -40px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

.assetToolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #343957;
    border-bottom: 1px solid #23273b;
    color: white;
    box-shadow: 0px 0px 10px black;
    cursor: pointer;
    height: 50px;
}

.assetToolbarRight {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.assetSubElement {
    position: absolute;
    top: 28px;
    left: 10px;
    font-size: 10px;
}

.assetSpans {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 10px;
}

.assetTitle {
    font-weight: bold;
    font-size: 14px;
    margin-top: -10px;
}

.assetClose {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px; /* This margin-top might push it down, consider removing if not needed for vertical alignment */
    height: 15px;
}

.assetClose:hover {
    opacity: 0.7;
}

/* === START CHANGES FOR .assetContent AND ITS CHILDREN === */
.assetContent {
    overflow: hidden; /* Use overflow: hidden; instead of scroll if children handle scrolling */
    height: 100vh;
    display: flex; /* This is correct for the two main columns */
    align-items: flex-start; /* Align assetMenuViews and assetContentRight at the top */
}

.assetMenuViews {
    width: 200px;
    /* top: 0px; remove if not absolutely positioned */
    background-color: #343957f5;
    color: white;
    /* position: relative; remove if not absolutely positioned relative to parent */
    height: 100%; /* Make it fill the height of assetContent */
    overflow-y: auto; /* Use auto for vertical scrolling if content exceeds height */
    /* float: left; REMOVE THIS */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.assetContentRight {
    flex-grow: 1;
    padding: 10px;
    overflow: auto;
    display: flex
;
    flex-direction: column;
    gap: 10px;
    height: 93vh;
}

.assetRowSection {
    /* position: relative; REMOVE THIS unless it's for internal positioning */
    width: 100%; /* Make it fill the width of assetContentRight */
    /* left: 10px; REMOVE THIS - handled by padding on assetContentRight */
    /* top: 10px; REMOVE THIS - handled by gap/flow */
    min-width: unset; /* Remove min-width to allow it to shrink if needed, or keep if you need a minimum */
    box-shadow: 2px 2px 6px lightgray;
    height: min-content; /* This is fine */
    background-color: #ffffff; /* Add background for visibility */
    padding: 15px; /* Add internal padding */
    border-radius: 5px; /* Optional: subtle rounded corners */
}

.assetSectionTitle {
    /* position: relative; REMOVE THIS unless it's for internal positioning */
    width: 100%;
    padding: 5px;
    text-align: left !important;
    border-bottom: 1px solid lightgray;
    font-weight: 600;
    color: lightslategrey;
    margin-bottom: 10px; /* Add space below the title */
}

/* Remove the <br> tags from your HTML for spacing between sections, as `gap` on assetContentRight will handle it. */
/* === END CHANGES === */


.assetRow {
    display: flex;
    margin-bottom: 5px;
    justify-content: flex-start;
    align-items: center;
    height: auto;
}

.assetLabel {
    width: 60%;
    padding-right: 10px;
    text-align: right;
    font-weight: 500;
    color: #343957;
    font-size: 12px;
}

.assetValue {
    width: 100%;
    color: #333;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    margin-bottom: 2px;
}
.assetValue input {
    border: 1px solid lightgray;
    padding: 5px;
    font-size: 10px;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    min-width: 50px;
    max-width: 300px;
    box-sizing: border-box;
}
.tag-search-input-specific {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px;
    border: 1px solid lightgray;
    border-radius: 3px;
    font-size: 10px;
}
.assetValue pre {
    margin: 0; /* Remove default margin from pre tag */
    white-space: pre-wrap; /* Ensure pre content wraps */
    word-break: break-all; /* Break long words */
}
.assetValue pre input {
    border: 1px solid lightgray;
    padding: 2px;
}


.assetInput {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 32px;
}

.assetInput:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
}

.assetMenuView {
    padding: 5px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 2;
}

.assetMenuViewSelected {
    background-color: #637dfc;
}

.assetMenuView:hover {
    background-color: #637dfc;
}
/* --- Generic Dropdown Selector Styles --- */
/* This wraps the entire component: button (if any), search, and dropdown content */
.dropdown-selector-wrapper {
    position: relative;
    max-width: 400px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    margin-bottom: 5px;
}

.dropdown-selector-button:hover {
    background: #f0f0f0;
}


/* Class to hide the dropdown content */
.dropdown-selector-content.hidden {
    display: none;
}

/* Styles for the container specifically around the search input within the dropdown */
.dropdown-search-container {
    padding: 8px;
    border-bottom: 1px solid #eee;
    position: sticky; /* Keeps the search input visible while scrolling results */
    top: 0; /* Sticks to the top of the dropdown-selector-content */
    background: white; /* Ensures its background is solid while sticky */
    z-index: 1001; /* Higher z-index than results to prevent overlap issues */
}

/* Styles for the actual search input field */
.dropdown-search-input {
    width: 100% !important;
    padding: 8px;
    border: 1px solid #637dfc !important;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    box-shadow: 1px 1px 2px slategray;
    max-width: none !important;
}

/* Container for the individual search result items */
.dropdown-results-container {
    padding: 0; /* No default padding around the list items */
}

/* Styles for each individual item in the search results list */
.dropdown-result-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 12px;
    border-bottom: 1px solid #eee; /* Separator line between items */
}

.dropdown-result-item:last-child {
    border-bottom: none; /* No separator for the very last item */
}

.dropdown-result-item:hover {
    background-color: #f5f5f5;
}

/* Styling for the currently selected item (e.g., in single-select dropdowns) */
.dropdown-result-item.selected {
    background-color: #e0e0e0;
    font-weight: bold;
}

/* Styling for "No matching results" or "Show all results" messages */
.dropdown-result-item.no-results,
.dropdown-result-item.show-all-results {
    color: #666;
    font-style: italic;
    cursor: default; /* No pointer cursor for these */
    background-color: #fff;
    padding: 10px 12px;
}

/* Style for the "Create new" option */
.dropdown-result-item.create-new-option {
    background-color: #e6f7ff; /* Light blue background */
    font-weight: bold;
    color: #0056b3; /* Darker blue text */
    cursor: pointer;
    border-top: 1px solid #cceeff; /* Separator line */
}

.dropdown-result-item.create-new-option:hover {
    background-color: #cceeff; /* Lighter blue on hover */
}


/* --- Specific Styles for Tags Management --- */
/* This is the main container for the selected tags AND the search input to add more */
.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
    min-height: 38px;
}

/* Container for the individual selected tag bubbles */
.selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Space between individual selected tag bubbles */
}

/* Styles for each individual selected tag bubble */
.selected-tag {
    background-color: #e0e0e0;
    border-radius: 15px; /* Rounded pill shape */
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px; /* Space between tag name and remove button */
    font-size: 0.9em; /* Slightly smaller text for tags */
}

/* Styles for the "x" button to remove a selected tag */
.remove-tag-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-weight: bold;
    padding: 0 3px;
    line-height: 1;
    font-size: 1em;
}

.remove-tag-btn:hover {
    color: white;
    background-color: #dc3545;
}

/* Adjustments for the dropdown selector component when used INSIDE tags-input-wrapper */
.tags-input-wrapper .dropdown-selector-wrapper {
    flex-grow: 1; /* Allows the search input part to take available space */
    max-width: none; /* Override the default max-width for flexibility */
    border: none; /* Remove border from the inner component (main wrapper has one) */
    padding: 0; /* Remove internal padding */
    margin-bottom: 0; /* No bottom margin, it's part of a flex row */
}

/* Hide the main dropdown button when used for tags, as the input itself is primary */
.tags-input-wrapper .dropdown-selector-button {
    display: none;
}

/* Adjust the search input within the tags wrapper to blend in */
.tags-input-wrapper .dropdown-search-input {
    border: none; /* Remove its individual border */
    padding: 0; /* Adjust padding to match surrounding content */
    height: auto; /* Allow height to adjust naturally */
    min-width: 80px; /* Ensure search input doesn't collapse completely */
    flex-grow: 1; /* Allow it to grow */
}

/* Remove border/padding from search container within tags wrapper */
.tags-input-wrapper .dropdown-search-container {
    border-bottom: none;
    padding: 0;
    position: static; /* No sticky behavior needed here */
}

/* Position the dropdown content correctly when it opens from the tags input */
.tags-input-wrapper .dropdown-selector-content {
    /* Position relative to the *viewport* or a higher, well-defined parent if needed */
    /* If the tagsInputWrapper itself is relatively positioned, top: 100% works. */
    /* You might need to adjust 'left' and 'width' to align with the overall .tags-input-wrapper */
    left: 0;
    width: 100%; /* Make dropdown content span full width of its parent .tags-input-wrapper */
    max-width: 400px; /* Retain maximum width for readability */
    /* Add a slight offset from the input */
    transform: translateY(5px); /* Small offset to avoid overlap/clipping */
}


/* --- IMPORTANT: Ensure the parent container of your dynamic fields is relatively positioned --- */
/* This is crucial for the absolute positioning of the dropdowns to work correctly. */
/* If your .assetValue is a div that holds the input fields, give it this style. */
.assetValue {
    position: relative; /* Allows child absolute elements to be positioned relative to this */
    /* Add padding-bottom if dropdowns are clipping other content below them */
    /* padding-bottom: 5px; */
}
.fullScreenMapButton {
    width: 50px;
    font-size: 14px;
    background: #3c415d;
    color: white;
    height: 37px;
    z-index: 99999;
    position: relative;
    float: right;
}
#map {
    height: 400px;
    width: 100%;
    max-width: 800px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add transition for a smooth animation */
    transition: all 0.5s ease-in-out;
}

/* New styles for the fullscreen state */
#map.fullscreen-map {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 9999; /* Ensure it's on top of other content */
}
.assetRowSection.fullscreen-container .fullScreenMapButton {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10000;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0px;
    width: 50px;
    height: 40px;
}
/* Container for the dropdown and its associated buttons */
.dropdown-field-container {
    display: flex; /* Use flexbox to align dropdown and revert button */
    align-items: center; /* Vertically center them */
}

/* Style for the main dropdown button */
.dropdown-selector-button {
    padding: 8px 12px;
    font-size: 11px;
    background: white;
    color: black;
    border: 1px solid lightgray;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.dropdown-selector-button i {
    margin-left: 8px;
    font-size: 0.8em;
}

/* Style for the dropdown content (the list of results) */
.dropdown-selector-content {
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    z-index: 1000; /* Ensure it appears above other elements */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 150px;
    max-height: 200px; /* Scrollable if too many items */
    overflow-y: auto;
    box-sizing: border-box; /* Include padding/border in width calculation */
}

.dropdown-selector-content.hidden {
    display: none;
}

/* Search input within the dropdown */
.dropdown-search-container {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.dropdown-search-input {
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Individual result items in the dropdown list */
.dropdown-results-container {
    padding: 0;
}

/* Ensure custom dropdown options stay neutral (override table option styles) */
.dropdown-result-item.dropdown-option {
    background: #fff;
    color: #000;
}

.dropdown-result-item.dropdown-option:hover {
    background: #f5f5f5;
}

.dropdown-result-item {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-result-item:hover {
    background-color: #f5f5f5;
}

/* Style for the 'selected' item */
.dropdown-result-item.selected {
    background-color: #e0e0e0; /* Light gray to indicate selection */
    font-weight: bold;
}

/* Style for 'Create new' option */
.dropdown-result-item.create-new-option {
    background-color: #e6f7ff; /* Light blue for new option */
    color: #1890ff;
    font-style: italic;
    border-top: 1px solid #e0e0e0;
}

/* Style for 'No results' message */
.dropdown-result-item.no-results {
    color: #888;
    font-style: italic;
    cursor: default;
}

/* Revert Button Style */
.revert-button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 0.9em;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    position: relative;
    margin-bottom: 5px;
}

.revert-button.hidden {
    display: none;
}
.date-selector-button {
    font-size: 12px;
    padding: 7px;
    background-color: #28a745;
    border-radius: 5px;
    margin-bottom: 4px;
}
.flatpickr-calendar{
    top: auto !important;
    left: auto !important;
    right: auto !important;
    font-size: 12px;
}
.flatpickr-current-month input.cur-year{
    width: 100px;
}
.flatpickr-current-month .numInputWrapper {
    width: 100px !important;
}
.reported-coin-mech,
.reported-note-reader,
.reported-control-board,
.reported-model,
.full-address {
    font-size: 10px;
    margin-left: 4px;
    margin-bottom: 5px;
}

input[name="serial_number"],
input[name="location_accesshours"],
input[name="location_directions"] {
    width: 50% !important;
}
.leaflet-popup-content {
    margin: 11px 22px 10px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    padding: 0px !important;
}
.edit-locations-button{
    background-color: white;
    color: darkgreen;
    padding: 0px;
    margin-left: 10px;
    margin-top: -4px;
}
.edit-locations-button:hover{
    background-color: white;
    color: #637dfc;
}
.edit-routes-button{
    background-color: white;
    color: darkgreen;
    padding: 0px;
    margin-left: 10px;
    margin-top: -4px;
}
.edit-routes-button:hover{
    background-color: white;
    color: #637dfc;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
}

.data-table th {
    background-color: #089c56;
    color: white;
    font-weight: 400;
}

.data-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.data-table tbody tr:hover {
    background-color: #f1f1f1;
}

.actions-cell {
    white-space: nowrap; /* Keep buttons on one line */
}

.actions-cell button {
    padding: 8px 12px;
    margin-right: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.edit-btn {
    background-color: #28a745; /* Green */
    color: white;
}

.edit-btn:hover {
    background-color: #218838;
}

.delete-btn {
    background-color: #dc3545; /* Red */
    color: white;
}

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

/* --- Modal Overlay --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 1000; /* Ensure it's above other content */
    opacity: 1; /* Default to visible for transition effect */
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay .hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allows clicks to pass through when hidden */
}

/* --- Main Dialog Box --- */
.app-dialog {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow */
    width: 90%; /* Responsive width */
    max-width: 600px; /* Max width for larger screens */
    max-height: 90vh; /* Max height for tall screens */
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1001;
    overflow: hidden; /* Ensure content stays within bounds */
    transform: translateY(0); /* Default position for transition */
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hidden {
    display: none;
    visibility: hidden;
}
.add-note-btn {
    position: absolute;
    right: 0px;
    top: -52px;
    font-size: 10px !important;
    background-color: #637dfc !important;
    padding: 10px !important;
    width: 100px;
}
.backButton {
    display: flex;
    align-items: start;
    margin-top: 2px;
    justify-content: space-evenly;
    line-height: 1;
    background-color: #ffffff;
    color: #343957;
    padding: 7px;
    height: 27px;
    border-radius: 5px;
    margin-right: -12px;
}
.backButton:hover{
    color: #637dfc;
    cursor: pointer;
}
.backButton i {
    margin-right: -1px;
    margin-top: -6px;
    margin-left: -5px;
}
.modal-overlay .hidden .app-dialog {
    transform: translateY(-50px); /* Move up slightly when hidden */
    opacity: 0;
}

/* --- Dialog Header --- */
.dialog-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef; /* Lighter border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* Light background */
    flex-shrink: 0; /* Prevent shrinking if content is long */
}

.dialog-title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #343a40;
}

.dialog-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8em; /* Larger 'x' */
    color: #6c757d; /* Muted color */
    padding: 0 5px;
    line-height: 1; /* Ensure 'x' is vertically centered */
    transition: color 0.2s ease;
}

.dialog-close-btn:hover {
    color: #495057;
}

/* --- Dialog Body/Content --- */
.dialog-content {
    flex-grow: 1; /* Allow content to fill available space */
    padding: 20px;
    overflow-y: auto; /* Enable scrolling for long content */
}

.form-group {
    margin-bottom: 15px;
}

/* .form-label {
    position: relative;
    width: 50%;
    display: block;
    text-align: right;
    padding-right: 20px;
} */

.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 12px;
    box-sizing: border-box;
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}
.form-textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.toggle-switch-group {
    position: relative;
}

.toggle-switch-wrapper {
    position: relative;
    margin-bottom: 48px;
}

.toggle-switch-indicator::before { /* The 'thumb' */
    content: '';
    position: absolute;
    width: 24px; /* Slightly larger thumb */
    height: 24px; /* Match width */
    border-radius: 50%;
    background-color: #ffffff;
    top: 2px; /* Centering the thumb vertically */
    left: 2px; /* Starting position */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Checked state for the switch */
.toggle-switch-input:checked + .toggle-switch-indicator {
    background-color: #007bff;
}

.toggle-switch-input:checked + .toggle-switch-indicator::before {
    /* (Indicator width - thumb width - (2 * left/right padding)) */
    transform: translateX(32px); /* NEW CALC: 58px - 24px - 2*2px = 30px from left edge. So it moves by 32px (initial 2px + 30px) */
}

.switch-inner-text-yes {
    transform: translateX(100%); /* Start off-screen right */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding-left: 8px;
}

.switch-inner-text-no {
    transform: translateX(0); /* Start on-screen */
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding-right: 8px;
}

.toggle-switch-input:checked + .toggle-switch-indicator .switch-inner-text-yes {
    transform: translateX(0); /* Move 'yes' on-screen */
    opacity: 1;
}

.toggle-switch-input:checked + .toggle-switch-indicator .switch-inner-text-no {
    transform: translateX(-100%); /* Move 'no' off-screen left */
    opacity: 0;
}

/* --- Dialog Actions/Footer --- */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    background-color: #ffffff;
    flex-shrink: 0; /* Prevent shrinking */
}
.note-description{
    font-size: 16px;
    color: #6c757d;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 500;
}
.action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-left: 10px; /* Space between buttons if multiple */
}

.action-btn-primary {
    background-color: #007bff;
    color: white;
}

.action-btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

.action-btn-primary:active {
    background-color: #004085;
    transform: translateY(0);
}

.toggle-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    width: 58px; /* Wider track for more space */
    height: 28px; /* Slightly taller for better proportions */
    background-color: #ced4da;
    border-radius: 28px;
    transition: background-color 0.3s ease;
    overflow: hidden;
}

.toggle-switch-indicator::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch-input:checked + .toggle-switch-indicator {
    background-color: #007bff;
}

.toggle-switch-input:checked + .toggle-switch-indicator::before {
    transform: translateX(32px);
}

.switch-inner-text-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8em;
    font-weight: 500;
    color: #fff;
    transition: transform 0.3s ease;
}

.toggle-switch-input:checked + .toggle-switch-indicator .switch-inner-text-yes {
    transform: translateX(0);
    opacity: 1;
}

.toggle-switch-input:checked + .toggle-switch-indicator .switch-inner-text-no {
    transform: translateX(-100%);
    opacity: 0;
}

.hint-text {
    position: relative;
    float: right;
    font-size: 12px;
    width: 50%;
    margin-top: 5px;
}
#asset-machine-table {
    z-index: 0 !important;
}
.assetMachinesTableHead{
    background-color: #089c56;
    color: white;
}
.mt-2{
    z-index: 99;
}
.dt-layout-table{
    z-index: 0 !important; /* Ensure the DataTables layout table has a lower z-index */
}
.dropdown-toggle {
    white-space: nowrap !important;
    font-size: 12px !important;
    background-color: #637dfc !important;
    border: 0px !important;
}
div.dropdown-menu.dt-button-collection {
    margin-top: 4px;
    width: 200px;
    font-size: 12px;
}
#asset-machine-table_wrapper > div:first-child {
    z-index: 999 !important;
}
.popup {
    position: absolute;
    left: 10%;
    top: 9%;
    width: 80vw;
    height: 80vh;
    background-color: white;
    z-index: 9999;
    box-shadow: 2px 3px 10px grey;
}
.popupTitle {
    padding: 10px;
}
.addMachinesButton {
    position: absolute;
    right: 38px; /* Changed from float: right; if absolute is intended */
    z-index: 9999;
    font-size: 12px;
    border-radius: 5px;
    background-color: #ff681f;
}
.machineSearchContainer {
    width: 100%;
    font-size: 12px;
    height: 60vh;
    position: relative;
}
.machineSearchToolbar {
    position: relative; /* Or static if no relative children */
    width: 100%;
    height: 40px;
    top: 0px;
}

.machineSearchWrapper {
    width: 48%;
    float: left;
    border-bottom: 1px solid lightgrey;
    margin-left: 10px;
    height: calc(71vh - 40px - 2px);
    overflow-y: auto;
    position: relative;
}

.machineSearchTable {
    width: 100%; /* Table itself should be 100% of its wrapper */
    border-collapse: collapse; /* Good practice for tables */
    border: 1px solid lightgrey;
}

/* --- Sticky Headers CSS --- */
.machineSearchTable thead {
    position: sticky;
    top: 0; /* Sticks to the top of the .machineSearchWrapper's scrollable area */
    z-index: 1; /* Keep it above tbody content. Higher than 10 if you have other sticky elements, e.g., 100 */
    background-color: #089c56; /* Apply background here as well for full header area */
}

.machineSearchTable th {
    padding: 10px;
    background-color: #089c56; /* Redundant if applied to thead, but harmless */
    color: white;
    white-space: nowrap; /* Prevent headers from wrapping, keeping them on one line */
}

.machineSearchTable tbody tr {
    border-bottom: 1px solid lightgrey;
}
.machineSearchTable tbody tr:hover {
    background-color: #f1f1f1; /* Optional: Highlight row on hover */
}

.machineSearchTable tbody tr td {
    /* REMOVE width: 100%; */
    padding: 10px;
    /* Let td behave naturally as table-cell */
}
.machineSelectionWrapper{
    width: 48%;
    float: right;
    border-bottom: 1px solid lightgrey;
    margin-right: 10px;
    height: calc(71vh - 40px - 2px);
    overflow-y: auto;
    position: relative;
}
.machineSelectionToolbar{
    position: relative;
    width: 100%;
    height: 40px;
    top: 0px;
}
.machineSelectionContainer{
    width: 100%;
    font-size: 12px;
    height: 60vh;
    position: relative;
}
.machineSelectionTable {
    width: 100%; /* Table itself should be 100% of its wrapper */
    border-collapse: collapse; /* Good practice for tables */
    border: 1px solid lightgrey;
}
.machineSelectionTable thead {
    position: sticky;
    top: 0; /* Sticks to the top of the .machineSearchWrapper's scrollable area */
    z-index: 1; /* Keep it above tbody content. Higher than 10 if you have other sticky elements, e.g., 100 */
    background-color: #089c56; /* Apply background here as well for full header area */
}
.machineSelectionTable th {
    padding: 10px;
    background-color: #089c56; /* Redundant if applied to thead, but harmless */
    color: white;
    white-space: nowrap; /* Prevent headers from wrapping, keeping them on one line */
}
.machineSelectionTable tbody tr {
    border-bottom: 1px solid lightgrey;
}
.machineSelectionTable tbody tr:hover {
    background-color: #f1f1f1; /* Optional: Highlight row on hover */
}

.machineSelectionTable tbody tr td {
    /* REMOVE width: 100%; */
    padding: 10px;
    /* Let td behave naturally as table-cell */
}
.confirmAddMachines{
    margin-top: 8px;
    font-size: 12px;
    float: right;
    margin-right: 11px;
}
.cancelAddMachines{
    font-size: 12px;
    float: right;
    margin-top: 8px;
    margin-right: 7px;
}
.action-column {
    width: 20px;
}
.addMachineBtn {
    background-color: #637dfc;
    padding: 6px;
}
.removeMachineBtn{
    background-color: #dc3545;
    padding: 6px;
}
.machineSearchInput{
    font-size: 12px;
    padding: 7px;
    width: 100%;
}
.machineSelectionInput{
    font-size: 12px;
    padding: 7px;
    width: 100%;
}
#asset-history-table{
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
#asset-history-table thead {
    background-color: #089c56;
    color: white;
}
#asset-history-table thead th {
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
    font-weight: 400;
}
#asset-history-table tbody td{
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
}
.switch input:checked + .slider {
    background-color: #2196F3;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
    transform: translateX(30px); /* Adjusted for new width */
}
.planned-dates-dropdown {
    background-color: white;
    width: 100%;
}
/* .assetServiceRunsTableHead th{
    background-color: #089c56;
    color: white;
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
    font-weight: 400;
}
.assetServiceRunsTableRow td{
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
}
#asset-service-runs-table{
    width: 100%;
    height: 500px;
    overflow: scroll;
    position: relative;
    display: block;
}
.assetServiceRunsTableHeaderRow {
    position: fixed;
    display: block;
    width: 100%;
} */

.asset-service-runs-table .tooltip-content {
    z-index: 20; /* Ensure the tooltip appears on top of everything else */
}
.toolbar-wrapper{
    position: relative;
    width: 100%;
    display: flex;
}
.custom-dropdown-container {
    position: relative;
    width: max-content;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
    user-select: none;
}
.dropdown-selected-display {
    padding: 8px 12px;
    background-color: white;
    position: relative;
    cursor: pointer;
    border: 1px solid lightgray;
    padding-right: 30px !important;
}
.dropdown-selected-display::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}
.dropdown-options-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}
.dropdown-options-list.active {
    display: block;
}
.dropdown-option-item {
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown-option-item:hover {
    background-color: #f0f0f0;
}
.status-completed {
    color: green;
}
.status-in-progress {
    color: orange;
}
.selected-option::before {
    content: '✔';
    margin-right: 8px;
    font-weight: bold;
}
.selected-option.status-completed::before {
    color: green;
}
.selected-option.status-in-progress::before {
    color: orange;
}
.assetServiceRunsTableHead th {
    background-color: #089c56;
    color: white;
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
    font-weight: 400;
    position: sticky;
    top: 0;
    z-index: 10;
}
.assetServiceRunsTableRow td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
}
#asset-service-runs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.assetServiceRunsTableHeaderRow {
}
.table-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: auto; /* <-- Add this for horizontal scrolling */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.modal-content {
    background: white !important;
    padding: 20px;
    border-radius: 8px;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    position: relative;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    padding-bottom: 0;
    padding-top: 0;
    color: black;
}
.close-button:hover {
    color: #007bff;
    background: none;
}
.modal-table {
    width: 100%;
    border-collapse: collapse;
}
.modal-table th, .modal-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.modal-table th {
    background-color: #f2f2f2;
}

/* New styles for status box and tooltip */
.status-box {
    padding: 4px 8px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
.status-box-18 {
    background-color: #637dfc;

}
.status-box-16 {
    background-color: #343957;
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}
.tooltip-content {
    visibility: hidden;
    width: 545px;
    background-color: white;
    color: black;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 200;
    /* New Positioning: Initially off to the right */
    top: 50%;
    left: 100%;
    transform: translateY(-50%); /* Centers the tooltip vertically */
    margin-left: 10px; /* Space between element and tooltip */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    display: flex;
}
.cash-tooltip-content {
    visibility: hidden;
    width: 150px;
    background-color: white;
    color: black;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 200;
    /* New Positioning: Initially off to the right */
    top: 50%;
    left: 100%;
    transform: translateY(-50%); /* Centers the tooltip vertically */
    margin-left: 10px; /* Space between element and tooltip */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}
/* New Arrow Styling for right-side tooltip */
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}
/* A new class for left-side positioning */
.tooltip-content.tooltip-left {
    /* Flipping the position to the left */
    right: 100%;
    left: auto;
    margin-right: 10px;
}
/* A new class for left-side arrow */
.tooltip-content.tooltip-left::after {
    top: 50%;
    right: auto;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent white;
}
.tooltip-wrapper.active .tooltip-content {
    visibility: visible;
    opacity: 1;
}
.tooltip-wrapper.active .cash-tooltip-content {
    visibility: visible;
    opacity: 1;
}
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.tooltip-column {
    padding: 0 5px;
    display: flex;
    flex-direction: column;
}
.tooltip-divider {
    width: 1px;
    background-color: #ccc;
    margin-left: 5px;
    margin-right: 5px;
}
.tooltip-row {
    margin-bottom: 5px;
}
.tooltip-label {
    font-weight: bold;
    margin-right: 5px;
}
.tooltip-value-18 {
    color: black;
    float: right;
}
.tooltip-value-16 {
    color: #333;
    float: right;
}
.tooltip-value-box {
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    font-size: 11px;
    margin-left: 5px;
    float: right;
}
.tooltip-value-box-18 {
    background: #089c56;
    color: white;
}
.tooltip-value-box-16 {
    background-color: #f0f0f0; /* light gray */
}
.tooltip-value-box-yes {
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    font-size: 11px;
    margin-left: 5px;
    color: white;
    background: #089c56;
    float: right;
}
.tooltip-value-box-no {
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    font-size: 11px;
    margin-left: 5px;
    background-color: #f0f0f0;
    float: right;
}
.tooltip-label i {
    color: grey;
    margin-right: 5px;
}
.tooltip {
    z-index: 9999 !important;
}
.addServiceRunButton {
    float: left;
    position: relative;
    margin-left: 10px;
    height: 40px;
}
.editServiceRunButton{
    height: 40px;
}
.cancelServiceRunButton{
    float: right;
    position: relative;
    background-color: #dc3546b7;
    width: 100%;
}
.cancelServiceRunButton:hover{
    background-color: #dc3545;
}
#search-input{
    float: left;
    width: 200px !important;
    font-size: 12px !important;
    margin-right: 10px;
}
#service-run-machine-table.dataTable td {
    border-bottom: 1px solid #ddd;
}
.service-run-machine-header {
    font-weight: 200;
    background: rgb(6, 156, 86) !important;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    padding: 5px !important;
    padding-left: 5px !important;
    height: 10px !important;
}
.createServiceRunButton{
    margin-left: 10px !important;
}
#table-column {
    font-weight: 200;
    background: rgb(6, 156, 86) !important;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding-left: 5px;
}

/* This targets the body cells in the column with the 'cell-left' class */
.cell-left {
    text-align: left;
}
.machines_selected {
    float: right;
    font-size: 12px;
}
.driver-dropdown-container {
    position: relative;
    margin-left: 5px !important;
    /* other styles */
}

.driver-options-list {
    /* Style and position the list to appear above the button */
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 5px; /* Adds a small space between the list and the button */

    /* Your existing list styles */
    background: white;
    height: 400px;
    overflow: scroll;
    z-index: 999;
    border: 1px solid lightgray;

    /* Hide the menu by default */
    display: none;
}

.driver-options-list.active {
    /* --- SHOW THE MENU WHEN THE 'active' CLASS IS PRESENT --- */
    display: block;
}
.modal-footer {
    margin-top: 10px !important;
}
.modal-dropdown-options-list {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 5px;
    background: white;
    /* height: 400px; */
    max-height: 400px;
    overflow: scroll;
    z-index: 999;
    border: 1px solid lightgray;
    display: none;
    width: 200px;
    padding-left: 0px;
}

/* This rule shows the list when the 'active' class is present */
.modal-dropdown-options-list.active {
    display: block;
}
.warehouse-label {
    margin-left: 10px !important;
    margin-right: 5px !important;
    font-weight: 600;
}
.collect_cash {
    margin-right: 5px !important;
}
#access-hours-container{
    position: absolute;
    top: 10%;
    left: 30%;
    z-index: 9999;
    background: white;
    box-shadow: 5px 5px 5px lightgray;
    width: 600px;
    padding: 30px;
    overflow: scroll;
    height: 80vh;
}
.access-hours-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9998;
}
.is-invalid {
    border: 2px solid red;
}
.day-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
}
.day-input-group label {
    font-weight: 600;
    color: #374151;
}
.day-input-group .time-slot-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.day-input-group .time-input {
    width: 155px;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}
.add-remove-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #4b5563;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
    height: 50px;
    width: 50px;
}
.add-remove-btn:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}
.remove-btn {
    color: #dc2626 !important;
    background: #f9fafb;
}
.remove-btn:hover {
    color: #dc2626b4 !important;
    background: #f9fafb;
}
.control-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}
.control-buttons button {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.saveAccessHours {
    background-color: #22c55e;
    color: white;
    transition: background-color 0.2s;
}
.saveAccessHours:hover {
    background-color: #16a34a;
}
.cancelAccessHours {
    background-color: #9ca3af;
    color: white;
    transition: background-color 0.2s;
}
.cancelAccessHours:hover {
    background-color: #6b7280;
}
/* Main toolbar layout */
.modal-toolbar {
    display: flex;
    align-items: baseline;
    gap: 15px;
    padding: 10px;
    background-color: #f8f9fa;
}

/* This new rule targets the container for the region filter */
#region-filter-container {
    display: flex;
    align-items: center;
    gap: 5px; /* Adds a small space between the label and the dropdown */
}

/* This ensures the items inside the "Select All" container are also aligned */
.select-all-container {
    display: flex;
    align-items: center;
    /* gap: 15px; */
}
.region-select {
    height: 33px;
    padding: 0px;
    margin: 0px;
    font-size: 12px !important;
}
.region-label{
    margin-bottom: 0px !important;
}
/* .dataTable thead th {
    background-color: #089c56;
    color: white;
    padding: 0px;
    padding-left: 5px;
} */
.driver-header{
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.driver-header .custom-dropdown-container{
    font-size: 12px !important;
    margin-left: 5px;
    margin-right: 5px;
}

.driver-section {
    box-shadow: -1px 1px 10px lightgrey;
    display: grid;
    margin-bottom: 30px;
    padding: 13px;
}
.results-table thead th {
    background-color: #089c56;
    color: white;
    padding: 5px 0px 5px 0px;
    padding-right: 15px;
    padding-left: 5px;
}
.results-table tbody td {
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding: 5px;
}
.modal-dropdown-options-list-service {
    position: absolute;
    margin-bottom: 5px;
    background: white;
    /* height: 400px; */
    max-height: 400px;
    overflow: scroll;
    z-index: 999;
    border: 1px solid lightgray;
    display: none;
    width: 200px;
    padding-left: 0px;
}
.modal-dropdown-options-list-service.active {
    display: block;
}
.back-button {
    font-size: 12px !important;
    background-color: #343957 !important;
    color: white;
    float: right;
    margin-top: -13px;
}
.back-button:hover {
    background-color: #637dfc !important;
}
.red-button {
    font-size: 12px !important;
    background-color: #c71414 !important;
    color: white;
    float: right;
    margin-top: -13px;
}
.red-button:hover {
    background-color: #f34444 !important;
}
.modal-header-services {
    /* display: flex; */
    /* flex-shrink: 0; */
    align-items: center;
    /* justify-content: space-between; */
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header-services h6 {
    float: left;
}
.order-input {
    width: 34px;
}
.export-button {
    font-size: 12px !important;
    background: #353a58 !important;
    color: white !important;
    margin-right: 5px;
    margin-left: 10px;
}
.export-button:hover {
    background: #637dfc !important;
    color: white !important;
}
.print-button {
    font-size: 12px !important;
    background: #353a58 !important;
    color: white !important;
}
.print-button:hover {
    background: #637dfc !important;
    color: white !important;
}
#draw-region-btn{
    font-size: 12px !important;
    background: #343957 !important;
    color: white !important;
    float: right;
    /* margin-bottom: 8px; */
    top: -12px;
    position: relative;
}
#draw-region-btn:hover{
    background: #637dfc !important;
    color: white !important;
}
#save-region-btn{
    margin-right: 5px !important;
    margin-top: -12px !important;
    font-size: 12px !important;
    float: right !important;
}
#cancel-edit-btn {
    margin-right: 5px !important;
    margin-top: -12px !important;
    font-size: 12px !important;
    float: right !important;
}
#drawing-instructions{
    font-size: 12px;
}
.order-input {
    width: 30px !important;
}
/* Styling for the new map icon container and buttons */

.map-icon-container {
    display: flex;
    gap: 8px;
    margin-left: 10px; /* Pushes it away from the dropdowns */
}

.map-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd; /* Bootstrap primary blue */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.map-icon-button:hover {
    color: #0a58ca; /* Darker blue on hover */
    transform: scale(1.15);
}

/* Styling for the wrapper that will contain the map iframe */
.map-view-wrapper {
    margin-top: 15px;
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.4s ease-in-out;
}

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

.drag-handle {
    cursor: grab;
    text-align: center;
    vertical-align: middle;
    background-color: #f9f9f9;
    color: #555;
}

.drag-handle:hover {
    background-color: #f0f0f0;
}

/* Optional: Style for when an item is being dragged */
.sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}

.actions-cell {
    vertical-align: middle;
    text-align: center;
}

.action-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.action-dropdown-list {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
}

.action-dropdown-wrapper:hover .action-dropdown-list {
    display: block;
}

.action-dropdown-list li {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
}

.action-dropdown-list li:hover {
    background-color: #f1f1f1;
}
.settings-panel {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    margin: 10px 20px;
    border-radius: 5px;
    position: absolute;
    z-index: 99;
    margin-top: 44px;
    margin-left: -9px;
}
.settings-panel.hidden {
    display: none;
}
.setting-item {
    margin-bottom: 10px;
}
.setting-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.setting-item input {
    width: 100% !important;
    border-radius: 0px !important;
    height: 27px !important;
    font-size: 12px !important;
}
#apply-settings-btn {
    font-size: 12px !important;
    background: #28a745 !important;
    border-color: #28a745 !important;
}
#apply-settings-btn:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
}
.dropdown-selected-display.disabled {
    background-color: #e9ecef; /* A typical disabled background color */
    color: #6c757d;      /* Muted text color */
    cursor: not-allowed;  /* Show a 'not allowed' cursor on hover */
    pointer-events: none; /* This is the key: it disables all click/hover events */
  }

  /* Optional: Make the dropdown arrow look disabled too */
  .dropdown-selected-display.disabled::after {
      opacity: 0.5;
  }
  .stats-container {
    display: flex;
    gap: 15px;
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    margin-left: auto; /* Pushes the stats to the right */
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: bold;
}

.stat-value {
    font-size: 16px;
    font-weight: bold;
    color: #212529;
}
.chart-controls {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px; /* Space between controls and the chart */
    margin-top: 15px;
    margin-left: 10px;
  }
  .chart-controls-row {
    display: flex;
    align-items: center;
    gap: 5px;
  }

/* Make the dropdown take up the full width of the first row */
.chart-controls-row #dateRangeSelect {
    flex-grow: 1;
  }

  /* Make the buttons share the second row equally */
  .chart-controls #prevButton,
  .chart-controls #nextButton {
    flex: 1;
    font-size: 12px;
    background: #198754;
    border-radius: 0px;
    border: 1px solid white;
  }
  .chart-wrapper-fullscreen {
    position: fixed; /* Takes the element out of the normal document flow */
    top: 0;
    left: 0;
    width: 100vw; /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    background-color: white; /* A solid background to hide other elements */
    z-index: 5000; /* Ensure it's on top of everything else */
    padding: 20px;
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

/* This class will be added to the body to prevent scrolling when in full-screen */
body.chart-fullscreen-active {
    overflow: hidden;
}
/* Main container for the sales list view */
.sales-list-view {
    display: flex;
    flex-direction: column; /* Stacks controls, table, and footer vertically */
    height: 100%;
}

/* Controls at the top */
.sales-list-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Prevents this from shrinking */
}
.sales-list-controls .form-select {
    width: auto;
}

/* Wrapper for the table to make it scrollable */
.table-wrapper {
    flex-grow: 1; /* Allows the table to fill available vertical space */
    overflow-y: auto; /* Adds a scrollbar if the content overflows */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.asset-table {
    width: 100%;
    border-collapse: collapse;
}
.asset-table th, .asset-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    white-space: nowrap; /* <-- Add this to prevent text wrapping */
}

/* Your other styles remain the same */
.asset-table th {
    background-color: #089c56;
    color: white;
    font-weight: bold;
    position: sticky;
    top: 0;
}
.asset-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Footer for pagination */
.pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    flex-shrink: 0; /* Prevents this from shrinking */
}

/* Styling for the pagination buttons */
#pagination-controls button {
    margin: 0 2px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
    border-radius: 4px;
    color: #333; /* <-- THIS IS THE FIX for the invisible text */
    font-size: 14px;
}
#pagination-controls button:hover:not(:disabled) {
    background-color: #f0f0f0;
}
#pagination-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
#pagination-controls button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
#per-page-select {
    width: 300px;
    font-size: 14px;
}
#page-info {
    font-size: 14px;
}
.report-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.report-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
    flex-shrink: 0;
}
#date-range-picker {
    flex-grow: 1; /* Make the date picker fill available space */
}
#report-results-container .table-wrapper {
    flex-grow: 1;
    overflow: auto;
}
#sales-report-table tfoot {
    font-size: 1.1em;
    background-color: #f8f9fa;
}
/* Aligns the coin value label with the progress bar */
.progress-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Space between bars */
}

/* The grey background/container of the bar */
.progress-bar-container {
    background-color: #e9ecef; /* Light grey background */
    border-radius: 5px;
    height: 22px;
    width: 80%;
    overflow: hidden; /* Ensures the inner bar doesn't overflow the rounded corners */
}

/* The colored inner bar that shows the level */
.progress-bar {
    background-color: #089c56 !important; /* Your primary green color */
    height: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    transition: width 0.5s ease-in-out; /* Smooth animation effect */
    min-width: 35px; /* Ensures text is visible even for very low numbers */
}
.toggle-switch-label {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

/* Hide the default HTML checkbox */
.toggle-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track of the switch */
.toggle-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Grey background when off */
    transition: .4s;
    border-radius: 26px; /* Makes it a capsule shape */
}

/* The sliding handle (the circle) */
.toggle-switch:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Makes it a circle */
}

/* --- The "On" State --- */

/* Change the track color when the switch is on */
.toggle-switch-input:checked + .toggle-switch {
    background-color: #089c56; /* Your green color */
}

/* Slide the handle to the right when the switch is on */
.toggle-switch-input:checked + .toggle-switch:before {
    transform: translateX(24px);
}
.coin-mech-coins {
    display: inline-block;  /* <-- ADD THIS: Makes the element respect text-align */
    background: #343957;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 4;
    color: white;
    /* margin-right: 10px; <-- REMOVE THIS: It was pushing the element away from the right edge */
    padding-right: 9px;
}
.chart-container {
    display: block;
    box-sizing: border-box;
    height: 300px;
    width: 100%;
}

/* --- Styles for Pick List Modal Changes --- */

.change-tag {
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  text-transform: uppercase;
}

.change-tag.queued,
.change-tag.queued_swap {
  background-color: orange;
}

.change-tag.emptied {
  background-color: #089c56; /* Green */
}

.change-tag.forced {
  background-color: #dc3545; /* Red */
}
/* --- Styles for Pick List Modal --- */

.modal-table tbody tr.has-change {
    background-color: #fffbe6; /* A light yellow highlight */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.modal-table tbody tr.has-change td {
    font-weight: bold;
}

/* Add Machines and Remove Machines buttons */
.add-machines-button {
    font-size: 12px !important;
    background: #28a745 !important;
    color: white !important;
    margin-right: 5px;
    margin-left: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.add-machines-button:hover {
    background: #218838 !important;
    color: white !important;
}

.remove-machines-button {
    font-size: 12px !important;
    background: #ffc107 !important;
    color: #212529 !important;
    margin-right: 5px;
    margin-left: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.remove-machines-button:hover {
    background: #e0a800 !important;
    color: #212529 !important;
}

/* Machine selection modal styles */
.machine-selection-modal .modal-content {
    max-width: 800px;
    width: 90%;
}

.machine-selection-modal .table {
    font-size: 12px;
}

.machine-selection-modal .table th {
    background-color: #089c56;
    color: white;
    font-weight: 600;
    padding: 8px;
}

.machine-selection-modal .table td {
    padding: 8px;
    vertical-align: middle;
}

.machine-selection-modal .service-type-select {
    font-size: 11px;
    padding: 4px;
    width: 100%;
}

.machine-selection-modal .collect-cash-checkbox {
    transform: scale(1.2);
}

.machine-selection-modal .modal-footer {
    justify-content: space-between;
}

.machine-selection-modal .btn {
    font-size: 12px;
    padding: 8px 16px;
}

/* --- Modern Add Machines Modal --- */
.add-machines-overlay {
    backdrop-filter: blur(4px);
    background: rgba(15, 23, 42, 0.35);
    align-items: center;
    justify-content: center;
}
.add-machines-modal {
    width: 90%;
    max-width: 1200px;
    height: 80%;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f6f8fb 100%);
    padding: 0 !important;
}
.add-machines-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #343956;
    color: #fff;
}
.add-machines-header h5 {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.add-machines-close {
    color: #fff;
}
.add-machines-toolbar {
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    align-items: center;
    background: #f8fafc;
}
.add-machines-search {
    width: 280px;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.add-machines-body {
    flex: 1;
    padding: 16px 18px;
    overflow: hidden;
}
.add-machines-table-wrap {
    height: 100%;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.add-machines-footer {
    padding: 16px 18px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}
.add-machines-actions {
    display: flex;
    gap: 10px;
}
.add-machines-modal .btn-primary {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.25);
    padding: 10px 18px;
    font-weight: 700;
    font-size: 12px;
}
.add-machines-modal .btn-secondary {
    border-radius: 12px;
    padding: 10px 16px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font-weight: 700;
    font-size: 12px;
}
.add-machines-modal .btn-outline-success,
.add-machines-modal .btn-outline-secondary {
    border-radius: 10px;
    font-weight: 700;
    padding: 8px 12px;
    font-size: 12px;
}
.add-machines-modal .table {
    font-size: 12px;
}
.add-machines-modal .table th {
    background: rgb(6, 156, 86) !important;
    color: #fff;
    font-weight: 700;
    padding: 10px;
    vertical-align: middle;
}
.add-machines-modal .table td {
    padding: 9px 10px;
    vertical-align: middle;
}
.add-machines-modal .form-check-input {
    width: 16px;
    height: 16px;
}