/*
Author: Misah Software Solutions
Description: Extended CSS for pages
File: custom.css
*/
/* Branch Location SubMenu */
.branch-location-nav .dropdown-submenu {
    position: relative;
}

.branch-location-nav .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

.branch-location-nav .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.branch-location-nav .dropdown-submenu .dropdown-menu {
    display: none;
}

/* Styling active dropdown-item */
.branch-location-nav .dropdown-item.active {
    background-color: #0056b3 !important; /* Blue background for active item */
    color: white !important; /* White text color for active item */
}

/* Hover styling for dropdown-item */
.branch-location-nav .dropdown-item:hover {
    background-color: #000000c4; /* Hover background color */
    color: white; /* Hover text color */
}

/* Styling active dropdown-toggle */
.branch-location-nav .nav-link.dropdown-toggle.active {
    background-color: #212529 !important; /* Blue background for active dropdown toggle */
    color: white !important; /* White text color for active dropdown toggle */
}

/* Styling active submenu (when it contains an active item) */
.branch-location-nav .dropdown-submenu.active > .dropdown-item {
    background-color: #0056b3 !important; /* Blue background for active submenu parent */
    color: white !important;
}

/* When the dropdown is open (show state) */
.branch-location-nav .nav-link.dropdown-toggle.show {
    background-color: #212529 !important; /* Blue background when the dropdown is open */
    color: white !important;
}

/* Badge for tags */
.badge.clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    padding: 0.5em 0.75em;
    border-radius: 0.25rem;
}
.badge.clickable:hover {
    opacity: 0.7;
    /* Carousel Edit & Delete Buttons */
}
.image-container {
    position: relative;
    display: inline-block;
}
.edit-btn,
.delete-btn {
    top: 10px;
    right: 10px;
    z-index: 10;
}
.delete-btn {
    top: auto;
    bottom: 10px;
}
.mySwiper2 {
    margin-bottom: 10px;
}
.mySwiper2 {
    margin-top: 10px;
}
/* Tag badges */
.badge-custom {
    font-size: 0.85rem;
    padding: 0.63em 0.88em;
    cursor: pointer;
}
/*  Branch Closure table inside  modal  */
#BranchClosureTable {
    width: 100% !important;
}
/* Vehicle Damage Markers */
#vehicle-image-container {
    position: relative;
}
.damage-marker {
    z-index: 1000;
}
/* Colour for Damage Marker Legend */
.color-indicator {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 5px;
}
.minor {
    background-color: blue;
}
.major {
    background-color: #ffd700;
}
.severe {
    background-color: orange;
}
.catastrophic {
    background-color: red;
}
.fixed {
    background-color: green;
}
/* Custom Widget Tabs Nav */
.wideget-user-tab .tab-menu-heading {
    padding: 0;
    border: 0;
}
.wideget-user-tab .tab-menu-heading .nav li a {
    color: #374254;
    font-size: 15px;
    font-weight: 400;
}
.wideget-user-tab .tabs-menu1 ul li a {
    padding: 14px 20px 14px 20px;
    display: block;
}
/* Custom Form Border Top & Bottom */
.form-bordered {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
/* Clickable Icons */
.clickable-icon {
    cursor: pointer;
    color: #0d6efd;
    transition: color 0.3s ease-in-out;
}
.clickable-icon:hover {
    color: #ffcb32;
}
/* Search Hover on Add Business Rate Forms */
#businessSearchResults li:hover,
#vehicleTypeSearchResults li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
/* Search Hover on Add Standard Rate Forms */
#standardVehicleTypeSearchResults li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
#standardVehicleTypeSearchResults {
    position: absolute;
    width: 100%;
    z-index: 1050; /* higher than surrounding elements */
    max-height: 250px; /* optional: limit height */
    overflow-y: auto; /* scroll if many results */
    background: #fff; /* needed so it doesn't blend with underlying form */
    border: 1px solid #dee2e6;
    border-top: none;
}
#businessSearchResults {
    position: absolute;
    width: 100%;
    z-index: 1050; /* make sure it’s above other elements */
    max-height: 250px; /* control height */
    overflow-y: auto; /* scroll if too many results */
    background: #fff; /* solid background */
    border: 1px solid #dee2e6; /* match Bootstrap look */
    border-top: none;
}

.mb-3 {
    position: relative; /* anchor the absolute positioning */
}

/* Search Hover on Add Seasonal Rate Forms */
#seasonalVehicleTypeSearchResults li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
/* Search Hover on get customer damage form */
#customerVehicleDamage li:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}
/* Search Container for Vehicle Assign List */
#availableVehiclesList {
    display: flex;
    flex-wrap: wrap;
}
.hidden {
    display: none;
}
/* Custom Colours for system */
.custom-profile-cover {
    background-size: cover;
    height: 12rem;
    background-position: center;
    margin: -4rem -1.5rem -5.5rem -1.5rem;
    padding: 1.5rem 1.5rem 6.5rem 1.5rem;
}
.bg-meteor {
    background-color: #000000;
}
/* Edit Icon Effects */
.edit-icon {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.edit-icon:hover {
    color: #007bff;
    transform: scale(1.2);
}
.edit-icon:active {
    transform: scale(0.5);
}
/* Custom Hover Effect for carousel */
.hover-effect {
    transition: transform 0.2s;
}
.hover-effect:hover {
    transform: scale(1.1);
    border: solid 1px #000;
}
.hover-effect.selected {
    border: solid 2px #000;
}
/* Active File Menu */
.active-link {
    background-color: #f7dddd;
}
/* Hover effect for Boxicon */
.bi-info-circle:hover {
    color: #007bff;
}
#searchResults {
    position: absolute;
    z-index: 1000; /* Ensure it appears above other elements */
}
/* Custom Scrollbar for selected extras */
#selectedExtrasContainer {
    max-height: 285px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 5px;
}

