/**
 * Vuexy Dark Theme for Alcali
 * 
 * Custom CSS override that adapts Unfold theme to match Vuexy's dark mode design.
 * Color palette and design specs extracted from: 
 * https://demos.pixinvent.com/vuexy-html-admin-template/html/vertical-menu-template-dark/
 */

/* ============================================
   CSS Variables - Vuexy Color Palette
   ============================================ */
:root {
    /* Primary Colors */
    --vuexy-primary: #7367f0;
    --vuexy-primary-hover: #6255e3;
    --vuexy-primary-shadow: rgba(115, 103, 240, 0.4);

    /* Background Colors */
    --vuexy-body-bg: #25293c;
    --vuexy-component-bg: #2f3349;
    --vuexy-card-bg: #2f3349;

    /* Text Colors */
    --vuexy-text-primary: #ffffff;
    --vuexy-text-secondary: #b6bee3;
    --vuexy-text-muted: #76778e;

    /* Border & Divider Colors */
    --vuexy-border: #44485e;
    --vuexy-border-light: rgba(68, 72, 94, 0.5);

    /* Shadow */
    --vuexy-card-shadow: rgba(19, 17, 32, 0.2) 0px 3px 12px 0px;
    --vuexy-active-shadow: 0 2px 4px 0 rgba(115, 103, 240, 0.4);

    /* Spacing */
    --vuexy-sidebar-width: 260px;
    --vuexy-card-radius: 6px;
    --vuexy-card-padding: 1.5rem;
}

/* ============================================
   Global Styles
   ============================================ */
body {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--vuexy-body-bg) !important;
    color: var(--vuexy-text-secondary);
    font-size: 15px;
}

/* Override Tailwind dark mode */
.dark {
    background-color: var(--vuexy-body-bg);
    color: var(--vuexy-text-secondary);
}

/* ============================================
   Typography
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.text-gray-900,
.dark\:text-white {
    color: var(--vuexy-text-primary) !important;
}

h5 {
    font-size: 18px;
    font-weight: 500;
}

/* Muted text */
.text-gray-500,
.dark\:text-gray-400,
.text-gray-600,
.dark\:text-gray-300 {
    color: var(--vuexy-text-muted) !important;
}

/* Secondary text */
.text-gray-700,
.dark\:text-gray-200 {
    color: var(--vuexy-text-secondary) !important;
}

/* ============================================
   Sidebar Navigation
   ============================================ */
aside.bg-white,
aside.dark\:bg-gray-800 {
    background-color: var(--vuexy-component-bg) !important;
    border-right-color: var(--vuexy-border) !important;
}

/* Navigation links */
nav a,
nav button {
    color: var(--vuexy-text-secondary);
    transition: all 0.2s ease;
}

nav a:hover:not(.bg-blue-50):not(.dark\:bg-blue-900),
nav button:hover {
    background-color: rgba(115, 103, 240, 0.1) !important;
    color: var(--vuexy-text-primary);
}

/* Active navigation item */
.bg-blue-50,
.dark\:bg-blue-900,
a.bg-blue-50,
a.dark\:bg-blue-900 {
    background-color: var(--vuexy-primary) !important;
    color: var(--vuexy-text-primary) !important;
    box-shadow: var(--vuexy-active-shadow);
}

