/* ═══════════════════════════════════════════════════════════════
   Grepiac Admin Theme — Phase 6 brand re-skin
   Maps Django admin's CSS variables to brand tokens (navy + coral).
   Pairs with /static/yousuli/design.css for typography parity.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Grepiac theme tokens (admin-scoped, ya-* aliases) ──── */
  --ya-bg:             #FFFFFF;
  --ya-bg-alt:         #F7F6F2;
  --ya-surface:        #ffffff;
  --ya-surface-hover:  #F7F6F2;
  --ya-glass:          rgba(47,45,86,0.04);
  --ya-glass-border:   #EDEDED;
  --ya-glass-hover:    rgba(47,45,86,0.08);
  --ya-brand:          #2F2D56;
  --ya-brand-deep:     #272561;
  --ya-coral:          #FA773C;
  --ya-coral-deep:     #E5512F;
  --ya-amber:          #F9B233;
  --ya-accent:         #FA773C;
  --ya-text:           #1a1830;
  --ya-text-muted:     #595959;
  --ya-text-dim:       #888888;
  --ya-link:           #FA773C;
  --ya-link-hover:     #E5512F;
  --ya-border:         #EDEDED;
  --ya-input-bg:       #ffffff;
  --ya-input-border:   #DCDCDC;
  --ya-input-focus:    rgba(250,119,60,0.18);
  --ya-radius:         6px;
  --ya-radius-lg:      10px;
  --ya-shadow:         0 4px 18px rgba(47, 45, 86, 0.08);
  --ya-green:          #2f8a45;
  --ya-yellow:         #b35900;
  --ya-red:            #c93939;
  --ya-font-display:   'Futura', 'Trebuchet MS', 'Avenir Next', system-ui, sans-serif;
  --ya-font:           -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

  /* ── Override Django's built-in CSS variables ─────────── */
  /* Forces light theme + brand palette across all admin pages */
  --primary:                #2F2D56;
  --secondary:              #FA773C;
  --accent:                 #FA773C;
  --primary-fg:             #fff;
  --body-fg:                #1a1830;
  --body-bg:                #F7F6F2;
  --body-quiet-color:       #595959;
  --body-loud-color:        #1a1830;
  --header-color:           rgba(255,255,255,0.78);
  --header-branding-color:  #fff;
  --header-bg:              #2F2D56;
  --header-link-color:      #fff;
  --breadcrumbs-fg:         rgba(255,255,255,0.7);
  --breadcrumbs-link-fg:    rgba(255,255,255,0.85);
  --breadcrumbs-bg:         #272561;
  --link-fg:                #FA773C;
  --link-hover-color:       #E5512F;
  --link-selected-fg:       #2F2D56;
  --hairline-color:         #EDEDED;
  --border-color:           #DCDCDC;
  --error-fg:               #c93939;
  --message-success-bg:     #ecf8ef;
  --message-warning-bg:     #fef3e2;
  --message-error-bg:       #fce8e8;
  --darkened-bg:            #F7F6F2;
  --selected-bg:            rgba(250,119,60,0.10);
  --selected-row:           rgba(249,178,51,0.16);
  --button-fg:              #fff;
  --button-bg:              #FA773C;
  --button-hover-bg:        #E5512F;
  --default-button-bg:      #FA773C;
  --default-button-hover-bg:#E5512F;
  --close-button-bg:        #888;
  --close-button-hover-bg:  #6c6c6c;
  --delete-button-bg:       #c93939;
  --delete-button-hover-bg: #a92929;
  --object-tools-fg:        #fff;
  --object-tools-bg:        #2F2D56;
  --object-tools-hover-bg:  #FA773C;
  color-scheme: light !important;
}

/* Force light theme — prevent Django dark mode from activating */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:               #2F2D56;
    --secondary:             #FA773C;
    --body-fg:               #1a1830;
    --body-bg:               #F7F6F2;
    --body-quiet-color:      #595959;
    --body-loud-color:       #1a1830;
    --header-bg:             #2F2D56;
    --header-link-color:     #fff;
    --breadcrumbs-bg:        #272561;
    --link-fg:               #FA773C;
    --hairline-color:        #EDEDED;
    --border-color:          #DCDCDC;
    --darkened-bg:           #F7F6F2;
    --selected-bg:           rgba(250,119,60,0.10);
    --button-bg:             #FA773C;
    --default-button-bg:     #FA773C;
    --object-tools-bg:       #2F2D56;
    color-scheme: light !important;
  }
}


