/* ============================================================
   easyDmat Admin Skin v2 — Clean rewrite
   Philosophy: Restrained, modern B2B. Brand color as accent only.
   Burgundy (#862A27) appears on: primary buttons, active links,
   small indicators. Everything else is neutral.
   ============================================================ */


/* ═══════════════════════════════════════════════
   1. DJANGO CSS CUSTOM PROPERTIES
   This is the primary theming lever — Django's own
   base.css reads these variables everywhere.
   ═══════════════════════════════════════════════ */
:root {
  --primary: #862A27;
  --secondary: #6B7280;
  --accent: #862A27;
  --primary-fg: #fff;

  --body-fg: #1f2937;
  --body-bg: #f3f4f6;
  --body-quiet-color: #6B7280;
  --body-medium-color: #4B5563;
  --body-loud-color: #111827;

  /* Header: warm dark — matches sidebar tone */
  --header-color: #f9fafb;
  --header-branding-color: #fff;
  --header-bg: #1e2530;
  --header-link-color: #d1d5db;

  /* Breadcrumbs: subtle warm gray */
  --breadcrumbs-fg: #6B7280;
  --breadcrumbs-link-fg: #862A27;
  --breadcrumbs-bg: #fff;

  --link-fg: #862A27;
  --link-hover-color: #5c1c1a;
  --link-selected-fg: #5c1c1a;

  --hairline-color: #e5e7eb;
  --border-color: #e5e7eb;

  --error-fg: #dc2626;

  --message-success-bg: #ecfdf5;
  --message-warning-bg: #fffbeb;
  --message-error-bg: #fef2f2;

  --darkened-bg: #f9fafb;
  --selected-bg: #f3f4f6;
  --selected-row: #faf5f5;

  --button-fg: #fff;
  --button-bg: #862A27;
  --button-hover-bg: #5c1c1a;
  --default-button-bg: #862A27;
  --default-button-hover-bg: #5c1c1a;
  --close-button-bg: #6B7280;
  --close-button-hover-bg: #4B5563;
  --delete-button-bg: #dc2626;
  --delete-button-hover-bg: #b91c1c;

  --object-tools-fg: #fff;
  --object-tools-bg: #4B5563;
  --object-tools-hover-bg: #374151;

  --font-family-primary: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

/* Force light mode — no dark mode surprises */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}


/* ═══════════════════════════════════════════════
   2. GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════ */
body {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #111827;
}

code, pre {
  font-size: 12px;
}


/* ═══════════════════════════════════════════════
   3. HEADER
   Dark charcoal bar — clean, authoritative.
   Brand name in white. User tools subtle.
   ═══════════════════════════════════════════════ */
#header {
  background: #1e2530;
  padding: 0 32px;
  min-height: 52px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-bottom: none;
}

#branding {
  display: flex;
  align-items: center;
}

#branding h1, #branding h1 a,
#site-name, #site-name a {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#branding h1 a:hover,
#site-name a:hover {
  text-decoration: none;
  color: #e5e7eb;
}

#user-tools {
  font-size: 11px;
  color: #9CA3AF;
  letter-spacing: 0.3px;
}

#user-tools a,
#user-tools a:link,
#user-tools a:visited,
#logout-form button {
  color: #d1d5db;
  border-bottom: none !important;
  text-decoration: none;
}

#user-tools a:hover,
#logout-form button:hover {
  color: #fff;
  text-decoration: none;
}

/* Theme toggle */
.theme-toggle {
  color: #9CA3AF;
}

.theme-toggle:hover {
  color: #fff;
}


/* ═══════════════════════════════════════════════
   4. BREADCRUMBS
   White strip, subtle. Separates header from content.
   ═══════════════════════════════════════════════ */
div.breadcrumbs {
  background: #fff;
  color: #6B7280;
  font-size: 12px;
  padding: 8px 32px;
  border-bottom: 1px solid #e5e7eb;
}

div.breadcrumbs a {
  color: #862A27;
}

div.breadcrumbs a:hover {
  color: #5c1c1a;
}


/* ═══════════════════════════════════════════════
   5. SIDEBAR
   Lighter dark background for better readability.
   Warm undertone to match burgundy brand.
   ═══════════════════════════════════════════════ */
