/* ----------------------------------------------------------------------------
   FelizComún · Django admin theme
   Same editorial / terracotta aesthetic as the public app.
   Overrides Django 5 admin CSS variables across light, dark and auto modes
   so the result is consistent regardless of the user's OS theme.
---------------------------------------------------------------------------- */

@import url('https://fonts.bunny.net/css?family=newsreader:400,500,600,700|geist:400,500,600,700|geist-mono:400,500&display=swap');

/* Force a single, paper-based palette across all theme modes.
   Selector covers :root, html[data-theme="auto|light|dark"] and the
   @media(prefers-color-scheme: dark) variant; using !important on the
   variables guarantees we win the cascade no matter which Django sheet
   set them last. */
:root,
html,
html[data-theme="auto"],
html[data-theme="light"],
html[data-theme="dark"] {

  /* Brand */
  --primary:        #b3461b !important;  /* terracotta */
  --secondary:      #4a423a !important;  /* deep ink */
  --accent:         #b3461b !important;
  --primary-fg:     #fefcf7 !important;

  /* Body */
  --body-fg:           #1a1814 !important;
  --body-bg:           #f7f3ec !important;  /* cream paper */
  --body-quiet-color:  #8a8074 !important;
  --body-loud-color:   #1a1814 !important;
  --body-medium-color: #4a423a !important;

  /* Header */
  --header-color:           #1a1814 !important;
  --header-branding-color:  #b3461b !important;
  --header-bg:              #fcf9f3 !important;
  --header-link-color:      #4a423a !important;

  /* Breadcrumbs */
  --breadcrumbs-fg:       #4a423a !important;
  --breadcrumbs-link-fg:  #8c351a !important;
  --breadcrumbs-bg:       #ebe3d3 !important;

  /* Links */
  --link-fg:           #8c351a !important;
  --link-hover-color:  #b3461b !important;
  --link-selected-fg:  #b3461b !important;

  /* Borders */
  --hairline-color: #e6dfd2 !important;
  --border-color:   #d4ccbe !important;

  /* Selected / hover */
  --selected-bg:  #fbe6d7 !important;
  --selected-row: #fcf9f3 !important;
  --darkened-bg:  #ebe3d3 !important;

  /* Buttons (form save / generic) */
  --button-fg:                #fefcf7 !important;
  --button-bg:                #4a423a !important;
  --button-hover-bg:          #1a1814 !important;
  --default-button-bg:        #b3461b !important;
  --default-button-hover-bg:  #8c351a !important;
  --close-button-bg:          #8a8074 !important;
  --close-button-hover-bg:    #4a423a !important;
  --delete-button-bg:         #a62828 !important;
  --delete-button-hover-bg:   #7a1d1d !important;

  /* Object tools (Add another, Save and add, etc.) */
  --object-tools-fg:        #fefcf7 !important;
  --object-tools-bg:        #b3461b !important;
  --object-tools-hover-bg:  #8c351a !important;

  /* Messages */
  --message-success-bg: #d8e7d4 !important;
  --message-warning-bg: #f3e0b6 !important;
  --message-error-bg:   #f3d2d2 !important;
  --error-fg:           #a62828 !important;

  /* Fonts */
  --font-family-primary:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  --font-family-monospace:  'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace !important;
}

/* ============================================================================
   Global
============================================================================ */
body {
  background-image:
    radial-gradient(1200px 600px at 25% -10%, rgba(179,70,27,.022), transparent 60%),
    radial-gradient(900px  500px at 100% 110%, rgba(74,66,58,.04),  transparent 60%);
}

/* Display headings get the serif treatment */
#site-name a, .module h2, .module caption, .inline-group h2,
#header h1, h1, h2, h3, .login h1, .calendar caption, .calendarbox h2 {
  font-family: 'Newsreader', Georgia, serif !important;
  letter-spacing: -0.005em;
  font-weight: 600;
}

/* ============================================================================
   Top header
============================================================================ */
#header {
  border-bottom: 1px solid var(--border-color);
  padding: 12px 28px;
  box-shadow: none;
  background: var(--header-bg);
}
#site-name a {
  color: var(--body-fg) !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  text-decoration: none;
}
#site-name a:hover { text-decoration: none; }
#user-tools {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--body-medium-color);
}
#user-tools a {
  color: var(--link-fg);
  border-bottom: 1px dashed var(--hairline-color);
}
#user-tools a:hover { border-bottom-color: var(--link-hover-color); }

