/**
 * Custom Theme Styles - IndianMarriage.com
 * Extended theme customizations for specific pages
 */

/* Custom Theme Variables */
:root {
    --custom-primary: #7c3aed;
    --custom-secondary: #ec4899;
    --custom-accent: #f59e0b;
    --custom-success: #10b981;
    --custom-warning: #f97316;
    --custom-error: #ef4444;
}

/* Dashboard Theme */
.dashboard-theme {
    @apply bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen;
}

/* Astrologer Dashboard Specific */
.astrologer-dashboard {
    --sidebar-width: 280px;
    --header-height: 64px;
}

.astrologer-sidebar {
    @apply fixed left-0 top-0 h-full w-[280px] bg-gradient-to-b from-purple-900 to-indigo-900 text-white shadow-xl z-40;
}

.astrologer-main {
    @apply ml-[280px] pt-[64px] p-6;
}

.astrologer-header {
    @apply fixed top-0 left-[280px] right-0 h-[64px] bg-white dark:bg-gray-800 shadow-sm z-30 flex items-center px-6;
}

/* Stats Cards */
.stats-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-100 dark:border-gray-700;
}

.stats-card-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-2xl;
}

.stats-card-value {
    @apply text-3xl font-bold text-gray-900 dark:text-white mt-4;
}

.stats-card-label {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
}

/* Consultation Cards */
.consultation-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg;
}

.consultation-status-pending {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
}

.consultation-status-active {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
}

.consultation-status-completed {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300;
}

/* Calendar Styling */
.astro-calendar {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4;
}

.astro-calendar-day {
    @apply w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-colors;
}

.astro-calendar-day:hover {
    @apply bg-purple-100 dark:bg-purple-900/30;
}

.astro-calendar-day-selected {
    @apply bg-purple-600 text-white;
}

.astro-calendar-day-auspicious {
    @apply ring-2 ring-amber-500 ring-offset-2;
}

/* Chart Widgets */
.chart-widget {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6;
}

.chart-widget-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white mb-4;
}

/* Form Styling */
.custom-input {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all;
}

.custom-select {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white appearance-none cursor-pointer;
}

.custom-button {
    @apply px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg font-medium shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

.custom-button-secondary {
    @apply px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-all;
}

/* Notification Badges */
.notification-badge {
    @apply absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-medium;
}

/* Loading Overlay */
.loading-overlay {
    @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
}

.loading-spinner {
    @apply w-12 h-12 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin;
}