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

{% block extrahead %}
{{ block.super }}
<style>
/* SSD NGO Forum Admin Theme - Clean & Professional */
:root {
    --primary: #6c4d80;
    --primary-dark: #5a3d6e;
    --secondary: #0b233e;
    --background: #f8f8f8;
    --white: #ffffff;
    --black: #000000;
    --text-dark: #333333;
    --text-light: #666666;
}

/* Header styling */
#header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--white) !important;
    padding: 15px 20px !important;
}

#header a:link, #header a:visited {
    color: var(--white) !important;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: var(--white) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}

#user-tools {
    color: rgba(255, 255, 255, 0.9) !important;
}

#user-tools a {
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

#user-tools a:hover {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Breadcrumbs */
div.breadcrumbs {
    background: var(--primary) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

div.breadcrumbs a {
    color: var(--white) !important;
}

/* Body and containers - ALL WHITE/LIGHT */
body {
    background: var(--background) !important;
}

#container {
    background: var(--white) !important;
}

#content {
    background: var(--white) !important;
}

.main {
    background: var(--white) !important;
}

/* Sidebar navigation - Light theme */
#nav-sidebar {
    background: var(--white) !important;
    border-right: 1px solid #ddd !important;
}

#nav-sidebar .module th,
#nav-sidebar .module caption {
    background: var(--primary) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
}

#nav-sidebar .module td {
    background: var(--white) !important;
}

#nav-sidebar .module td a {
    color: var(--text-dark) !important;
}

#nav-sidebar .module td a:hover {
    color: var(--primary) !important;
}

#nav-filter {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    border: 1px solid #ccc !important;
}

#nav-filter::placeholder {
    color: #999 !important;
}

/* Module headers in main content */
.module h2, .module caption, .inline-group h2 {
    background: var(--primary) !important;
    color: var(--white) !important;
    padding: 10px 15px !important;
}

/* Dashboard module captions (app names like AUTHENTICATION, EVENTS, etc) */
.dashboard #content-main .module caption,
.dashboard .module caption,
.dashboard .module th,
#content-main .app-members caption,
#content-main .app-events caption,
#content-main .app-forum caption,
#content-main .app-jobs caption,
#content-main .app-resources caption,
#content-main .app-security caption,
#content-main .app-operational caption,
#content-main .app-pages caption,
#content-main .app-auth caption,
caption {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* Recent actions module */
.dashboard #recent-actions-module h2,
#recent-actions-module h2 {
    background: var(--primary) !important;
    color: var(--white) !important;
}

#recent-actions-module {
    background: var(--white) !important;
}

#recent-actions-module ul {
    background: var(--white) !important;
}

#recent-actions-module li {
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

#recent-actions-module a {
    color: var(--primary) !important;
}

#recent-actions-module .module-content,
#recent-actions-module .actionlist {
    background: var(--white) !important;
}

#recent-actions-module .actionlist li {
    border-bottom: 1px solid #eee !important;
}

#recent-actions-module .mini {
    color: var(--text-light) !important;
}

/* Welcome message on dashboard */
.dashboard h1,
#content-main > h1 {
    color: var(--text-dark) !important;
}

/* Main content - all readable dark text */
#content {
    color: var(--text-dark) !important;
}

#content a:link, #content a:visited {
    color: var(--primary) !important;
}

#content a:hover {
    color: var(--primary-dark) !important;
}

#content p, #content div, #content span, #content li {
    color: var(--text-dark) !important;
}

/* Page title - "Select X to change" */
#content h1 {
    color: var(--text-dark) !important;
}

#content-main h1 {
    color: var(--text-dark) !important;
}

/* Object name in change form */
#content h1, 
#content .object-tools + h1,
.change-form h1 {
    color: var(--text-dark) !important;
}

/* Changelist title */
#changelist h1 {
    color: var(--text-dark) !important;
}

/* All h1, h2, h3 in content should be dark */
#content h1, #content h2, #content h3 {
    color: var(--text-dark) !important;
}

/* Except module headers which should be white */
.module h2, .module caption {
    color: var(--white) !important;
}

#changelist-filter h2 {
    color: var(--white) !important;
}

/* Changelist - results area */
#changelist {
    background: var(--white) !important;
}

#changelist .results {
    background: var(--white) !important;
}

#changelist-form {
    background: var(--white) !important;
}

/* Tables in content area */
table {
    background: var(--white) !important;
}

#content table th {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

#content table td {
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

#result_list {
    background: var(--white) !important;
}

#result_list th {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

#result_list td {
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

#result_list tr:nth-child(odd) td {
    background: var(--white) !important;
}

#result_list tr:nth-child(even) td {
    background: var(--background) !important;
}

/* Empty results / 0 results message */
.paginator {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

#changelist .paginator {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

/* Buttons */
.submit-row input[type="submit"],
input[type="submit"], button, .button {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.submit-row input[type="submit"]:hover,
input[type="submit"]:hover, button:hover, .button:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.submit-row input.default {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.submit-row input.default:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

/* Delete button - keep red for warning */
.deletelink, .deletelink:link, .deletelink:visited {
    color: #ba2121 !important;
}

/* Filter sidebar on right - Light theme */
#changelist-filter {
    background: var(--white) !important;
    border: 1px solid #ddd !important;
}

#changelist-filter h2 {
    background: var(--primary) !important;
    color: var(--white) !important;
}

#changelist-filter h3 {
    color: var(--text-dark) !important;
    border-bottom: 1px solid #eee !important;
}

