/* ============================================================
   Fundit Visual Refresh 2026 — Shimmer & Hover Effects
   Premium glasreflection + glow system
   ============================================================ */

/* --- Glasreflection Shimmer ---
   Diagonal light sweep across elements, Apple-style.
   Applied via .shimmer class. Uses ::after pseudo-element
   for zero layout impact. GPU-accelerated via transform. */

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    inset: -100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 40%,
        var(--shimmer-color, rgba(255, 255, 255, 0.4)) 48%,
        var(--shimmer-color, rgba(255, 255, 255, 0.4)) 52%,
        transparent 60%
    );
    transform: translateX(-100%);
}

.shimmer:hover::after {
    animation: fundit-shimmer 1.2s ease-in-out 1;
}

@keyframes fundit-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}


/* --- Hover Glow ---
   Smooth shadow elevation + accent glow on hover.
   Applied via .hover-glow class. */

.hover-glow {
    transition:
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
    will-change: box-shadow, transform;
}

.hover-glow:hover {
    box-shadow: var(--shadow-hover, 0 8px 25px rgba(14, 110, 201, 0.15));
    transform: translateY(-1px);
    border-color: var(--accent-glow, rgba(14, 110, 201, 0.12));
}

.hover-glow:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}


/* --- Telerik Grid Row Hover ---
   Smooth row highlighting on hover */

.k-grid tbody tr {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.k-grid tbody tr:hover {
    background-color: var(--accent-glow, rgba(14, 110, 201, 0.06)) !important;
}


/* --- Telerik Card & Panel Hover ---
   Elevation change on hover */

.k-card,
.k-tilelayout-item {
    transition:
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
}

.k-card:hover,
.k-tilelayout-item:hover {
    box-shadow: var(--shadow-hover, 0 8px 25px rgba(14, 110, 201, 0.15));
    transform: translateY(-2px);
}


/* --- PanelBar Header Hover --- */

.k-panelbar > .k-item > .k-link {
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.k-panelbar > .k-item > .k-link:hover {
    background-color: var(--accent-glow, rgba(14, 110, 201, 0.06)) !important;
    padding-left: calc(1rem + 2px);
}


/* --- Button Hover Enhancement --- */

.k-button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.k-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--accent-glow, rgba(14, 110, 201, 0.15));
}

.k-button:active {
    transform: translateY(0);
}

.k-button.k-primary:hover,
.k-button[style*="ThemeColor"]:hover {
    box-shadow: 0 4px 12px var(--accent-glow, rgba(14, 110, 201, 0.3));
}


/* --- TabStrip Tab Hover --- */

.k-tabstrip-items .k-item {
    transition: color 0.2s ease, border-color 0.2s ease;
}

.k-tabstrip-items .k-item:hover:not(.k-active) {
    color: var(--accent-primary, #0e6ec9) !important;
}


/* --- Auto-apply shimmer to dashboard tiles --- */

.tiles .k-tilelayout-item {
    position: relative;
    overflow: hidden;
}

.tiles .k-tilelayout-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        var(--shimmer-color, rgba(255, 255, 255, 0.3)) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    opacity: 0;
    transition: opacity 0s;
}

.tiles .k-tilelayout-item:hover::before {
    opacity: 1;
    animation: fundit-shimmer-tile 1.2s ease-in-out 1;
}

@keyframes fundit-shimmer-tile {
    0% { left: -75%; opacity: 1; }
    80% { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}


/* ============================================================
   Accessibility: Respect prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .shimmer::after {
        animation: none !important;
        background: none !important;
    }

    .hover-glow:hover,
    .k-card:hover,
    .k-tilelayout-item:hover,
    .k-button:hover {
        transform: none !important;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   Print: No animations, no shadows
   ============================================================ */

@media print {
    .shimmer::after {
        display: none !important;
    }

    .hover-glow,
    .k-card,
    .k-tilelayout-item {
        box-shadow: none !important;
        transform: none !important;
    }
}