/**
 * @file PHPFlasher iOS Theme Styles
 * @description CSS styling for Apple iOS-inspired notifications
 * @author Younes ENNAJI
 */

/**
 * PHPFlasher - iOS Theme
 *
 * Clean, sleek notifications inspired by Apple's iOS design language.
 * Mimics the native notifications seen on iPhone and iPad devices.
 */
.fl-ios {
    /* Theme variables - Define the visual appearance of iOS notifications */

    /* Base colors and appearance */
    --ios-bg-light: rgba(255, 255, 255);  /* Semi-transparent white in light mode */
    --ios-bg-dark: rgba(30, 30, 30);      /* Semi-transparent dark in dark mode */
    --ios-text-light: #000000;                  /* Black text in light mode */
    --ios-text-secondary-light: #6e6e6e;        /* Gray secondary text in light mode */
    --ios-text-dark: #ffffff;                   /* White text in dark mode */
    --ios-text-secondary-dark: #a8a8a8;         /* Light gray secondary text in dark mode */
    --ios-border-radius: 13px;                  /* iOS notification corner radius */
    --ios-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); /* Light shadow in light mode */
    --ios-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.35); /* Darker shadow in dark mode */
    --ios-icon-size: 18px;                      /* Size for icons */
    --ios-blur: 30px;                           /* Amount of backdrop blur for glass effect */

    /* Type-specific colors following iOS palette */
    --ios-success: #34c759;                     /* iOS green */
    --ios-info: #007aff;                        /* iOS blue */
    --ios-warning: #ff9500;                     /* iOS orange */
    --ios-error: #ff3b30;                       /* iOS red */

    /* Animation timing */
    --ios-animation-duration: 0.4s;             /* Duration for entrance animation */
}

/**
 * Slide-in entrance animation for iOS theme
 * Combines movement, scaling, and fade for realistic iOS appearance
 */
@keyframes iosSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.96); /* Start smaller and above */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);        /* End at normal size and position */
    }
}

/**
 * Content expansion animation
 * Creates a subtle unfold effect for the notification content
 */
@keyframes iosExpand {
    0% {
        max-height: 0;                          /* Start collapsed */
        opacity: 0;                             /* Start hidden */
    }
    100% {
        max-height: 100px;                      /* Expand to fit content */
        opacity: 1;                             /* Fade in */
    }
}

/**
 * Base iOS theme styling
 */
