/*
 * Blazor.Components - Component-specific styles
 * This file contains animations, keyframes, and component-specific CSS
 * that should be included by consuming applications.
 * 
 * Usage: In your app's CSS, add:
 *   @import "_content/Blazor.Components/components.css";
 */

/* ============================================
   Animation Keyframes
   ============================================ */

/* Drawer animations */
@keyframes drawer-slide-in-from-bottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes drawer-slide-out-to-bottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@keyframes drawer-slide-in-from-top {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes drawer-slide-out-to-top {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@keyframes drawer-slide-in-from-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes drawer-slide-out-to-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes drawer-slide-in-from-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes drawer-slide-out-to-right {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Overlay animations */
@keyframes overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes overlay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Dialog animations */
@keyframes dialog-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dialog-fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

/* Dropdown animations */
@keyframes dropdown-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dropdown-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}

/* Popover animations */
@keyframes popover-fade-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes popover-fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.96); }
}

/* ============================================
   Drawer Component Styles (vaul-inspired)
   ============================================ */

/* Drawer base styles */
[data-slot="drawer-content"] {
    touch-action: none;
    will-change: transform;
    /* CSS containment for rendering performance (no 'paint' - allows ::after to extend beyond) */
    contain: layout style;
    /* Prevent text selection during drag */
    -webkit-user-select: none;
    user-select: none;
}

/* Only apply will-change when drawer is open (avoid memory overhead when closed) */
[data-slot="drawer-content"][data-state="open"] {
    will-change: transform;
}

[data-slot="drawer-content"][data-state="closed"] {
    will-change: auto;
}

/* Extend drawer background beyond visible area to cover gaps during over-drag */
[data-slot="drawer-content"]::after {
    content: '';
    position: absolute;
    background: inherit;
    background-color: inherit;
}

/* Bottom drawer: extend below */
[data-slot="drawer-content"][data-drawer-direction="bottom"]::after {
    top: 100%;
    left: 0;
    right: 0;
    height: 200%;
}

/* Top drawer: extend above */
[data-slot="drawer-content"][data-drawer-direction="top"]::after {
    bottom: 100%;
    left: 0;
    right: 0;
    height: 200%;
}

/* Left drawer: extend to the left */
[data-slot="drawer-content"][data-drawer-direction="left"]::after {
    right: 100%;
    top: 0;
    bottom: 0;
    width: 200%;
}

/* Right drawer: extend to the right */
[data-slot="drawer-content"][data-drawer-direction="right"]::after {
    left: 100%;
    top: 0;
    bottom: 0;
    width: 200%;
}

/* Initial closed state - position off-screen */
[data-slot="drawer-content"][data-drawer-direction="bottom"][data-state="closed"] {
    transform: translateY(100%);
}
[data-slot="drawer-content"][data-drawer-direction="top"][data-state="closed"] {
    transform: translateY(-100%);
}
[data-slot="drawer-content"][data-drawer-direction="left"][data-state="closed"] {
    transform: translateX(-100%);
}
[data-slot="drawer-content"][data-drawer-direction="right"][data-state="closed"] {
    transform: translateX(100%);
}

/* Drawer overlay - use transition for smooth fade */
[data-slot="drawer-overlay"] {
    transition: opacity 200ms ease-out;
    /* GPU acceleration for opacity animation */
    will-change: opacity;
    /* Ensure overlay doesn't capture pointer events when closed */
    backface-visibility: hidden;
}

/* Drawer content animations - use transition for smoother animation */
[data-slot="drawer-content"] {
    transition: transform 200ms ease-out;
}

/* Open state - slide into view */
[data-slot="drawer-content"][data-state="open"] {
    transform: translate3d(0, 0, 0);
}

/* Drawer handle hover effect */
[data-slot="drawer-handle"]:hover > div,
[data-slot="drawer-handle"]:active > div {
    opacity: 1;
}

/* Prevent user selection during drag on fine pointer devices */
@media (hover: hover) and (pointer: fine) {
    [data-slot="drawer-content"] {
        user-select: none;
    }
}

/* ============================================
   Dialog Component Styles
   ============================================ */

[data-slot="dialog-overlay"][data-state="open"] {
    animation: overlay-fade-in 200ms ease-out forwards;
}

[data-slot="dialog-overlay"][data-state="closed"] {
    animation: overlay-fade-out 200ms ease-in forwards;
}

[data-slot="dialog-content"][data-state="open"] {
    animation: dialog-fade-in 200ms ease-out forwards;
}

[data-slot="dialog-content"][data-state="closed"] {
    animation: dialog-fade-out 200ms ease-in forwards;
}

/* ============================================
   Dropdown Menu Component Styles
   ============================================ */

[data-slot="dropdown-menu-content"][data-state="open"] {
    animation: dropdown-fade-in 150ms ease-out forwards;
}

