/*
    Small deliberate layer over stock Bootstrap 5.3 — a handful of brand tokens, a navbar, and
    the panels the landing page is built from. Everything else on every page is plain Bootstrap,
    so this file stays short and nothing here has to be maintained against a redesign.
*/

:root {
  /* Slate for chrome, Bootstrap's own blue for actions. Keeping the action colour stock means
     buttons, links, focus rings and validation states all agree without any further overrides. */
  --app-navy: #1d2a3a;
  --app-navy-soft: #2a3b50;
  --app-surface: #f5f7fa;
  --app-border: #dee2e6;
}

html {
  font-size: 14px;
}

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

body {
  background-color: var(--app-surface);
}

/* ---------------------------------------------------------------- page width */

/* Stock .container caps at 1320px, which left most of a support desk's monitor empty either side
   of a table of 300+ vendors. This spans the viewport instead.

   One class shared by the navbar, the impersonation banner, the page body and the footer, so the
   brand, the content and the copyright all sit on the same left edge at every width — and so the
   horizontal rhythm of the whole portal is this one rule to change. */
.app-container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .app-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ---------------------------------------------------------------- navbar */

.app-navbar {
  background-color: var(--app-navy);
}

.app-navbar .navbar-brand {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Square mark in place of a logo: this app has no brand asset of its own, and two letters read
   better at 32px than a wordmark squeezed into the same space. */
.app-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background-color: var(--bs-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-brand-sub {
  font-weight: 400;
  opacity: 0.7;
}

.app-navbar .nav-link.active {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--bs-primary);
}

.app-nav-user {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------- footer */

.app-footer {
  background-color: #fff;
  border-top: 1px solid var(--app-border);
  color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------- landing page */

.app-hero {
  background: linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-soft) 100%);
  color: #fff;
  border-radius: 0.75rem;
}

.app-hero .lead {
  color: rgba(255, 255, 255, 0.85);
}

/* Endpoint rows: a fixed-width method badge keeps the two paths aligned, which is what makes a
   list of endpoints scannable rather than just present. */
.app-method {
  display: inline-block;
  min-width: 3.5rem;
  text-align: center;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  font-weight: 700;
}

.app-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background-color: rgba(13, 110, 253, 0.1);
  color: var(--bs-primary);
  font-size: 1.125rem;
}

/* ---------------------------------------------------------------- forms and panels */

/* The sign-in, forgot-password and reset pages share one width so moving between them doesn't
   shift the card around. Capped rather than left to its column: now that the page spans the
   viewport, a percentage column on its own would stretch a sign-in form across a 27" monitor. */
.auth-card {
  border-color: var(--app-border);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.card {
  border-color: var(--app-border);
}

pre.app-code {
  background-color: #f8f9fa;
  border: 1px solid var(--app-border);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  overflow-x: auto;
}

/* Stock Bootstrap focus rings on the primary colour, replacing the white double-ring the
   template shipped with — that one vanished against this page background. */
.btn:focus-visible,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}