.fl-ios {
    position: relative;
    margin: 10px 0;                             /* Space between notifications */
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Apple system fonts */
    animation: iosSlideIn var(--ios-animation-duration) cubic-bezier(0.23, 1, 0.32, 1); /* iOS-like easing */
    will-change: transform, opacity;            /* Optimize for animation performance */

    /**
     * Main notification container
     * Replicates iOS notification card with frosted glass effect
     */
    .fl-ios-notification {
        background-color: var(--ios-bg-light);
        color: var(--ios-text-light);
        border-radius: var(--ios-border-radius);
        box-shadow: var(--ios-shadow);
        padding: 12px 15px;
        position: relative;

        /* iOS-typical frosted glass effect */
        backdrop-filter: blur(var(--ios-blur));
        -webkit-backdrop-filter: blur(var(--ios-blur));
    }

    /**
     * Header section
     * Contains app icon, app name, and timestamp
     */
    .fl-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        padding-right: 20px;                    /* Space for close button */
    }

    /**
     * App icon container
     * Square with rounded corners like iOS app icons
     */
    .fl-app-icon {
        width: 22px;                            /* Standard iOS notification icon size */
        height: 22px;
        border-radius: 5px;                     /* iOS app icon corner radius */
        background-color: currentColor;         /* Color based on notification type */
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;                         /* Prevent icon from shrinking */
    }

    /**
     * SVG icon styling
     * White icon on colored background
     */
    .fl-icon-svg {
        color: white;                           /* Icon is always white */
        width: 14px;
        height: 14px;
    }

    /**
     * App info container
     * Holds app name and timestamp
     */
    .fl-app-info {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex: 1;
    }

    /**
     * App name styling
     * Bold text like in iOS notifications
     */
    .fl-app-name {
        font-weight: 600;                       /* Semi-bold like iOS */
        font-size: 0.85rem;                     /* iOS app name size */
    }

    /**
     * Time display
     * Shows current time in iOS style
     */
    .fl-time {
        font-size: 0.75rem;                     /* Smaller text for time */
        color: var(--ios-text-secondary-light); /* Gray secondary text */
        margin-left: 5px;
        flex-shrink: 0;                         /* Prevent time from wrapping */
    }

    /**
     * Content/message area
     * Contains the notification message
     */
    .fl-content {
        animation: iosExpand 0.3s forwards;     /* Expand content after header appears */
        animation-delay: 0.1s;                  /* Slight delay for sequenced animation */
        overflow: hidden;                       /* Contain expansion animation */
    }

    /**
     * Message styling
     * Main notification text
     */
    .fl-message {
        font-size: 0.95rem;                     /* iOS notification text size */
        line-height: 1.3;
        margin: 0;
        padding-right: 15px;                    /* Space for close button */
    }

    /**
     * Close button styling
     * Circular close button like in iOS
     */
    .fl-close {
        position: absolute;                     /* Positioned in top right */
        top: 10px;
        right: 12px;
        width: 18px;                            /* Small circular button */
        height: 18px;
        border-radius: 50%;                     /* Perfectly circular */
        border: none;
        background-color: rgba(0, 0, 0, 0.1);   /* Subtle background */
        color: var(--ios-text-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
        opacity: 0.7;                           /* Semi-transparent by default */
        cursor: pointer;
        transition: opacity 0.2s;
        padding: 0;

        &:hover, &:focus {
            opacity: 1;                         /* Full opacity on hover/focus */
        }
    }

    /**
     * Type-specific styling
     * Each notification type gets its own app icon color
     */
    &.fl-success {
        .fl-app-icon {
            color: var(--ios-success);          /* Green for success */
        }
    }

    &.fl-info {
        .fl-app-icon {
            color: var(--ios-info);             /* Blue for info */
        }
    }

    &.fl-warning {
        .fl-app-icon {
            color: var(--ios-warning);          /* Orange for warning */
        }
    }

    &.fl-error {
        .fl-app-icon {
            color: var(--ios-error);            /* Red for error */
        }
    }

    /**
     * RTL Support
     * Right-to-left language direction support
     */
    &.fl-rtl {
        direction: rtl;

        .fl-header {
            padding-right: 0;
            padding-left: 20px;                 /* Swap padding for RTL */
        }

        .fl-app-icon {
            margin-right: 0;
            margin-left: 8px;                   /* Swap margins for RTL */
        }

        .fl-time {
            margin-left: 0;
            margin-right: 5px;                  /* Swap margins for RTL */
        }

        .fl-message {
            padding-right: 0;
            padding-left: 15px;                 /* Swap padding for RTL */
        }

        .fl-close {
            right: auto;
            left: 12px;                         /* Move close button to left for RTL */
        }
    }

    /**
     * Accessibility
     * Respects reduced motion preferences
     */
    @media (prefers-reduced-motion: reduce) {
        animation: none;                        /* Disable entrance animation */

        .fl-content {
            animation: none;                    /* Disable content expansion */
            max-height: none;                   /* Show full content */
            opacity: 1;                         /* Ensure content is visible */
        }
    }

    /**
     * Mobile optimization
     * Full width on small screens
     */
    @media screen and (max-width: 480px) {
        width: 100%;                            /* Full width on mobile */
    }
}

/**
 * Dark mode support
 * iOS-style dark appearance
 */
body.fl-dark .fl-ios,
html.fl-dark .fl-ios,
.fl-ios.fl-auto-dark {
    .fl-ios-notification {
        background-color: var(--ios-bg-dark);   /* Dark, semi-transparent background */
        color: var(--ios-text-dark);            /* Light text */
        box-shadow: var(--ios-shadow-dark);     /* Stronger shadow */
    }

    .fl-time {
        color: var(--ios-text-secondary-dark);  /* Lighter secondary text */
    }

    .fl-close {
        background-color: rgba(255, 255, 255, 0.2); /* Lighter background for close button */
        color: var(--ios-text-dark);            /* Light text color */
    }
}