/* Shared light and dark theme tokens for the whole application. */
:root {
  color-scheme: light;

  --page-background: light-dark(#f8f9fb, #171b24);
  --page-surface: light-dark(#ffffff, #232a36);
  --page-text: light-dark(#202a36, #edf1f7);
  --page-border: light-dark(#d2d9e2, #414b5b);

  /* Bootstrap reads these shared semantic tokens for its components. */
  --bs-body-bg: var(--page-background);
  --bs-body-color: var(--page-text);
  --bs-emphasis-color: light-dark(#141d27, #f5f7fa);
  --bs-secondary-color: light-dark(#5f6b78, #b7c0cc);
  --bs-tertiary-color: light-dark(#778391, #929eae);
  --bs-secondary-bg: light-dark(#e7ebf0, #252c37);
  --bs-tertiary-bg: light-dark(#f8f9fb, #303845);
  --bs-border-color: var(--page-border);
  --bs-border-color-translucent: light-dark(rgb(20 29 39 / 18%), rgb(245 247 250 / 18%));
  --bs-heading-color: var(--bs-emphasis-color);
  --bs-link-color: light-dark(#0b5ed7, #8dbbff);
  --bs-link-hover-color: light-dark(#084298, #b4d2ff);
  --bs-focus-ring-color: light-dark(rgb(13 110 253 / 25%), rgb(141 187 255 / 35%));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  .navbar-toggler-icon {
    filter: invert(1);
  }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: var(--page-background);
  color: var(--page-text);
  margin-bottom: 60px;
}

/* Replace the starter layout's fixed white and dark navbar utility colors. */
.navbar.bg-white {
  background-color: var(--page-surface) !important;
  border-color: var(--page-border) !important;
}

.navbar.navbar-light {
  --bs-navbar-color: var(--bs-secondary-color);
  --bs-navbar-hover-color: var(--bs-emphasis-color);
  --bs-navbar-brand-color: var(--bs-emphasis-color);
  --bs-navbar-brand-hover-color: var(--bs-emphasis-color);
  --bs-navbar-toggler-border-color: var(--page-border);
}

.navbar .text-dark {
  color: var(--page-text) !important;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--page-surface);
  --bs-dropdown-color: var(--page-text);
  --bs-dropdown-border-color: var(--page-border);
  --bs-dropdown-link-color: var(--page-text);
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Sizing for the request-flow diagram on the Request Flow page. The diagram is a
   wide SVG, so let it shrink to the column width while keeping its aspect ratio. */
.request-flow-diagram {
  max-width: 100%;
  height: auto;
}

/* Shared tokens and focus ring for the response and categorization pages
   (Assignment 7). Each page adds its own layout in a scoped .cshtml.css file. */
.answers-page {
  --answers-accent: light-dark(#21604f, #77c9ab);
  --answers-accent-soft: light-dark(#edf6f2, #1e352f);
  --answers-new: light-dark(#664d03, #ffe08a);
  --answers-new-soft: light-dark(#fff3cd, #3d3112);
  --answers-focus: light-dark(#075ac8, #82bbff);
  overflow-wrap: anywhere;
}

/* A thick, high-contrast outline only for keyboard focus, in both themes. */
.answers-page :focus-visible {
  outline: 3px solid var(--answers-focus);
  outline-offset: 3px;
}

/* A rounded, theme-aware surface reused for forms, cards, and callouts. */
.answers-panel {
  background-color: var(--page-surface);
  border: 1px solid var(--page-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

/* Action buttons sit in a row on desktop and wrap to full-width
   buttons on phones without needing a media query. */
.answers-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.answers-actions > .btn {
  flex: 1 1 14rem;
  min-block-size: 2.75rem;
}

@media (min-width: 768px) {
  .answers-actions > .btn {
    flex: 0 0 auto;
  }
}

/* Bootstrap's grey and red outline buttons fall below 4.5:1 contrast on the
   dark page background, so retheme them with the site's tokens. */
.answers-page .btn-outline-secondary {
  --bs-btn-color: var(--page-text);
  --bs-btn-border-color: var(--bs-secondary-color);
  --bs-btn-hover-color: var(--page-text);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--page-text);
  --bs-btn-active-color: var(--page-text);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--page-text);
}

.answers-page .btn-outline-danger {
  --bs-btn-color: light-dark(#b02a37, #ff9aa2);
  --bs-btn-border-color: light-dark(#b02a37, #ff9aa2);
  --bs-btn-hover-color: light-dark(#ffffff, #171b24);
  --bs-btn-hover-bg: light-dark(#b02a37, #ff9aa2);
  --bs-btn-hover-border-color: light-dark(#b02a37, #ff9aa2);
  --bs-btn-active-color: light-dark(#ffffff, #171b24);
  --bs-btn-active-bg: light-dark(#b02a37, #ff9aa2);
  --bs-btn-active-border-color: light-dark(#b02a37, #ff9aa2);
}