/* Bid Wars - Custom Styles */

/* === Theme Color Variables === */
/* Advertiser (default) — Indigo */
:root {
    --c-primary-50: #eef2ff;   --c-primary-100: #e0e7ff;
    --c-primary-200: #c7d2fe;  --c-primary-300: #a5b4fc;
    --c-primary-400: #818cf8;  --c-primary-500: #6366f1;
    --c-primary-600: #4f46e5;  --c-primary-700: #4338ca;
    --c-primary-800: #3730a3;  --c-primary-900: #312e81;
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
    transition: all 0.2s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* Dark scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}
.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--c-primary-500);
    outline-offset: 2px;
}

/* HTMX loading indicators */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Toggle switch animation */
button[hx-post*="toggle"] span {
    transition: transform 0.2s ease;
}

/* Dark mode: form inputs */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="url"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select {
    background-color: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280;
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile sidebar: always full width, never collapsed */
@media (max-width: 767px) {
    .sidebar {
        width: 256px !important;
    }
    .sidebar.collapsed {
        width: 256px !important;
    }
    .sidebar.collapsed .sidebar-label,
    .sidebar.collapsed .sidebar-logo-text {
        opacity: 1;
        width: auto;
    }
    .sidebar.collapsed .collapse-icon {
        transform: none;
    }
    /* Responsive padding for main content */
    main.p-8 {
        padding: 1rem;
    }
}