/* ============================================================
   GAIA ADMIN THEME — overrides for Django admin
   Requires gaia.css (loaded via base_site.html)
   ============================================================ */

/* --- Header: match Bootstrap navbar height and layout --- */
#header {
  background: var(--gaia-pink) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 52px !important;
  padding: 0 16px !important;
}
#branding {
  display: flex;
  align-items: center;
}
#branding h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  font-family: var(--gaia-font) !important;
  line-height: 1 !important;
}
#branding h1 a:link,
#branding h1 a:visited {
  color: #fff !important;
  text-decoration: none !important;
}
#user-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--gaia-font) !important;
  font-size: 0.82rem !important;
  color: rgba(255,255,255,.88) !important;
  padding: 0 !important;
}
#user-tools a:link,
#user-tools a:visited {
  color: rgba(255,255,255,.88) !important;
}
#user-tools a:hover { color: #fff !important; }

/* Welcome name */
.gaia-welcome {
  font-weight: 600;
  color: #fff;
}
.gaia-divider {
  color: rgba(255,255,255,.4);
  font-size: 0.7rem;
}

/* Logout button — plain pink nav link, no browser button chrome */
.gaia-logout-btn {
  background: none !important;
  border: none !important;
  color: var(--gaia-pink) !important;
  font-family: var(--gaia-font) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
}
.gaia-logout-btn:hover { color: var(--gaia-pink-dark) !important; }

/* Hide skip-to-content link */
.skip-to-content-link { display: none !important; }

/* --- Breadcrumbs --- */
.breadcrumbs {
  background: var(--gaia-pink-pale) !important;
  color: var(--gaia-pink-dark) !important;
  font-family: var(--gaia-font) !important;
  font-size: 0.82rem !important;
}
.breadcrumbs a:link,
.breadcrumbs a:visited { color: var(--gaia-pink) !important; }
.breadcrumbs a:hover   { color: var(--gaia-pink-dark) !important; }

/* --- Primary nav (module titles, sidebar headers) --- */
.module h2, .module caption, .inline-group h2 {
  background: var(--gaia-pink) !important;
  color: #fff !important;
  font-family: var(--gaia-font) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 8px 10px !important;
}

/* --- Submit row buttons (outline style) --- */
.submit-row {
  font-family: var(--gaia-font) !important;
}
.submit-row input[type=submit],
.submit-row input[type=button] {
  background: var(--gaia-white) !important;
  border: 1.5px solid var(--gaia-blue) !important;
  color: var(--gaia-blue) !important;
  border-radius: var(--gaia-radius) !important;
  font-family: var(--gaia-font) !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  transition: background 0.15s, color 0.15s !important;
}
.submit-row input[type=submit]:hover,
.submit-row input[type=button]:hover {
  background: var(--gaia-blue) !important;
  color: var(--gaia-white) !important;
}
/* Primary Save button — pink */
.submit-row input.default {
  background: var(--gaia-white) !important;
  border: 1.5px solid var(--gaia-pink) !important;
  color: var(--gaia-pink) !important;
  font-weight: 600 !important;
}
.submit-row input.default:hover {
  background: var(--gaia-pink) !important;
  color: var(--gaia-white) !important;
}

/* Delete button — small, on the left, not full-width */
.submit-row p.deletelink-box {
  width: fit-content !important;
  margin: 0 !important;
}
.submit-row a.deletelink {
  display: inline-block !important;
  background: var(--gaia-white) !important;
  border: 1.5px solid #c62828 !important;
  color: #c62828 !important;
  border-radius: var(--gaia-radius) !important;
  padding: 5px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  font-family: var(--gaia-font) !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: background 0.15s, color 0.15s !important;
}
.submit-row a.deletelink:hover {
  background: #c62828 !important;
  color: var(--gaia-white) !important;
}

/* --- Paginator: Django admin's pagination.html uses <nav><ul><li> — make them inline --- */
.paginator ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none !important;
  padding: 0;
  margin: 0 0 6px 0;
}
.paginator ul li {
  list-style: none !important;
  display: inline-flex;
}

/* --- Links throughout admin --- */
a:link, a:visited { color: var(--gaia-pink); }
a:hover           { color: var(--gaia-pink-dark); }

/* --- Font throughout --- */
body, td, th, input, select, textarea {
  font-family: var(--gaia-font) !important;
}
html { font-size: 12px !important; }
body { font-size: 12px !important; }

/* --- Thin 0.5px borders throughout admin --- */
table, td, th,
.module, .inline-group, .inline-related,
fieldset, .form-row,
.results, #changelist,
.help, .errornote,
.vDateField, .vTimeField {
  border-width: 0.5px !important;
}

/* --- Input/select/textarea borders --- */
input[type=text], input[type=number], input[type=email], input[type=url],
input[type=password], input[type=date], input[type=time], input[type=datetime-local],
textarea, select, .vTextField, .vLargeTextField {
  border-width: 0.5px !important;
}

/* --- Form row borders --- */
.form-row {
  border-bottom: 0.5px dotted #eee !important;
}

/* --- Multi-field tuples sit side-by-side on change forms only (not inline tabular rows) --- */
.change-form fieldset .form-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.change-form fieldset .form-row > div,
.change-form fieldset .form-row > fieldset {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Tabular inline rows are <tr class="form-row"> — reset flex or they stack */
.tabular fieldset .form-row {
  display: table-row !important;
  flex-wrap: unset !important;
  align-items: unset !important;
}

/* Allow long label text to wrap within its column rather than forcing the row wide */
.aligned label,
.aligned legend {
  white-space: normal !important;
  word-break: break-word !important;
  min-width: 120px !important;
  width: 120px !important;
}

/* --- Changelist selected row --- */
tr.selected { background: var(--gaia-pink-pale) !important; }

/* --- Object tools (History button etc) --- */
ul.object-tools a:link,
ul.object-tools a:visited {
  background: var(--gaia-white);
  border: 1.5px solid var(--gaia-grey-mid);
  color: var(--gaia-grey-mid);
  border-radius: var(--gaia-radius);
  font-family: var(--gaia-font);
  font-size: 0.78rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
ul.object-tools a:hover {
  background: var(--gaia-grey-mid);
  color: var(--gaia-white);
}

/* --- Related-widget icons (pencil/plus/×/eye): small and black --- */
.related-widget-wrapper a img {
  width: 8px !important;
  height: 8px !important;
  filter: brightness(0) !important;
  opacity: 0.45 !important;
  vertical-align: middle !important;
}

/* --- Form labels: consistent, never bold --- */
.form-row label,
.inline-related .form-row label,
fieldset label {
  font-weight: normal !important;
}

/* --- Textareas: auto-size to content --- */
textarea {
  field-sizing: content;
  min-height: 2.5em !important;
  max-height: 20em !important;
  overflow-y: auto !important;
  resize: vertical !important;
}