/**
 * Environment-Specific Styles
 * ============================
 * Uses CSS variables set by env-detect.js
 * Works automatically in both dev and prod with same code
 */

/* Version box styling using environment variables */
.version-info {
    background-color: var(--env-version-bg, #000000) !important;
    color: var(--env-version-text, #ffffff) !important;
    border: 1px solid var(--env-version-border, #333333) !important;
}

/* Environment badge (DEV indicator) */
.env-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle;
}

.env-badge-dev {
    background-color: var(--env-badge-bg, #ffc107);
    color: var(--env-badge-text, #000000);
    animation: pulse-dev 2s infinite;
}

/* Pulse animation for DEV badge */
@keyframes pulse-dev {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Additional body styling based on environment */
body.env-development {
    /* Optional: Add subtle indicator in dev */
    border-top: 3px solid #dc3545;
}

body.env-production {
    /* Production has no special indicators */
}

/* Version box hover effects */
.version-info:hover {
    opacity: 0.9;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* Warning banner for development (optional) */
body.env-development::before {
    content: "⚠️ DEVELOPMENT ENVIRONMENT ⚠️";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffc107;
    color: #000000;
    text-align: center;
    padding: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10000;
    opacity: 0.9;
}

/* Adjust page content to not overlap with dev banner */
body.env-development {
    padding-top: 28px;
}

/* Hide dev banner on small screens to save space */
@media (max-width: 768px) {
    body.env-development::before {
        display: none;
    }
    body.env-development {
        padding-top: 0;
    }
}