/* ── Base ──────────────────────────────────────────────────── */

html {
  background: var(--ya-bg) !important;
}

body {
  font-family: var(--ya-font) !important;
  background: var(--ya-bg) !important;
  color: var(--ya-text) !important;
  margin: 0;
}


/* ── Header ───────────────────────────────────────────────── */

#header {
  background: var(--ya-brand) !important;
  border-bottom: 1px solid var(--ya-brand-deep) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}

#header a:link, #header a:visited {
  color: rgba(255,255,255,0.85) !important;
}
#header a:hover {
  color: #fff !important;
}

#branding h1 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  font-size: 18px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

#branding h1 a:link, #branding h1 a:visited {
  color: #fff !important;
}

#user-tools {
  color: rgba(255,255,255,0.70) !important;
}
#user-tools a {
  color: rgba(255,255,255,0.85) !important;
  border-bottom-color: transparent !important;
}


/* ── Sidebar / Nav ────────────────────────────────────────── */

div.breadcrumbs {
  background: var(--ya-surface) !important;
  color: var(--ya-text-muted) !important;
  border-bottom: 1px solid var(--ya-border) !important;
}

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

/* Django admin sidebar (if enabled) */
nav.sidebar,
#nav-sidebar {
  background: var(--ya-surface) !important;
  border-right: 1px solid var(--ya-border) !important;
}

#nav-sidebar .module th,
#nav-sidebar .module caption {
  background: var(--ya-bg-alt) !important;
  color: var(--ya-text-muted) !important;
}

#nav-sidebar a {
  color: var(--ya-link) !important;
}

#nav-sidebar .current-app a, #nav-sidebar .current-model a {
  color: var(--ya-brand) !important;
  font-weight: 700;
}

/* Toggle nav sidebar button */
#toggle-nav-sidebar {
  background: var(--ya-glass) !important;
  border: 1px solid var(--ya-border) !important;
  color: var(--ya-text-muted) !important;
  width: 20px !important;
}


/* ── Content Area ─────────────────────────────────────────── */

#content {
  background: transparent !important;
}

#content-main {
  background: transparent !important;
}

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

#content h1, #content h2, #content h3 {
  color: var(--ya-text) !important;
}

/* …but module / fieldset header bands keep their white text on navy.
   This rule needs to come AFTER the #content h1..h3 rule and have at
   least equal specificity; using #content prefix gives us the same
   specificity (1 ID + 2 class + 1 tag = 121) and the later position
   wins the cascade tie. */
#content .module h2,
#content .module caption,
#content .inline-group h2,
#content fieldset.module > h2,
fieldset.module > h2 {
  color: #fff !important;
  background: var(--ya-brand) !important;
}

#content-related {
  background: transparent !important;
}


/* ── Modules / Fieldsets ──────────────────────────────────── */

.module {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
  box-shadow: var(--ya-shadow) !important;
  overflow: hidden;
}

.module h2, .module caption, .inline-group h2 {
  background: var(--ya-brand) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--ya-brand-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

fieldset {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
  margin: 12px 0 !important;
}

fieldset .description {
  color: var(--ya-text-muted) !important;
  font-size: 13px !important;
}

/* Collapse toggle */
fieldset.collapse h2 a.collapse-toggle,
fieldset h2 .collapse-toggle {
  color: rgba(255,255,255,0.85) !important;
}


/* ── Forms / Inputs ───────────────────────────────────────── */

.form-row {
  border-bottom-color: var(--ya-border) !important;
  padding: 10px 14px !important;
}

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

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,
.vLargeTextField,
.vIntegerField,
.vForeignKeyRawIdAdminField {
  background: var(--ya-input-bg) !important;
  border: 1px solid var(--ya-input-border) !important;
  border-radius: var(--ya-radius) !important;
  color: var(--ya-text) !important;
  padding: 8px 12px !important;
  font-family: var(--ya-font) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* Select dropdowns */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232F2D56' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  padding-right: 32px !important;
  min-height: 38px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ya-brand) !important;
  box-shadow: 0 0 0 3px var(--ya-input-focus) !important;
  outline: none !important;
}

/* Django date widget trio */
.vDateField, .vTimeField {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
  border: 1px solid var(--ya-input-border) !important;
  border-radius: var(--ya-radius) !important;
}

