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

{% block extrahead %}
{{ block.super }}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Make all links in the admin open in the same tab
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
      links[i].target = '_self';
    }
  });
</script>
{% endblock %}

{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | TEAMJOINT Company Limited Admin{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    :root {
        --primary: #4a6da7;
        --secondary: #334d7a;
        --accent: #f8c630;
        --primary-fg: #fff;
        
        --header-bg: var(--secondary);
        --header-color: var(--accent);
        --header-link-color: var(--primary-fg);
        
        --breadcrumbs-bg: var(--primary);
        --breadcrumbs-fg: #e0e0e0;
        
        --button-bg: var(--primary);
        --button-hover-bg: #3a5a8c;
        --default-button-bg: var(--secondary);
        --default-button-hover-bg: #263c61;
    }
    
    /* Custom Font */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    /* Header Styling */
    #header {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    #site-name a {
        font-weight: 600;
        letter-spacing: -0.025em;
    }
    
    /* Improved Table Styling */
    #changelist table {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    #changelist table thead th {
        background: var(--darkened-bg);
        padding: 12px 8px;
    }
    
    #changelist table tbody td {
        padding: 12px 8px;
    }
    
    /* Improved Form Styling */
    .form-row {
        padding: 12px 0;
    }
    
    .button, input[type=submit], input[type=button], .submit-row input, a.button {
        border-radius: 4px;
        font-weight: 500;
        padding: 10px 16px;
        transition: all 0.2s ease;
    }
    
    .button:hover, input[type=submit]:hover, input[type=button]:hover, .submit-row input:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Improved Module Styling */
    .module {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--hairline-color);
        margin-bottom: 24px;
    }
    
    .module h2, .module caption {
        border-radius: 8px 8px 0 0;
        padding: 12px 16px;
    }
    
    /* Status Indicators */
    .status-tag {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
    }
    
    .status-new { background: #e3f2fd; color: #0d47a1; }
    .status-in-progress { background: #fff8e1; color: #ff8f00; }
    .status-resolved { background: #e8f5e9; color: #2e7d32; }
    .status-closed { background: #eeeeee; color: #616161; }
    
    /* Priority Indicators */
    .priority-tag {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 6px;
    }
    
    .priority-low { background: #81c784; }
    .priority-medium { background: #ffb74d; }
    .priority-high { background: #e57373; }
    .priority-urgent { background: #d32f2f; }
    
    /* Logo Styling */
    .company-logo {
        margin-right: 8px;
        font-size: 1.2em;
    }
</style>
{% endblock %}

{% block branding %}
<h1 id="site-name">
    <span class="company-logo">🐻</span>
    <a href="{% url 'admin:index' %}">TEAMJOINT Company Limited</a>
</h1>
{% endblock %}

{% block nav-global %}{% endblock %}