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

{% block title %}Interface Admin - Portfolio{% endblock %}

{% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" fill="currentColor"/>
        </svg>
        ARCHITECT.OS
    </a>
</h1>
{% endblock %}

{% block extrastyle %}
<style>
    /* ========== FONTS ========== */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

    /* ========== CSS VARIABLES OVERRIDE ========== */
    :root {
        /* Couleurs principales */
        --primary: #00f3ff;
        --secondary: #bf00ff;
        --accent: #b87333;
        --primary-fg: #000000;
        
        /* Backgrounds */
        --body-fg: #e0e0e0;
        --body-bg: #050505;
        --darkened-bg: #0a0a12;
        --header-bg: #000000;
        
        /* UI Elements */
        --body-quiet-color: #a0a0a0;
        --body-loud-color: #ffffff;
        --link-fg: #00f3ff;
        --link-hover-color: #00d4e0;
        --link-selected-fg: #bf00ff;
        
        /* Bordures et séparateurs */
        --border-color: #1a1a2e;
        --hairline-color: #1a1a2e;
        --selected-bg: rgba(0, 243, 255, 0.1);
        --selected-row: rgba(0, 243, 255, 0.05);
        
        /* Messages et états */
        --message-success-bg: rgba(0, 255, 136, 0.1);
        --message-warning-bg: rgba(255, 193, 7, 0.1);
        --message-error-bg: rgba(255, 0, 68, 0.1);
        
        /* Boutons */
        --button-bg: #00f3ff;
        --button-hover-bg: #00d4e0;
        --default-button-bg: #1a1a2e;
        --default-button-hover-bg: #2a2a3e;
        --delete-button-bg: #ff0044;
        --delete-button-hover-bg: #cc0036;
        
        /* Inputs */
        --input-bg: rgba(26, 26, 46, 0.6);
        --input-border-color: #2a2a3e;
        --input-focus-border-color: #00f3ff;
    }

    /* ========== GLOBAL STYLES ========== */
    body {
        background: linear-gradient(135deg, #050505 0%, #0a0a12 100%);
        font-family: 'Rajdhani', sans-serif;
        color: var(--body-fg);
        position: relative;
        overflow-x: hidden;
    }

    /* Effet de grille en arrière-plan */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
        background-size: 50px 50px;
        pointer-events: none;
        z-index: 0;
    }

    #container {
        position: relative;
        z-index: 1;
    }

    /* ========== HEADER ========== */
    #header {
        background: linear-gradient(180deg, #000000 0%, #0a0a12 100%);
        border-bottom: 2px solid var(--primary);
        box-shadow: 0 4px 20px rgba(0, 243, 255, 0.3);
        position: relative;
    }

    #header::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            var(--primary) 20%, 
            var(--secondary) 50%, 
            var(--primary) 80%, 
            transparent 100%);
        animation: scanline 3s linear infinite;
    }

    @keyframes scanline {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }

    #branding h1 {
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin: 0;
        padding: 10px 20px;
    }

    #branding h1 a {
        color: var(--primary);
        text-shadow: 
            0 0 10px rgba(0, 243, 255, 0.8),
            0 0 20px rgba(0, 243, 255, 0.4),
            0 0 30px rgba(0, 243, 255, 0.2);
        transition: all 0.3s ease;
    }

    #branding h1 a:hover {
        color: var(--secondary);
        text-shadow: 
            0 0 10px rgba(191, 0, 255, 0.8),
            0 0 20px rgba(191, 0, 255, 0.4),
            0 0 30px rgba(191, 0, 255, 0.2);
    }

    #user-tools {
        padding: 10px 20px;
        font-family: 'Rajdhani', sans-serif;
    }

    #user-tools a {
        color: var(--link-fg);
        text-decoration: none;
        padding: 5px 10px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    #user-tools a:hover {
        background: rgba(0, 243, 255, 0.1);
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
    }

    /* ========== BREADCRUMBS ========== */
    .breadcrumbs {
        background: rgba(10, 10, 18, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 10px 20px;
        margin: 15px 20px;
        font-family: 'Rajdhani', sans-serif;
    }

    .breadcrumbs a {
        color: var(--link-fg);
        text-decoration: none;
        position: relative;
    }

    .breadcrumbs a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--primary);
        transition: width 0.3s ease;
    }

    .breadcrumbs a:hover::after {
        width: 100%;
    }

    /* ========== CONTENT AREA ========== */
    #content {
        padding: 20px;
    }

    .module,
    .dashboard .module,
    .colM,
    .colMS {
        background: rgba(10, 10, 18, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(0, 243, 255, 0.1);
        margin-bottom: 20px;
    }

    .module h2,
    .module caption,
    .dashboard .module h2 {
        background: linear-gradient(135deg, rgba(0, 243, 255, 0.1) 0%, rgba(191, 0, 255, 0.05) 100%);
        color: var(--primary);
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--primary);
        padding: 12px 15px;
        margin: 0;
    }

    /* ========== TABLES ========== */
    table {
        background: transparent;
        border-collapse: separate;
        border-spacing: 0;
    }

    thead th {
        background: rgba(0, 243, 255, 0.1);
        color: var(--primary);
        font-family: 'Orbitron', sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 2px solid var(--primary);
        padding: 12px 10px;
    }

    tbody tr {
        background: rgba(10, 10, 18, 0.4);
        transition: all 0.3s ease;
    }

    tbody tr:hover {
        background: rgba(0, 243, 255, 0.05);
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    }

    tbody tr.selected {
        background: var(--selected-bg);
        border-left: 3px solid var(--primary);
    }

    tbody td {
        border-bottom: 1px solid var(--border-color);
        padding: 10px;
        color: var(--body-fg);
    }

    tbody tr:nth-child(even) {
        background: rgba(10, 10, 18, 0.6);
    }

    tbody tr:nth-child(even):hover {
        background: rgba(0, 243, 255, 0.08);
    }

    /* ========== FORMS ========== */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        border-radius: 4px;
        color: var(--body-fg);
        padding: 8px 12px;
        transition: all 0.3s ease;
        font-family: 'Rajdhani', sans-serif;
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--input-focus-border-color);
        box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
        background: rgba(26, 26, 46, 0.8);
    }

    .form-row {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    label {
        color: var(--body-fg);
        font-weight: 600;
        font-family: 'Rajdhani', sans-serif;
    }

    .help {
        color: var(--body-quiet-color);
        font-size: 0.9em;
    }

    /* ========== BUTTONS ========== */
    .button,
    input[type="submit"],
    input[type="button"],
    .submit-row input,
    a.button {
        background: var(--button-bg);
        color: var(--primary-fg);
        border: none;
        border-radius: 6px;
        padding: 10px 20px;
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
        text-decoration: none;
        display: inline-block;
    }

    .button:hover,
    input[type="submit"]:hover,
    input[type="button"]:hover,
    .submit-row input:hover,
    a.button:hover {
        background: var(--button-hover-bg);
        box-shadow: 0 0 30px rgba(0, 243, 255, 0.6);
        transform: translateY(-2px);
    }

    .button:active,
    input[type="submit"]:active {
        transform: translateY(0);
    }

    /* Default/Secondary Buttons */
    .default,
    input[type="button"],
    .cancel-link {
        background: var(--default-button-bg);
        color: var(--body-fg);
        box-shadow: 0 0 10px rgba(26, 26, 46, 0.5);
    }

    .default:hover,
    input[type="button"]:hover,
    .cancel-link:hover {
        background: var(--default-button-hover-bg);
        box-shadow: 0 0 15px rgba(26, 26, 46, 0.8);
    }

    /* Delete Buttons */
    .deletelink,
    .deletelink-box a {
        background: var(--delete-button-bg);
        color: #ffffff;
        box-shadow: 0 0 20px rgba(255, 0, 68, 0.4);
    }

    .deletelink:hover,
    .deletelink-box a:hover {
        background: var(--delete-button-hover-bg);
        box-shadow: 0 0 30px rgba(255, 0, 68, 0.6);
    }

    /* ========== MESSAGES ========== */
    .messagelist {
        margin: 20px;
        padding: 0;
        list-style: none;
    }

    .messagelist li {
        padding: 15px 20px;
        margin-bottom: 10px;
        border-radius: 6px;
        border-left: 4px solid;
        font-family: 'Rajdhani', sans-serif;
        font-weight: 600;
        backdrop-filter: blur(10px);
    }

    .messagelist .success {
        background: var(--message-success-bg);
        border-color: #00ff88;
        color: #00ff88;
    }

    .messagelist .warning {
        background: var(--message-warning-bg);
        border-color: #ffc107;
        color: #ffc107;
    }

    .messagelist .error {
        background: var(--message-error-bg);
        border-color: #ff0044;
        color: #ff0044;
    }

    /* ========== SIDEBAR (CHANGELIST FILTERS) ========== */
    #changelist-filter {
        background: rgba(10, 10, 18, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 15px;
    }

    #changelist-filter h2 {
        background: linear-gradient(135deg, rgba(0, 243, 255, 0.1) 0%, rgba(191, 0, 255, 0.05) 100%);
        color: var(--primary);
        font-family: 'Orbitron', sans-serif;
        padding: 10px;
        margin: -15px -15px 15px -15px;
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid var(--primary);
    }

    #changelist-filter h3 {
        color: var(--body-fg);
        font-family: 'Rajdhani', sans-serif;
        font-weight: 600;
        margin-top: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-color);
    }

    #changelist-filter li {
        padding: 5px 0;
    }

    #changelist-filter a {
        color: var(--link-fg);
        text-decoration: none;
        transition: all 0.3s ease;
        display: block;
        padding: 5px 10px;
        border-radius: 4px;
    }

    #changelist-filter a:hover {
        background: rgba(0, 243, 255, 0.1);
        padding-left: 15px;
    }

    #changelist-filter li.selected a {
        color: var(--secondary);
        font-weight: 700;
    }

    /* ========== PAGINATION ========== */
    .paginator {
        color: var(--body-fg);
        font-family: 'Rajdhani', sans-serif;
        padding: 15px;
    }

    .paginator a {
        color: var(--link-fg);
        text-decoration: none;
        padding: 5px 10px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .paginator a:hover {
        background: rgba(0, 243, 255, 0.1);
        box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
    }

    /* ========== ACTIONS DROPDOWN ========== */
    .actions {
        background: rgba(10, 10, 18, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .actions select {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--body-fg);
    }

    .actions label {
        color: var(--body-fg);
        margin-right: 10px;
    }

    /* ========== SEARCH BAR ========== */
    #changelist-search {
        background: rgba(10, 10, 18, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 15px;
    }

    #changelist-search input[type="text"] {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--body-fg);
    }

    /* ========== DASHBOARD MODULES ========== */
    .dashboard .module table th {
        background: rgba(0, 243, 255, 0.1);
    }

    .dashboard .module table td a {
        color: var(--link-fg);
    }

    .dashboard .module table td a:hover {
        color: var(--link-hover-color);
    }

    .addlink,
    .changelink,
    .viewlink {
        color: var(--link-fg);
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .addlink:hover,
    .changelink:hover,
    .viewlink:hover {
        color: var(--link-hover-color);
        text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    }

    /* ========== INLINE FORMS ========== */
    .inline-group {
        background: rgba(10, 10, 18, 0.4);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .inline-group .module h2 {
        background: rgba(0, 243, 255, 0.05);
    }

    /* ========== CALENDAR WIDGET ========== */
    .calendarbox,
    .clockbox {
        background: rgba(10, 10, 18, 0.95);
        border: 1px solid var(--primary);
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
    }

    .calendar td,
    .calendarbox td {
        color: var(--body-fg);
    }

    .calendar td a,
    .calendarbox td a {
        color: var(--link-fg);
    }

    .calendar td a:hover,
    .calendarbox td a:hover {
        background: rgba(0, 243, 255, 0.2);
    }

    /* ========== SCROLLBAR ========== */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(10, 10, 18, 0.5);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
    }

    /* ========== GLITCH EFFECT (SUBTLE) ========== */
    @keyframes glitch {
        0%, 100% { transform: translate(0); }
        33% { transform: translate(-2px, 2px); }
        66% { transform: translate(2px, -2px); }
    }

    #branding h1 a:active {
        animation: glitch 0.3s ease;
    }
</style>
{% endblock %}