@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary: #ffffff;
    --primary-50: #ffffff;
    --primary-100: #ffffff;
    --primary-200: #ffffff;
    --primary-300: #ffffff;
    --primary-400: #ffffff;
    --primary-500: #ffffff;
    --primary-600: #ffffff;
    --primary-700: #ffffff;
    --primary-800: #ffffff;
    --primary-900: #ffffff;
    --primary-950: #ffffff;
}

body {
    font-family: "Inter", sans-serif;
}

.main-container {
    /*  @apply px-4 md:px-8 lg:px-16; */
    @apply mx-auto max-w-[1500px] px-3 md:px-6 lg:px-8;
}

.pagination-container {
    @apply flex items-center justify-center gap-[10px] flex-wrap;
}

.paginate-buttons {
    @apply border text-slate-500 w-8 h-8 sm:w-10 sm:h-10 cursor-pointer rounded-[10px] border-slate-200 justify-center items-center flex hover:bg-primary-100;
}

.active-page {
    @apply bg-primary text-white border-primary hover:bg-primary;
}

.vs__dropdown-toggle {
    padding: 9px 6px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
}

/* Dark mode global base */
.dark {
    color-scheme: dark;
}

.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

/* Dark mode inputs */
.dark input,
.dark textarea,
.dark select {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b;
}

/* Dark mode skeleton loader */
.dark .bg-gray-300 {
    background-color: #334155;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar {
    width: 6px;
}

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

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

/* Dark mode paginator */
.dark .paginate-buttons {
    border-color: #334155;
    color: #94a3b8;
    background-color: #1e293b;
}

.dark .paginate-buttons:hover {
    background-color: #334155;
}

/* Dark mode vue-select */
.dark .vs__dropdown-toggle {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .vs__dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .vs__dropdown-option {
    color: #e2e8f0 !important;
}

.dark .vs__dropdown-option--highlight {
    background-color: #334155 !important;
}

.dark .vs__selected {
    color: #f1f5f9 !important;
}

.dark .vs__search {
    color: #f1f5f9 !important;
}

.dark .vs__open-indicator,
.dark .vs__clear {
    fill: #94a3b8 !important;
}

/* Dark mode intlTelInput dropdown */
.dark .iti__dropdown-content {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}
.dark .iti__country,
.dark .iti__list-item {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}
.dark .iti__country:hover,
.dark .iti__list-item:hover,
.dark .iti__country--highlight {
    background-color: #334155 !important;
}
.dark .iti__country-name {
    color: #f1f5f9 !important;
}
.dark .iti__dial-code {
    color: #94a3b8 !important;
}
.dark .iti__divider {
    border-bottom-color: #475569 !important;
}
.dark .iti__search-input {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
.dark .iti__search-input::placeholder {
    color: #64748b !important;
}
.dark .iti {
    border-color: #475569 !important;
}

/* Dark mode prose typography */
.dark .prose {
    color: #cbd5e1;
}

.dark .prose strong {
    color: #f1f5f9;
}

.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4 {
    color: #f1f5f9;
}