/* Brand mark */
.fc-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.fc-mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--primary);
  color: var(--primary-fg);
  font-style: italic; font-weight: 700;
  border-radius: 2px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
  line-height: 1;
}
.fc-name em { color: var(--primary); font-style: italic; font-weight: 600; }
.fc-name { font-family: 'Newsreader', Georgia, serif; font-weight: 500; }

/* ============================================================================
   Breadcrumbs
============================================================================ */
div.breadcrumbs {
  padding: 10px 28px;
  font-size: 0.83rem;
  background: transparent !important;
  color: var(--body-quiet-color);
  border-bottom: 1px solid var(--hairline-color);
}
div.breadcrumbs a { color: var(--link-fg); }

/* ============================================================================
   Modules (cards)
============================================================================ */
.module, .dashboard .module {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(26,24,20,.04);
}
.module h2, .module caption {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--hairline-color);
  color: var(--body-fg) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* App index list */
.module table caption a {
  color: var(--body-fg);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1rem;
}
.module th, .module td {
  padding: 10px 14px !important;
}
.app .module td a {
  color: var(--link-fg);
  font-weight: 500;
}
.addlink, .changelink, .deletelink {
  background-image: none !important;
  padding-left: 0 !important;
  font-weight: 500;
}
.addlink::before {
  content: "+ ";
  color: var(--primary);
  font-weight: 700;
  margin-right: 2px;
}
.changelink::before {
  content: "✎ ";
  color: var(--body-medium-color);
  font-weight: 500;
}
.deletelink::before {
  content: "× ";
  color: var(--delete-button-bg, #a62828);
  font-weight: 700;
}

/* Dashboard 2-col layout */
.dashboard #content-main {
  width: 64%;
}
.dashboard #content-related {
  width: 33%;
  background: transparent;
}
.dashboard #content-related .module {
  background: #fff;
}
.dashboard #content-related .module h2 {
  background: var(--header-bg) !important;
}

/* ============================================================================
   Tables (changelist)
============================================================================ */
#changelist table {
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
}
#changelist table thead th, #result_list thead th {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--body-quiet-color) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 11px 14px !important;
}
#changelist table tbody td, #result_list tbody td {
  border-bottom: 1px solid var(--hairline-color) !important;
  padding: 10px 14px !important;
}
#changelist tbody tr:hover td {
  background: var(--header-bg);
}

#changelist .results {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

/* ============================================================================
   Forms
============================================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="tel"],
input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select, .vTextField, .vURLField {
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  padding: 8px 10px !important;
  background: #fff !important;
  font: inherit !important;
  transition: border-color .12s, box-shadow .12s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(179, 70, 27, 0.14) !important;
  outline: 0 !important;
}

fieldset.module {
  padding: 0;
}
fieldset.module h2 {
  background: var(--header-bg) !important;
}

.form-row {
  border-bottom: 1px solid var(--hairline-color) !important;
  padding: 14px 16px !important;
}
.form-row label {
  font-weight: 500;
  color: var(--body-medium-color);
  width: 180px;
}
.help, .helptext, p.help {
  color: var(--body-quiet-color);
  font-size: .82rem;
  font-style: normal;
}

/* ============================================================================
   Buttons
============================================================================ */
input[type="submit"], button, .button, a.button,
input[type="submit"].default, .submit-row input, .submit-row a {
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid transparent !important;
  font-size: .9rem !important;
  transition: background .12s, border-color .12s, color .12s, transform .06s !important;
}
input[type="submit"].default {
  background: var(--default-button-bg) !important;
  color: var(--primary-fg) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12) !important;
}
input[type="submit"].default:hover {
  background: var(--default-button-hover-bg) !important;
}
.submit-row a, .deletelink {
  background: transparent !important;
  color: var(--delete-button-bg) !important;
  border: 1px solid var(--delete-button-bg) !important;
  padding: 7px 14px !important;
}
.submit-row a:hover, .deletelink:hover {
  background: var(--delete-button-bg) !important;
  color: #fff !important;
}
.button, a.button {
  background: var(--button-bg) !important;
  color: var(--button-fg) !important;
}
.button:hover, a.button:hover {
  background: var(--button-hover-bg) !important;
}

