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

{% block extrahead %}
    {{ block.super }}
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <style>
        /* ============================================
           THÈME FESTIF & CHALEUREUX - ORANGE SUNSET
           Conçu pour Django Jazzmin (Mobile-First)
           ============================================ */
        :root {
            --sunset-start: #FF8C42;    /* Orange Sunset */
            --sunset-end: #FF6B35;      /* Corail profond */
            --amber: #F2AF29;
            --warm-anthracite: #333533;
            --off-white: #FDFBF7;
            --success-emerald: #2E8B57;
            --success-light: #3CB371;
            --card-shadow: 0 8px 20px rgba(255, 140, 66, 0.12);
            --border-radius-card: 16px;
            --border-radius-btn: 50px;
        }

        /* ===== 1. HEADER & SIDEBAR ===== */
        /* Dégradé chaleureux sur la barre latérale et le header */
        .main-header,
        .navbar-white,
        .navbar,
        .brand-link,
        .main-sidebar,
        .sidebar {
            background: linear-gradient(145deg, var(--sunset-start) 0%, var(--sunset-end) 100%) !important;
            border: none !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        /* Logo / Nom du site */
        .brand-link .brand-image,
        .brand-link .brand-text {
            color: white !important;
            font-weight: 700;
            text-shadow: 1px 2px 4px rgba(0,0,0,0.1);
        }

        /* Liens de navigation dans la sidebar */
        .nav-sidebar .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            transition: all 0.2s ease;
            border-radius: 30px;
            margin: 2px 8px;
        }

        .nav-sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.2) !important;
            color: white !important;
            padding-left: 20px;
        }

        .nav-sidebar .nav-link.active {
            background-color: var(--amber) !important;
            color: var(--warm-anthracite) !important;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(242, 175, 41, 0.4);
        }

        /* Icônes de la sidebar */
        .nav-sidebar .nav-icon {
            color: white !important;
        }

        /* Header de contenu (barre du haut) */
        .content-header {
            background: var(--off-white);
            border-bottom: 2px solid rgba(255, 140, 66, 0.2);
        }

        .content-header h1 {
            color: var(--warm-anthracite);
            font-weight: 600;
        }

        /* ===== 2. TABLEAUX (ULTRA-LISIBLES MOBILE) ===== */
        .table,
        .table-responsive,
        table {
            font-size: 0.95rem;
            width: 100%;
        }

        @media (max-width: 768px) {
            .table td,
            .table th {
                padding: 0.9rem 0.5rem !important;
                font-size: 0.9rem;
                vertical-align: middle;
            }

            /* Les tableaux en mode stacked pour mobile */
            .table-responsive {
                display: block;
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Améliorer la lisibilité des cellules */
            .table td {
                border-bottom: 1px solid rgba(255, 140, 66, 0.2);
                background-color: white;
            }

            .table-striped tbody tr:nth-of-type(odd) {
                background-color: rgba(255, 140, 66, 0.03);
            }
        }

        /* En-têtes de tableau */
        .table thead th {
            background-color: var(--warm-anthracite);
            color: white;
            font-weight: 500;
            border-bottom: 3px solid var(--amber);
            padding: 0.9rem 0.75rem;
            white-space: nowrap;
        }

        /* Survol des lignes */
        .table tbody tr:hover {
            background-color: rgba(255, 140, 66, 0.08) !important;
            transition: background 0.2s ease;
        }

        /* ===== 3. BOUTONS (PILL-STYLE) ===== */
        .btn,
        .btn-primary,
        .btn-success,
        .btn-warning,
        .btn-danger,
        .button,
        input[type="submit"],
        input[type="button"],
        .submit-row input {
            border-radius: var(--border-radius-btn) !important;
            padding: 0.5rem 1.4rem !important;
            font-weight: 500 !important;
            transition: all 0.25s ease !important;
            border: none !important;
            box-shadow: 0 3px 8px rgba(0,0,0,0.08);
            margin-right: 6px;
        }

        /* Bouton primaire (Ambre) */
        .btn-primary,
        .button.default,
        input[type="submit"].default {
            background: var(--amber) !important;
            color: var(--warm-anthracite) !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
        }

        .btn-primary:hover,
        .button.default:hover {
            background: #e09e1c !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(242, 175, 41, 0.4);
        }

        /* Bouton succès (Vert émeraude) */
        .btn-success,
        .addlink,
        .button[value="Enregistrer et continuer"] {
            background: var(--success-emerald) !important;
            color: white !important;
        }

        .btn-success:hover,
        .addlink:hover {
            background: var(--success-light) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(46, 139, 87, 0.4);
        }

        /* Bouton danger (reste rouge mais plus doux) */
        .btn-danger {
            background: #D9534F !important;
        }

        .btn-danger:hover {
            background: #c9302c !important;
            transform: translateY(-2px);
        }

        /* Boutons outline */
        .btn-outline-primary {
            border: 2px solid var(--amber) !important;
            color: var(--amber) !important;
            background: transparent !important;
        }

        .btn-outline-primary:hover {
            background: var(--amber) !important;
            color: var(--warm-anthracite) !important;
        }

        /* ===== 4. INLINES (CARTES BLANCHES POUR TICKETS) ===== */
        .inline-group,
        .inline-related,
        .tabular.inline-related,
        .dynamic-tickets,
        fieldset.module {
            background: var(--off-white);
            border-radius: var(--border-radius-card);
            padding: 1.5rem 1rem;
            margin-bottom: 1.8rem;
            box-shadow: var(--card-shadow);
            border-left: 6px solid var(--sunset-start) !important;
            transition: box-shadow 0.3s ease;
        }

        .inline-group:hover,
        .inline-related:hover {
            box-shadow: 0 12px 24px rgba(255, 140, 66, 0.18);
        }

        /* Titre des inlines */
        .inline-group h2,
        .inline-related h3 {
            color: var(--warm-anthracite) !important;
            font-weight: 700;
            background: none !important;
            border-bottom: 2px dashed var(--amber);
            padding-bottom: 0.5rem;
            margin-top: 0;
        }

        /* Lignes dans les inlines tabulaires */
        .tabular.inline-related table {
            border-radius: 12px;
            overflow: hidden;
            margin-top: 10px;
        }

        .tabular.inline-related td,
        .tabular.inline-related th {
            padding: 0.8rem !important;
            border-bottom: 1px solid rgba(255, 140, 66, 0.15);
        }

        /* Bouton "Ajouter un autre" dans les inlines */
        .add-row a {
            color: var(--sunset-start) !important;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            margin-top: 10px;
            transition: padding 0.2s;
        }

        .add-row a:hover {
            padding-left: 8px;
        }

        /* ===== 5. ANIMATIONS DOUCES GLOBALES ===== */
        a,
        button,
        .btn,
        .nav-link,
        .dropdown-item {
            transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1) !important;
        }

        /* Effet de survol sur les cartes et éléments */
        .card,
        .info-box,
        .small-box {
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            border-radius: var(--border-radius-card) !important;
            border: none;
        }

        .card:hover,
        .info-box:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
        }

        /* Pagination */
        .pagination .page-link {
            border-radius: 30px !important;
            margin: 0 3px;
            color: var(--warm-anthracite);
            border: 1px solid rgba(255, 140, 66, 0.3);
        }

        .pagination .page-item.active .page-link {
            background: var(--amber);
            border-color: var(--amber);
            color: var(--warm-anthracite);
        }

        /* Champs de formulaire */
        input[type="text"],
        input[type="password"],
        input[type="email"],
        select,
        textarea {
            border-radius: 20px !important;
            border: 1.5px solid rgba(255, 140, 66, 0.2);
            padding: 0.5rem 1rem;
            transition: border 0.2s;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--sunset-start) !important;
            box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.15) !important;
            outline: none;
        }

        /* Ajustement du breadcrumb */
        .breadcrumb {
            background: transparent;
            font-size: 0.9rem;
        }

        .breadcrumb-item a {
            color: var(--sunset-start);
        }

        /* Adaptation mobile pour les blocs */
        @media (max-width: 576px) {
            .content-header {
                padding: 15px 10px;
            }

            .inline-group,
            .inline-related {
                padding: 1rem 0.75rem;
            }

            .btn {
                padding: 0.4rem 1rem !important;
                font-size: 0.9rem;
            }

            .table thead {
                display: none; /* Cache header pour mode stacking */
            }

            .table tbody tr {
                display: block;
                margin-bottom: 1rem;
                border: 1px solid rgba(255, 140, 66, 0.3);
                border-radius: 12px;
                padding: 0.5rem;
                background: white;
            }

            .table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: none;
                padding: 0.6rem 0.2rem;
            }

            .table tbody td::before {
                content: attr(data-label);
                font-weight: 700;
                color: var(--warm-anthracite);
                width: 45%;
                text-align: left;
            }

            /* Pour les tables générées par Django admin, on ajoute un fallback */
            .change-list .table td:not([data-label]) {
                display: table-cell;
            }
        }

        /* Harmonisation de la barre de recherche */
        #searchbar,
        #changelist-search input {
            border-radius: 30px !important;
        }

        /* Amélioration des messages */
        .alert-success {
            background: var(--success-emerald) !important;
            color: white;
            border-radius: 30px;
        }

        .alert-warning {
            background: var(--amber) !important;
            color: var(--warm-anthracite);
            border-radius: 30px;
        }

        /* Pied de page */
        .main-footer {
            background: var(--off-white);
            border-top: 2px solid var(--amber);
            color: var(--warm-anthracite);
        }
    </style>
{% endblock extrahead %}