/* Section headers in sidebar */
.text-xs.uppercase {
    color: var(--vuexy-text-muted) !important;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ============================================
   Cards & Containers
   ============================================ */
.bg-white.dark\:bg-gray-800,
.card,
.bg-gray-50.dark\:bg-gray-700 {
    background-color: var(--vuexy-card-bg) !important;
    border-radius: var(--vuexy-card-radius) !important;
    box-shadow: var(--vuexy-card-shadow) !important;
    border-color: var(--vuexy-border) !important;
}

/* Card borders */
.border-gray-200.dark\:border-gray-700 {
    border-color: var(--vuexy-border) !important;
}

/* ============================================
   Buttons
   ============================================ */
.bg-blue-600,
.hover\:bg-blue-700,
button.bg-blue-600 {
    background-color: var(--vuexy-primary) !important;
    border-color: var(--vuexy-primary) !important;
}

.bg-blue-600:hover,
button.bg-blue-600:hover {
    background-color: var(--vuexy-primary-hover) !important;
}

/* Primary button text */
.bg-blue-600,
.bg-blue-600:hover {
    color: var(--vuexy-text-primary) !important;
}

/* Secondary buttons */
.border-gray-300.dark\:border-gray-600 {
    border-color: var(--vuexy-border) !important;
    background-color: transparent !important;
}

.border-gray-300:hover {
    background-color: rgba(115, 103, 240, 0.1) !important;
    border-color: var(--vuexy-primary) !important;
    color: var(--vuexy-primary) !important;
}

/* ============================================
   Forms & Inputs
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    background-color: var(--vuexy-component-bg) !important;
    border-color: var(--vuexy-border) !important;
    color: var(--vuexy-text-secondary) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--vuexy-primary) !important;
    box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--vuexy-text-muted) !important;
}

/* ============================================
   Tables
   ============================================ */
table thead {
    background-color: rgba(115, 103, 240, 0.05) !important;
}

table thead th {
    color: var(--vuexy-text-primary) !important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

table tbody tr {
    border-color: var(--vuexy-border) !important;
}

table tbody tr:hover {
    background-color: rgba(115, 103, 240, 0.05) !important;
}

.divide-gray-200.dark\:divide-gray-700>* {
    border-color: var(--vuexy-border) !important;
}

/* ============================================
   Badges & Pills
   ============================================ */
.bg-green-100,
.dark\:bg-green-900 {
    background-color: rgba(40, 199, 111, 0.12) !important;
    color: #28c76f !important;
}

.bg-orange-100,
.dark\:bg-orange-900 {
    background-color: rgba(255, 159, 67, 0.12) !important;
    color: #ff9f43 !important;
}

.bg-red-100,
.dark\:bg-red-900 {
    background-color: rgba(234, 84, 85, 0.12) !important;
    color: #ea5455 !important;
}

.bg-blue-100,
.dark\:bg-blue-900 {
    background-color: rgba(115, 103, 240, 0.12) !important;
    color: var(--vuexy-primary) !important;
}

.bg-gray-100,
.dark\:bg-gray-700 {
    background-color: rgba(182, 190, 227, 0.12) !important;
    color: var(--vuexy-text-secondary) !important;
}

/* ============================================
   Top Navigation Bar
   ============================================ */
header.bg-white,
header.dark\:bg-gray-800 {
    background-color: var(--vuexy-component-bg) !important;
    border-bottom-color: var(--vuexy-border) !important;
    box-shadow: var(--vuexy-card-shadow);
}

/* ============================================
   Pagination
   ============================================ */
.pagination a,
.pagination button {
    background-color: var(--vuexy-component-bg) !important;
    border-color: var(--vuexy-border) !important;
    color: var(--vuexy-text-secondary) !important;
}

.pagination a:hover,
.pagination button:hover {
    background-color: var(--vuexy-primary) !important;
    border-color: var(--vuexy-primary) !important;
    color: var(--vuexy-text-primary) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--vuexy-body-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--vuexy-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vuexy-primary);
}

/* ============================================
   Material Icons Color Fix
   ============================================ */
.material-icons {
    color: inherit;
}

/* ============================================
   Utilities
   ============================================ */
.hover\:bg-gray-50:hover,
.dark\:hover\:bg-gray-700:hover {
    background-color: rgba(115, 103, 240, 0.1) !important;
}

/* Border utilities */
.border-t.border-gray-200,
.dark\:border-t.dark\:border-gray-700 {
    border-color: var(--vuexy-border) !important;
}

/* Focus ring */
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--vuexy-primary) !important;
}

.focus\:border-blue-500:focus {
    border-color: var(--vuexy-primary) !important;
}