/* Select date widget */
select[id*="_month"],
select[id*="_day"],
select[id*="_year"] {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
  border: 1px solid var(--ya-input-border) !important;
  min-width: 80px !important;
}

select[id*="_month"] {
  min-width: 120px !important;
}

select[id*="_year"] {
  min-width: 90px !important;
}

/* Readonly fields */
.readonly, div.readonly {
  color: var(--ya-text) !important;
}

/* Checkbox / Boolean */
input[type="checkbox"] {
  accent-color: var(--ya-brand);
}

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

/* Errors */
.errorlist li {
  background: rgba(239,68,68,0.08) !important;
  color: var(--ya-red) !important;
  border: 1px solid rgba(239,68,68,0.20) !important;
  border-radius: var(--ya-radius) !important;
}

ul.messagelist li.error {
  background: rgba(239,68,68,0.08) !important;
  color: var(--ya-red) !important;
}

ul.messagelist li.success {
  background: rgba(74,222,128,0.10) !important;
  color: #16a34a !important;
}

ul.messagelist li.warning {
  background: rgba(251,191,36,0.10) !important;
  color: #b45309 !important;
}

ul.messagelist li.info {
  background: rgba(65,118,144,0.08) !important;
  color: var(--ya-brand) !important;
}


/* ── Buttons ──────────────────────────────────────────────── */

input[type="submit"],
button[type="submit"],
.submit-row input,
.button, a.button {
  background: var(--ya-brand) !important;
  color: #fff !important;
  border: 1px solid var(--ya-brand-deep) !important;
  border-radius: var(--ya-radius) !important;
  padding: 0 20px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
}

input[type="submit"]:hover,
.submit-row input:hover,
.button:hover, a.button:hover {
  background: var(--ya-brand-deep) !important;
  box-shadow: 0 2px 6px rgba(65,118,144,0.25) !important;
}

.submit-row {
  background: var(--ya-bg-alt) !important;
  border-top: 1px solid var(--ya-border) !important;
  border-radius: 0 0 var(--ya-radius-lg) var(--ya-radius-lg) !important;
  padding: 12px 14px !important;
}

.submit-row a.deletelink {
  color: var(--ya-red) !important;
}
.submit-row a.deletelink:hover {
  background: rgba(239,68,68,0.08) !important;
  border-radius: var(--ya-radius) !important;
}

/* Secondary / outlined buttons — allow white bg + colored text */
button.calc-inline-btn,
button.btn-secondary,
.btn-outline {
  background: #fff !important;
  color: var(--ya-brand) !important;
  border: 1px solid var(--ya-brand) !important;
}
button.calc-inline-btn:hover,
button.btn-secondary:hover,
.btn-outline:hover {
  background: #f0f6fa !important;
  color: var(--ya-brand-deep) !important;
  box-shadow: 0 2px 6px rgba(65,118,144,0.15) !important;
}

/* "default" button (the primary Save) */
input[type="submit"].default,
.submit-row input.default {
  background: var(--ya-brand) !important;
}
input[type="submit"].default:hover,
.submit-row input.default:hover {
  background: var(--ya-brand-deep) !important;
  box-shadow: 0 2px 6px rgba(65,118,144,0.25) !important;
}


/* ── Tables (changelist) ──────────────────────────────────── */

#changelist {
  background: transparent !important;
}

#changelist-filter {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
  box-shadow: var(--ya-shadow) !important;
}

#changelist-filter h2 {
  color: #fff !important;
  background: var(--ya-brand) !important;
}

#changelist-filter h3 {
  color: var(--ya-text) !important;
  border-bottom: 1px solid var(--ya-border) !important;
  font-weight: 700 !important;
}

#changelist-filter li {
  border-bottom: none !important;
}

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

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

#changelist table {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
  overflow: hidden;
}

#changelist table thead th {
  background: var(--ya-brand) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--ya-brand-deep) !important;
  padding: 10px 14px !important;
}

#changelist table thead th a:link,
#changelist table thead th a:visited {
  color: #fff !important;
}

#changelist table tbody td {
  color: var(--ya-text) !important;
  border-bottom: 1px solid var(--ya-border) !important;
  padding: 8px 14px !important;
}

#changelist table tbody tr:nth-child(odd) {
  background: var(--ya-surface) !important;
}

#changelist table tbody tr:nth-child(even) {
  background: var(--ya-bg-alt) !important;
}

#changelist table tbody tr:hover {
  background: var(--ya-surface-hover) !important;
}

