/*
  Know Your Leader — admin theme.

  Django 5 already ships the nav sidebar and themes itself from CSS variables,
  so branding it needs a variable override rather than a third-party admin
  package. Same three colours as the public site: Ink, Teal, Bone.
*/

:root,
html[data-theme="light"] {
  --primary: #0e7c7b;
  --primary-fg: #fafaf8;

  --secondary: #0f1419;
  --accent: #0e7c7b;

  --body-fg: #0f1419;
  --body-bg: #fafaf8;
  --body-quiet-color: #5a6472;
  --body-loud-color: #0f1419;

  --header-color: #fafaf8;
  --header-bg: #0f1419;
  --header-branding-color: #fafaf8;
  --header-link-color: #fafaf8;

  --breadcrumbs-fg: #5a6472;
  --breadcrumbs-link-fg: #0e7c7b;
  --breadcrumbs-bg: #ffffff;

  --link-fg: #0e7c7b;
  --link-hover-color: #0b6a69;
  --link-selected-fg: #0b6a69;

  --hairline-color: #e5e4e0;
  --border-color: #e5e4e0;

  --button-bg: #0e7c7b;
  --button-fg: #fafaf8;
  --button-hover-bg: #0b6a69;
  --default-button-bg: #0e7c7b;
  --default-button-hover-bg: #0b6a69;
  --close-button-bg: #5a6472;
  --close-button-hover-bg: #0f1419;
  --delete-button-bg: #c4453c;
  --delete-button-hover-bg: #a83a32;

  --object-tools-bg: #0f1419;
  --object-tools-fg: #fafaf8;
  --object-tools-hover-bg: #1c2530;

  --selected-bg: #e1f5ee;
  --selected-row: #e1f5ee;

  --message-success-bg: #e8f5ee;
  --message-warning-bg: #fdf4e3;
  --message-error-bg: #fbeceb;
}

body,
input,
select,
textarea,
button {
  font-family:
    "Inter",
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* Codes and tallies keep the mono face they have on the public site. */
.field-code,
.field-slug,
.field-registered_voters,
.field-turnout_2022,
td.field-date,
td.field-reviewed_at {
  font-family: ui-monospace, "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited {
  font-weight: 500;
  letter-spacing: -0.4px;
}

/* Sidebar */
#nav-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--hairline-color);
}

#nav-sidebar .module th[scope="row"] a,
#nav-sidebar .module caption a {
  border-radius: 6px;
}

#nav-sidebar .current-model {
  background: var(--selected-bg);
}

#nav-sidebar .current-model a {
  color: var(--primary) !important;
  font-weight: 500;
}

.module caption,
.inline-group h2 {
  background: var(--secondary);
  color: var(--header-color);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: none;
}

div.breadcrumbs {
  border-bottom: 1px solid var(--hairline-color);
}

/* One shadow level, matching §2.2 of the design spec. */
.module,
.inline-related,
#content-related .module {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 20, 25, 0.06);
  overflow: hidden;
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  border-radius: 8px;
  font-weight: 500;
}

/* 44px touch targets — the admin gets used on phones in the field. */
.submit-row input,
.submit-row a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

/* The link back to the public site, made obvious rather than incidental. */
#site-name-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

#view-site-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(250, 250, 248, 0.3);
  border-radius: 8px;
  color: #fafaf8;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

#view-site-link:hover {
  background: rgba(250, 250, 248, 0.12);
  border-color: rgba(250, 250, 248, 0.6);
}

/* Verification and promise status keep their semantic colours here too, so a
   record reads the same in the admin as it does on the public page. */
.field-verification select,
.field-status select {
  font-weight: 500;
}