@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@tailwind base;

:root {
    /* Bootstrap primary override (synchronized with Tailwind primary: #10B981) */
    --bs-primary: #10B981;
    --bs-primary-rgb: 16,185,129;
    --bs-primary-600: #059669;
    --bs-primary-400: #34d399;
}

@tailwind components;
@tailwind utilities;

@layer base {
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        @apply antialiased;
        background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
        min-height: 100vh;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply tracking-tight font-bold;
    }
}

@layer components {

    /* Premium Glass Card */
    .glass-card {
        @apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-xl rounded-3xl transition-all duration-500;
    }

    .glass-card:hover {
        @apply -translate-y-1 shadow-2xl;
    }

    /* Modern Card */
    .modern-card {
        @apply bg-white rounded-3xl border border-gray-100 shadow-md;
        @apply transition-all duration-500 hover:shadow-2xl hover:border-indigo-200 hover:-translate-y-1;
    }

    /* Stat Card */
    .stat-card {
        @apply modern-card p-8 text-center hover:scale-105 cursor-pointer;
    }

    /* Badge Modern */
    .badge-modern {
        @apply inline-flex items-center gap-2 px-4 py-2 rounded-full;
        @apply text-xs font-bold uppercase tracking-wider backdrop-blur-sm border;
    }

    /* Input Modern */
    .input-modern {
        @apply w-full px-6 py-4 rounded-2xl border-2 border-gray-200;
        @apply bg-white/50 backdrop-blur-sm;
        @apply focus:border-primary-500 focus:ring-4 focus:ring-primary-500/20;
        @apply transition-all duration-300 outline-none;
    }

    /* Button Gradient */
    .btn-gradient {
        @apply relative overflow-hidden rounded-2xl px-8 py-4 font-bold text-white;
        @apply bg-gradient-to-br from-primary-600 to-primary-400;
        @apply shadow-lg shadow-primary-500/40;
        @apply transition-all duration-300;
        @apply hover:-translate-y-0.5 hover:shadow-xl hover:shadow-primary-500/50;
        @apply active:translate-y-0 active:scale-95;
    }

    /* Premium Dark Input */
    .input-dark {
        @apply w-full bg-slate-800/50 border-2 border-slate-700/50 rounded-2xl px-6 py-4 text-white;
        @apply placeholder:text-slate-500 font-medium transition-all duration-300 outline-none;
        @apply focus:border-indigo-500 focus:bg-slate-800 focus:ring-4 focus:ring-indigo-500/10;
    }

    .label-premium {
        @apply text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2 block ml-1;
    }

    .modal-glass-dark {
        @apply bg-slate-900/90 backdrop-blur-3xl border border-white/10 shadow-[0_50px_100px_-20px_rgba(0, 0, 0, 0.5)];
    }

    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-slate-700/50 rounded-full hover:bg-slate-600/50 transition-colors;
    }
}

