/* PickEngine theme for Django admin.
 *
 * The control room was two products wearing one navigation bar: our pages in
 * one design, Django's built-in screens in another. Rebuilding every admin
 * screen would take days and lose the parts that already work, so instead the
 * admin adopts our palette, typography and spacing. Same screens, same data,
 * one product.
 *
 * Django exposes its own CSS custom properties, so most of this is mapping
 * theirs onto ours rather than fighting their stylesheet.
 */

:root,
html[data-theme="light"] {
  --pe-paper:#EFF2EE; --pe-surface:#FBFCFA; --pe-surface-2:#E3E8E2;
  --pe-ink:#131A17; --pe-ink-2:#414C47; --pe-ink-3:#6E7A74;
  --pe-rule:#C9D1CB; --pe-rule-2:#DDE3DD;
  --pe-market:#3A6C8D; --pe-engine:#A26A22; --pe-alert:#A5343F; --pe-good:#3C7554;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pe-paper:#0E1311; --pe-surface:#151B18; --pe-surface-2:#1D2521;
    --pe-ink:#E9EFEA; --pe-ink-2:#B0BCB5; --pe-ink-3:#82908A;
    --pe-rule:#2A342E; --pe-rule-2:#212A25;
    --pe-market:#79ADCE; --pe-engine:#DBA75E; --pe-alert:#DE7B85; --pe-good:#71BE8E;
  }
}
html[data-theme="dark"] {
  --pe-paper:#0E1311; --pe-surface:#151B18; --pe-surface-2:#1D2521;
  --pe-ink:#E9EFEA; --pe-ink-2:#B0BCB5; --pe-ink-3:#82908A;
  --pe-rule:#2A342E; --pe-rule-2:#212A25;
  --pe-market:#79ADCE; --pe-engine:#DBA75E; --pe-alert:#DE7B85; --pe-good:#71BE8E;
}

/* Map Django's variables onto ours. */
:root, html[data-theme="light"], html[data-theme="dark"] {
  --primary: var(--pe-surface-2);
  --primary-fg: var(--pe-ink);
  --secondary: var(--pe-surface-2);
  --accent: var(--pe-engine);
  --body-fg: var(--pe-ink);
  --body-bg: var(--pe-paper);
  --body-quiet-color: var(--pe-ink-3);
  --body-loud-color: var(--pe-ink);
  --header-color: var(--pe-ink);
  --header-bg: var(--pe-surface);
  --header-branding-color: var(--pe-ink);
  --header-link-color: var(--pe-ink);
  --breadcrumbs-fg: var(--pe-ink-3);
  --breadcrumbs-link-fg: var(--pe-ink-2);
  --breadcrumbs-bg: var(--pe-surface-2);
  --link-fg: var(--pe-market);
  --link-hover-color: var(--pe-engine);
  --link-selected-fg: var(--pe-engine);
  --hairline-color: var(--pe-rule-2);
  --border-color: var(--pe-rule);
  --button-bg: var(--pe-surface-2);
  --button-fg: var(--pe-ink);
  --button-hover-bg: var(--pe-rule);
  --default-button-bg: var(--pe-ink);
  --default-button-hover-bg: var(--pe-engine);
  --close-button-bg: var(--pe-ink-3);
  --close-button-hover-bg: var(--pe-ink-2);
  --delete-button-bg: var(--pe-alert);
  --delete-button-hover-bg: var(--pe-alert);
  --object-tools-bg: var(--pe-ink);
  --object-tools-fg: var(--pe-paper);
  --object-tools-hover-bg: var(--pe-engine);
  --darkened-bg: var(--pe-surface-2);
  --selected-bg: var(--pe-surface-2);
  --selected-row: var(--pe-surface-2);
  --message-success-bg: var(--pe-surface-2);
  --font-family-primary: "Source Serif 4", Georgia, serif;
  --font-family-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { background: var(--pe-paper); color: var(--pe-ink); font-size: 15px; }

/* Header: match the console's, including the brand treatment. */
#header {
  background: var(--pe-surface);
  border-bottom: 1px solid var(--pe-rule);
  color: var(--pe-ink);
  padding: 16px 40px;
  align-items: center;
}
#site-name, #site-name a, #branding h1, #branding h1 a {
  font-family: Oswald, "Arial Narrow", sans-serif !important;
  font-weight: 600; font-size: 22px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pe-ink) !important; text-decoration: none;
}
#user-tools { font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pe-ink-3); }
#user-tools a { color: var(--pe-ink-3); border-bottom: none; }
#user-tools a:hover { color: var(--pe-ink); }

/* Headings in our display face. */
h1, h2, h3, .module h2, .module caption, .inline-group h2 {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
}
.module h2, .module caption, .inline-group h2 {
  background: var(--pe-surface-2); color: var(--pe-ink);
  border-bottom: 1px solid var(--pe-rule); font-size: 13px; padding: 10px 14px;
}
div.breadcrumbs {
  background: var(--pe-surface-2); color: var(--pe-ink-3);
  border-bottom: 1px solid var(--pe-rule); padding: 9px 40px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
}
div.breadcrumbs a { color: var(--pe-ink-2); }

/* Tables: flat rules, tabular numbers, no zebra stripes. */
.module { background: var(--pe-surface); border: 1px solid var(--pe-rule);
  border-radius: 0; box-shadow: none; }
#changelist table { background: var(--pe-surface); }
#changelist table thead th {
  background: var(--pe-surface-2); border-bottom: 1px solid var(--pe-rule);
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pe-ink-3); font-weight: 600;
}
#changelist table tbody td, #changelist table tbody th {
  border-bottom: 1px solid var(--pe-rule-2); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
#changelist table tbody tr:nth-child(odd) { background: var(--pe-surface); }
#changelist table tbody tr:hover { background: var(--pe-surface-2); }

/* Filter rail as a quiet sidebar rather than a coloured block. */
#changelist-filter { background: var(--pe-surface); border-left: 1px solid var(--pe-rule); }
#changelist-filter h2, #changelist-filter h3 {
  background: transparent; border-bottom: 1px solid var(--pe-rule-2);
  color: var(--pe-ink-3); font-size: 11px; letter-spacing: .12em;
}

/* Buttons: square, quiet, one accent. */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 0; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px;
  border: 1px solid var(--pe-rule); box-shadow: none;
}
.button.default, input[type=submit].default, .submit-row input.default {
  background: var(--pe-ink); color: var(--pe-paper); border-color: var(--pe-ink);
}
.button.default:hover, input[type=submit].default:hover {
  background: var(--pe-engine); border-color: var(--pe-engine);
}
.submit-row { background: var(--pe-surface-2); border: 1px solid var(--pe-rule);
  border-radius: 0; padding: 12px 14px; }
.object-tools a { border-radius: 0; font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: .12em; }

/* Inputs. */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=search], textarea, select, .vTextField {
  border: 1px solid var(--pe-rule); border-radius: 0; background: var(--pe-surface);
  color: var(--pe-ink); padding: 8px 10px;
  font-family: "IBM Plex Mono", monospace; font-size: 13.5px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--pe-engine);
  outline-offset: -1px; border-color: var(--pe-engine); }

fieldset.module { margin-bottom: 18px; }
.form-row { border-bottom: 1px solid var(--pe-rule-2); padding: 11px 14px; }
.help, .helptext { color: var(--pe-ink-3); font-size: 12.5px; }
.paginator { background: var(--pe-surface-2); border-top: 1px solid var(--pe-rule);
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }
#content { padding: 22px 40px 40px; }
.messagelist li { border-radius: 0; }
a { text-underline-offset: 3px; }