/* KVID Facebook Post Schedule v1.0.0 */
/* Additional App Styles */

/* Page checkbox styling */
.kvid-page-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--kvid-accent);
    cursor: pointer;
}

.kvid-page-item:has(input:checked) {
    border-color: var(--kvid-accent);
    background: rgba(255, 107, 0, 0.1);
}

/* Filter buttons */
.queue-filter {
    background: var(--kvid-bg-tertiary);
    border: 1px solid var(--kvid-border);
    color: var(--kvid-text-secondary);
    margin-right: 5px;
}

.queue-filter:hover {
    border-color: var(--kvid-accent);
    color: var(--kvid-text-primary);
}

.queue-filter.active {
    background: linear-gradient(135deg, var(--kvid-accent), var(--kvid-accent2));
    border-color: var(--kvid-accent);
    color: white;
}

/* Responsive grid */
@media (max-width: 900px) {
    .kvid-container > div > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .kvid-container > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 500px) {
    .kvid-container > div > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    
    .kvid-header-inner {
        flex-direction: column;
        gap: 15px;
    }
    
    .kvid-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Loading animation */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.loading-skeleton {
    animation: shimmer 1.5s infinite;
    background: linear-gradient(90deg, var(--kvid-bg-tertiary) 0%, var(--kvid-bg-secondary) 50%, var(--kvid-bg-tertiary) 100%);
    background-size: 200px 100%;
}