[data-slot="dropdown-menu-content"][data-state="closed"] {
    animation: dropdown-fade-out 150ms ease-in forwards;
}

/* ============================================
   Popover Component Styles
   ============================================ */

[data-slot="popover-content"][data-state="open"] {
    animation: popover-fade-in 150ms ease-out forwards;
}

[data-slot="popover-content"][data-state="closed"] {
    animation: popover-fade-out 150ms ease-in forwards;
}

/* ============================================
   Stepper Component Styles
   ============================================ */

/* Steps are hidden by default */
[data-slot="stepper-step"] {
    display: none;
}

/* Active step is visible */
[data-slot="stepper-step"][data-state="active"] {
    display: block;
}

/* ============================================
   Input Component Styles
   ============================================ */

/* Hide browser native password reveal icons */
/* Microsoft Edge / Internet Explorer */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* Chrome / Safari / Opera (WebKit) */
/* Note: Do NOT hide ::-webkit-textfield-decoration-container - it breaks text input on iOS Safari */
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide the native password toggle button (Safari 15+) */
input[type="password"]::-webkit-password-toggle-button {
    display: none !important;
}

/* ============================================
   Progress Component Styles
   ============================================ */

/* Progress indeterminate animation */
@keyframes progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-progress-indeterminate {
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* ============================================
   Toast Component Styles
   ============================================ */

/* Toast slide-in animation */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast slide-in from top (for top positions) */
@keyframes toast-in-top {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast slide-out animation */
@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Toast animation classes */
.animate-toast-in {
    animation: toast-in 0.3s ease-out forwards;
}

.animate-toast-out {
    animation: toast-out 0.3s ease-in forwards;
}

/* Position-aware animations */
[data-toaster][data-position^="top"] [data-toast][data-state="open"] {
    animation: toast-in-top 0.3s ease-out forwards;
}[data-toaster][data-position^="bottom"] [data-toast][data-state="open"] {
    animation: toast-in 0.3s ease-out forwards;
}

[data-toast][data-state="closed"] {
    animation: toast-out 0.3s ease-in forwards;
}

/* ============================================
   Sidebar Component Styles
   ============================================ */

/* Sidebar wrapper - CSS custom properties for dimensions */
[data-slot="sidebar-wrapper"] {
    --sidebar-width: 16rem;
    --sidebar-width-icon: 3rem;
}

/* Sidebar container transitions */
[data-slot="sidebar-container"] {
    transition: width 200ms ease-linear, 
                left 200ms ease-linear, 
                right 200ms ease-linear;
}

/* Sidebar gap transitions */
[data-slot="sidebar-gap"] {
    transition: width 200ms ease-linear;
}

/* Sidebar group label transitions (for collapse animation) */
[data-slot="sidebar-group-label"] {
    transition: margin 200ms ease-linear, 
                opacity 200ms ease-linear;
}

/* Sidebar menu button transitions (for size changes in collapsed mode) */
[data-slot="sidebar-menu-button"] {
    transition: width 200ms ease-linear,
                height 200ms ease-linear,
                padding 200ms ease-linear;
}

/* Sidebar rail hover effect */
[data-slot="sidebar-rail"]:hover::after {
    background-color: var(--color-border);
}

/* Sidebar content scroll behavior */
[data-slot="sidebar-content"] {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

[data-slot="sidebar-content"]::-webkit-scrollbar {
    width: 6px;
}

[data-slot="sidebar-content"]::-webkit-scrollbar-track {
    background: transparent;
}

[data-slot="sidebar-content"]::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;
}

[data-slot="sidebar-content"]::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-muted-foreground);
}

/* Remove active background from parent menu buttons when they have an active child */
[data-sidebar="menu-item"]:has([data-sidebar="menu-sub-button"][data-active="true"]) [data-sidebar="menu-button"][data-active="true"] {
    background-color: transparent !important;
}

[data-sidebar="menu-item"]:has([data-sidebar="menu-sub-button"][data-active="true"]) [data-sidebar="menu-button"][data-active="true"]::before {
    display: none !important;
}

/* ============================================
   NavTabs Component Styles
   ============================================ */

/* Hide scrollbar utility - allows scrolling without visible scrollbar */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}

/* Smooth horizontal scrolling for touch devices */
[data-slot="nav-tabs"] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ============================================
   Card Component Styles
   ============================================ */

/* CardHeader: Switch to grid layout when CardAction is present */
[data-slot="card-header"]:has([data-slot="card-action"]) {
    display: grid;
    grid-template-columns: 1fr auto;
}

/* CardTitle and CardDescription: Stay in first column when CardAction is present */
[data-slot="card-header"]:has([data-slot="card-action"]) [data-slot="card-title"],
[data-slot="card-header"]:has([data-slot="card-action"]) [data-slot="card-description"] {
    grid-column: 1;
}