{% extends "admin/base_site.html" %}

{% block branding %}
<style>
    .env-badge-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
    }
    .env-badge {
        color: white;
        padding: 6px 20px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.1) inset;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        animation: env-badge-fade-in 0.4s ease-out;
    }
    .env-badge-icon {
        font-size: 16px;
        line-height: 1;
    }
    @keyframes env-badge-fade-in {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @media (max-width: 767px) {
        .env-badge-container {
            bottom: 12px;
            right: 12px;
        }
        .env-badge {
            font-size: 11px;
            padding: 5px 14px;
            gap: 6px;
        }
        .env-badge-icon {
            font-size: 13px;
        }
    }
    @media (prefers-color-scheme: dark) {
        .env-badge {
            box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;
        }
    }
</style>

{{ block.super }}

{% if ADMIN_ENV_NAME %}
<div class="env-badge-container">
    <span class="env-badge" style="background: {{ ADMIN_ENV_COLOR }};">
        {% if ADMIN_ENV_ICON %}
            <span class="env-badge-icon">{{ ADMIN_ENV_ICON }}</span>
        {% endif %}
        <span class="env-badge-text">{{ ADMIN_ENV_NAME }}</span>
    </span>
</div>
{% endif %}
{% endblock %}