#nav-sidebar {
  background: #1e2530 !important;
  border-right: 1px solid #2d3544;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* Module wrappers — transparent */
#nav-sidebar .module {
  background: transparent !important;
  border: none;
  border-radius: 0;
  margin-bottom: 4px;
}

/* Section captions — brighter for contrast */
#nav-sidebar .module caption {
  background: rgba(255,255,255,0.04) !important;
  color: #8b95a5;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 16px 6px 16px;
  border: none;
}

#nav-sidebar .module caption a,
#nav-sidebar .module caption a.section,
#nav-sidebar .module caption a.section:link,
#nav-sidebar .module caption a.section:visited {
  color: #8b95a5 !important;
  font-weight: 600;
}

#nav-sidebar .module caption a:hover {
  color: #c8cdd4 !important;
}

/* Tables inside sidebar */
#nav-sidebar table {
  background: transparent;
}

#nav-sidebar .module th,
#nav-sidebar .module td {
  background: transparent;
  border: none;
  padding: 0;
}

/* Navigation links — brighter default text */
#nav-sidebar th a,
#nav-sidebar .module th a,
#nav-sidebar .module th a:link,
#nav-sidebar .module th a:visited {
  color: #c0c7d0;
  font-size: 13px;
  font-weight: 400;
  padding: 8px 16px 8px 20px;
  display: block;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

/* Hover — strong burgundy tint highlight */
#nav-sidebar th a:hover,
#nav-sidebar .module th a:hover {
  color: #fff !important;
  background: rgba(134, 42, 39, 0.35) !important;
  border-left-color: #c0443f;
}

/* Active model — burgundy accent */
#nav-sidebar .current-model {
  background: rgba(134, 42, 39, 0.25) !important;
}

#nav-sidebar .current-model th a,
#nav-sidebar .current-model th a:link,
#nav-sidebar .current-model th a:visited {
  color: #fff;
  font-weight: 500;
  border-left-color: #c0443f;
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: #fff !important;
}

/* Add links — visible with warm accent */
#nav-sidebar td a.addlink {
  color: #9ca8b6;
  font-size: 11px;
  padding: 4px 16px 4px 20px;
  display: block;
  transition: color 0.15s ease;
}

#nav-sidebar td a.addlink:hover {
  color: #fff;
}

/* Toggle button */
.toggle-nav-sidebar {
  background: #1e2530 !important;
  color: #8b95a5;
  border-right: 1px solid #2d3544;
}

.toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus {
  background: #2d3544 !important;
  color: #e5e7eb;
}

/* Filter input */
#nav-filter {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15);
  color: #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  padding: 6px 10px;
  margin: 8px 12px;
  width: calc(100% - 24px);
}

#nav-filter::placeholder {
  color: #7a8494;
}

#nav-filter:focus {
  border-color: #862A27;
  outline: none;
  background: rgba(255,255,255,0.12) !important;
}

#nav-filter.no-results {
  background: rgba(220,38,38,0.15) !important;
}

/* Sidebar scrollbar (webkit) */
#nav-sidebar::-webkit-scrollbar { width: 4px; }
#nav-sidebar::-webkit-scrollbar-track { background: transparent; }
#nav-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }


/* ═══════════════════════════════════════════════
   6. CONTENT AREA
   ═══════════════════════════════════════════════ */
#content {
  padding: 24px 32px;
}

#content > h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24px;
}


/* ═══════════════════════════════════════════════
   7. MODULES (content area only)
   Light card feel — white bg, subtle border.
   ═══════════════════════════════════════════════ */
#content .module,
#content-main > .module {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin-bottom: 24px;
  overflow: hidden;
}

/* Module headers — subtle gray bar, not colored */
#content .module h2,
#content .module caption,
#content-main > .module h2,
#content-main > .module caption {
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 8px 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#content .module h2 a,
#content .module caption a {
  color: #374151;
}

/* Module content spacing */
#content .module table th,
#content .module table td {
  padding: 8px 16px;
}


/* ═══════════════════════════════════════════════
   8. FIELDSETS
   Cards with generous spacing between them.
   ═══════════════════════════════════════════════ */
