@import url('css/calendar.css');
@import url('css/calendar-grid.css');
@import url('css/settings.css');
@import url('css/bottom-navigation.css');
@import url('css/toast.css');
@import url('css/children.css');
@import url('css/children-popup.css');
@import url('css/toast-notifications.css');
@import url('css/mobile-responsive.css');
@import url('css/shared-components.css');
@import url('css/resizable-handle.css');
@import url('css/create-playdate.css');
@import url('css/create-event.css');
@import url('css/notifications.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
    :root {
        /* Neutral Background Colors */
        --background: 0 0% 100%;
        --foreground: 220 25% 20%;

        --card: 0 0% 100%;
        --card-foreground: 220 25% 20%;

        --popover: 0 0% 100%;
        --popover-foreground: 220 25% 20%;

        /* Sky Blue Primary */
        --primary: 199 95% 74%;
        --primary-foreground: 220 25% 20%;
        --primary-glow: 199 95% 85%;

        /* Warm Yellow Secondary */
        --secondary: 54 91% 61%;
        --secondary-foreground: 220 25% 20%;

        /* Soft background for cards */
        --muted: 210 40% 98%;
        --muted-foreground: 220 15% 45%;

        /* Pink Coral Accent */
        --accent: 348 83% 81%;
        --accent-foreground: 220 25% 20%;

        /* Soft red for alerts */
        --destructive: 0 84% 85%;
        --destructive-foreground: 220 25% 20%;

        --border: 195 30% 88%;
        --input: 195 30% 92%;
        --ring: 199 95% 74%;

        --radius: 1.5rem;

        /* Gradients */
        --gradient-primary: linear-gradient(135deg, hsl(199 95% 74%), hsl(199 95% 85%));
        --gradient-secondary: linear-gradient(135deg, hsl(54 91% 61%), hsl(48 91% 70%));
        --gradient-accent: linear-gradient(135deg, hsl(348 83% 81%), hsl(340 83% 88%));
        --gradient-background: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
        --gradient-fun: linear-gradient(135deg, hsl(199 95% 74%), hsl(54 91% 61%), hsl(348 83% 81%));

        /* Shadows for depth */
        --shadow-soft: 0 4px 20px -8px hsl(207 89% 86% / 0.3);
        --shadow-medium: 0 8px 30px -12px hsl(207 89% 86% / 0.4);
        --shadow-strong: 0 16px 40px -16px hsl(207 89% 86% / 0.5);

        /* Mobile-specific spacing */
        --touch-target: 44px;
        --mobile-padding: 1rem;
        --mobile-gap: 0.75rem;
    }

    .dark {
        /* Dark theme */
        --background: 220 25% 8%;
        --foreground: 195 100% 95%;

        --card: 220 25% 10%;
        --card-foreground: 195 100% 95%;

        --popover: 220 25% 10%;
        --popover-foreground: 195 100% 95%;

        --primary: 199 75% 65%;
        --primary-foreground: 220 25% 8%;
        --primary-glow: 199 75% 75%;

        --secondary: 54 80% 55%;
        --secondary-foreground: 220 25% 8%;

        --muted: 220 25% 15%;
        --muted-foreground: 220 15% 65%;

        --accent: 348 70% 70%;
        --accent-foreground: 220 25% 8%;

        --destructive: 0 70% 75%;
        --destructive-foreground: 220 25% 8%;

        --border: 220 25% 18%;
        --input: 220 25% 18%;
        --ring: 199 75% 65%;

        --gradient-primary: linear-gradient(135deg, hsl(199 75% 65%), hsl(199 75% 75%));
        --gradient-secondary: linear-gradient(135deg, hsl(54 80% 55%), hsl(48 80% 65%));
        --gradient-accent: linear-gradient(135deg, hsl(348 70% 70%), hsl(340 70% 80%));
        --gradient-background: linear-gradient(180deg, hsl(220 25% 8%), hsl(220 25% 12%));
        --gradient-fun: linear-gradient(135deg, hsl(199 75% 65%), hsl(54 80% 55%), hsl(348 70% 70%));

        --shadow-soft: 0 4px 20px -8px hsl(207 60% 70% / 0.2);
        --shadow-medium: 0 8px 30px -12px hsl(207 60% 70% / 0.3);
        --shadow-strong: 0 16px 40px -16px hsl(207 60% 70% / 0.4);
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        font-family: 'Inter', sans-serif;
    }

    .font-playdate {
        font-family: 'Fredoka', sans-serif;
    }

    /* Mobile optimizations */
    .mobile-container {
        @apply px-4 py-2 max-w-sm mx-auto;
    }

    .touch-target {
        min-height: var(--touch-target);
        min-width: var(--touch-target);
    }

    /* Smooth transitions for mobile interactions */
    .smooth-transition {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Custom scrollbar for mobile */
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }

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

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-muted-foreground/30 rounded-full;
    }
}