#changelist-filter ul {
    background: var(--white) !important;
}

#changelist-filter li {
    background: var(--white) !important;
}

#changelist-filter li a {
    color: var(--text-dark) !important;
}

#changelist-filter li.selected {
    background: var(--background) !important;
}

#changelist-filter li.selected a {
    color: var(--primary) !important;
    font-weight: bold !important;
}

/* Object tools (Add button, etc) */
.object-tools a:link, .object-tools a:visited {
    background: var(--primary) !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

.object-tools a:hover {
    background: var(--primary-dark) !important;
    color: var(--white) !important;
}

.object-tools li a {
    color: var(--white) !important;
}

/* Addlink buttons (the + Add buttons) */
.addlink, .addlink:link, .addlink:visited {
    color: #28a745 !important;
}

.changelink, .changelink:link, .changelink:visited {
    color: var(--primary) !important;
}

/* Form fields */
input, select, textarea {
    border-color: #ccc !important;
    color: var(--text-dark) !important;
    background: var(--white) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 3px rgba(108, 77, 128, 0.3) !important;
}

/* Fieldsets */
fieldset {
    background: var(--white) !important;
    border-color: #ddd !important;
}

fieldset h2 {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* Labels */
label {
    color: var(--text-dark) !important;
}

/* Help text */
.help, p.help {
    color: var(--text-light) !important;
}

/* Messages */
.messagelist li.success {
    background: #d4edda !important;
    border-left: 4px solid #28a745 !important;
    color: #155724 !important;
}

.messagelist li.error {
    background: #f8d7da !important;
    border-left: 4px solid #dc3545 !important;
    color: #721c24 !important;
}

.messagelist li.warning {
    background: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
    color: #856404 !important;
}

/* Dashboard home page */
.dashboard .module table {
    background: var(--white) !important;
}

.dashboard .module table th {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

.dashboard .module table td {
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

.dashboard .module table td a {
    color: var(--primary) !important;
}

/* Admin title styling */
#site-name a {
    font-size: 22px !important;
    letter-spacing: 0.5px !important;
}

/* Pagination */
.paginator a:link, .paginator a:visited {
    color: var(--primary) !important;
}

/* Calendar widget */
.calendar td a:hover, .timelist a:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
}

.calendar td.selected a {
    background: var(--primary) !important;
}

/* Related widget wrapper */
.related-widget-wrapper {
    color: var(--text-dark) !important;
}

/* Selector widget */
.selector .selector-chosen h2 {
    background: var(--primary) !important;
    color: var(--white) !important;
}

.selector .selector-available h2 {
    background: var(--primary) !important;
    color: var(--white) !important;
}

.selector select {
    color: var(--text-dark) !important;
    background: var(--white) !important;
}

/* Search bar / Toolbar */
#toolbar {
    background: var(--white) !important;
    border-bottom: 1px solid #ddd !important;
}

#searchbar {
    border-color: #ccc !important;
    color: var(--text-dark) !important;
    background: var(--white) !important;
}

/* Collapsed fieldsets */
fieldset.collapsed {
    background: var(--background) !important;
}

fieldset.collapsed h2 {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

fieldset.collapsed h2 a {
    color: var(--primary) !important;
}

/* Action checkboxes row */
.action-checkbox-column {
    background: var(--white) !important;
}

/* Actions bar */
.actions {
    background: var(--background) !important;
    color: var(--text-dark) !important;
}

.actions label {
    color: var(--text-dark) !important;
}

/* Empty changelist */
#changelist-form .results + p,
#changelist-form > p {
    color: var(--text-dark) !important;
    background: var(--white) !important;
}

/* Any remaining dark areas */
.content,
.colM,
.colMS {
    background: var(--white) !important;
}

/* Module tables */
.module table {
    background: var(--white) !important;
}

.module table td,
.module table th {
    color: var(--text-dark) !important;
}

/* Ensure all text is readable */
p, span, div, td, th, li, label, .help-block {
    color: var(--text-dark) !important;
}

/* Except in headers which should be white */
#header *, div.breadcrumbs *, .module h2 *, .module caption *, #changelist-filter h2 *, caption * {
    color: var(--white) !important;
}

/* Dashboard specific fixes */
.dashboard .module {
    background: var(--white) !important;
}

.dashboard .module table {
    background: var(--white) !important;
}

.dashboard .module table tr {
    background: var(--white) !important;
}

.dashboard .module table td {
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

.dashboard .module table th {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* Recent actions panel */
ul.actionlist {
    background: var(--white) !important;
    padding: 10px !important;
}

ul.actionlist li {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #eee !important;
}

ul.actionlist li a {
    color: var(--primary) !important;
}

ul.actionlist .mini {
    color: var(--text-light) !important;
}

/* Model links on dashboard */
.dashboard th[scope="row"] a {
    color: var(--text-dark) !important;
}

.dashboard td a {
    color: var(--primary) !important;
}

/* Responsive fixes */
@media (max-width: 767px) {
    #header {
        padding: 10px 15px !important;
    }
    
    #branding h1 {
        font-size: 18px !important;
    }
}
</style>
{% endblock %}

{% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">SSD NGO Forum Administration</a>
</h1>
{% endblock %}

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