/* Object tools bar (Add another, History, View on site) */
.object-tools {
  margin-bottom: 16px;
}
.object-tools li a {
  background: var(--object-tools-bg) !important;
  color: var(--object-tools-fg) !important;
  border-radius: 4px !important;
  font-size: .82rem !important;
  padding: 6px 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.object-tools li a:hover {
  background: var(--object-tools-hover-bg) !important;
}
.object-tools li a.viewsitelink, .object-tools li a.historylink, .object-tools li a.addlink {
  background-image: none !important;
  padding-left: 14px !important;
}

/* ============================================================================
   Login page
============================================================================ */
body.login {
  background: var(--body-bg) !important;
}
.login #container {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(26,24,20,.08), 0 6px 18px rgba(26,24,20,.04);
  margin-top: 8vh;
  overflow: hidden;
}
.login #header {
  background: var(--ink, #1a1814) !important;
  background: linear-gradient(135deg, #2a241e 0%, #1a1814 100%) !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
  padding: 24px 28px !important;
}
.login #header h1, .login #header a:link, .login #header a:visited,
.login #site-name a {
  color: #fff !important;
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 1.2rem !important;
}
.login #content {
  padding: 28px !important;
}
.login .form-row {
  border-bottom: 0 !important;
  padding: 0 0 16px 0 !important;
}
.login .form-row label {
  width: auto;
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
}
.login .submit-row {
  padding: 0 !important;
  margin-top: 8px !important;
  background: transparent !important;
  border: 0 !important;
}
.login .submit-row input {
  width: 100% !important;
  padding: 10px !important;
  background: var(--default-button-bg) !important;
  color: var(--primary-fg) !important;
  font-size: .92rem !important;
}

/* ============================================================================
   Misc polish
============================================================================ */
ul.messagelist li {
  border-radius: 4px !important;
  border: 1px solid currentColor;
  padding: 10px 14px !important;
  font-weight: 500;
}
ul.messagelist li.success { background: var(--message-success-bg) !important; color: #2f6f3a !important; }
ul.messagelist li.warning { background: var(--message-warning-bg) !important; color: #b87c00 !important; }
ul.messagelist li.error   { background: var(--message-error-bg) !important;   color: #a62828 !important; }

.paginator {
  font-size: .85rem;
  color: var(--body-quiet-color);
  padding: 12px 0;
}
.paginator a, .paginator .this-page {
  border-radius: 3px;
  padding: 4px 10px;
}
.paginator a {
  background: #fff;
  border: 1px solid var(--border-color);
}
.paginator .this-page {
  background: var(--primary);
  color: var(--primary-fg);
}

#footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--body-quiet-color);
  padding: 24px;
  border-top: 1px solid var(--hairline-color);
  margin-top: 32px;
}

/* History list */
#change-history table {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

/* Filter sidebar */
#changelist-filter {
  background: var(--header-bg);
  border-left: 1px solid var(--border-color);
}
#changelist-filter h2 {
  background: var(--breadcrumbs-bg) !important;
  border-bottom: 1px solid var(--border-color);
  font-size: .8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--body-fg) !important;
}
#changelist-filter li.selected a {
  color: var(--primary) !important;
  font-weight: 600;
}

/* Calendar / clock popups */
.calendarbox, .clockbox {
  background: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  box-shadow: 0 24px 48px rgba(26,24,20,.10) !important;
}
.calendar td a:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Selectors (m2m widget) */
.selector h2, .selector-available h2, .selector-chosen h2 {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.selector-add, .selector-remove {
  background: var(--button-bg) !important;
}

/* Tabular inlines */
.inline-group .tabular tr.has_original td {
  padding-top: 14px;
}
.inline-related h3 {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--hairline-color) !important;
  font-size: 0.9rem;
  letter-spacing: 0;
}

/* Search bar */
#changelist-search input[type="submit"] {
  background: var(--button-bg) !important;
}
#searchbar {
  border: 1px solid var(--border-color) !important;
  border-radius: 3px !important;
  padding: 7px 10px !important;
}

/* Scrollbars hint of warmth */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-tint, #fcf9f3); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--body-quiet-color); }