.tribute-container {
    position: absolute !important;
    display: block;
    z-index: 999999 !important;
    max-height: 300px;
    overflow-y: auto;
    min-width: 200px !important;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
}

/* Default positioning for desktop (above 1024px width) */

@media (min-width: 1024px) {
    .tribute-container {
        left: 720.525px !important;

    }
}

/* Adjust for tablet screens (768px - 1023px) */

@media (max-width: 1023px) {
    .tribute-container {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* Adjust for mobile screens (below 768px) */

@media (max-width: 767px) {
    .tribute-container {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

.tribute-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dark .tribute-container ul {
    background-color: #1E293B;
    border-bottom: 1px solid #445265;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.dark .tribute-container li {
    border-bottom: 1px solid #445265;
}

.tribute-container li {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

.tribute-container li.highlight {
    background: #4338ca !important;
    color: #fff !important;
}

.tribute-container li span {
    font-weight: 500;
}

.tribute-container li.no-match {
    cursor: default;
}

.tribute-container .menu-highlighted {
    font-weight: 500;

}

.ts-wrapper {
    border-radius: 0.375rem;
    background-color: rgb(var(--color-gray-900));
}

.ts-wrapper:focus-within {
    border-color: rgb(var(--color-info-500));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--color-info-500));
}

.ts-wrapper:is(.dark *) {
    border-color: rgb(var(--color-gray-600));
}

.ts-wrapper:focus-within:is(.dark *) {
    border-color: rgb(var(--color-info-500));
    --tw-ring-color: rgb(var(--color-info-500));
}

.ts-control {
    z-index: 0 !important;
    border-radius: 0.375rem !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    color: rgb(var(--color-slate-900)) !important;
}

.ts-control:is(.dark *) {
    border-color: rgb(var(--color-slate-500)) !important;
    background-color: rgb(var(--color-slate-800)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

/* Style when Tom Select is disabled */

.ts-wrapper.disabled {
    cursor: not-allowed;
    background-color: rgb(var(--color-gray-200));
    opacity: 0.5;
}

.ts-wrapper.disabled:is(.dark *) {
    background-color: rgb(var(--color-gray-700));
}

.ts-control.disabled {
    background-color: rgb(var(--color-gray-300));
    color: rgb(var(--color-gray-500));
}

.ts-control.disabled:is(.dark *) {
    background-color: rgb(var(--color-gray-800));
    color: rgb(var(--color-gray-400));
}

.ts-control input::-moz-placeholder {
    color: rgb(var(--color-slate-800));
}

.ts-control input::placeholder {
    color: rgb(var(--color-slate-800));
}

.ts-dropdown {
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: rgb(var(--color-slate-300));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ts-dropdown:is(.dark *) {
    border-color: rgb(var(--color-slate-600));
    background-color: rgb(var(--color-slate-800));
}

.ts-dropdown [data-selectable].option {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: rgb(var(--color-slate-900)) !important;
}

.ts-dropdown [data-selectable].option:hover {
    background-color: rgb(var(--color-primary-100)) !important;
}

.ts-dropdown [data-selectable].option:is(.dark *) {
    background-color: rgb(var(--color-slate-800)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.ts-dropdown [data-selectable].option:hover:is(.dark *) {
    background-color: rgb(var(--color-primary-400)) !important;
}

::-webkit-scrollbar {
    width: 8%;
    height: 8px;
}

/* Track */

::-webkit-scrollbar-track {
    background: #eef0f4;
}

.dark ::-webkit-scrollbar-track {
    background: #111111;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #737373;
}

.dark ::-webkit-scrollbar-thumb {
    background: #737373;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #bac4d8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* Dark mode hover color */
}

.iti {
    width: 100%;
}

.iti .iti__search-input {
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
}

.iti .iti__dropdown-content {
    width: 250px !important;
    border-radius: 5px;
}

.iti .iti__selected-dial-code {
    line-height: 1;
    font-size: 14px;
}

/* Dark Mode Styles */

.dark .iti {
    background-color: #1e1e1e;
}

.dark .iti .iti__search-input {
    background-color: #1e1e1e;
    border: 1px solid #444;
    color: #fff;
}

.dark .iti .iti__dropdown-content {
    background-color: #1e1e1e;
    color: #fff;
    border: 1px solid #444;
}

.dark .iti .iti__search-input::-moz-placeholder {
    color: #9ca3b1;
}

.dark .iti .iti__search-input::placeholder {
    color: #9ca3b1;
}

.dark .iti .iti__selected-dial-code {
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.ql-container.ql-snow {
    min-height: 250px;
}

.ql-editor {
    min-height: 250px;
    max-height: 500px;
    overflow-y: auto;
}

.ql-toolbar {
    border-radius: 0.25rem 0.25rem 0px 0px;
}

.dark .ql-container {
    background-color: #1e1e1e;
    /* Dark background */
    color: white;
    /* Light text */
}

.dark .ql-toolbar {
    background-color: #1e1e1e;
    color: white;
    /* Dark toolbar background */
}

.dark .ql-toolbar svg {
    filter: invert(1);
}

.dark .ql-picker {
    background-color: #1e1e1e !important;
    /* Dark background */
    color: white !important;
    /* White text */
    border: 1px solid #444;
    /* Slight border for contrast */
}

.dark .ql-picker-label {
    color: white !important;
}

/* Dropdown menu styles */

.dark .ql-picker-options {
    background-color: #1e1e1e !important;
    /* Dark dropdown */
    color: white !important;
    border: 1px solid #444;
}

.dark .ql-picker-options :hover {
    color: orange !important;
}

.dark .ql-editor {
    background-color: #1e1e1e;
    /* Dark background for the editor */
    color: white;
    /* Light text color */
}

.dark .ql-editor.ql-blank {
    color: #888;
    /* Placeholder color */
}

.table {
    background: white !important;
}

.dark .table {
    background-color: #1e1e1e !important;
}

#power-grid-table-base {
    font-size: 14px !important;
}

/* WhatsApp chat background for light mode */

.preview-container {
    background-image: url("/build/assets/whatsapp_light_bg-DxGV9uq9.png");
    /* Adjusted for Laravel's public folder */
    background-size: cover;
    background-position: center;
}

/* WhatsApp chat background for dark mode */

.dark .preview-container {
    background-image: url("/build/assets/whatsapp_dark_bg-CWfmzOL5.png");
    background-size: cover;
    background-position: center;
}

/* Light Mode */

.chat-conversation-box {
    background-image: url("/build/assets/whatsapp_light_bg-DxGV9uq9.png");
}

/* Dark Mode */

.dark .chat-conversation-box {
    background-image: url("/build/assets/whatsapp_dark_bg-CWfmzOL5.png");
}

/* vue-select style */

.vue-select-custom {
    --vs-controls-color: #6b7280;
    --vs-border-color: #d1d5db;
    --vs-dropdown-bg: #fff;
    --vs-dropdown-color: #374151;
    --vs-dropdown-option-color: #374151;
    --vs-selected-bg: #eef2ff;
    --vs-selected-color: #7c3aed;
}

.dark .vue-select-custom {
    --vs-controls-color: #9ca3af;
    --vs-border-color: #4b5563;
    --vs-dropdown-bg: #1f2937;
    --vs-dropdown-color: #d1d5db;
    --vs-dropdown-option-color: #d1d5db;
    --vs-selected-bg: #312e81;
    --vs-selected-color: #c4b5fd;
}

.vue-select-custom .vs__dropdown-toggle {
    padding: 4px 8px;
    border-radius: 0.375rem;
    border: 1px solid var(--vs-border-color);
    background: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .vue-select-custom .vs__dropdown-toggle {
    background: #1f2937; /* Gray-800 */
    box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.05);
}

.vue-select-custom .vs__selected {
    margin: 0 2px 0 0;
    font-size: 0.875rem;
    color: #374151;
}

.vue-select-custom .vs--single .vs__selected {
    height: 24px;
    display: flex;
    align-items: center;
}

.vue-select-custom .vs__search {
    font-size: 0.875rem;
}

.vue-select-custom .vs__search::-moz-placeholder {
    color: #9ca3af;
}

.vue-select-custom .vs__search::placeholder {
    color: #9ca3af;
}

.dark .vue-select-custom .vs__search::-moz-placeholder {
    color: #6b7280;
}

.dark .vue-select-custom .vs__search::placeholder {
    color: #6b7280;
}

.vue-select-custom .vs__dropdown-menu {
    padding: 4px 0;
    border: 1px solid var(--vs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.vue-select-custom .vs__dropdown-option {
    padding: 6px 12px;
    font-size: 0.875rem;
}

.vue-select-custom .vs__dropdown-option--highlight {
    background: #f3f4f6;
    color: #7c3aed;
}

.dark .vue-select-custom .vs__dropdown-option--highlight {
    background: #4c1d95;
    color: #c4b5fd;
}

.vue-select-custom .vs__open-indicator {
    fill: #9ca3af;
}

.vue-select-custom .vs__clear {
    fill: #9ca3af;
}

.dark .vue-select-custom .vs__open-indicator,
.dark .vue-select-custom .vs__clear {
    fill: #d1d5db;
}

.vue-select-custom .vs--open .vs__dropdown-toggle {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.45);
}

/* sub text stylw for vue select */

/* Add this to your existing styles */

.option-with-description {
    padding: 2px 0;
}

.option-label {
    font-weight: 500;
    color: #374151;
}

.dark .option-label {
    color: #d1d5db;
}

.option-description {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
}

.dark .option-description {
    color: #9ca3af;
}

/* Change text color on hover */

.vs__dropdown-option--highlight .option-label {
    color: #7c3aed; /* Indigo-600 */
}

.vs__dropdown-option--highlight .option-description {
    color: #a78bfa; /* Indigo-500 - lighter for description */
}

/* Make the dropdown options a bit taller to accommodate the description */

.vue-select-custom .vs__dropdown-option {
    padding: 8px 12px;
    white-space: normal;
}

/* Ensure selected text only shows the label, not the description */

.vue-select-custom .vs__selected {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-minimap {
    background-color: #ffffff;
}

.dark .custom-minimap {
    background-color: #1f2937; /* Tailwind's gray-800 */
}

/* Optional: customize node color in dark mode if needed */

.dark .custom-node {
    stroke: #93c5fd !important; /* lighter blue stroke in dark mode */
    fill: #2563eb !important; /* Tailwind blue-600 */
}

.vue-flow__controls-button {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

.dark .vue-flow__controls-button {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: #e5e7eb; /* light text */
}

.dark .vue-flow__controls-button:hover {
    background-color: #4b5563; /* hover effect in dark mode */
}

.scrollbar-visible {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgb(var(--color-primary-300)) transparent; /* thumb + track (Firefox) */
}

body {
    --sb-size: 6px;
}

body::-webkit-scrollbar {
    width: var(--sb-size);
}

body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}