/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.auth-login-page {
  background: #12070a;
}

.auth-login {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #e8e8e8;
  background-image: linear-gradient(112deg, rgba(113, 6, 16, 0.95) 0%, rgba(113, 6, 16, 0.88) 48%, rgba(9, 10, 14, 0.6) 48%, rgba(9, 10, 14, 0.88) 100%), url("/static/images/auth/rail-3.7ea49abd2f37.jpg");
  background-size: cover;
  background-position: center;
}

.auth-entrance-layout {
  width: min(100%, 72rem);
}

.auth-entrance-card {
  backdrop-filter: blur(2px);
}

.auth-login__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.35) 0%, rgba(10, 10, 12, 0.5) 100%);
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: min(1024px, 100% - 2rem);
}

.auth-shell__split {
  min-height: 680px;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
}

.auth-shell__brand {
  min-height: 100%;
}

.auth-shell__panel {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.auth-shell__panel h1 {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(239, 239, 239, 0.82);
}

.auth-shell__panel h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-card {
  width: min(100%, 420px);
  border-radius: 1rem;
  border: 1px solid rgba(233, 233, 233, 0.35);
  background: rgba(242, 242, 242, 0.97);
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.45);
  padding: 1.75rem 1.5rem;
  color: #1f2024;
}

.auth-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.auth-card__logo img {
  height: 34px;
  width: auto;
}

.auth-alert-stack {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.auth-alert {
  border-radius: 0.625rem;
  border: 1px solid rgba(179, 43, 43, 0.4);
  background: rgba(179, 43, 43, 0.08);
  color: #7d141b;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
}

.auth-alert p {
  margin: 0;
}

/* Field-level error, sitting directly under its input (US-055 task 6.4).
   Deliberately unboxed, unlike .auth-alert above: when a form-level and a
   field-level error fire together the two must stay tellable apart, and two
   stacked tinted boxes read as one repeated message. Same red as .auth-alert
   so they are recognisably the same kind of thing. */
.auth-field-error {
  margin: 0;
  font-size: 0.8rem;
  color: #7d141b;
}

.auth-form-row {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.95rem;
}

.auth-form-row label,
.auth-form-row__head label {
  font-size: 0.82rem;
  font-weight: 500;
  color: #3f4148;
}

.auth-form-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.auth-form-row__head a {
  font-size: 0.78rem;
  color: #ad101f;
  text-decoration: none;
}

.auth-form-row__head a:hover {
  text-decoration: underline;
}

.auth-form-row input[type="email"],
.auth-form-row input[type="text"],
.auth-form-row input[type="password"],
.auth-password-wrap input {
  width: 100%;
  border: 1px solid #d6d7da;
  border-radius: 0.7rem;
  background: #ffffff;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: #1f2228;
}

.auth-form-row input:focus-visible,
.auth-password-wrap input:focus-visible,
.auth-submit:focus-visible,
.auth-password-toggle:focus-visible {
  outline: 2px solid #99161f;
  outline-offset: 2px;
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  padding-right: 5rem;
}

.auth-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #7f8086;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.2rem 0.4rem;
}

.auth-remember-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}

.auth-remember-row label {
  font-size: 0.86rem;
  color: #494c53;
}

.auth-remember-row input[type="checkbox"] {
  accent-color: #b10f1f;
}

.auth-submit {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0.72rem;
  background: linear-gradient(180deg, #c91526 0%, #b10f1f 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.auth-submit:hover {
  filter: brightness(1.06);
}

.auth-submit--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.auth-card__meta {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.76rem;
  color: #5d6169;
}

.auth-card__meta span {
  color: #a21322;
}

.auth-footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-footer-links a {
  color: rgba(235, 235, 235, 0.9);
  text-decoration: none;
}

.auth-footer-links a:hover {
  color: #ffffff;
}

@media (max-width: 900px) {
  .auth-shell {
    width: min(600px, 100% - 1.5rem);
  }

  .auth-shell__split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    padding: 2rem 0;
  }

  .auth-shell__brand {
    display: none;
  }
}

.home-option4-shell {
  min-height: calc(100dvh - 7.5rem);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(173, 17, 30, 0.2);
  background: #0f0f13;
}

.home-option4-shell__topbar {
  background: rgba(15, 15, 19, 0.88);
  color: #f2f2f3;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.home-option4-shell__topbar p {
  margin: 0;
}