fieldset {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Fieldset headers */
fieldset h2,
#content fieldset h2,
#content fieldset.module h2 {
  background: #f9fafb !important;
  color: #374151 !important;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
  border-left: none !important;
  border-radius: 8px 8px 0 0;
  text-transform: none;
  letter-spacing: normal;
}

fieldset.collapsed {
  margin-bottom: 12px;
}

fieldset .description {
  color: #6B7280;
  font-size: 13px;
  padding: 8px 16px;
  margin: 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

/* Collapse toggle links */
fieldset.collapse h2 a,
fieldset.collapsed h2 a {
  color: #862A27 !important;
  font-size: 12px;
  font-weight: 400;
}

/* Form rows inside fieldsets */
fieldset .form-row {
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
}

fieldset .form-row:last-child {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════
   9. BUTTONS
   Primary = burgundy (sparingly). Rest = neutral.
   Sharp-ish corners (4px, not 0).
   ═══════════════════════════════════════════════ */
input[type="submit"],
input[type="button"],
.submit-row input,
.button,
a.button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

/* Primary */
.submit-row input.default,
input[type="submit"] {
  background: #862A27;
  color: #fff;
  border-color: #862A27;
}

.submit-row input.default:hover,
input[type="submit"]:hover {
  background: #5c1c1a;
  border-color: #5c1c1a;
}

/* Secondary (non-default submit buttons) */
.submit-row input:not(.default) {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.submit-row input:not(.default):hover {
  background: #f3f4f6;
  border-color: #9CA3AF;
}

/* Delete */
.submit-row a.deletelink,
a.deletelink {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 8px 16px;
}

.submit-row a.deletelink:hover,
a.deletelink:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Object tools (HISTORY, Add, etc.) */
.object-tools {
  margin-bottom: 16px;
}

.object-tools a,
.object-tools a:link,
.object-tools a:visited {
  background: #fff;
  color: #374151 !important;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.object-tools a:hover {
  background: #f3f4f6;
  border-color: #9CA3AF;
}

/* Submit row */
.submit-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Add row links */
.add-row a,
.inline-group .add-row a {
  color: #862A27;
}

.add-row a:hover,
.inline-group .add-row a:hover {
  color: #5c1c1a;
}


/* ═══════════════════════════════════════════════
   10. FORM INPUTS
   Clean, modern, generous height.
   ═══════════════════════════════════════════════ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.vTextField,
.vURLField,
.vIntegerField {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  min-height: 36px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
  padding: 6px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: #862A27;
  outline: none;
  box-shadow: 0 0 0 3px rgba(134, 42, 39, 0.08);
}

/* Checkbox */
input[type="checkbox"] {
  accent-color: #862A27;
}

/* Select2 / autocomplete */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  min-height: 36px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #862A27;
}

/* Labels */
label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}


/* ═══════════════════════════════════════════════
   11. TABLES
   Clean, scannable, subtle hover.
   ═══════════════════════════════════════════════ */
#result_list table,
.results table {
  border-collapse: collapse;
  width: 100%;
}

#result_list thead th,
.results thead th {
  background: #f9fafb;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid #e5e7eb;
  padding: 10px 14px;
}

#result_list thead th a,
.results thead th a {
  color: #6B7280;
}

#result_list thead th.sorted a {
  color: #111827;
}

#result_list tbody td,
.results tbody td {
  border-bottom: 1px solid #f3f4f6;
  padding: 10px 14px;
  font-size: 13px;
  color: #374151;
}

#result_list tbody tr:hover td,
.results tbody tr:hover td {
  background: #f9fafb;
}

table thead th.sorted {
  background: #f3f4f6;
}

#result_list a,
#changelist a {
  color: #862A27;
}

#result_list a:hover,
#changelist a:hover {
  color: #5c1c1a;
}


/* ═══════════════════════════════════════════════
   12. CHANGELIST TOOLS
   Search bar, filters, actions, paginator.
   ═══════════════════════════════════════════════ */

/* Search toolbar */
#toolbar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#searchbar {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  padding: 6px 12px;
  min-height: 36px;
}

#searchbar:focus {
  border-color: #862A27;
  box-shadow: 0 0 0 3px rgba(134, 42, 39, 0.08);
}

#toolbar form input[type="submit"] {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 4px;
}

/* Filter panel (right side) */
#changelist-filter {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#changelist-filter h2 {
  background: #f9fafb;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 16px;
}

#changelist-filter h3 {
  color: #111827;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px 4px;
  margin: 0;
}

#changelist-filter li {
  padding: 0;
}

#changelist-filter li a {
  color: #6B7280;
  font-size: 13px;
  padding: 3px 16px;
  display: block;
}

#changelist-filter li a:hover {
  color: #111827;
}

#changelist-filter li.selected a {
  color: #862A27;
  font-weight: 600;
}

/* Actions bar */
.actions {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.actions select {
  border-radius: 6px;
  font-size: 13px;
}

.actions button {
  background: #862A27;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
}

.actions button:hover {
  background: #5c1c1a;
}

/* Paginator */
.paginator {
  border-top: 1px solid #e5e7eb;
  padding: 10px 0;
  color: #6B7280;
  font-size: 13px;
}

.paginator a:link,
.paginator a:visited {
  color: #862A27;
}


/* ═══════════════════════════════════════════════
   13. INLINE GROUPS
   ═══════════════════════════════════════════════ */
.inline-group {
  margin-top: 24px;
}

.inline-group h2 {
  background: #f9fafb;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 8px 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.inline-group .tabular {
  border: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.inline-group .tabular thead th {
  background: #f9fafb;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid #e5e7eb;
  padding: 8px 12px;
}

.inline-group .tabular td,
.inline-group .tabular th {
  font-size: 13px;
  padding: 8px 12px;
}

.inline-related h3 {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
  border-radius: 8px 8px 0 0;
}


/* ═══════════════════════════════════════════════
   14. MESSAGES
   ═══════════════════════════════════════════════ */
.messagelist li {
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.messagelist li.success {
  background: #ecfdf5;
  border-left: 4px solid #059669;
  color: #065f46;
}

.messagelist li.warning {
  background: #fffbeb;
  border-left: 4px solid #d97706;
  color: #92400e;
}

.messagelist li.error {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  color: #991b1b;
}


/* ═══════════════════════════════════════════════
   15. HELP TEXT & DESCRIPTIONS
   ═══════════════════════════════════════════════ */
.help,
.helptext,
div.help {
  font-size: 12px;
  color: #6B7280;
}


/* ═══════════════════════════════════════════════
   16. CALENDAR & DATE WIDGETS
   ═══════════════════════════════════════════════ */
.calendar td a,
.calendarbox .calendarnav a {
  color: #862A27;
}

.calendar td.selected a {
  background: #862A27;
  color: #fff;
}

.calendar td a:hover {
  background: #862A27;
  color: #fff;
}


/* ═══════════════════════════════════════════════
   17. RELATED WIDGETS
   ═══════════════════════════════════════════════ */
.related-widget-wrapper .related-lookup,
.related-widget-wrapper .add-related,
.related-widget-wrapper .change-related,
.related-widget-wrapper .delete-related,
.related-lookup {
  color: #862A27;
}


/* ═══════════════════════════════════════════════
   18. PRE / CODE
   ═══════════════════════════════════════════════ */
pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  color: #1f2937;
  overflow-x: auto;
}

code {
  color: #862A27;
  font-size: 13px;
}


/* ═══════════════════════════════════════════════
   19. INDEX PAGE (DASHBOARD)
   Modules on the admin index get the card treatment.
   ═══════════════════════════════════════════════ */
#content-main .module table th a {
  color: #862A27;
}

#content-main .module table th a:hover {
  color: #5c1c1a;
}

#content-main .module table td a {
  color: #862A27;
}


/* ═══════════════════════════════════════════════
   20. LOGIN PAGE
   ═══════════════════════════════════════════════ */
#login-form input[type="text"],
#login-form input[type="password"] {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

#login-form input[type="submit"] {
  background: #862A27;
  border: 1px solid #862A27;
  border-radius: 4px;
  width: 100%;
  padding: 10px;
  font-size: 14px;
}

#login-form input[type="submit"]:hover {
  background: #5c1c1a;
  border-color: #5c1c1a;
}

