/* ============================================================================
   H.A.R.D. — HAAS theme + service-specific components
   ----------------------------------------------------------------------------
   THEMING ONLY. This sheet layers on top of the vendored GOV.UK Frontend
   (assets/govuk/govuk-frontend.min.css). It NEVER forks a GOV.UK component:
   buttons, inputs, error-summary, tags, tables, panel, notification banner,
   summary-list etc. all come from GOV.UK Frontend and keep their accessible
   focus/contrast behaviour. We only add:
     1. the HAAS brand skin on the GOV.UK / DWP header/footer,
     2. the EN/CY language toggle styling,
     3. service-specific surfaces with no GOV.UK equivalent (phone/SMS mock,
        upload dropzone, audit chain, portal chrome).

   GDS Transport is proprietary and the vendored CSS points at absolute
   /assets/fonts paths. We pin the GOV.UK system font stack so no font fetch is
   ever triggered — the same self-hosted-system-font decision the static demo
   made. (See README.)
   ========================================================================== */

:root {
  --haas-teal: #007e8a; /* HAAS accent, applied over the GOV.UK shell   */
  --haas-teal-dark: #00585f;
  --govuk-black: #0b0c0c;
  --govuk-blue: #1d70b8;
  --govuk-red: #d4351c;
  --govuk-green: #00703c;
  --govuk-grey-2: #b1b4b6;
  --govuk-grey-3: #f3f2f1;
  --haas-mid: #505a5f;
}

/* Pin the GOV.UK system font stack so the proprietary GDS Transport webfont is
   NEVER requested. The vendored GOV.UK CSS points its @font-face at absolute
   /assets/fonts paths that do not resolve when the prototype is opened straight
   from index.html (file://) or served from a sub-path — every page would 404 on
   four font files. Forcing every element in the GOV.UK template to the system
   stack means no element ever computes "GDS Transport", so the @font-face never
   triggers a fetch: no network request, no 404, identical behaviour on file://
   and over HTTP. GDS Transport is proprietary, so this is the same
   self-hosted-system-font decision the accepted static demo made (see README). */
.govuk-template__body,
.govuk-template__body * {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* …but keep monospace where we deliberately use it (codes, NINOs, hash chain). */
.govuk-template__body .haas-mono,
.govuk-template__body .haas-chain,
.govuk-template__body .haas-senderid,
.govuk-template__body code {
  font-family:
    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}

.govuk-template {
  background: var(--govuk-grey-3);
}
.govuk-template__body {
  margin: 0;
}

/* ── Claimant journey: genuine GOV.UK Design System chrome ───────────────────
   The claimant pages use the unmodified GOV.UK header (Tudor-crown logotype),
   service navigation, phase banner and footer straight from GOV.UK Frontend —
   no HAAS skin, because this is a public-facing official GOV.UK service. HAAS
   identity is carried by the service name and footer text only, so there is
   nothing to override for the header/footer here. */

/* ── Claimant: phone / SMS-inbox mock (no GOV.UK equivalent) ──────────────── */
.haas-phone {
  max-width: 22rem;
  margin: 1rem 0 1.5rem;
  border: 10px solid var(--govuk-black);
  border-radius: 1.6rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}
.haas-phone__bar {
  background: var(--govuk-black);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.35rem;
}
.haas-phone__sender {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--govuk-grey-2);
}
.haas-phone__avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--haas-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
}
.haas-phone__who {
  font-weight: 700;
}
.haas-phone__who small {
  display: block;
  font-weight: 400;
  color: var(--haas-mid);
}
.haas-sms {
  margin: 1rem;
  background: var(--govuk-grey-3);
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.haas-sms + .haas-sms {
  margin-top: 0;
}
.haas-sms a {
  word-break: break-all;
}
.haas-sms__meta {
  display: block;
  margin-top: 0.5rem;
  color: var(--haas-mid);
  font-size: 0.78rem;
}
.haas-sms__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--haas-teal-dark);
  margin-bottom: 0.25rem;
}
.haas-senderid {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* download progress (forced download, demo only) */
.haas-progress {
  height: 1.5rem;
  background: var(--govuk-grey-3);
  border: 1px solid var(--govuk-grey-2);
  margin: 1rem 0;
}
.haas-progress__bar {
  height: 100%;
  width: 0;
  background: var(--govuk-green);
  transition: width 0.18s linear;
}

/* ── Portal (AP / DWP): DWP Design System internal-service chrome ─────────────
   The portal uses the DWP internal-service header/footer and DWP horizontal
   navigation from assets/dwp/dwp-frontend.css. Per the DWP "remove GOV.UK
   branding" guidance the internal service uses Arial (never GDS Transport) and
   must look distinct from public GOV.UK. We only add the signed-in user/role/lot
   context strip that sits above the DWP navigation. */
.haas-portal {
  /* DWP Design System brand colour = purple. GOV.UK Frontend sets
     --govuk-brand-colour:#1d70b8 (blue) at :root; the DWP components
     (key-details-bar, timeline, horizontal-nav "current" underline) read it via
     var(--govuk-brand-colour). Re-pointing it here scopes DWP purple to the
     portal while the public GOV.UK claimant pages keep the GOV.UK blue brand. */
  --govuk-brand-colour: #54319f;
}
.haas-portal,
.haas-portal * {
  font-family: Arial, sans-serif !important;
}
.haas-portal .haas-mono,
.haas-portal .haas-chain,
.haas-portal .haas-senderid,
.haas-portal code {
  font-family:
    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}
.haas-portal-context {
  background: #fff;
  border-bottom: 1px solid var(--govuk-grey-2);
}
.haas-portal-context__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.haas-portal-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--haas-mid);
}
.haas-portal-user__avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--haas-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.haas-lotpill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--govuk-black);
  color: #fff;
  padding: 0.05rem 0.45rem;
  border-radius: 3px;
}