html,
body {
    font-family: 'Inter', sans-serif;
}

html {
    overflow-y: scroll;
}

/* Ensure consistent scrollbar width across all browsers */
body {
    scrollbar-gutter: stable;
    /* Reserve space for scrollbar */
}

/* Global app background to match Playdate Main across all pages */
body {
    background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 100%) !important;
}

/* Override body and html background when CreateEvent page is present */
html:has(.create-event-page),
body:has(.create-event-page),
.app-container:has(.create-event-page),
.main-content:has(.create-event-page) {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f7fa 100%) !important;
}

/* Page backgrounds across all tabs/pages */
.home-page,
.details-page,
.page-container,
.messages-page-wrapper,
.friends-page,
.friends-page-wrapper,
.calendar-page,
.calendar-page-wrapper,
.settings-page,
.settings-page-wrapper,
.create-event-page {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f7fa 100%) !important;
}

/* Children page */
.children-page-container {
    background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 100%) !important;
    background-attachment: fixed !important;
}

@media (max-width: 768px) {

    body:has(.children-page-container),
    html:has(.children-page-container) {
        background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 100%) !important;
        background-attachment: fixed !important;
    }
}

.calendar-page-wrapper {
    background: #F5FCFF !important;
}

.app-container {
    padding-bottom: 80px;
    min-height: 100vh;
    box-sizing: border-box;
}

a,
.btn-link {
    color: hsl(var(--primary));
}

.btn-primary {
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem hsl(var(--ring));
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Toggle Switch Styles for Children page */
.alert-switch {
    width: 2.75rem;
    height: 1.5rem;
    background: #e5e7eb;
    border: 2px solid transparent;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
}

.alert-switch:hover {
    background: #d1d5db;
}

.alert-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.alert-switch:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.alert-switch-on {
    background: #3b82f6;
}

.alert-switch-off {
    background: #e5e7eb;
}

.switch-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    transition: all 0.2s ease;
}

.switch-thumb-on {
    transform: translateX(1.25rem);
    background: #3b82f6;
}

.switch-thumb-off {
    transform: translateX(0);
    background: white;
}

/* iOS-specific: Prevent blue background from showing on scroll and disable overscroll bounce */
@supports (-webkit-touch-callout: none) {

    html,
    body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        position: relative;
        overflow-x: hidden;
    }

    /* Prevent overscroll on all scrollable containers and elements (iOS only) */
    * {
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
    }

    /* Additional touch-action for scrollable elements (iOS only) */
    [style*="overflow"],
    .scrollable,
    .overflow-auto,
    .overflow-y-auto,
    .overflow-x-auto,
    .overflow-scroll,
    .overflow-y-scroll,
    .overflow-x-scroll {
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
    }

    .app-container,
    .main-content,
    .details-page,
    .friends-page-wrapper,
    .calendar-page,
    .calendar-page-wrapper,
    .settings-page,
    .settings-page-wrapper,
    .children-page-container {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
    }

    .home-page,
    .friends-page,
    .messages-page-wrapper {
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
    }

    .page-container,
    .create-event-page {
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
    }
    
    body:has(.page-container),
    html:has(.page-container),
    body:has(.create-event-page),
    html:has(.create-event-page) {
        background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f7fa 100%) !important;
        background-color: #e0f2fe !important;
        background-attachment: fixed !important;
    }

    body:has(.messages-page-wrapper),
    html:has(.messages-page-wrapper) {
        background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f7fa 100%) !important;
        background-color: #e0f2fe !important;
        background-attachment: fixed !important;
    }

    body:has(.home-page),
    html:has(.home-page),
    body:has(.friends-page),
    html:has(.friends-page) {
        background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 100%) !important;
        background-color: #f0f9ff !important;
        background-attachment: fixed !important;
    }

    :root:has(.page-container),
    :root:has(.messages-page-wrapper),
    :root:has(.create-event-page) {
        background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f7fa 100%) !important;
    }

    :root:has(.home-page),
    :root:has(.friends-page) {
        background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 100%) !important;
    }

    :root:not(:has(.page-container)):not(:has(.create-event-page)):not(:has(.messages-page-wrapper)):not(:has(.home-page)):not(:has(.friends-page)) {
        background: #ffffff !important;
    }

    .mobile-tab-content,
    .mobile-calendar-card,
    .mobile-week-content,
    .mobile-agenda-item,
    .mobile-manage-section,
    .page-content,
    .content,
    main,
    section {
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        overscroll-behavior-x: none !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
    }

    body.keyboard-open,
    html.keyboard-open {
        height: auto !important;
        min-height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.keyboard-open .app-container,
    body.keyboard-open .main-content {
        min-height: auto !important;
        height: auto !important;
    }
}