@import "./wm-tribute.css";

.ts-wrapper {
    @apply rounded-md focus-within:border-info-500 focus-within:ring-2 focus-within:ring-info-500
  dark:border-gray-600 dark:focus-within:border-info-500 dark:focus-within:ring-info-500 bg-gray-900;
}

.ts-control {
    @apply bg-white text-slate-900 dark:bg-slate-800 rounded-md dark:border-slate-500 dark:text-white z-0 !important;
}

/* Style when Tom Select is disabled */
.ts-wrapper.disabled {
    @apply bg-gray-200 dark:bg-gray-700 opacity-50 cursor-not-allowed;
}
.ts-control.disabled {
    @apply bg-gray-300 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
}

.ts-control input::placeholder {
    @apply text-slate-800;
}

.ts-dropdown {
    @apply bg-white border border-slate-300 rounded-md shadow-lg dark:bg-slate-800  dark:border-slate-600;
}

.ts-dropdown [data-selectable].option {
    @apply bg-white text-slate-900 dark:bg-slate-800 dark:text-white text-sm hover:bg-primary-100 dark:hover:bg-primary-400 !important;
}

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

/* Track */
::-webkit-scrollbar-track {
    background: #eef0f4;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b; /* Dark mode track color */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #9c9df5;
}

.dark ::-webkit-scrollbar-thumb {
    background: #64748b; /* Dark mode thumb color */
}

/* 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: #1e293b;
}

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

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

.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;
}

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

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

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

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

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

.dark .ql-picker {
    background-color: #1e293b !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: #1e293b !important;
    /* Dark dropdown */
    color: white !important;
    border: 1px solid #444;
}

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

.dark .ql-editor {
    background-color: #1e293b;
    /* 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: #1e293b !important;
}

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

/* WhatsApp chat background for light mode */
.preview-container {
    background-image: url("/public/img/chat/whatsapp_light_bg.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("/public/img/chat/whatsapp_dark_bg.png");
    background-size: cover;
    background-position: center;
}
/* Light Mode */
.chat-conversation-box {
    background-image: url("/public/img/chat/whatsapp_light_bg.png");
}

/* Dark Mode */
.dark .chat-conversation-box {
    background-image: url("/public/img/chat/whatsapp_dark_bg.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::placeholder {
    color: #9ca3af;
}
.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 */
}

.dark .vue-flow__controls-button {
    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: theme("colors.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);
    }
}