/* page header within portal */
.haas-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.haas-crumb {
  font-size: 0.9rem;
  color: var(--haas-mid);
  margin: 0 0 0.5rem;
}

/* stat / KPI tiles (built from plain markup; GOV.UK has no stat component) */
.haas-tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.haas-tile {
  background: #fff;
  border: 1px solid var(--govuk-grey-2);
  border-left: 4px solid var(--haas-teal);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}
.haas-tile__n {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--govuk-black);
}
.haas-tile__l {
  font-size: 0.85rem;
  color: var(--haas-mid);
  margin-top: 0.35rem;
}

/* contractual-KPI marker + reporting legend (catalogue ● rows) */
.haas-kpi-dot {
  color: var(--haas-teal);
}
.haas-legend {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--govuk-grey-4, #f3f2f1);
  border-radius: 4px;
  font-size: 0.9rem;
}
.haas-legend > div {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.haas-legend > div:last-child {
  margin-bottom: 0;
}
.haas-legend dt {
  flex: 0 0 4.5rem;
  font-weight: 700;
}
.haas-legend dd {
  margin: 0;
  color: var(--haas-mid);
}

/* reporting metric rows: value + the "what / source" helper lines */
.haas-metric-val {
  font-weight: 700;
  white-space: nowrap;
}
.haas-metric-w,
.haas-metric-src {
  display: block;
  font-size: 0.8rem;
  color: var(--haas-mid);
  margin-top: 0.15rem;
  font-weight: 400;
}
.haas-metric-src {
  margin-top: 0.05rem;
}

/* generic card surface for grouping (e.g. dropzone, panels) */
.haas-card {
  background: #fff;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.5rem;
}
.haas-card > :last-child {
  margin-bottom: 0;
}

/* ── SMS template catalogue (spec §3.3 / §8.6) ───────────────────────────── */
.haas-tpl-meta {
  margin-bottom: 1rem;
}
.haas-tpl-locale {
  margin-top: 1rem;
}
.haas-tpl-locale + .haas-tpl-locale {
  border-top: 1px solid var(--govuk-grey-2);
  padding-top: 0.5rem;
}
.haas-sms-body {
  background: var(--govuk-grey-3, #f3f2f1);
  border-left: 4px solid var(--haas-teal, #28a197);
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  margin-bottom: 0;
}
.haas-token {
  display: inline-block;
  background: #e8f4f5;
  border: 1px solid var(--haas-teal, #28a197);
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.85rem;
}

/* ── Confirmation dialog (native <dialog>) ───────────────────────────────── */
.haas-dialog {
  max-width: 32rem;
  width: calc(100% - 2rem);
  border: 1px solid var(--govuk-grey-1, #b1b4b6);
  border-top: 6px solid var(--haas-purple, #54319f);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.haas-dialog::backdrop {
  background: rgba(11, 12, 12, 0.6);
}
.haas-dialog > :last-child {
  margin-bottom: 0;
}

/* ── Per-row action buttons (RBAC roster) ────────────────────────────────── */
.haas-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.haas-row-actions .govuk-button {
  margin-bottom: 0;
}

/* ── Upload dropzone + per-file rows (spec §3.2a / §3.5) ──────────────────── */
.haas-dropzone {
  border: 3px dashed var(--govuk-grey-2);
  border-radius: 6px;
  background: var(--govuk-grey-3);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
}
.haas-dropzone--over {
  border-color: var(--haas-teal);
  background: #e8f4f5;
}
/* Larger upload area — the prominent action on the Upload screen. */
.haas-dropzone--lg {
  min-height: 220px;
  padding: 3.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.haas-dropzone--lg .haas-dropzone__icon {
  font-size: 3rem;
}
.haas-dropzone__icon {
  font-size: 2rem;
  line-height: 1;
}
.haas-filelist {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.haas-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: #fff;
}
.haas-file__name {
  font-weight: 600;
  flex: 1 1 8rem;
  min-width: 0;
  /* Truncate a long filename to one line (full name in the title tooltip) so a
     long status badge can never squeeze it down to one character per line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.haas-file__name small {
  display: block;
  font-weight: 400;
  color: var(--haas-mid);
}
.haas-file__size {
  flex: 0 0 auto;
  color: var(--haas-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.haas-file__remove {
  flex: 0 0 auto;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: #d4351c;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.haas-file__remove:hover {
  text-decoration: none;
}
.haas-file__remove:focus {
  outline: 3px solid transparent;
  color: #0b0c0c;
  background-color: #fd0;
  box-shadow:
    0 -2px #fd0,
    0 4px #0b0c0c;
  text-decoration: none;
}

/* ── Resumable-upload per-file status (progress + interim verdict) ───────── */
.haas-file__status {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--haas-mid);
  font-variant-numeric: tabular-nums;
}
.haas-file__status--ok {
  color: #00703c;
  font-weight: 600;
}
.haas-file__status--err {
  color: #d4351c;
  font-weight: 600;
}
.haas-file__bar {
  flex: 0 0 5rem;
  height: 6px;
  border-radius: 3px;
  background: var(--govuk-grey-2);
  overflow: hidden;
}
.haas-file__bar-fill {
  display: block;
  height: 100%;
  background: var(--haas-teal, #007e8a);
  transition: width 0.2s ease;
}

/* ── §3.5 validation pipeline steps ──────────────────────────────────────── */
.haas-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.haas-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: #fff;
}
.haas-step__icon {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex: none;
  background: var(--govuk-grey-3);
  color: var(--haas-mid);
}
.haas-step--run .haas-step__icon {
  background: #d2e2f0;
  color: var(--govuk-blue);
}
.haas-step--ok .haas-step__icon {
  background: #cce2d8;
  color: var(--govuk-green);
}
.haas-step--err .haas-step__icon {
  background: #f6d7d2;
  color: var(--govuk-red);
}
.haas-step__t {
  font-weight: 600;
}
.haas-step__s {
  font-size: 0.85rem;
  color: var(--haas-mid);
}

/* ── Wide-table scroll wrapper ───────────────────────────────────────────────
   Some portal tables (audit log: 7 columns incl. the hash chain; the RBAC
   roster: 7 columns) are wider than the content column. Rather than fork the
   GOV.UK table or shrink content, wrap them so the table scrolls horizontally
   inside its column instead of overflowing the page (the GOV.UK guidance for
   tables too wide for their container). */
.haas-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.haas-table-scroll > .govuk-table {
  margin-bottom: 0;
}

/* ── SMS-log status filter chips ─────────────────────────────────────────── */
.haas-filter-bar {
  margin-bottom: 20px;
}
.haas-filter-chip {
  margin-bottom: 5px;
}
.haas-filter-chip--on {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--haas-teal, #007e8a);
}

/* ── Audit / SIEM helpers (table comes from GOV.UK) ──────────────────────── */
.haas-chain {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  white-space: nowrap;
}
.haas-chain__arrow {
  color: var(--haas-mid);
  padding: 0 0.25rem;
}
.haas-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.haas-mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* utility */
.haas-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.haas-muted {
  color: var(--haas-mid);
}

/* Small spacing + sizing utilities replacing former inline style="" attributes
   (CSP style-src 'self'; no 'unsafe-inline'). */
.haas-mt-1 {
  margin-top: 1rem;
}
.haas-mt-075 {
  margin-top: 0.75rem;
}
.haas-dropzone__hint {
  margin: 0.5rem 0 0;
}
.haas-gate-note {
  margin: 0;
  align-self: center;
}
.haas-tag--xs {
  font-size: 0.65rem;
}
[hidden] {
  display: none !important;
}