#changelist table tbody th {
  background: transparent !important;
  color: var(--ya-text) !important;
}

#changelist table tbody th a {
  color: var(--ya-link) !important;
}

/* Pagination */
.paginator {
  color: var(--ya-text-muted) !important;
  border-top: 1px solid var(--ya-border) !important;
  background: var(--ya-surface) !important;
}

.paginator a:link, .paginator a:visited {
  color: var(--ya-link) !important;
}

/* Date hierarchy */
.xfull {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
}

.xfull a:link, .xfull a:visited {
  color: var(--ya-link) !important;
}


/* ── Links ────────────────────────────────────────────────── */

a:link, a:visited {
  color: var(--ya-link) !important;
}
a:hover {
  color: var(--ya-link-hover) !important;
}

/* Links styled as filled buttons — keep white text visible on teal bg */
a.calc-link,
a.btn-filled,
a[style*="background: var(--ya-brand)"],
a[style*="background:var(--ya-brand)"] {
  color: #fff !important;
}
a.calc-link:hover,
a.btn-filled:hover,
a[style*="background: var(--ya-brand)"]:hover,
a[style*="background:var(--ya-brand)"]:hover {
  color: #fff !important;
}

/* Override for inline links in readonly fields (keep their custom colors) */
.readonly a, div.readonly a,
.form-row .readonly a {
  color: var(--ya-link) !important;
}

/* Filled buttons inside readonly fields must keep white text */
.readonly a.btn-filled, div.readonly a.btn-filled,
.form-row .readonly a.btn-filled,
.readonly a[style*="background:var(--ya-brand)"], div.readonly a[style*="background:var(--ya-brand)"],
.form-row .readonly a[style*="background:var(--ya-brand)"],
.readonly a[style*="background: var(--ya-brand)"], div.readonly a[style*="background: var(--ya-brand)"],
.form-row .readonly a[style*="background: var(--ya-brand)"] {
  color: #fff !important;
}


/* ── Inline Tables ────────────────────────────────────────── */

.inline-group {
  background: transparent !important;
}

.inline-group .tabular {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
  overflow: hidden;
}

.inline-group .tabular table {
  background: transparent !important;
}

.inline-group .tabular thead th {
  background: var(--ya-brand) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--ya-brand-deep) !important;
}

.inline-group .tabular tbody td {
  color: var(--ya-text) !important;
  border-bottom: 1px solid var(--ya-border) !important;
}

.inline-group .tabular tbody tr:nth-child(odd) {
  background: var(--ya-surface) !important;
}

.inline-group .tabular tbody tr:nth-child(even) {
  background: var(--ya-bg-alt) !important;
}

/* Stacked inlines */
.inline-group .inline-related {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
}

.inline-group .inline-related h3 {
  background: var(--ya-brand) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--ya-brand-deep) !important;
}


/* ── Dashboard / Index Page ───────────────────────────────── */

#content-main .module {
  margin-bottom: 16px !important;
}

.dashboard #content-main .app-list {
  background: transparent !important;
}

th.app-label, caption {
  background: transparent !important;
}

/* App index */
.app-list table {
  background: var(--ya-surface) !important;
  border-radius: var(--ya-radius-lg) !important;
}

.app-list table td, .app-list table th {
  color: var(--ya-text) !important;
  border-bottom: 1px solid var(--ya-border) !important;
}

.app-list table th a {
  color: var(--ya-text) !important;
  font-weight: 700 !important;
}

table#content-related-last td {
  color: var(--ya-text) !important;
}


/* ── Action bar ───────────────────────────────────────────── */

#changelist .actions {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius) !important;
  padding: 10px 14px !important;
  color: var(--ya-text) !important;
}

#changelist .actions label {
  color: var(--ya-text-muted) !important;
}

#changelist .actions select {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
  border: 1px solid var(--ya-input-border) !important;
}

#changelist .actions button,
#changelist .actions input[type="submit"] {
  background: var(--ya-brand) !important;
  color: #fff !important;
  border: 1px solid var(--ya-brand-deep) !important;
  border-radius: var(--ya-radius) !important;
  padding: 0 16px !important;
  height: 38px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  vertical-align: middle !important;
  cursor: pointer;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-sizing: border-box !important;
}

#changelist .actions button:hover,
#changelist .actions input[type="submit"]:hover {
  background: var(--ya-brand-deep) !important;
}

