@import '../../node_modules/intl-tel-input/build/css/intlTelInput.min.css';
@import '/node_modules/pretty-print-json/dist/css/pretty-print-json.min.css';
@import './wm-tribute.css';
@import 'tom-select/dist/css/tom-select.css';
@import './variables.css';
@import './custom.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
  display: none;
}

.ts-wrapper {
  @apply rounded-md bg-gray-900 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;
}

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

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

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

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

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

::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  @apply bg-primary-200 !important;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
  @apply bg-primary-400 !important;
}

.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 */
}
/* 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');
}
#power-grid-table-base {
  font-size: 14px !important;
}

/* Ensure the action links are hidden by default */
.contact-actions {
  display: none;
}

/* Show action links when hovering anywhere in the row */
#power-grid-table-base tbody tr:hover .contact-actions {
  display: flex;
}

.table {
  background: white !important;
}

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

.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;
}
/* resources/css/app.css */
.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 */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

body {
  overflow-x: hidden !important;
}

.iti .iti__dropdown-content {
  font-size: 14px;
}
[x-cloak] {
  display: none !important;
}

::-webkit-scrollbar {
  width: 3px;
  height: 5px;
}

/* Add to your app.css */
.tribute-container {
  @apply absolute z-50 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800;
  max-height: 300px;
  overflow-y: auto;
}

.tribute-container ul {
  @apply m-0 list-none p-0;
}

.tribute-container li {
  @apply cursor-pointer;
}

.tribute-container li.highlight {
  @apply bg-gray-100 dark:bg-gray-700;
}

/* Merge Fields Selector Styles */
.merge-field-button {
  @apply rounded-md border px-4 py-2 text-left transition-colors duration-200;
  @apply hover:bg-gray-50 dark:hover:bg-gray-700;
  @apply border-gray-200 dark:border-gray-600;
}

.merge-field-button:focus {
  @apply outline-none ring-2 ring-info-500 ring-offset-2;
}

.merge-field-name {
  @apply block text-sm font-medium text-gray-900 dark:text-gray-100;
}

.merge-field-key {
  @apply text-xs text-gray-500 dark:text-gray-400;
}

/* Tab Navigation */
.merge-fields-tab {
  @apply rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200;
  @apply text-gray-600 dark:text-gray-300;
  @apply hover:text-gray-900 dark:hover:text-gray-100;
}

.merge-fields-tab.active {
  @apply bg-info-100 text-info-700;
  @apply dark:bg-info-900 dark:text-info-300;
}

/* Message Editor */
.message-editor {
  @apply block w-full rounded-md shadow-sm;
  @apply border-gray-300 dark:border-gray-700;
  @apply dark:bg-gray-900 dark:text-gray-300;
  @apply focus:border-info-500 focus:ring-info-500;
  min-height: 300px;
}

/* 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; /* primary-600 */
}

.vs__dropdown-option--highlight .option-description {
  color: #a78bfa; /* primary-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 */
}

/* 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;
}