.home-option4-shell__hero {
  position: relative;
  min-height: calc(100dvh - 12rem);
  display: grid;
  place-items: center;
  background-image: linear-gradient(112deg, rgba(113, 6, 16, 0.9) 0%, rgba(113, 6, 16, 0.85) 49%, rgba(12, 12, 16, 0.65) 49%, rgba(12, 12, 16, 0.9) 100%), url("/static/images/auth/rail-3.7ea49abd2f37.jpg");
  background-size: cover;
  background-position: center;
}

.home-rail360-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-image: linear-gradient(145deg, rgba(120, 11, 27, 0.18) 0%, rgba(9, 12, 19, 0.72) 55%, rgba(9, 12, 19, 0.9) 100%), url("/static/images/auth/rail-3.7ea49abd2f37.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.home-rail360-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 9, 14, 0.32) 0%, rgba(5, 9, 14, 0.58) 100%);
  pointer-events: none;
}

.home-rail360-grid {
  position: relative;
  z-index: 1;
}

.home-go-dashboard-cta {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.26);
}

.home-option4-shell__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.2) 0%, rgba(10, 10, 12, 0.45) 100%);
}

.home-option4-shell__entry {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  text-align: center;
  border-radius: 1rem;
  border: 1px solid rgba(233, 233, 233, 0.35);
  background: rgba(242, 242, 242, 0.96);
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.45);
  padding: 1.5rem;
}

.home-option4-shell__entry img {
  height: 34px;
  width: auto;
  margin: 0 auto 0.9rem;
}

.home-option4-shell__entry h1 {
  margin: 0;
  color: #1e1f23;
  font-size: 1.35rem;
  font-weight: 700;
}

.home-option4-shell__entry p {
  margin: 0.75rem 0 1.1rem;
  color: #4d5057;
  font-size: 0.9rem;
}

.dashboard-entry-shell {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(173, 17, 30, 0.2);
  background: #f4f4f6;
}

.dashboard-entry-shell__hero {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  background-image: linear-gradient(112deg, rgba(113, 6, 16, 0.92) 0%, rgba(113, 6, 16, 0.82) 50%, rgba(12, 12, 16, 0.82) 100%), url("/static/images/auth/rail-3.7ea49abd2f37.jpg");
  background-size: cover;
  background-position: center;
}

.dashboard-entry-shell__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.18) 0%, rgba(10, 10, 12, 0.45) 100%);
}

.dashboard-entry-shell__head {
  position: relative;
  z-index: 1;
}

.dashboard-entry-shell__head img {
  height: 34px;
  width: auto;
  margin: 0 auto 0.85rem;
}

.dashboard-entry-shell__head h1 {
  margin: 0;
  color: #f4f4f4;
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  font-weight: 700;
}

.dashboard-entry-shell__head p {
  margin: 0.7rem 0 0;
  color: rgba(244, 244, 245, 0.86);
  font-size: 0.96rem;
}

