/* Custom styles for Plex Dashboard */

/* Main theme colors */
:root {
    --plex-background: #11254de0; /* Changed to dark grey */
    --plex-accent: #e5a00d; /* This is already the requested accent color */
    --plex-text-light: #ffffff;
    --plex-text-dark: #1a1a1a;
    --plex-card-bg: #ffffff;
    --plex-header-bg: #1e2022;
}

/* Override htmx indicators for smoother loading experience */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Pulse animation for loading states */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom card hover effects */
.media-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Plex-inspired color accents */
.plex-orange {
    color: var(--plex-accent);
}
.bg-plex-orange {
    background-color: var(--plex-accent);
}
.border-plex-orange {
    border-color: var(--plex-accent);
}

/* Custom background and text colors */
.bg-plex {
    background-color: var(--plex-background);
    /* Apply background image with gradient, external noise SVG, and a semi-transparent overlay */
    /* The overlay (first gradient) makes the noise more subtle */
    /* --plex-background (#333333) is rgb(51, 51, 51) */
    background-image: 
        linear-gradient(rgba(51, 51, 51, 0.73), rgba(29, 51, 74, 0.84)), /* Overlay */
        linear-gradient(90deg, var(--plex-background), transparent), 
        url(https://grainy-gradients.vercel.app/noise.svg);
    /* Keep the tiling */
}
.bg-plex-header {
    background-color: var(--plex-header-bg);
}
.text-plex-accent {
    color: var(--plex-accent);
}

/* Custom background for sections with noise */
.bg-section-noise {
    background-color: #292524; /* Equivalent to Tailwind's stone-800 */
    /* Apply background image with gradient, external noise SVG, and a semi-transparent overlay */
    /* Overlay uses stone-800 color (rgb(41, 37, 36)) with opacity */
    background-image: 
        linear-gradient(rgba(41, 37, 36, 0.8), rgba(41, 37, 36, 0.8)), /* Overlay */
        linear-gradient(90deg, #292524, transparent), 
        url(https://grainy-gradients.vercel.app/noise.svg);
    /* Keep the tiling */
}

.bg-subsection-noise {
    background-color: var(--plex-background);
    /* Apply background image with gradient, external noise SVG, and a semi-transparent overlay */
    /* The overlay (first gradient) makes the noise more subtle */
    /* --plex-background (#333333) is rgb(51, 51, 51) */
    background-image: 
    linear-gradient(rgba(41, 37, 36, 0.8), rgba(41, 37, 36, 0.8)), /* Overlay */
    linear-gradient(90deg, #2925244b, transparent), 
        url(https://grainy-gradients.vercel.app/noise.svg);
    /* Keep the tiling */
}

/* Button styles */
.btn-plex {
    background-color: var(--plex-accent);
    color: var(--plex-text-dark);
    transition: all 0.2s ease;
}
.btn-plex:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Responsive font sizes */
@media (max-width: 640px) {
    .responsive-text {
        font-size: 0.875rem;
    }
}