{% extends "admin/base_site.html" %}
{% load i18n static %}
{% get_current_language as LANGUAGE_CODE %}

<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
    <head>
{% block extrastyle %}
<style>
    @font-face {
        font-family: 'Ray';
        src: url('{% static "fonts/IRANYekanWebRegular.ttf" %}') format('truetype');
    }

    h1,h2,h3,h4,h5,h6,a,label,button,input,select,textarea,div {
        font-family: Ray;
    }

    h2 > span {
        margin-left: 0 !important;
        margin-right: auto;
    }

    {% if LANGUAGE_BIDI %}
    body {
        direction: rtl;
        text-align: right !important;
    }

    .text-left {
        text-align: right !important;
    }

    .date > input, .time > input, .vDateField, .vTimeField {
        text-align: left !important;
    }

    #site-name {
        padding-right: 10%;
    }

    a > span.text-sm {
        padding-right: 5%;
    }

    #changelist-form > div.bg-gray-50.flex.flex-col.gap-3.mb-4.p-3.rounded-md.lg\:flex-row.dark\:bg-gray-800 > a > span {
        padding-left: 0;
        padding-right: 10%;
    }

    @media (min-width: 1280px) {
        #submit-row > div {
            right: 0 !important;
            left: 18rem !important;
            background-color: rgba(255, 255, 255, 1);
            backdrop-filter: blur(1px);
        }

        #submit-row > div > div > div {
            flex-direction: row !important;
        }
    }

    #header-inner > div > div.flex.items-center.ml-auto > div > div > div:nth-child(2) > nav {
        position: absolute;
        left: 0;
        right: auto;
    }
    #header-inner > div > div.flex.items-center.ml-auto > div > div > div:nth-child(1) > div{
        position: absolute;
        left: 0;
        right: auto;
    }
    #content > div.flex.items-start.flex-col.mb-4.md\:flex-row.md\:items-center > ul > li:first-child {
        border-top-right-radius: var(--border-radius, 6px);
        border-bottom-right-radius: var(--border-radius, 6px);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    #content > div.flex.items-start.flex-col.mb-4.md\:flex-row.md\:items-center > ul > li:last-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--border-radius, 6px);
        border-bottom-left-radius: var(--border-radius, 6px);
    }
    #content > div.flex.items-start.flex-col.mb-4.md\:flex-row.md\:items-center > ul > li:only-child {
        border-radius: var(--border-radius, 6px);
    }
    #filter-form > div.flex.flex-col.grow.gap-4.overflow-auto.\*\:mb-0 > div.simplebar-wrapper > div.simplebar-mask > div > div > div > div > div> div > span > span.selection > span > ul > li{
        margin-right: 0;
    }
    {% endif %}

    #submit-row > div {
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.8);
        border-top: 1px solid #e5e7eb;
        border-radius: 0 0 0.375rem 0.375rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        transition: background-color 0.3s ease;
    }

    html.dark #submit-row > div {
        background-color: rgba(15, 23, 42, 0.8);
        border-top: 1px solid #374151;
        color: #d1d5db;
    }
    html[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;

    }
    html[dir="rtl"] .material-symbols-outlined {
    transform: scaleX(-1);
    }

</style>
{% endblock %}

    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>
