/**
 * EN: High Priority Theme Improvements
 * VI: Cải tiến theme ưu tiên cao
 * 
 * Add these improvements to globals.css for better UX
 * Thêm các cải tiến này vào globals.css để UX tốt hơn
 */

/* ============================================
   1. Smooth Scroll Behavior
   ============================================ */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    /* Disable for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        /* Also disable all animations */
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ============================================
   2. Custom Text Selection (X.ai Blue)
   ============================================ */
@layer base {
    ::selection {
        background-color: var(--accent-primary);
        color: white;
    }

    ::-moz-selection {
        background-color: var(--accent-primary);
        color: white;
    }
}

/* ============================================
   3. Custom Scrollbar (X.ai Minimal)
   ============================================ */
@layer base {

    /* Webkit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-secondary);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--glass-border-default);
        border-radius: var(--radius-full);
        transition: background var(--duration-fast) var(--ease-snap);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--glass-border-hover);
    }

    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--glass-border-default) var(--bg-secondary);
    }
}

/* ============================================
   4. Skeleton Loading Animation
   ============================================ */
@keyframes skeleton {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@layer utilities {
    .skeleton {
        background: linear-gradient(90deg,
                var(--glass-bg-subtle) 0%,
                var(--glass-bg-default) 50%,
                var(--glass-bg-subtle) 100%);
        background-size: 200% 100%;
        animation: skeleton 1.5s ease-in-out infinite;
        border-radius: var(--radius-md);
    }

    /* Skeleton variants */
    .skeleton-text {
        height: 1em;
        margin-bottom: 0.5em;
    }

    .skeleton-title {
        height: 2em;
        margin-bottom: 1em;
    }

    .skeleton-avatar {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-full);
    }

    .skeleton-card {
        height: 200px;
        border-radius: var(--radius-lg);
    }
}

/* ============================================
   5. Focus-Within States for Form Groups
   ============================================ */
@layer components {
    .glass-card:focus-within {
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.2);
        transition: all var(--duration-fast) var(--ease-snap);
    }

    .form-group:focus-within label {
        color: var(--accent-primary);
        transition: color var(--duration-fast) var(--ease-snap);
    }
}

/* ============================================
   6. Print Styles
   ============================================ */
@media print {
    body {
        background: white;
        color: black;
    }

    .glass-card {
        background: white;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    /* Hide non-essential elements */
    nav,
    footer,
    .no-print,
    button,
    .auth-controls {
        display: none !important;
    }

    /* Ensure readable text */
    * {
        color: black !important;
        background: white !important;
    }

    a {
        text-decoration: underline;
    }

    /* Show link URLs after text */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================
   7. Button Press Micro-interaction
   ============================================ */
@layer utilities {
    .btn-press {
        transition: transform var(--duration-fast) var(--ease-snap);
    }

    .btn-press:active:not(:disabled) {
        transform: scale(0.98);
    }
}