:root {
  --primary: var(--admin-primary, #0f766e);
  --secondary: var(--admin-secondary, #1f3a34);
  --header-bg: var(--admin-header-bg, #1f3a34);
  --header-color: var(--admin-header-color, #f8f5ed);
  --body-bg: var(--admin-body-bg, #f7f3eb);
  --body-fg: var(--ink, #1f3a34);
  --hairline-color: var(--admin-border, #e4dbc9);
  --border-color: var(--admin-border, #e4dbc9);
  --link-fg: var(--admin-link, #0f766e);
  --link-selected-fg: var(--admin-link-hover, #0b5f58);
  --button-bg: var(--admin-primary, #0f766e);
  --button-hover-bg: var(--admin-link-hover, #0b5f58);
  --default-button-bg: var(--admin-primary, #0f766e);
  --default-button-hover-bg: var(--admin-link-hover, #0b5f58);
  --close-button-bg: #5b6863;
  --close-button-hover-bg: #46514d;
  --selected-bg: color-mix(in srgb, var(--admin-primary, #0f766e) 12%, white);
  --selected-row: color-mix(in srgb, var(--admin-primary, #0f766e) 8%, white);
  --darkened-bg: color-mix(in srgb, var(--body-bg) 84%, white);
  --body-quiet-color: color-mix(in srgb, var(--body-fg) 70%, #666);
}

#header {
  background: var(--header-bg);
}

#site-name a {
  color: var(--header-color) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

div.breadcrumbs {
  background: color-mix(in srgb, var(--body-bg) 70%, white);
  border-bottom: 1px solid var(--border-color);
}

div.breadcrumbs a {
  color: var(--link-fg);
}

#footer {
  color: color-mix(in srgb, var(--body-fg) 70%, #808080);
  background: color-mix(in srgb, var(--body-bg) 70%, white);
  border-top: 1px solid var(--border-color);
  padding: 14px 24px;
}

a:link,
a:visited {
  color: var(--link-fg);
}

a:focus,
a:hover {
  color: var(--link-selected-fg);
}

.module h2,
.module caption,
.inline-group h2 {
  background: color-mix(in srgb, var(--admin-secondary, #1f3a34) 85%, black);
}

/* Softer app/module headers and menu links */
#content-main .module h2,
#content-main .module caption,
#content-related .module h2,
#content-related .module caption {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 18%, white);
  color: color-mix(in srgb, var(--body-fg) 90%, #000);
}

/* Keep all admin module cards aligned with the same pastel treatment */
#content-main .module,
#content-related .module,
.app-list .app {
  background: color-mix(in srgb, var(--body-bg) 84%, white);
  border: 1px solid var(--border-color);
}

/* Operations dashboard: force pastel blocks + readable text */
.dashboard .module,
.dashboard #content-main .module,
.dashboard #content-related .module {
  background: color-mix(in srgb, var(--body-bg) 82%, white);
  border: 1px solid var(--border-color);
}

.dashboard .module h2,
.dashboard .module caption,
.dashboard #content-main .module h2,
.dashboard #content-main .module caption,
.dashboard #content-related .module h2,
.dashboard #content-related .module caption {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 16%, white) !important;
  color: color-mix(in srgb, var(--body-fg) 92%, #111) !important;
}

.dashboard .module h2 a,
.dashboard .module caption a,
.dashboard .module table th a,
.dashboard .module table td a {
  color: color-mix(in srgb, var(--body-fg) 92%, #111) !important;
}

.dashboard .module table th,
.dashboard .module table td {
  background: color-mix(in srgb, var(--body-bg) 88%, white);
}

.app-list .app a,
.app-list .model a,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--body-fg);
}

#nav-sidebar .current-app .section {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 12%, white);
}

#nav-sidebar a:link,
#nav-sidebar a:visited {
  color: color-mix(in srgb, var(--body-fg) 85%, #111);
}

#nav-sidebar a:hover {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 8%, white);
  color: var(--link-selected-fg);
}

/* Match sidebar menu headers/current rows to the same palette everywhere */
#nav-sidebar .module caption,
#nav-sidebar .module th,
#nav-sidebar .current-app .section {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 16%, white) !important;
  color: color-mix(in srgb, var(--body-fg) 92%, #111) !important;
}

#nav-sidebar .current-model {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 10%, white) !important;
}

#nav-sidebar .current-model a,
#nav-sidebar .current-model th,
#nav-sidebar .current-model td,
#nav-sidebar .current-model td a {
  color: color-mix(in srgb, var(--body-fg) 90%, #111) !important;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  background: var(--button-bg);
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover {
  background: var(--button-hover-bg);
}

.theme-select {
  min-width: 110px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--body-bg) 80%, white);
  color: var(--body-fg);
  padding: 3px 8px;
}

/* Softer pastel striping for changelist tables */
#changelist table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--body-bg) 88%, white);
}

#changelist table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--body-bg) 78%, white);
}

#changelist table tbody tr:hover {
  background: color-mix(in srgb, var(--admin-primary, #0f766e) 10%, white) !important;
}