{% extends "admin/base.html" %}
{% load static %}

{% block branding %}
<a href="{% url 'admin:index' %}" id="site-name" style="display:flex; align-items:center; gap:10px; text-decoration:none;">
    <img src="{% static 'images/mirella.png' %}" alt="MLS Foundation" style="height:42px; width:auto;">
    <span style="color:#F4B400; font-size:1.1rem; font-weight:700; line-height:1.2;">
        Mirella & Lino Saputo Foundation<br>
        <span style="font-size:0.75rem; font-weight:400; color:rgba(255,255,255,0.7);">Portal Administration</span>
    </span>
</a>
{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    /* Header */
    #header {
        background: #0A3D62 !important;
        color: #ffffff;
    }
    #header a:link, #header a:visited {
        color: #F4B400;
    }
    #user-tools a {
        color: rgba(255,255,255,0.85) !important;
    }
    #user-tools a:hover {
        color: #F4B400 !important;
    }

    /* Breadcrumbs */
    div.breadcrumbs {
        background: #0d4f7e;
        color: rgba(255,255,255,0.8);
    }
    div.breadcrumbs a {
        color: #F4B400;
    }

    /* Module headers */
    .module h2, .module caption, .inline-group h2 {
        background: #0A3D62;
        color: white;
    }

    /* Sidebar active link */
    #nav-sidebar .current-app .section:link,
    #nav-sidebar .current-app .section:visited {
        color: #F4B400;
    }

    /* Buttons */
    .button, input[type=submit], input[type=button],
    .submit-row input, a.button {
        background: #0A3D62;
        border-color: #0A3D62;
    }
    .button:hover, input[type=submit]:hover {
        background: #0d4f7e;
        border-color: #0d4f7e;
    }
    .button.default, input[type=submit].default {
        background: #F4B400;
        border-color: #F4B400;
        color: #0A3D62;
    }
    .button.default:hover {
        background: #e0a500;
        border-color: #e0a500;
    }

    /* Links */
    a:link, a:visited {
        color: #0A3D62;
    }

    /* Dashboard */
    .dashboard #content {
        width: 100%;
    }
</style>
{% endblock %}