/* Dark Mode Admin Panel - Clean and Simple */

/* Base dark theme */
:root {
    --bg-dark: #1a1a1a;
    --bg-darker: #121212;
    --bg-card: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
    --accent-blue: #4a9eff;
    --accent-green: #4caf50;
    --accent-orange: #ff9800;
    --accent-red: #f44336;
}

/* Global dark background */
html, body {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

#container, #content, #main {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

/* Header */
#header {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#header a, #header a:link, #header a:visited,
#branding h1 a, #site-name a,
#user-tools, #user-tools a {
    color: var(--text-primary) !important;
}

/* Breadcrumbs */
div.breadcrumbs {
    background-color: var(--bg-darker) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

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

/* Sidebar / Navigation */
#nav-sidebar {
    background-color: var(--bg-darker) !important;
    border-right: 1px solid var(--border-color) !important;
}

#nav-sidebar .module {
    background-color: var(--bg-darker) !important;
}

#nav-sidebar a {
    color: var(--text-primary) !important;
}

#nav-sidebar a:hover {
    background-color: var(--bg-card) !important;
}

#nav-sidebar .section {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Modules and Cards */
.module {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

.module h2, .module caption {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Tables */
table {
    background-color: var(--bg-card) !important;
}

th {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

td {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

tr:hover td {
    background-color: #3d3d3d !important;
}

tr.row1, tr:nth-child(odd) {
    background-color: var(--bg-card) !important;
}

tr.row2, tr:nth-child(even) {
    background-color: #252525 !important;
}

/* Links */
a, a:link, a:visited {
    color: var(--accent-blue) !important;
}

a:hover {
    color: #6bb3ff !important;
}

/* Forms */
fieldset {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

fieldset legend {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
}

label, .form-row label {
    color: var(--text-primary) !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--accent-blue) !important;
    outline: none !important;
}

select option {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

/* Checkboxes */
input[type="checkbox"] {
    accent-color: var(--accent-blue) !important;
}

/* Buttons */
.button, input[type="submit"], input[type="button"],
.submit-row input, a.button, .object-tools a {
    background-color: var(--accent-blue) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
}

.button:hover, input[type="submit"]:hover {
    background-color: #3a8ae8 !important;
}

.default {
    background-color: var(--accent-green) !important;
}

.deletelink, .delete {
    background-color: var(--accent-red) !important;
    color: #ffffff !important;
}

/* Messages */
.messagelist li {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin: 10px 0 !important;
}

.messagelist .success {
    border-left: 4px solid var(--accent-green) !important;
}

.messagelist .warning {
    border-left: 4px solid var(--accent-orange) !important;
}

.messagelist .error {
    border-left: 4px solid var(--accent-red) !important;
}

/* Pagination */
.paginator {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.paginator a {
    color: var(--accent-blue) !important;
}

.paginator .this-page {
    background-color: var(--accent-blue) !important;
    color: #ffffff !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
}

/* Filters */
#changelist-filter {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

#changelist-filter h2, #changelist-filter h3 {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

#changelist-filter li {
    background-color: var(--bg-card) !important;
}

#changelist-filter li.selected {
    background-color: var(--bg-darker) !important;
    border-left: 3px solid var(--accent-blue) !important;
}

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

/* Dashboard */
.dashboard .module {
    background-color: var(--bg-card) !important;
}

.dashboard #content {
    background-color: var(--bg-dark) !important;
}

/* Recent Actions */
#recent-actions-module {
    background-color: var(--bg-card) !important;
}

#recent-actions-module h2 {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

#recent-actions-module li {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Object Tools */
.object-tools {
    background-color: transparent !important;
}

.object-tools a {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.object-tools a:hover {
    background-color: var(--bg-darker) !important;
}

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

/* Inline forms */
.inline-group {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

.inline-group h2 {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
}

.inline-related {
    background-color: var(--bg-card) !important;
}

/* Tabular inline */
.tabular {
    background-color: var(--bg-card) !important;
}

.tabular th {
    background-color: var(--bg-darker) !important;
}

.tabular td {
    background-color: var(--bg-card) !important;
}

/* Calendar and Date widgets */
.calendar, .calendarbox {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.calendar td, .calendar th {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

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

.calendar td.selected a {
    background-color: var(--accent-blue) !important;
    color: #ffffff !important;
}

/* Collapsed sections */
.collapsed, fieldset.collapsed {
    background-color: var(--bg-card) !important;
}

details, details[open] {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

summary {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    padding: 10px !important;
}

/* Payment Management Section */
.payment-management-section {
    background-color: var(--bg-card) !important;
    border-top: 2px solid var(--accent-green) !important;
}

.payment-section-header {
    background-color: var(--accent-green) !important;
    color: #ffffff !important;
}

.payment-management-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--accent-green) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
}

.payment-management-title {
    color: var(--accent-green) !important;
}

.payment-management-link {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 12px 20px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}

.payment-management-link:hover {
    background-color: var(--accent-green) !important;
    color: #ffffff !important;
}

.payment-notifications-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--accent-orange) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 20px 0 !important;
}

.payment-notifications-title {
    color: var(--accent-orange) !important;
}

/* Order Status Card */
.order-status-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--accent-blue) !important;
    border-left: 4px solid var(--accent-blue) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

.order-status-card h2 {
    color: var(--accent-blue) !important;
    background: transparent !important;
    margin-top: 0 !important;
}

.order-status-card a {
    display: inline-block !important;
    padding: 15px 30px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    background-color: var(--accent-blue) !important;
    color: #ffffff !important;
}

.order-status-card a:hover {
    background-color: #3a8ae8 !important;
}

.order-status-card p {
    color: var(--text-secondary) !important;
    margin-top: 10px !important;
}

/* Status colors */
.status-approved {
    color: var(--accent-green) !important;
}

.status-pending {
    color: var(--accent-orange) !important;
}

/* Notification badge */
.notification-badge {
    background-color: var(--accent-red) !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 0.8em !important;
    margin-left: 10px !important;
}

/* Inline form and logout */
.inline-form {
    display: inline !important;
}

.logout-link {
    background: none !important;
    border: none !important;
    color: var(--accent-blue) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 0 !important;
    font: inherit !important;
}

.logout-link:hover {
    color: #6bb3ff !important;
}

/* Payment link */
.payment-link {
    color: var(--accent-orange) !important;
    text-decoration: underline !important;
}

.payment-link:hover {
    color: #ffb74d !important;
}

/* Sidebar Payment Management Section */
#nav-sidebar .payment-management-section {
    margin-top: 15px !important;
    border-top: 2px solid var(--accent-green) !important;
}

#nav-sidebar .payment-section-header {
    background-color: var(--accent-green) !important;
    color: #ffffff !important;
}