/* Selectize custom CSS */
.selectize-control {
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: none;
    height: calc(2.25rem + 2px);
    display: flex;
    align-items: center;
    width: 100%;
    white-space: normal;
    height: auto;
}

.selectize-input {
    border: none;
    min-height: calc(2.25rem + 2px);
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    background: none;
    height: auto;
}

.selectize-input > .item {
    background-color: #007bff;
    color: white;
    border-radius: 0.2rem;
    margin-right: 0.2rem;
    padding: 0.2rem 0.5rem;
}

.selectize-input > input {
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    height: auto;
    background: none;
}

.selectize-dropdown {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: none;
    width: 100% !important;
    min-width: 100%;
}

.selectize-dropdown .selectize-dropdown-content {
    max-height: 200px;
    overflow-y: auto;
}

.selectize-dropdown .option {
    padding: 0.5rem;
    cursor: pointer;
}

.selectize-dropdown .option:hover,
.selectize-dropdown .option.active {
    background-color: #007bff;
    color: white;
}
.selectize-control.multi .selectize-input {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}
.selectize-input > div {
    margin: 2px;
}
/* Warning Button Hover */
.btn-warning:hover {
    background-color: #e0a800;
    border-color: #e0a800;
}
/* Nav Link Hover */
.nav-link:hover {
    background-color: #f0f0f0;
    color: #000;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Customer Alert Button */
.custom-swal-confirm {
    background-color: #0c971a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 16px;
}

.custom-swal-confirm:hover {
    background-color: #096912;
}

.custom-swal-cancel {
    background-color: #d33;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 16px;
}

.custom-swal-cancel:hover {
    background-color: #a32727;
}

.custom-swal-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 16px;
}

.custom-swal-primary:hover {
    background-color: #0b5ed7;
}

.custom-swal-reset {
    background-color: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 16px;
}

.custom-swal-reset:hover {
    background-color: #5a6268;
}

/**
    * Hover effect for the image and overlay
    * and icon visibility on hover
    *
*/

/* Wrapper for the image and hover effect */
.hover-edit-img-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 120px; /* Explicit width to match the image size */
    height: 120px; /* Explicit height to match the image size */
}

/* Image styling */
.hover-edit-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Overlay effect on hover */
.hover-edit-img-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Greyish overlay */
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1;
    pointer-events: none;
    transform: translateY(50%);
}

/* Edit icon styling */
.hover-edit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    font-size: 32px;
    color: white;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hover effect for the image and overlay */
.hover-edit-img-wrapper:hover .hover-edit-img {
    transform: scale(1.05);
    filter: grayscale(100%);
}

.hover-edit-img-wrapper:hover::before {
    opacity: 1;
    transform: translateY(0);
}

.hover-edit-img-wrapper:hover .hover-edit-icon {
    opacity: 1;
}

/**
  * Custom action buttons for album images
  * with hover effect
  *
 */

/* Custom button and icon styles */
.image-action-buttons .custom-action-btn i {
    color: white;
    transition: color 0.3s ease;
}

/* Hover effect for the custom action buttons */
.image-action-buttons .custom-action-btn:hover i {
    color: yellow;
}

/* Optional: Change button background color on hover */
.image-action-buttons .custom-action-btn:hover {
    background-color: #555;
}

/**
    * Custom CSS for Tables Buttons
    *
*/
/* Ensure that the button column doesn't take up unnecessary space */
#accessoriesTable th,
#accessoriesTable td {
    white-space: nowrap;
}

#vehicleOdometerTable th,
#vehicleOdometerTable td {
    white-space: nowrap;
}

/* Limit the width of the action buttons */
.delete-accessory-btn {
    min-width: 75px;
}

/* Ensure the buttons in the action column remain aligned */
.action-buttons {
    gap: 5px; /* Space between buttons */
    flex-wrap: nowrap; /* Prevent buttons from wrapping */
}

.action-buttons .btn {
    white-space: nowrap; /* Prevent text from wrapping */
}

/*
* Custom styling for selected options box
*/

#selectedOptionsList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* Adjust as needed for spacing */
}

.selected-option {
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1;
}
.custom-tooltip {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 8px;
    border-radius: 4px;
    pointer-events: none; /* So it doesn't interfere with mouse events */
    z-index: 1000; /* Ensure it appears above other elements */
    font-size: 12px;
}
/**
* Styling To show dropdown for google places
*/
.pac-container {
    z-index: 2000 !important;
}
/**
/ Styling for Dropdown on Show Service
**/

.typeahead-list {
    position: absolute;
    z-index: 1060; /* above modal body if used inside modal */
    width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-top: 0;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.typeahead-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.typeahead-item:hover,
.typeahead-item:focus {
    background: #f5f7fb;
}
/* mask PIN entry while keeping input type="text" */
/* Mask the Swal input while keeping it type="text" */
.swal2-container .swal2-input.pin-masked {
    -webkit-text-security: disc; /* Chrome/Safari/Edge */
    text-security: disc; /* experimental */
}