/* PetAware - Minimal Custom CSS */
/* Only styles that MudBlazor does not provide out of the box. */
/* Theme colors, typography, spacing, elevation, and component styles */
/* are all handled by MudBlazor via PetAwareTheme.cs */

/* -- Smooth scrolling -- */
html {
    scroll-behavior: smooth;
}

/* -- Gradient text effect (no MudBlazor equivalent) -- */
.gradient-text {
    background: linear-gradient(135deg, #4FD0CB 0%, #3A8F8A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -- Glass morphism effect -- */
.glass-effect {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* -- Keyframe Animations (MudBlazor has no animation library) -- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(79,208,203,0.7); }
    50%      { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(79,208,203,0); }
}

@keyframes backgroundShift {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
}

/* Animation utility classes */
.animate-slide-up { animation: slideUp 0.8s cubic-bezier(0.4,0,0.2,1) forwards; }
.animate-fade-in  { animation: fadeIn  0.8s cubic-bezier(0.4,0,0.2,1) forwards; }
.floating          { animation: float   4s   ease-in-out infinite; }
.pulsing           { animation: pulse   3s   ease-in-out infinite; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* -- Custom scrollbar (no MudBlazor equivalent) -- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--mud-palette-background); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4FD0CB 0%, #3A8F8A 100%);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #3A8F8A 0%, #4FD0CB 100%);
}

/* -- Dashboard gradient header -- */
.dashboard-header {
    background: linear-gradient(135deg, #4FD0CB 0%, #3A8F8A 100%);
    position: relative;
    overflow: hidden;
}

.dashboard-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.12) 0%, transparent 25%);
    z-index: 1;
}

.dashboard-header > * {
    position: relative;
    z-index: 2;
}

/* =====================================================
   Radzen Scheduler → PetAware Theme Overrides
   Scoped to .petaware-scheduler wrapper.
   Uses MudBlazor CSS variables for automatic light/dark support.
   ===================================================== */

/* --- Main scheduler container --- */
.petaware-scheduler .rz-scheduler {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius);
    font-family: "Google Sans", "Roboto", sans-serif;
}

/* --- Navigation bar (today, prev, next, title) --- */
.petaware-scheduler .rz-scheduler-nav {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
}

.petaware-scheduler .rz-scheduler-nav-title {
    color: var(--mud-palette-text-primary) !important;
}

.petaware-scheduler .rz-scheduler-nav .rz-button {
    color: var(--mud-palette-text-primary) !important;
    background-color: transparent !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius);
    transition: background-color 0.2s;
}

.petaware-scheduler .rz-scheduler-nav .rz-button:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    color: var(--mud-palette-primary) !important;
}

.petaware-scheduler .rz-scheduler-nav .rz-button.rz-today {
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

/* Spacing between view buttons (Day, Week, Month, Year) */
.petaware-scheduler .rz-scheduler-nav-views {
    gap: 6px;
}

/* Also add spacing in the prev/next/today group */
.petaware-scheduler .rz-scheduler-nav-prev-next {
    gap: 6px;
}

/* Active view button in nav */
.petaware-scheduler .rz-scheduler-nav .rz-button.rz-primary.rz-state-active,
.petaware-scheduler .rz-scheduler-nav .rz-button.rz-primary {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-color: var(--mud-palette-primary) !important;
}

/* --- View header row (day names / column headers) --- */
.petaware-scheduler .rz-view-header,
.petaware-scheduler .rz-slot-header,
.petaware-scheduler .rz-slot-hour-header {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500;
    font-size: 0.8125rem;
    border-color: var(--mud-palette-divider) !important;
}

/* --- Cells / slots --- */
.petaware-scheduler .rz-slot {
    border-color: var(--mud-palette-divider) !important;
    background-color: var(--mud-palette-surface) !important;
}

.petaware-scheduler .rz-slot-minor {
    border-color: var(--mud-palette-divider) !important;
}

.petaware-scheduler .rz-slot-title {
    color: var(--mud-palette-text-secondary) !important;
}

.petaware-scheduler .rz-slots {
    border-color: var(--mud-palette-divider) !important;
}

/* --- Today highlight --- */
.petaware-scheduler .rz-today {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06) !important;
}

.petaware-scheduler .rz-today .rz-cell-data {
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

/* --- Other-month days --- */
.petaware-scheduler .rz-other-month .rz-cell-data {
    color: var(--mud-palette-text-disabled) !important;
}

/* --- Month view cells --- */
.petaware-scheduler .rz-month {
    border-color: var(--mud-palette-divider) !important;
    background-color: var(--mud-palette-surface) !important;
}

.petaware-scheduler .rz-week {
    border-color: var(--mud-palette-divider) !important;
}

/* --- Day number links --- */
.petaware-scheduler .rz-cell-data a {
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none;
}

.petaware-scheduler .rz-cell-data a:hover {
    color: var(--mud-palette-primary) !important;
}

/* --- Year view --- */
.petaware-scheduler .rz-year-month {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* --- Events / appointments --- */
.petaware-scheduler .rz-event {
    border-radius: var(--mud-default-borderradius);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s, transform 0.15s;
}

.petaware-scheduler .rz-event:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.petaware-scheduler .rz-event-content {
    color: inherit;
}

/* "Show more" events link */
.petaware-scheduler .rz-event-list-btn {
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
}

/* --- View panels / content area --- */
.petaware-scheduler .rz-view,
.petaware-scheduler .rz-view-content {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.petaware-scheduler .rz-tabview-panel,
.petaware-scheduler .rz-tabview-panels {
    background-color: var(--mud-palette-surface) !important;
}

/* --- Tab strip (if used instead of nav buttons) --- */
.petaware-scheduler .rz-tabview-nav {
    background-color: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.petaware-scheduler .rz-tabview-nav li .rz-tabview-nav-link {
    color: var(--mud-palette-text-secondary) !important;
    background-color: transparent !important;
    border: none !important;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
}

.petaware-scheduler .rz-tabview-nav li .rz-tabview-nav-link:hover {
    color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}

.petaware-scheduler .rz-tabview-nav li.rz-tabview-selected .rz-tabview-nav-link,
.petaware-scheduler .rz-tabview-nav li.rz-state-active .rz-tabview-nav-link {
    color: var(--mud-palette-primary) !important;
    border-bottom: 2px solid var(--mud-palette-primary) !important;
    background-color: transparent !important;
}

/* --- State classes --- */
.petaware-scheduler .rz-state-highlight {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
}

.petaware-scheduler .rz-state-active {
    color: var(--mud-palette-primary) !important;
}

/* --- All borders inside the scheduler --- */
.petaware-scheduler .rz-scheduler table,
.petaware-scheduler .rz-scheduler td,
.petaware-scheduler .rz-scheduler th {
    border-color: var(--mud-palette-divider) !important;
}

/* --- Weekend cells subtle tint --- */
.petaware-scheduler .rz-weekend {
    background-color: rgba(var(--mud-palette-text-disabled-rgb, 0,0,0), 0.02) !important;
}

/* --- Scrollbars inside scheduler --- */
.petaware-scheduler .rz-scheduler ::-webkit-scrollbar {
    width: 6px;
}

.petaware-scheduler .rz-scheduler ::-webkit-scrollbar-track {
    background: var(--mud-palette-background);
}

.petaware-scheduler .rz-scheduler ::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-text-disabled);
    border-radius: 3px;
}