/**
 * App Content Styles
 *
 * This file contains all styles for content that appears inside .app-content
 * Includes: cards, event viewers, carousels, modals, animations, etc.
 */

/* ===================================================================
   MEDIA UTILITIES
   =================================================================== */

.bg-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===================================================================
   MODALS
   =================================================================== */

.modal-backdrop-dark {
    background-color: var(--bg-backdrop-dark);
}

/* AI Suggestions Modal - Extra Wide */
.ai-suggestions-modal-wide {
    max-width: 900px !important;
}

#qrGeneratorModal img {
    max-height: 50vh;
}

/* ===================================================================
   AUDIO/RECORDING
   =================================================================== */

.recording {
    animation: pulse 1.5s infinite;
    position: relative;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.7);
    }
    70% {
        box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
    }
}

/* ===================================================================
   AI ANIMATIONS
   =================================================================== */

.dancing-robot {
    animation: dance 1s infinite ease-in-out;
}

@keyframes dance {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-5deg);
    }
    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

/* Hide TinyMCE element path indicator */
.mce-statusbar .mce-path,
.tox-statusbar__path,
.tox-statusbar__path-item,
.mce-path-item {
    display: none !important;
}

.mce-statusbar,
.tox-statusbar {
    display: none !important;
}

/* ===================================================================
   FILTER BUTTONS
   Reusable filter button components used across:
   - Dashboard content filtering
   - Media Library type filtering
   - QR Media filtering
   =================================================================== */

/* Filter labels - plain text by default */
.filter-label {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: none;
    background: none;
    transition: color 0.15s ease;
}

.filter-label:hover:not(.disabled) {
    color: var(--bs-primary);
}

.filter-label.disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Selected filter - pill style */
.btn-check:checked + .filter-label {
    background: linear-gradient(
        135deg,
        var(--filter-gradient-start) 0%,
        var(--filter-gradient-end) 100%
    );
    border: 1px solid var(--filter-border);
    border-radius: 50rem;
    padding: 0.25rem 0.75rem;
}

.btn-check:checked + .filter-label:hover {
    background: linear-gradient(
        135deg,
        var(--filter-gradient-hover-start) 0%,
        var(--filter-gradient-hover-end) 100%
    );
    border-color: var(--filter-border-hover);
}

/* Filter dropdown buttons - plain text by default */
.filter-dropdown {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border: none;
    background: none;
    transition: color 0.15s ease;
}

.filter-dropdown:hover {
    color: var(--bs-primary);
}

.filter-dropdown::after {
    margin-left: 0.25rem;
}

/* Dropdown button when active (option selected) */
.filter-dropdown.active {
    background: linear-gradient(
        135deg,
        var(--filter-gradient-start) 0%,
        var(--filter-gradient-end) 100%
    );
    border: 1px solid var(--filter-border);
    border-radius: 50rem;
    padding: 0.25rem 0.75rem;
}

.filter-dropdown.active:hover {
    background: linear-gradient(
        135deg,
        var(--filter-gradient-hover-start) 0%,
        var(--filter-gradient-hover-end) 100%
    );
    border-color: var(--filter-border-hover);
}

/* ===================================================================
   ALBUM CARD TOOLBAR - responsive button labels
   Hide "Share" and "View" text between 768px and 945px where the
   sidebar is visible but cards are too narrow for full button labels
   =================================================================== */

@media (min-width: 768px) and (max-width: 945px) {
    .album-btn-label {
        display: none;
    }
}