.dashboard-entry-shell__body {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.dashboard-entry-shell__card {
  border-radius: 1rem;
  border: 1px solid rgba(213, 214, 220, 0.95);
  background: #fff;
  padding: 1.1rem;
  box-shadow: 0 12px 28px rgba(14, 20, 33, 0.08);
}

.dashboard-entry-shell__card--wide {
  grid-column: 1 / -1;
}

/* Groups an htmx-swappable set of cards so the wrapper element doesn't
   consume its own grid cell — its children lay out as if they were direct
   children of dashboard-entry-shell__body. */
.dashboard-entry-shell__group {
  display: contents;
}

/* Dashboard chart cards (US-076, pages/partials/_chart_card.html). The
   fallback table shows until dashboard.js draws the chart and marks the card
   --drawn; it then stays in the accessibility tree, visually hidden, as the
   chart's text alternative. */
.dashboard-chart {
  min-width: 0;
}

.dashboard-chart--drawn .dashboard-chart__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.dashboard-chart__swatch {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.375rem;
  border-radius: 9999px;
  background-color: var(--swatch, #94a3b8);
  vertical-align: baseline;
}

@media (min-width: 768px) {
  .auth-entrance-layout {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .home-rail360-page {
    padding: 2rem;
  }

  .dashboard-entry-shell__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.25rem;
  }

  .dashboard-entry-shell__card {
    padding: 1.4rem;
  }
}

/* User management — responsive spacing */
.user-management-page {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Ensure table cells don't overflow on small screens */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Visible focus ring on all interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Print layout — elements marked .no-print (top nav, breadcrumbs, filters,
   action buttons) are omitted from printed/PDF output. Applies site-wide
   since navigation chrome is never wanted on a printed page, regardless of
   which page triggered the print. */
@media print {
  .no-print {
    display: none !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* High-contrast / forced-colors mode (US-055 task 1.3, Test Scenario 1
   negative case). Windows High Contrast and the equivalent OS settings
   replace every author-supplied colour with a small system palette, so the
   background tint that distinguishes EXCELLENT from CRITICAL disappears and
   every badge collapses to the same swatch. The text label inside each badge
   is what actually carries the classification there — these rules just make
   sure the badge still reads as a discrete pill rather than dissolving into
   the surrounding text.

   `border-color: currentColor` is the one border colour forced-colors keeps,
   and `forced-color-adjust: none` is deliberately NOT used: overriding the
   user's chosen palette is the opposite of what high-contrast mode is for. */
@media (forced-colors: active) {
  .condition-badge,
  .priority-badge {
    border: 1px solid currentColor;
    /* A box-shadow ring is dropped in this mode; the border above replaces
       it. Padding keeps the outline clear of the glyphs. */
    padding-inline: 0.5rem;
  }
}

/* Overall-score progress bar fill animation (US-055 task 2.3).

   An `animation` rather than a `transition`, despite the task wording: a
   transition needs a state change to fire, and on page load there is none
   unless JS toggles a class afterwards — which the task rules out. A
   keyframe animation with only a `from` step animates from zero to whatever
   width the inline style sets, so the bar fills itself with no scripting
   and no duplication of the percentage in CSS.

   Width is animated rather than transform: scaleX() because scaling would
   also scale the fill's rounded end cap into an ellipse. There is at most
   one bar per score section, so the layout cost is negligible; revisit if a
   bar is ever added to every card in the site overview grid. */
@keyframes score-bar-fill-in {
  from {
    width: 0;
  }
}

.score-bar-fill {
  animation: score-bar-fill-in 700ms ease-out;
}

/* Motion here is decoration — the width is already conveyed statically and
   by aria-valuenow — so honour a reduced-motion request outright rather
   than merely shortening it (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .score-bar-fill {
    animation: none;
  }
}

/* Printing must never catch the animation mid-flight. A print triggered in
   the first 700ms — including the window.print() button on the score page,
   which fires immediately on click — would otherwise snapshot a partly
   drawn bar and understate the score on paper (Test Scenario 5 step 2). */
@media print {
  .score-bar-fill {
    animation: none !important;
  }
}

/* Print layout for condition reports (US-055 task 4.1, AC5, Test Scenario 5).

   Navigation, breadcrumbs, filter controls and action buttons are already
   removed by the site-wide .no-print rule further up. What is left here is
   keeping the surviving content readable once it is cut into pages. */
@media print {
  /* A break landing inside a badge, a card, or a recommendation splits a
     label across two sheets — the specific failure Test Scenario 5 step 5
     names. Pushing the break to a section boundary is what "page breaks
     occur between the score section and recommendations" means in practice.
     break-inside is a hint, so an over-long section still breaks rather than
     overflowing; it just stops being the browser's first choice. */
  section,
  li,
  .condition-badge,
  .priority-badge,
  .score-bar,
  .asset-condition-card,
  .condition-summary-tile {
    break-inside: avoid;
  }

  /* Keeps a heading from being stranded at the foot of a page with its
     content overleaf. */
  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  /* A multi-page parameter breakdown is unreadable without its column
     headers repeated on each sheet. */
  thead {
    display: table-header-group;
  }

  /* Single lines orphaned from their paragraph read as typos in a report
     that goes to a client. */
  p,
  li {
    orphans: 3;
    widows: 3;
  }

  /* The bar's fill is conveyed purely by a background colour. Backgrounds
     are meant to survive via the print-color-adjust rule above, but a
     black-and-white printer or a driver that ignores it would render an
     apparently empty track — making a low score indistinguishable from a
     missing one. A rule at the fill's leading edge marks how far it reached
     regardless of whether any colour prints. */
  .score-bar-fill {
    border-right: 2px solid #1e293b;
  }
}