/* Ensure consistent alignment in action bar */
#changelist .actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}


/* ── Search bar ───────────────────────────────────────────── */

#changelist-search {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius) !important;
  padding: 10px !important;
}

#changelist-search #searchbar {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
  border: 1px solid var(--ya-input-border) !important;
  border-radius: var(--ya-radius) !important;
}


/* ── Calendar / Date Pickers ──────────────────────────────── */

.calendarbox, .clockbox {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
  color: var(--ya-text) !important;
}

.calendar caption {
  background: var(--ya-brand) !important;
  color: #fff !important;
}

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

.calendar td a {
  color: var(--ya-link) !important;
}

.calendar td.today a {
  background: var(--ya-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}


/* ── Related widget / Lookups ─────────────────────────────── */

.related-widget-wrapper {
  color: var(--ya-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.related-widget-wrapper select {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
  min-width: 200px !important;
}

.selector {
  color: var(--ya-text) !important;
}

.selector .selector-available, .selector .selector-chosen {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
}

.selector select {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
}


/* ── Delete confirmation ──────────────────────────────────── */

.delete-confirmation {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius-lg) !important;
}


/* ── Object tools (Add / History buttons) ─────────────────── */

.object-tools li {
  background: transparent !important;
}

.object-tools a {
  background: var(--ya-glass) !important;
  border: 1px solid var(--ya-border) !important;
  border-radius: var(--ya-radius) !important;
  color: var(--ya-link) !important;
  padding: 6px 14px !important;
}

.object-tools a:hover {
  background: var(--ya-glass-hover) !important;
  color: var(--ya-link-hover) !important;
}


/* ── Autocomplete ─────────────────────────────────────────── */

.select2-container--admin-autocomplete .select2-selection--single {
  background: var(--ya-input-bg) !important;
  border: 1px solid var(--ya-input-border) !important;
  border-radius: var(--ya-radius) !important;
  color: var(--ya-text) !important;
  height: 38px !important;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  color: var(--ya-text) !important;
}

.select2-container--admin-autocomplete .select2-results {
  background: var(--ya-surface) !important;
  color: var(--ya-text) !important;
}

.select2-container--admin-autocomplete .select2-results__option {
  color: var(--ya-text) !important;
}

.select2-container--admin-autocomplete .select2-results__option--highlighted {
  background: var(--ya-bg-alt) !important;
  color: var(--ya-brand) !important;
}

.select2-dropdown {
  background: var(--ya-surface) !important;
  border: 1px solid var(--ya-border) !important;
}

.select2-search__field {
  background: var(--ya-input-bg) !important;
  color: var(--ya-text) !important;
  border: 1px solid var(--ya-input-border) !important;
}


/* ── JSON field styling ───────────────────────────────────── */

.jsonwidget textarea, textarea.vLargeTextField {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 13px !important;
}


/* ── Miscellaneous ────────────────────────────────────────── */

/* "View on site" link */
.viewsitelink {
  color: var(--ya-link) !important;
}

/* Django messages */
ul.messagelist {
  margin: 0 0 16px !important;
}

ul.messagelist li {
  border-radius: var(--ya-radius) !important;
  padding: 10px 14px !important;
  font-weight: 500 !important;
}

/* "Add another" links */
.add-row a, .inline-group .add-row a {
  color: var(--ya-brand) !important;
}

/* Empty text */
p.empty, .inline-group p {
  color: var(--ya-text-muted) !important;
}

/* Recent actions sidebar */
#content-related h2 {
  background: var(--ya-brand) !important;
  color: #fff !important;
}

#content-related .module h3 {
  color: var(--ya-text) !important;
}

#content-related .actionlist li {
  color: var(--ya-text) !important;
  border-bottom: 1px solid var(--ya-border) !important;
}

#content-related .actionlist a {
  color: var(--ya-link) !important;
}

/* History page */
table#change-history {
  background: var(--ya-surface) !important;
  border-radius: var(--ya-radius-lg) !important;
}

table#change-history th {
  background: var(--ya-brand) !important;
  color: #fff !important;
}

table#change-history td {
  color: var(--ya-text) !important;
  border-bottom: 1px solid var(--ya-border) !important;
}


/* ── Scrollbar Styling ────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ya-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.20);
}


/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 767px) {
  #header {
    padding: 8px 12px !important;
  }
  .module {
    border-radius: var(--ya-radius) !important;
  }
}