/* NOOS palette for native Janeway, Django admin and browsable API controls. */
:root {
  --ims-ink: #142b4a;
  --ims-paper: #f6f8fb;
  --ims-navy: #102b50;
  --ims-teal: #287e98;
  --ims-light-accent: #88d8e2;
  --ims-muted: #4b5e73;
  --ims-line: #cddae6;
  --ims-on-navy: #fcfdff;
  /* Native Django admin variables, without changing its templates or logic. */
  --primary: #287e98;
  --secondary: #102b50;
  --accent: #88d8e2;
  --primary-fg: #fcfdff;
  --header-bg: #102b50;
  --header-color: #fcfdff;
  --header-branding-color: #88d8e2;
  --body-bg: #f6f8fb;
  --body-fg: #142b4a;
  --body-quiet-color: #4b5e73;
  --body-loud-color: #142b4a;
  --darkened-bg: #eaf1f8;
  --selected-bg: #eaf1f8;
  --link-fg: #287e98;
  --link-hover-color: #102b50;
  --link-selected-fg: #287e98;
  --button-bg: #287e98;
  --button-hover-bg: #102b50;
  --default-button-bg: #102b50;
  --default-button-hover-bg: #287e98;
  --border-color: #cddae6;
  --hairline-color: #cddae6;
}
html body {
  background-color: var(--body-bg, var(--ims-paper));
  color: var(--body-fg, var(--ims-ink));
}
html body a:where(:not(.button):not(.close-button):not(.label):not(.deletelink)) {
  color: var(--link-fg, var(--ims-teal));
}
html body a:where(:not(.button):not(.close-button):not(.label):not(.deletelink)):hover {
  color: var(--link-hover-color, var(--ims-navy));
}
html body .main-header,
html body .off-canvas,
html body .navbar-inverse,
html body #header {
  background-color: var(--ims-navy);
  color: var(--ims-on-navy);
}
html body .main-header a,
html body .off-canvas a,
html body .navbar-inverse a,
html body #header a {
  color: var(--ims-on-navy);
}
html body .main-header a:hover,
html body .off-canvas a:hover,
html body .navbar-inverse a:hover,
html body #header a:hover {
  color: var(--ims-light-accent);
}
html body .main-header .dropdown-pane a,
html body .navbar-inverse .dropdown-menu a {
  color: var(--ims-teal);
}
html body .main-header .dropdown-pane a:hover,
html body .navbar-inverse .dropdown-menu a:hover {
  color: var(--ims-navy);
}
html body .breadcrumbs a,
html body .tabs-title > a {
  color: var(--ims-teal);
}
html body div.breadcrumbs {
  background-color: var(--ims-navy);
  color: var(--ims-on-navy);
}
html body div.breadcrumbs a,
html body div.breadcrumbs a:hover {
  color: var(--ims-on-navy);
}
html body .tabs-title > a:hover,
html body .tabs-title > a[aria-selected='true'] {
  background-color: #eaf1f8;
  color: var(--ims-navy);
}
html body .button:not(.alert):not(.warning):not(.orcid-button),
html body .btn-primary,
html body:not(.delete-confirmation) input[type='submit']:not(.alert):not(.warning) {
  background-color: var(--ims-navy);
  border-color: var(--ims-navy);
  color: var(--ims-on-navy);
}
html body .button:not(.alert):not(.warning):not(.orcid-button):hover,
html body .btn-primary:hover,
html body:not(.delete-confirmation) input[type='submit']:not(.alert):not(.warning):hover {
  background-color: var(--ims-teal);
  border-color: var(--ims-teal);
  color: var(--ims-on-navy);
}
html body .button.hollow:not(.alert):not(.warning):not(.orcid-button) {
  background-color: transparent;
  color: var(--ims-navy);
}
html body .button.hollow:not(.alert):not(.warning):not(.orcid-button):hover {
  background-color: #eaf1f8;
  color: var(--ims-navy);
}
html body input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not(.is-invalid-input),
html body textarea:not(.is-invalid-input),
html body select:not(.is-invalid-input) {
  background-color: #fff;
  border-color: var(--ims-line);
  color: var(--ims-ink);
}
html body input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not(.is-invalid-input):focus,
html body textarea:not(.is-invalid-input):focus,
html body select:not(.is-invalid-input):focus {
  border-color: var(--ims-teal);
  box-shadow: 0 0 0 1px var(--ims-teal);
}
html body :focus-visible {
  outline: 3px solid var(--ims-teal);
  outline-offset: 2px;
}
html body input[type='checkbox'],
html body input[type='radio'] {
  accent-color: var(--ims-teal);
}
/* Preserve Django admin's existing dark-theme preference with NOOS colors. */
html[data-theme='dark'] {
  --body-bg: #09294c;
  --body-fg: #fcfdff;
  --body-quiet-color: #cbd9e6;
  --body-loud-color: #fcfdff;
  --darkened-bg: #102b50;
  --selected-bg: #102b50;
  --link-fg: #88d8e2;
  --link-hover-color: #fcfdff;
}
@media (prefers-color-scheme: dark) {
  html[data-theme='auto'] {
    --body-bg: #09294c;
    --body-fg: #fcfdff;
    --body-quiet-color: #cbd9e6;
    --body-loud-color: #fcfdff;
    --darkened-bg: #102b50;
    --selected-bg: #102b50;
    --link-fg: #88d8e2;
    --link-hover-color: #fcfdff;
  }
}

/* Native admin and API links keep their focus outlines, without underlines. */
html body a,html body a:hover,html body a:focus{text-decoration:none!important}