@layer utilities {
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary-400;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Utility Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.float {
    animation: float 6s ease-in-out infinite;
}

/* ======================================== */
/* MINIMAL MudBlazor Z-Index Fix            */
/* ======================================== */
/* 
   Only override what's absolutely necessary.
   MudBlazor default z-indexes work well, we just need
   to ensure popovers appear above our custom modal-backdrop.
   
   Default MudBlazor z-indexes:
   - Drawer: 1100-1200
   - AppBar: 1100
   - Dialog: 1300
   - Popover: 1200
*/

/* Custom modal backdrops should be below MudBlazor dialogs and popovers */
.modal-backdrop {
    z-index: 1250 !important;
}

/* Popover provider covers the whole screen, so it must not block clicks */
.mud-popover-provider {
    z-index: 1300 !important;
    pointer-events: none !important;
}

/* Individual popovers (dropdowns, menus) receive clicks */
.mud-popover {
    z-index: 1300 !important;
    pointer-events: auto !important;
}

/* ======================================== */
/* FIX: Floating Label Overlap Issue        */
/* ======================================== */
/* When input is focused or has value, ensure label shrinks and moves up */
.mud-input-label {
    transition: transform 0.15s ease-out, font-size 0.15s ease-out, color 0.15s ease-out !important;
    background: transparent !important;
}

/* Label positioning fix for outlined variant when shrunk */
.mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink {
    transform: translate(14px, -9px) scale(0.75) !important;
    background: white !important;
    padding: 0 6px !important;
    z-index: 1 !important;
    max-width: none !important;
}

/* Fix label background for dark theme / overlay backgrounds */
.mud-overlay .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
.mud-dialog .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
.mud-paper .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink {
    background: inherit !important;
    background-color: white !important;
}

/* Ensure label shows completely - NO truncation */
.mud-input-control .mud-input-label-text {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

/* Fix for labels inside indigo/colored paper backgrounds */
.bg-indigo-50\/20 .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
[style*="indigo"] .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink {
    background-color: #eef2ff !important;
}

/* ======================================== */
/* FIX: Custom Overlay Popover Access       */
/* ======================================== */
/* Allow popovers to receive clicks even over custom overlays */
.mud-overlay[style*="z-index: 9999"]~.mud-popover-provider,
.mud-overlay[style*="z-index:9999"]~.mud-popover-provider {
    z-index: 999999 !important;
}

/* Ensure the popover provider root is always on top */
#mudblazor-main-content~.mud-popover-provider,
body>.mud-popover-provider {
    z-index: 1500 !important;
    pointer-events: none;
}

body>.mud-popover-provider .mud-popover {
    pointer-events: auto !important;
}

/* Force picker popups above dialogs */
.mud-picker .mud-popover,
.mud-picker-inline-paper,
div[class*="mud-picker"] {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

/* Ensure all MudBlazor popovers and the popover provider are on top of page elements */
#mudblazor-main-content~.mud-popover-provider,
.mud-popover,
body>.mud-popover-provider,
body>.mud-popover-provider .mud-popover,
div[class*="mud-picker"] {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

/* In extreme stacking-context cases, make the popover fixed so it appears above everything */
.mud-popover,
.mud-picker .mud-popover,
.mud-picker-inline-paper {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Hide floating input labels when any popover is present (modern browsers supporting :has()) */
/* This prevents labels from visually overlapping popovers like the DatePicker */
body:has(.mud-popover) .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
body:has(.mud-popover) .mud-input-label-inputcontrol {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
}

/* Fallback visual cover: ensure popovers have solid header/background and elevation to hide underlying labels */
.mud-popover,
.mud-picker-inline-paper {
    background-clip: padding-box !important;
    background-color: rgba(255,255,255,0.995) !important;
    box-shadow: 0 12px 40px rgba(10,10,10,0.18) !important;
}

/* Keep input labels behind as a backup */
.mud-input-control .mud-input-label-inputcontrol {
    z-index: 0 !important;
}

.mud-popover,
body > .mud-popover-provider,
#mudblazor-main-content ~ .mud-popover-provider,
body > .mud-popover-provider .mud-popover {
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* Safety: force input labels to stay behind popovers */
.mud-input-control .mud-input-label-inputcontrol {
    z-index: 1 !important;
}

/* ======================================== */
/* FIX: DatePicker Dialog Styling           */
/* ======================================== */
.mud-picker-calendar {
    background: white !important;
}

.mud-picker-calendar-container {
    background: white !important;
}

/* Mobile-friendly calendar */
@media (max-width: 600px) {

    /* Larger touch targets for calendar days */
    .mud-picker-calendar-day button {
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 0.95rem !important;
    }

    /* Better spacing for month/year selectors */
    .mud-picker-calendar-header {
        padding: 12px 8px !important;
    }

    /* Larger month/year buttons */
    .mud-picker-calendar-header button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Better calendar container sizing */
    .mud-picker-calendar-container {
        padding: 8px !important;
    }

    /* Larger weekday labels */
    .mud-picker-calendar-header-day {
        font-size: 0.85rem !important;
        padding: 8px 4px !important;
    }
}



/* ======================================== */
/* MODERN TABS STYLING                      */
/* ======================================== */

/* Tab bar container styling */
.modern-tabs .mud-tabs-tabbar-content {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.12);
} 

/* Individual tab styling */
.modern-tabs .mud-tab {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 12px;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

/* Tab hover effect */
.modern-tabs .mud-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}

/* Active tab styling */
.modern-tabs .mud-tab-active {
    background: rgba(255, 255, 255, 0.95);
    color: #059669; /* primary-600 */
    font-weight: 900;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Tab icon styling */
.modern-tabs .mud-tab-icon-text {
    color: inherit;
    margin-right: 8px;
    font-size: 1.25rem;
}

/* Tab slider (indicator) */
.modern-tabs .mud-tab-slider {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

/* Tab panel content */
.modern-tabs .mud-tabs-panels {
    padding: 0;
}

/* Ripple effect enhancement */
.modern-tabs .mud-ripple {
    transition: all 0.3s ease;
}

/* Alternative: Clean minimal style */
.modern-tabs.minimal .mud-tabs-tabbar-content {
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    border: 2px solid #e2e8f0;
}

.modern-tabs.minimal .mud-tab {
    color: #64748b;
    font-weight: 600;
}

.modern-tabs.minimal .mud-tab-active {
    background: white;
    color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Remove duplicate 'Task Manager' in drawer header while keeping the icon visible (styling-only fix) */
.mud-drawer .mud-drawer-header .mud-text {
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.mud-drawer .mud-drawer-header .mud-text > i {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    margin-right: 0.6rem !important;
}

/* Keep it accessible: ensure the drawer still has enough width for the icon and spacing */
.mud-drawer .mud-drawer-header {
    padding-left: 16px;
    padding-right: 16px;
}

/* On very small screens, hide the whole drawer header to save space */
@media (max-width: 480px) {
    .mud-drawer .mud-drawer-header { display: none !important; }
}
.modern-tabs.minimal .mud-tab-slider {
    display: none;
}

/* Alternative: Dark elegant style */
.modern-tabs.dark .mud-tabs-tabbar-content {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px;
    padding: 8px;
    border: 1px solid #334155;
}

.modern-tabs.dark .mud-tab {
    color: rgba(255, 255, 255, 0.6);
}

.modern-tabs.dark .mud-tab-active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.modern-tabs.dark .mud-tab-slider {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}