/* NEXUS LEDS/PNC — bespoke chrome matching the reference screenshots exactly,
   layered on top of real govuk-frontend.min.css for all form/table/button/tag
   primitives (those already match GOV.UK Design System and are left alone). */

html, body, input, select, textarea, button {
  font-family: Arial, Helvetica, sans-serif !important;
}
body { margin: 0; background: #fff; color: #0b0c0c; }
a { color: #0b0c0c; }
* { box-sizing: border-box; }

.nx-hidden { display: none !important; }
.nx-width-container { max-width: 1050px; margin: 0 auto; padding: 0 20px; }
.nx-logo { height: 28px; width: auto; vertical-align: middle; }

/* ---------- Header ---------- */
.nx-header {
  background: #fff;
  border-bottom: 1px solid #b1b4b6;
}
.nx-header__inner {
  max-width: 1050px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.nx-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 1; }
.nx-header__title { font-size: 22px; font-weight: 400; color: #0b0c0c; flex: 1; text-align: center; }
.nx-header__user { font-size: 16px; color: #0b0c0c; flex: 1; text-align: right; }
.nx-header__user strong { font-weight: 700; }

/* ---------- Black nav tab bar ---------- */
.nx-tabs { background: #0b0c0c; }
.nx-tabs__list {
  max-width: 1050px; margin: 0 auto; padding: 0 20px;
  list-style: none; display: flex; flex-wrap: wrap;
}
.nx-tabs__list li { border-right: 1px solid rgba(255, 255, 255, 0.15); }
.nx-tabs__list li a {
  display: block; padding: 14px 22px; color: #fff; font-weight: 700; font-size: 16px;
  text-decoration: none;
}
.nx-tabs__list li.active a { background: #fff; color: #0b0c0c; }
.nx-tabs__list li:not(.active) a:hover { background: #1d1d1d; }

/* ---------- Breadcrumb / link-tabs bar ---------- */
.nx-breadcrumbs { background: #f3f2f1; border-bottom: 1px solid #b1b4b6; }
.nx-breadcrumbs__inner { max-width: 1050px; margin: 0 auto; padding: 10px 20px; }
.nx-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; }
.nx-breadcrumbs a { text-decoration: underline; color: #0b0c0c; }
.nx-breadcrumbs .nx-sep { color: #505a5f; }

/* ---------- Announcement banner ---------- */
.nx-announcement {
  background: #f3f2f1; border-bottom: 1px solid #b1b4b6;
  padding: 10px 20px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.nx-tag-black {
  background: #0b0c0c; color: #fff; font-weight: 700; font-size: 14px;
  padding: 4px 10px; letter-spacing: 0.5px; text-transform: uppercase;
}

/* ---------- Session / originator bar (footer, above legal footer) ---------- */
.nx-session-bar {
  background: #fff; border-top: 1px solid #b1b4b6;
  padding: 15px 20px;
}
.nx-session-bar__inner {
  max-width: 1050px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap;
}
.nx-session-bar__text { font-size: 16px; }
.nx-session-bar__text strong { font-weight: 700; }

/* ---------- Legal / copyright footer ---------- */
.nx-legal-footer { background: #fff; border-top: 1px solid #b1b4b6; padding: 20px; }
.nx-legal-footer__inner {
  max-width: 1050px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap;
}
.nx-legal-footer__text { font-size: 14px; color: #505a5f; }
.nx-legal-footer__text a { color: #1d70b8; margin: 0 3px; }

/* ---------- Buttons (small helpers not already covered by govuk-button) ---------- */
.nx-btn {
  display: inline-block; font-family: inherit; font-weight: 700; font-size: 16px;
  background: #00703c; color: #fff; border: 2px solid transparent; padding: 8px 16px;
  cursor: pointer; text-decoration: none;
}
.nx-btn:hover { background: #005a30; }
.nx-btn--secondary { background: #f3f2f1; color: #0b0c0c; }
.nx-btn--secondary:hover { background: #dbdad9; }

/* ---------- Login page ---------- */
.nx-login-strip__inner {
  max-width: 1050px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 15px;
}
.nx-login-strip__title { font-size: 22px; }
.nx-login-wrap { max-width: 480px; margin: 60px auto; padding: 0 20px; }
.nx-login-card { border: 1px solid #b1b4b6; padding: 30px; }
.nx-login-card__brand { margin-bottom: 20px; }
.nx-login-demo {
  max-width: 480px; margin: 20px auto 60px; padding: 0 20px;
}
.nx-login-demo__box { background: #f3f2f1; padding: 15px; font-size: 15px; }
.nx-login-demo code { background: #fff; padding: 1px 5px; border: 1px solid #b1b4b6; font-family: "Courier New", monospace; }
.nx-login-demo table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.nx-login-demo td { padding: 3px 6px 3px 0; }

/* GOV.UK inputs already have the correct thick black border; just make
   placeholders match the reference's uppercase grey placeholder style */
::placeholder { text-transform: uppercase; color: #6f777b; opacity: 1; font-size: 15px; }
.govuk-select:invalid, select.govuk-select option[value=""] { color: #6f777b; }

/* ---------- Warning marker / intelligence boxes ---------- */
.nx-marker-box { border: 1px solid #b1b4b6; padding: 15px; margin-bottom: 12px; }
.nx-marker-box__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nx-tag {
  display: inline-block; padding: 5px 10px; font-size: 15px; font-weight: 700; color: #fff;
}
.nx-tag--red { background: #d4351c; }
.nx-tag--yellow { background: #ffdd00; color: #0b0c0c; }
.nx-marker-box__force { font-weight: 700; font-size: 15px; }
.nx-marker-box__meta { color: #505a5f; font-size: 15px; margin-top: 8px; }

/* ---------- Mugshot placeholder ---------- */
.nx-mugshot {
  width: 100%; max-width: 150px; height: 180px; background: #dcdcdc;
  border: 1px solid #b1b4b6; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #505a5f; font-size: 13px;
}
.nx-mugshot__force-tag {
  position: absolute; top: 0; left: 0; right: 0; background: #0b0c0c; color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 2px; letter-spacing: 0.5px;
}

/* ---------- Result rows (compact PNC-style search results) ---------- */
.nx-result-row { border: 1px solid #b1b4b6; padding: 15px 18px; margin-bottom: 10px; cursor: pointer; }
.nx-result-row:hover { background: #f3f2f1; }
.nx-result-row__title { font-weight: 700; font-size: 19px; }
.nx-result-row__meta { color: #505a5f; font-size: 16px; margin-top: 4px; }

/* ---------- Field summary table (person / vehicle / driver detail) ---------- */
.nx-fields { width: 100%; border-collapse: collapse; }
.nx-fields td { padding: 8px 0; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
.nx-fields td:first-child { font-weight: 700; width: 35%; }

/* ---------- Utility ---------- */
.nx-panel { border: 1px solid #b1b4b6; padding: 20px; margin-bottom: 20px; }
.nx-panel--grey { background: #f3f2f1; border: none; }
.nx-spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid #b1b4b6;
  border-top-color: #1d70b8; border-radius: 50%; animation: nx-spin .7s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }