/*
The template's theme for Django's own admin: the app's colours (style.css), a plain header,
modules as cards, rounded fields and buttons, light and dark. Only colours, spacing and borders
change; Django's markup, scripts and behaviour stay as they are. Linked last (see
templates/admin/base_site.html), so the rules below keep Django's own specificity.
*/

/* Light: the app's palette on Django's variables. */
html[data-theme="light"],
:root {
  --accent: #0b6e69;
  --accent-hover: #095854;
  --accent-ring: rgb(11 110 105 / 0.25);
  --surface: #f6f8fa;
  --shadow: 0 1px 3px rgb(31 35 40 / 0.08);

  --primary: #0b6e69;
  --secondary: #0b6e69;
  --primary-fg: #ffffff;

  --body-fg: #1f2328;
  --body-bg: #ffffff;
  --body-quiet-color: #59636e;
  --body-medium-color: #393f46;
  --body-loud-color: #1f2328;

  --header-color: #59636e;
  --header-branding-color: #1f2328;
  --header-bg: #ffffff;
  --header-link-color: #393f46;

  --breadcrumbs-fg: #59636e;
  --breadcrumbs-link-fg: #0b6e69;
  --breadcrumbs-bg: #f6f8fa;

  --link-fg: #0b6e69;
  --link-hover-color: #095854;
  --link-selected-fg: #095854;

  --hairline-color: #e1e6eb;
  --border-color: #d1d9e0;

  --darkened-bg: #f6f8fa;
  --selected-bg: #e6f2f1;
  --selected-row: #e6f2f1;

  --button-fg: #ffffff;
  --button-bg: #0b6e69;
  --button-hover-bg: #095854;
  --default-button-bg: #0b6e69;
  --default-button-hover-bg: #095854;
  --close-button-bg: #59636e;
  --close-button-hover-bg: #393f46;
  --delete-button-bg: #b42318;
  --delete-button-hover-bg: #912018;
  --error-fg: #b42318;

  --object-tools-fg: #0b6e69;
  --object-tools-bg: #e6f2f1;
  --object-tools-hover-bg: #d2e9e7;

  --font-family-primary: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark: the same names, for the browser's dark mode and for the admin's own toggle. */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3fb8af;
    --accent-hover: #6fcdc6;
    --accent-ring: rgb(63 184 175 / 0.3);
    --surface: #151b23;
    --shadow: none;

    --primary: #3fb8af;
    --secondary: #3fb8af;
    --primary-fg: #0d1117;

    --body-fg: #e6edf3;
    --body-bg: #0d1117;
    --body-quiet-color: #9198a1;
    --body-medium-color: #c9d1d9;
    --body-loud-color: #ffffff;

    --header-color: #9198a1;
    --header-branding-color: #e6edf3;
    --header-bg: #0d1117;
    --header-link-color: #c9d1d9;

    --breadcrumbs-fg: #9198a1;
    --breadcrumbs-link-fg: #3fb8af;
    --breadcrumbs-bg: #151b23;

    --link-fg: #3fb8af;
    --link-hover-color: #6fcdc6;
    --link-selected-fg: #6fcdc6;

    --hairline-color: #262c36;
    --border-color: #3d444d;

    --darkened-bg: #151b23;
    --selected-bg: #12302e;
    --selected-row: #12302e;

    --button-fg: #0d1117;
    --button-bg: #3fb8af;
    --button-hover-bg: #6fcdc6;
    --default-button-bg: #3fb8af;
    --default-button-hover-bg: #6fcdc6;
    --close-button-bg: #3d444d;
    --close-button-hover-bg: #59636e;
    --delete-button-bg: #f47067;
    --delete-button-hover-bg: #ff938a;
    --error-fg: #f47067;

    --object-tools-fg: #3fb8af;
    --object-tools-bg: #12302e;
    --object-tools-hover-bg: #17403d;

    --message-success-bg: #0f2e1d;
    --message-info-bg: #0f2337;
    --message-warning-bg: #33260b;
    --message-error-bg: #3a1414;
  }
}

html[data-theme="dark"] {
  --accent: #3fb8af;
  --accent-hover: #6fcdc6;
  --accent-ring: rgb(63 184 175 / 0.3);
  --surface: #151b23;
  --shadow: none;

  --primary: #3fb8af;
  --secondary: #3fb8af;
  --primary-fg: #0d1117;

  --body-fg: #e6edf3;
  --body-bg: #0d1117;
  --body-quiet-color: #9198a1;
  --body-medium-color: #c9d1d9;
  --body-loud-color: #ffffff;

  --header-color: #9198a1;
  --header-branding-color: #e6edf3;
  --header-bg: #0d1117;
  --header-link-color: #c9d1d9;

  --breadcrumbs-fg: #9198a1;
  --breadcrumbs-link-fg: #3fb8af;
  --breadcrumbs-bg: #151b23;

  --link-fg: #3fb8af;
  --link-hover-color: #6fcdc6;
  --link-selected-fg: #6fcdc6;

  --hairline-color: #262c36;
  --border-color: #3d444d;

  --darkened-bg: #151b23;
  --selected-bg: #12302e;
  --selected-row: #12302e;

  --button-fg: #0d1117;
  --button-bg: #3fb8af;
  --button-hover-bg: #6fcdc6;
  --default-button-bg: #3fb8af;
  --default-button-hover-bg: #6fcdc6;
  --close-button-bg: #3d444d;
  --close-button-hover-bg: #59636e;
  --delete-button-bg: #f47067;
  --delete-button-hover-bg: #ff938a;
  --error-fg: #f47067;

  --object-tools-fg: #3fb8af;
  --object-tools-bg: #12302e;
  --object-tools-hover-bg: #17403d;

  --message-success-bg: #0f2e1d;
  --message-info-bg: #0f2337;
  --message-warning-bg: #33260b;
  --message-error-bg: #3a1414;
}

body {
  font-size: 0.9375rem;
}

/* Header: the page's own background, a hairline under it, quiet links. */
#header {
  padding: 12px 32px;
  border-bottom: 1px solid var(--hairline-color);
}

#site-name {
  font-size: 1.125rem;
  font-weight: 600;
}

#site-name a:link,
#site-name a:visited {
  color: var(--header-branding-color);
}

#user-tools,
#logout-form button {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

#user-tools a,
#logout-form button {
  border-bottom: 0;
}

#user-tools a:hover,
#logout-form button:hover {
  color: var(--accent);
}

div.breadcrumbs,
nav .breadcrumbs {
  padding: 10px 32px;
  border-bottom: 1px solid var(--hairline-color);
  font-size: 0.875rem;
}

#content {
  padding: 24px 32px;
}

h1 {
  font-weight: 600;
  color: var(--body-loud-color);
}

/* Modules: cards with a quiet title row instead of a coloured bar. */
.module,
#changelist .changelist-form-container,
.inline-group {
  border: 1px solid var(--hairline-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.module .module,
.inline-group .module {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#content-related .module,
#nav-sidebar .module {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.module h2,
.module caption,
.inline-group h2 {
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--body-fg);
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-color);
}

.module h2 a.section:link,
.module h2 a.section:visited,
.module caption a.section:link,
.module caption a.section:visited {
  color: var(--body-fg);
}

fieldset.module {
  border-top: 1px solid var(--hairline-color);
}

/* Underlined links (Django's, so a link is not told apart by colour alone), but lighter. */
a:link,
a:visited {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Tables: calm headers, a hover tint on rows. */
thead th,
tfoot td {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface);
}

td,
th {
  padding: 10px 14px;
  border-bottom-color: var(--hairline-color);
}

tbody tr:hover {
  background: var(--darkened-bg);
}

#changelist #toolbar {
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline-color);
  background: var(--surface);
}

#changelist .actions {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-color);
}

/* Fields and buttons: rounder, roomier, a visible focus ring. */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.vTextField {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.9375rem;
}

select {
  height: auto;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.vTextField:focus {
  border-color: var(--accent);
  outline: 3px solid var(--accent-ring);
  outline-offset: 0;
}

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

.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a.button:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 1px;
}

.submit-row input.default {
  text-transform: none;
}

.submit-row {
  border-radius: 8px;
  background: var(--surface);
}

.submit-row a.deletelink:link,
.submit-row a.deletelink:visited {
  border-radius: 6px;
}

.object-tools a:link,
.object-tools a:visited {
  padding: 5px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 6px;
}

.object-tools a.addlink,
.object-tools a.viewsitelink {
  background-image: none;
  padding-right: 14px;
}

ul.messagelist li {
  border-radius: 8px;
}

/* Sidebar: the selected model in the accent, not a yellow bar. */
#nav-sidebar .current-model {
  background: var(--selected-row);
}

#nav-sidebar .current-model a {
  font-weight: 600;
}

/* Login: a card on a quiet page. */
.login {
  background: var(--surface);
}

.login #container {
  margin: 12vh auto;
  border-radius: 12px;
  border-color: var(--border-color);
  box-shadow: 0 8px 24px rgb(31 35 40 / 0.12);
}

.login #header {
  padding: 22px 24px 8px;
  border-bottom: 0;
}

.login #header h1,
.login #site-name {
  font-size: 1.25rem;
}

.login #content {
  padding: 8px 24px 24px;
}

.login .submit-row {
  padding-top: 16px;
  background: none;
  border: 0;
}

.login .submit-row input {
  width: 100%;
  padding: 10px 16px;
}

@media (max-width: 767px) {
  #header,
  div.breadcrumbs,
  nav .breadcrumbs,
  #content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .login #container {
    margin: 32px 16px;
    width: auto;
  }
}