@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'btn.css';
@import 'provisioning.css';
@import 'bootstrap-icons/font/bootstrap-icons.min.css';
@import 'flatpickr/dist/flatpickr.min.css';
@layer base {
    /* Build-time fallback, overridden per-request by shared.theme-color-vars once an admin saves a custom color. */
    :root {
        --color-primary-50: 240 245 255;
        --color-primary-100: 229 237 255;
        --color-primary-200: 205 219 254;
        --color-primary-300: 180 198 252;
        --color-primary-400: 141 162 251;
        --color-primary-500: 104 117 245;
        --color-primary-600: 39 133 73;
        --color-primary-700: 29 122 72;
        --color-primary-800: 22 102 60;
        --color-primary-900: 12 63 46;
    }
}
#mobile-menu {
    --tab-accessibility-limited: false;
}
.input-text {
    @apply py-3 px-4 block w-full border border-gray-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none;
}
.img-auth {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
.text-secondary {
    @apply text-gray-600;
}
.text-danger {
    @apply text-red-600;
}
.text-warning {
    @apply text-yellow-600;
}
.card {
    @apply bg-white rounded-lg shadow-md p-6 mb-4 border-b border-gray-900/10
}
.card-sm {
    @apply bg-white rounded-lg shadow-md p-3 mb-4 border-b border-gray-900/10
}
.card-title {
    @apply text-lg font-semibold mb-2
}
.card-heading {
    @apply pb-2 grid gap-3 md:flex md:justify-between md:items-center dark:border-gray-700;
}
.w-50 {
    width: 50%!important;
}
.vps-running {
    @apply bg-emerald-600;
}
.vps-stopped {
    @apply bg-red-600;
}
.vps-warning {
    @apply bg-yellow-600;
}

.gateway-selected {
    @apply border-primary bg-primary-light text-primary;
}
.dark .card {
    @apply bg-gray-800 text-white rounded-lg p-6 mb-4
}
.dark .card-sm {
    @apply bg-gray-800 text-white rounded-lg p-3 mb-2
}
.dark #content {
    @apply bg-gray-900 text-white
}
.dark .input-text {
    @apply bg-gray-700  border-gray-700 text-gray-400
}
.dark .text-danger {
    @apply text-red-400
}
.dark .text-warning {
    @apply text-yellow-400
}
.dark .gateway-selected {
    @apply border-red-100
}

.ProseMirror:focus {
    outline: none;
}

.blur {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

.blur:hover {
    filter: none;
}
.dark .os-icon {
    @apply text-gray-400;
}
.icon-width::before {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.custom-scroll {
    @apply overflow-y-auto
    [&::-webkit-scrollbar]:w-2
    [&::-webkit-scrollbar-track]:bg-gray-100
    [&::-webkit-scrollbar-thumb]:bg-gray-300
    dark:[&::-webkit-scrollbar-track]:bg-neutral-700
    dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500;
}