/* TailAdmin - Compiled CSS */
/* This file should be built via Vite/npm run build */
/* For development, we use CDN Tailwind + custom CSS below */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* Hide Alpine-cloaked elements until Alpine initializes them. */
[x-cloak] {
    display: none !important;
}

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

/* Sidebar */
.sidebar {
    transition:
        transform 0.3s ease,
        width 0.3s ease;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}
.menu-item-active {
    background: #eff4ff;
    color: #465fff;
}
.menu-item-inactive {
    color: #667085;
}
.menu-item-inactive:hover {
    background: #f9fafb;
    color: #344054;
}
.dark .menu-item-active {
    background: rgba(70, 95, 255, 0.1);
}
.dark .menu-item-inactive {
    color: #98a2b3;
}
.dark .menu-item-inactive:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #d0d5dd;
}

.menu-item-icon-active {
    fill: #465fff;
}
.menu-item-icon-inactive {
    fill: #98a2b3;
}

.menu-item-text {
    flex: 1;
}
.menu-item-arrow {
    transition: transform 0.2s;
}
.menu-item-arrow-active {
    transform: rotate(180deg);
    fill: #465fff;
    stroke: #465fff;
}
.menu-item-arrow-inactive {
    fill: #98a2b3;
    stroke: #98a2b3;
}

.menu-dropdown {
    padding-left: 36px;
}
.menu-dropdown-item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}
.menu-dropdown-item-active {
    color: #465fff;
    background: #eff4ff;
}
.menu-dropdown-item-inactive {
    color: #667085;
}
.menu-dropdown-item-inactive:hover {
    background: #f9fafb;
    color: #344054;
}
.dark .menu-dropdown-item-inactive {
    color: #98a2b3;
}
.dark .menu-dropdown-item-inactive:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Z-index utilities */
.z-1 {
    z-index: 1;
}
.z-9 {
    z-index: 9;
}
.z-99 {
    z-index: 99;
}
.z-9999 {
    z-index: 9999;
}
.z-99999 {
    z-index: 99999;
}
.z-999999 {
    z-index: 999999;
}

/* Typography sizes */
.text-title-2xl {
    font-size: 2.25rem;
}
.text-title-md {
    font-size: 1.5rem;
}
.text-title-sm {
    font-size: 1.25rem;
}
.text-theme-sm {
    font-size: 0.875rem;
}
.text-theme-xs {
    font-size: 0.75rem;
}

/* Brand colors */
.bg-brand-500 {
    background-color: #465fff;
}
.bg-brand-600 {
    background-color: #3751e5;
}
.text-brand-500 {
    color: #465fff;
}

/* Success / Error */
.bg-success-50 {
    background-color: #ecfdf3;
}
.text-success-600 {
    color: #039855;
}
.bg-success-500\/15 {
    background-color: rgba(5, 150, 105, 0.15);
}
.text-success-500 {
    color: #10b981;
}
.bg-error-50 {
    background-color: #fef2f2;
}
.text-error-600 {
    color: #dc2626;
}
.bg-error-500\/15 {
    background-color: rgba(239, 68, 68, 0.15);
}
.text-error-500 {
    color: #ef4444;
}
.bg-success-500 {
    background-color: #10b981;
}
.bg-error-500 {
    background-color: #ef4444;
}

/* Shadow */
.shadow-theme-xs {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.shadow-theme-md {
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.08);
}
.shadow-theme-lg {
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.12);
}

/* Preloader */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 0.8s linear infinite;
}
@keyframes ping {
    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

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

/* ============================================================
   Vibrant UI kit — gradient surfaces, glows & interactions
   ============================================================ */

/* Gradient fills (reusable across icon tiles, buttons, accents) */
.bg-gradient-brand   { background-image: linear-gradient(135deg, #6d7cff 0%, #465fff 45%, #7c3aed 100%); }
.bg-gradient-emerald { background-image: linear-gradient(135deg, #34d399 0%, #059669 100%); }
.bg-gradient-amber   { background-image: linear-gradient(135deg, #fbbf24 0%, #f97316 100%); }
.bg-gradient-rose    { background-image: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); }
.bg-gradient-violet  { background-image: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
.bg-gradient-cyan    { background-image: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); }
.bg-gradient-slate   { background-image: linear-gradient(135deg, #94a3b8 0%, #475569 100%); }

/* Glow shadow for the primary action */
.shadow-glow-brand { box-shadow: 0 12px 24px -8px rgba(70, 95, 255, 0.5); }

/* Card hover-lift */
.card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -14px rgba(16, 24, 40, 0.18);
}
.dark .card-lift:hover { box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6); }

/* Force icons/svgs inside a gradient tile to render white */
.stat-icon i,
.stat-icon svg { color: #fff; fill: currentColor; }

/* Gradient text for headings/emphasis */
.gradient-text {
    background-image: linear-gradient(135deg, #465fff 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Sidebar active item: vibrant gradient pill with glow ---- */
.menu-item-active {
    background: linear-gradient(135deg, #465fff 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(70, 95, 255, 0.6);
}
.dark .menu-item-active {
    background: linear-gradient(135deg, #465fff 0%, #7c3aed 100%);
    color: #fff;
}
.menu-item-active i { color: #fff !important; }