/* Login page header — ensure white text on dark bg */
#header h1 a,
#header #site-name a,
#header #branding h1 a {
  color: #fff !important;
}


/* ═══════════════════════════════════════════════
   21. UTILITY CLASSES (for admin.py format_html)
   ═══════════════════════════════════════════════ */
.edm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.edm-badge-sm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.edm-badge-bdc { background: #e1edf6; color: #2d5577; }
.edm-badge-facture { background: #ece8f3; color: #52456b; }
.edm-badge-dbs { background: #e2f0e8; color: #2d5e45; }
.edm-badge-carte_grise { background: #f2ece0; color: #6b5328; }

.edm-badge-core { background: #2d5e45; color: #fff; }
.edm-badge-override { background: #b45309; color: #fff; }
.edm-badge-warn { background: #dc2626; color: #fff; }

.edm-text-muted { color: #9CA3AF; }
.edm-text-success { color: #059669; }
.edm-text-danger { color: #dc2626; }
.edm-text-primary { color: #862A27; }


/* ═══════════════════════════════════════════════
   22. RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  #header {
    padding: 0 16px;
  }

  #content {
    padding: 16px;
  }

  div.breadcrumbs {
    padding: 8px 16px;
  }
}


/* ═══════════════════════════════════════════════
   23. DJANGO 5 CHANGEFORM TAB NAVIGATION
   Fieldset tabs on change_form pages.
   Replace yellow/gold with burgundy theme.
   ═══════════════════════════════════════════════ */

/* Tab container */
.changeform-navigation {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* All tab items */
.changeform-navigation a,
.changeform-navigation a:link,
.changeform-navigation a:visited {
  background: #f9fafb !important;
  color: #6B7280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
  display: inline-block;
}

/* Tab hover */
.changeform-navigation a:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-bottom-color: #d1d5db !important;
}

/* Active tab — burgundy accent */
.changeform-navigation a.active,
.changeform-navigation a.selected,
.changeform-navigation a[aria-selected="true"],
.changeform-navigation .active a,
.changeform-navigation .selected a {
  background: #862A27 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #862A27 !important;
}

.changeform-navigation a.active:hover,
.changeform-navigation a.selected:hover,
.changeform-navigation a[aria-selected="true"]:hover {
  background: #5c1c1a !important;
  color: #fff !important;
}

/* Django 5 uses <nav> with flex items */
nav.changeform-navigation {
  border-bottom: 2px solid #e5e7eb !important;
}


/* ═══════════════════════════════════════════════
   24. COLLAPSIBLE FIELDSETS
   Clean, consistent collapse headers.
   No dark backgrounds, no gold accents.
   ═══════════════════════════════════════════════ */

/* Collapsed fieldset — keep it compact */
fieldset.collapsed {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
}

fieldset.collapsed h2 {
  background: #f9fafb !important;
  color: #374151 !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Django 5 uses <details><summary> for collapsible fieldsets.
   Override the dark default background on <summary>. */
fieldset.collapse details summary,
fieldset.collapsed details summary,
fieldset details summary {
  background: #f9fafb !important;
  color: #374151 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0;
  list-style: none;
  cursor: pointer;
}

/* Remove default disclosure triangle and add custom one */
fieldset details summary::-webkit-details-marker {
  display: none;
}

fieldset details summary::marker {
  content: "";
  display: none;
}

/* When details is closed, fully round the summary */
fieldset details:not([open]) summary {
  border-radius: 8px;
  border-bottom: none;
}

/* When details is open, only round top */
fieldset details[open] summary {
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e5e7eb;
}

/* The h2 inside summary */
fieldset details summary h2,
fieldset details summary .fieldset-heading {
  background: transparent !important;
  color: #374151 !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Add a subtle chevron indicator for collapse state */
fieldset details summary h2::before {
  content: "\25B6"; /* right triangle */
  font-size: 10px;
  color: #862A27;
  transition: transform 0.2s ease;
  display: inline-block;
}

fieldset details[open] summary h2::before {
  transform: rotate(90deg);
}

/* Collapse/expand toggle styling */
fieldset.collapse h2,
fieldset.collapsed h2 {
  cursor: pointer;
  position: relative;
}

fieldset.collapse h2 a.collapse-toggle,
fieldset.collapsed h2 a.collapse-toggle,
fieldset.collapse h2 a,
fieldset.collapsed h2 a {
  color: #862A27 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-left: 8px;
}

fieldset.collapse h2 a:hover,
fieldset.collapsed h2 a:hover {
  color: #5c1c1a !important;
  text-decoration: underline !important;
}

/* Django's default collapse uses a span with show/hide */
fieldset.collapsed .collapse-toggle,
fieldset.collapsed a[id^="fieldsetcollapser"] {
  color: #862A27 !important;
}

/* Override Django's default dark bg for collapsed fieldsets */
fieldset.collapsed *,
fieldset.collapsed h2 * {
  color: #374151;
}

fieldset.collapsed h2 a,
fieldset.collapsed h2 a * {
  color: #862A27 !important;
}


/* ═══════════════════════════════════════════════
   25. BOOLEAN ICONS IN TABLES
   Cleaner boolean display for list views.
   ═══════════════════════════════════════════════ */

/* Make boolean icons more subtle */
#result_list img[src*="icon-yes"],
#result_list img[src*="icon-no"],
#result_list img[src*="icon-unknown"] {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

/* Table cell spacing improvements for dense tables */
#result_list tbody td {
  padding: 8px 12px;
  vertical-align: middle;
}

#result_list thead th {
  padding: 8px 12px;
}


/* ═══════════════════════════════════════════════
   26. INLINE TAB-LIKE NAVIGATION (jQuery UI tabs)
   Some Django admin extensions use jQuery UI tabs.
   Override the yellow/gold default.
   ═══════════════════════════════════════════════ */

/* jQuery UI tabs override (if present) */
.ui-tabs .ui-tabs-nav {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 0 !important;
}

.ui-tabs .ui-tabs-nav li {
  background: #f9fafb !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 !important;
}

.ui-tabs .ui-tabs-nav li a {
  color: #6B7280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
  background: #862A27 !important;
  border-bottom-color: #862A27 !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
  color: #fff !important;
  font-weight: 600 !important;
}

.ui-tabs .ui-tabs-nav li:hover {
  background: #f3f4f6 !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active:hover {
  background: #5c1c1a !important;
}


/* ═══════════════════════════════════════════════
   27. FILTER PANEL IMPROVEMENTS
   Better contrast on changelist filter sidebar.
   ═══════════════════════════════════════════════ */

#changelist-filter {
  padding: 0;
  overflow: hidden;
}

#changelist-filter ul {
  padding: 4px 0;
  margin: 0 0 8px;
}

#changelist-filter li.selected a {
  color: #862A27;
  font-weight: 600;
  background: rgba(134, 42, 39, 0.06);
  border-radius: 4px;
  margin: 0 8px;
  padding: 3px 8px;
}


/* ═══════════════════════════════════════════════
   28. DJANGO DEFAULT OVERRIDES
   Catch-all for Django's own styles that use
   yellow/gold or clashing colors.
   ═══════════════════════════════════════════════ */

/* Override Django's default module caption backgrounds */
#container .module h2,
#container .module caption {
  background: #f9fafb;
  color: #374151;
}

/* Override any remaining yellow/gold focus states */
:focus-visible {
  outline-color: #862A27;
}

/* Ensure all anchor text inside form rows is burgundy */
fieldset .form-row a:link,
fieldset .form-row a:visited {
  color: #862A27;
}

fieldset .form-row a:hover {
  color: #5c1c1a;
}

/* Template zone inline table: better link visibility */
.inline-group a:link,
.inline-group a:visited {
  color: #862A27;
}

.inline-group a:hover {
  color: #5c1c1a;
}

/* Ensure consistent styling for "show" / "hide" collapse links */
a[id^="fieldsetcollapser"],
.toggle-all,
.collapser {
  color: #862A27 !important;
  font-size: 12px;
  font-weight: 500;
}

a[id^="fieldsetcollapser"]:hover,
.toggle-all:hover,
.collapser:hover {
  color: #5c1c1a !important;
}

/* Override Django's selected-row background (avoid yellow) */
#result_list tbody tr.selected td {
  background: #faf5f5;
}

/* Action checkbox selected row */
#result_list tbody tr.selected {
  background: #faf5f5;
}

/* Django's admin band override — ensure no yellow/gold leaks */
.object-tools a.addlink,
.object-tools a.addlink:link,
.object-tools a.addlink:visited {
  background: #862A27 !important;
  color: #fff !important;
  border-color: #862A27 !important;
}

.object-tools a.addlink:hover {
  background: #5c1c1a !important;
  border-color: #5c1c1a !important;
}


/* ═══════════════════════════════════════════════
   29. TEXT OVERFLOW & INLINE TABLE FIXES
   Force all inline tables and long content to
   stay within their containers. No overlapping.
   ═══════════════════════════════════════════════ */

/* Inline tabular tables — scrollable container */
.inline-group .tabular {
  overflow-x: auto;
}

.inline-group .tabular table {
  width: 100%;
  table-layout: auto;
}

/* Inline table cells: clip long content */
.inline-group .tabular td,
.inline-group .tabular th {
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
  position: relative;
}

/* The zone_definition autocomplete column — contains select2 + 4 icon links.
   Must constrain the entire wrapper to prevent overflow. */
.inline-group .tabular td .related-widget-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}

/* Force select2 to shrink — Django sets inline width:280px which overflows */
.inline-group .tabular td .select2-container {
  width: 160px !important;
  min-width: 100px;
  flex-shrink: 1;
}

.inline-group .tabular td .select2-selection__rendered {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Related widget icons — keep them compact and inline */
.inline-group .tabular td .related-widget-wrapper-link {
  flex-shrink: 0;
}

.inline-group .tabular td .related-widget-wrapper-link img {
  width: 16px;
  height: 16px;
}

/* File path fields — these are the main culprits */
.inline-group .tabular td p,
.inline-group .tabular td a,
.inline-group .tabular td .file-upload,
.inline-group .tabular td .clearable-file-input,
td p.file-upload,
p.file-upload {
  word-break: break-all;
  overflow-wrap: break-word;
  display: block;
  max-width: 100%;
  overflow: hidden;
}

/* Currently: file path text — make it smaller and wrapped */
.inline-group .tabular td p a,
.file-upload a {
  word-break: break-all;
  font-size: 12px;
  color: #6B7280;
}

/* Autocomplete widget help text (long "Template -> zone" strings) */
.inline-group .tabular td .related-widget-wrapper,
.inline-group .tabular td .related-widget-wrapper + .help,
.inline-group .tabular td .select2-container ~ span,
.inline-group .tabular .related-widget-wrapper ~ * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 11px;
}

/* The "TemplateName (family) -> zone_name" text below autocomplete */
.inline-group .tabular td .related-widget-wrapper {
  overflow: visible; /* let the select2 dropdown show */
}

/* But the help/description text under it — truncate */
.inline-group .tabular td .help,
.inline-group .tabular td .helptext {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 10px;
  color: #9CA3AF;
}

/* Related widget icons (edit/add/delete) — prevent wrapping */
.inline-group .tabular .related-widget-wrapper .related-lookup,
.inline-group .tabular .related-widget-wrapper .change-related,
.inline-group .tabular .related-widget-wrapper .add-related,
.inline-group .tabular .related-widget-wrapper .delete-related {
  display: inline-block;
  vertical-align: middle;
}

/* Inline stacked — prevent title overlap */
.inline-related h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 120px;
}

/* General table cell overflow protection for list views */
#result_list td,
.results td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* Help text and descriptions */
.help, .helptext, div.help {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Readonly fields */
.readonly, div.readonly {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Select2 autocomplete — long zone names in inline */
.inline-group .select2-container {
  max-width: 100% !important;
}

.inline-group .select2-selection__rendered {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* ═══════════════════════════════════════════════
   30. FORM FIELD WIDTH FIXES
   ═══════════════════════════════════════════════ */

textarea, .vLargeTextField {
  max-width: 100%;
  box-sizing: border-box;
}

.jsoneditor, pre {
  max-width: 100%;
  overflow-x: auto;
}

.select2-container {
  max-width: 100% !important;
}