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

.ts-wrapper {
    @apply rounded-md focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500
  dark:border-gray-600 dark:focus-within:border-blue-500 dark:focus-within:ring-blue-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-indigo-100 dark:hover:bg-indigo-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');
}