#nav-sidebar .payment-management-section a {
    padding: 8px 12px !important;
    display: block !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

#nav-sidebar .payment-management-section a:hover {
    background-color: var(--bg-card) !important;
}

#nav-sidebar .payment-management-section .addlink {
    padding-left: 20px !important;
}

/* Footer */
[role="contentinfo"] {
    background-color: var(--bg-darker) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Scrollbars (for webkit browsers) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Force dark backgrounds on ALL elements */
div, section, article, aside, main, header, footer,
.form-row, .fieldBox, .aligned, .module.aligned,
.inline-related, .tabular, .stacked {
    background-color: var(--bg-dark) !important;
}

/* Override white backgrounds in custom pages */
[style*="background-color: #f9f9f9"],
[style*="background: #f9f9f9"],
[style*="background-color: #f8f9fa"],
[style*="background: #f8f9fa"],
[style*="background-color: white"],
[style*="background: white"],
[style*="background-color: #fff"],
[style*="background: #fff"],
[style*="background-color: #ffffff"],
[style*="background: #ffffff"],
[style*="background: #f0f8ff"],
[style*="background-color: #f0f8ff"],
[style*="background: #e8f4fd"],
[style*="background-color: #e8f4fd"],
[style*="background: #e9f5ff"],
[style*="background-color: #e9f5ff"] {
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
}

/* Service notes and other sections */
.service-notes-section,
.service-notes-content,
.service-note-item,
.notes-field-container,
.fieldBox,
#payment-prices-section,
.tailor-payment-total {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Product info cards */
.service-notes-section div[style*="background: white"],
.module div[style*="background: white"],
.module div[style*="background-color: white"] {
    background-color: var(--bg-darker) !important;
    background: var(--bg-darker) !important;
    border-color: var(--border-color) !important;
}

/* All h3, h4, h5 headers */
h3, h4, h5, .module h3, .module h4, .module h5 {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* All paragraphs and text */
p, small, em, span {
    color: var(--text-primary) !important;
}

p.help, .help, small {
    color: var(--text-secondary) !important;
}

/* Textareas */
textarea, textarea.vLargeTextField {
    background-color: var(--bg-darker) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Grand total styling */
.grand-total, .tailor-payment-total {
    background-color: var(--bg-darker) !important;
    border-color: var(--border-color) !important;
}

.grand-total-value {
    color: var(--accent-green) !important;
}

/* Awaiting approval text */
[style*="color: orange"] {
    color: var(--accent-orange) !important;
}

[style*="color: green"] {
    color: var(--accent-green) !important;
}

[style*="color: blue"] {
    color: var(--accent-blue) !important;
}

[style*="color: red"] {
    color: var(--accent-red) !important;
}

/* Update buttons in forms */
.update-price-btn,
button[style*="background: #28a745"],
button[style*="background-color: #28a745"] {
    background-color: var(--accent-green) !important;
    color: #ffffff !important;
}

button[style*="background: #007cba"],
button[style*="background-color: #007cba"] {
    background-color: var(--accent-blue) !important;
    color: #ffffff !important;
}

/* Django admin specific */
.submit-row, .submit-row input {
    background-color: var(--bg-darker) !important;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
    body, #container, #content, .module,
    td, th, tr, table, fieldset,
    input, textarea, select {
        background-color: var(--bg-dark) !important;
        color: var(--text-primary) !important;
    }

    .module, fieldset {
        background-color: var(--bg-card) !important;
    }

    input[type="text"], input[type="password"],
    input[type="email"], textarea, select {
        background-color: var(--bg-darker) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color) !important;
    }
}