/* FX Utilities — Training Matrix
   Visual language deliberately matches the FX Utilities HR System (same design
   tokens, card, button, badge and banner treatment) so the apps feel like one
   product suite to anyone switching between them. Everything above the
   "Training matrix specifics" rule is shared with the HR system verbatim —
   keep the two in step if either is restyled. */

:root {
  --font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, h4 {
  color: var(--navy);
  margin: 0 0 12px 0;
}
h1 { font-size: 1.1em; }
h2 { font-size: 1.3em; }
h3, h4 { font-size: 1.05em; }

a { color: var(--navy); }

/* ---------- Login screen ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
}

.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  width: 360px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.login-card .logo-row {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.login-card h2 {
  margin-bottom: 2px;
}

.login-card .company-address {
  color: var(--grey);
  font-size: 0.85em;
  margin-bottom: 18px;
}

.login-card h1 {
  margin-bottom: 8px;
}

.login-card p {
  color: var(--grey);
  font-size: 0.9em;
  margin: 0 0 20px 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
.btn-block { width: 100%; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-hover); }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--grey-light); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #8f1e18; }
.btn-sm { padding: 6px 12px; font-size: 0.85em; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- App shell ---------- */
.app-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
}
.app-banner .banner-text { display: flex; flex-direction: column; line-height: 1.15; }
.app-banner .banner-company { font-weight: 700; color: var(--navy); font-size: 0.95em; }
.app-banner .banner-app { color: var(--grey); font-size: 0.8em; }
.app-banner .spacer { flex: 1; }
.app-banner .banner-user { color: var(--grey); font-size: 0.85em; margin-right: 6px; }

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--navy);
  padding: 0 20px;
}
.tab-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.75);
  padding: 12px 16px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-family: var(--font);
}
.tab-btn:hover { color: #fff; }
.tab-btn.active { color: #fff; border-bottom-color: #fff; }
.tab-btn[hidden] { display: none; }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

.panel { display: none; }
.panel.active { display: block; }

.card-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 22px;
}

/* ---------- Forms ---------- */
label { display: block; font-size: 0.85em; font-weight: 600; margin: 12px 0 4px; color: #333; }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=tel],
select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.92em;
  font-family: var(--font);
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 70px; resize: vertical; }
.field-hint { color: var(--grey); font-size: 0.78em; margin-top: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { background: var(--grey-light); color: #333; font-weight: 600; }
tr:hover td { background: #fafbfc; }
.table-wrap { overflow-x: auto; }

/* ---------- Search ---------- */
.search-row { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
.search-row input[type=search] { flex: 1; max-width: 420px; }
.result-count { color: var(--grey); font-size: 0.85em; }

/* ---------- Badges / banners ---------- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-grey { background: var(--grey-light); color: var(--grey); }
/* A booking that has not happened yet. Not green — nobody holds anything
   because of it — and not amber, which on this page means expiring. */
.badge-blue { background: var(--blue-light); color: var(--navy); }

.banner-msg { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 0.9em; }
.banner-info { background: var(--blue-light); color: var(--navy); }
.banner-warning { background: var(--amber-bg); color: var(--amber); }
.banner-danger { background: var(--red-bg); color: var(--red); }

/* ---------- Profile view ---------- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue-light); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2em;
}
.profile-name { font-size: 1.2em; font-weight: 700; color: var(--navy); }
.profile-sub { color: var(--grey); font-size: 0.88em; }

.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 30px; }
.detail-item dt { font-size: 0.78em; color: var(--grey); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.detail-item dd { margin: 0; font-size: 0.95em; }
.detail-item { margin-bottom: 10px; }
.sensitive-lock {
  color: var(--grey);
  font-style: italic;
  font-size: 0.85em;
}

/* ---------- Toasts / loading ---------- */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,0.2); font-size: 0.9em; }
.toast-error { background: var(--red); }
.toast-success { background: var(--green); }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-size: 0.95em;
}
.loading-screen .spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; width: 22px; height: 22px; }

.hidden { display: none !important; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  main { padding: 14px; }
  .app-banner { padding: 10px 14px; }
  .app-nav { padding: 0 8px; overflow-x: auto; }
}

/* =========================================================================
   Training matrix specifics
   Everything above this line is shared with the HR system verbatim.

   Status colours are a reserved traffic-light set, not a categorical palette:
   red = gone, amber = needs booking, green = in date, navy = in progress.
   Red/amber/green is inherently hard to separate under protanopia (the
   green/amber pair sits at ΔE ~6.8), so status is NEVER carried by colour
   alone — every cell also shows its date or a word, every chart segment is
   directly labelled, and adjacent fills are separated by a 2px surface gap.
   ========================================================================= */
:root {
  --st-red: #b3261e;
  --st-amber: #c07f00;
  --st-green: #1e7e34;
  --st-blue: #1f3864;
  --st-red-bg: #fbe9e7;
  --st-amber-bg: #fff4d6;
  --st-green-bg: #e6f4ea;
  --st-blue-bg: #dce6f1;
}

/* ---------- Stat tiles ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--grey);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-tile .stat-value { font-size: 1.9em; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat-tile .stat-label { font-size: 0.8em; color: var(--grey); margin-top: 4px; }
.stat-tile .stat-sub { font-size: 0.75em; color: var(--grey); margin-top: 6px; }
.stat-tile.tone-red { border-left-color: var(--st-red); }
.stat-tile.tone-red .stat-value { color: var(--st-red); }
.stat-tile.tone-amber { border-left-color: var(--st-amber); }
.stat-tile.tone-amber .stat-value { color: var(--st-amber); }
.stat-tile.tone-green { border-left-color: var(--st-green); }
.stat-tile.tone-green .stat-value { color: var(--st-green); }
.stat-tile.tone-blue { border-left-color: var(--st-blue); }
/* The tiles are <button> now, so the browser default chrome has to go and
   the text has to stop centring itself. Keyboard focus is left visible on
   purpose — they are controls, and one that cannot be tabbed to is one
   somebody cannot use. */
.stat-tile.clickable {
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.stat-tile.clickable:hover { background: #fafbfc; }

/* ---------- Charts (plain HTML/SVG — no chart library) ---------- */
.chart-block { margin-bottom: 8px; }
.chart-title { font-size: 0.95em; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.chart-note { font-size: 0.8em; color: var(--grey); margin-bottom: 14px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8em; color: var(--grey); }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* Renewals-ahead column chart. One series, so no legend — the title names it. */
.col-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.col-chart .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
}
.col-chart .col-bar {
  width: 100%;
  background: var(--st-blue);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.col-chart .col-bar.is-past { background: var(--st-red); }
.col-chart .col-bar.is-soon { background: var(--st-amber); }
.col-chart .col-value { font-size: 0.78em; font-weight: 700; color: var(--ink); }
.col-chart .col-value.zero { color: var(--grey); font-weight: 400; }
.col-axis { display: flex; gap: 6px; margin-top: 6px; }
.col-axis span {
  flex: 1;
  text-align: center;
  font-size: 0.7em;
  color: var(--grey);
  white-space: nowrap;
}

/* Per-team compliance: stacked horizontal bars, each segment directly
   labelled so the traffic-light colours are never doing the work alone. */
.team-bars { display: flex; flex-direction: column; gap: 10px; }
.team-bar-row { display: grid; grid-template-columns: 150px 1fr 74px; gap: 12px; align-items: center; }
.team-bar-name { font-size: 0.85em; font-weight: 600; color: var(--ink); }
.team-bar-track { display: flex; gap: 2px; height: 20px; }
.team-bar-seg {
  border-radius: 3px;
  min-width: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.team-bar-pct { font-size: 0.82em; color: var(--grey); text-align: right; }

/* ---------- The matrix grid ---------- */
.matrix-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.matrix-toolbar label { margin: 0 0 4px; }
.matrix-toolbar .field { display: flex; flex-direction: column; }
.matrix-toolbar input[type=search], .matrix-toolbar select { min-width: 190px; }
.matrix-toolbar .grow { flex: 1; }

.matrix-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
table.matrix { border-collapse: separate; border-spacing: 0; font-size: 0.82em; width: auto; }
table.matrix th, table.matrix td { border: none; padding: 0; }

table.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--grey-light);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: bottom;
  padding: 8px 6px;
  font-weight: 600;
}
/* Course names are long and columns are narrow, so the header text runs
   bottom-to-top. Fixed height keeps every header the same depth. */
table.matrix thead th.course-head {
  height: 240px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 6px 0;
}
table.matrix thead th.course-head > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 226px;
  display: block;
  margin: 0 auto;
  font-weight: 600;
  color: #333;
}
table.matrix thead th.name-head,
table.matrix tbody th.name-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid var(--border);
  text-align: left;
  padding: 6px 10px;
  min-width: 210px;
  max-width: 210px;
}
table.matrix thead th.name-head { z-index: 4; background: var(--grey-light); }
table.matrix tbody th.name-cell { font-weight: 600; }
table.matrix tbody th.name-cell .row-sub { display: block; font-weight: 400; color: var(--grey); font-size: 0.88em; }
table.matrix tbody tr:hover th.name-cell { background: #fafbfc; }

table.matrix td.cell {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
  padding: 3px 2px;
  font-size: 0.86em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
table.matrix td.cell:hover { outline: 2px solid var(--navy); outline-offset: -2px; }
td.cell.s-expired { background: var(--st-red); color: #fff; font-weight: 700; }
td.cell.s-urgent  { background: var(--st-red-bg); color: var(--st-red); font-weight: 700; }
td.cell.s-expiring { background: var(--st-amber-bg); color: var(--st-amber); font-weight: 700; }
td.cell.s-valid { background: var(--st-green-bg); color: var(--st-green); }
td.cell.s-held { background: var(--st-green-bg); color: var(--st-green); }
td.cell.s-booked, td.cell.s-awaiting, td.cell.s-requested { background: var(--st-blue-bg); color: var(--st-blue); font-weight: 600; }
td.cell.s-not_held { background: var(--grey-light); color: var(--grey); }
/* An explicit "N/A" from the workbook — somebody decided this person doesn't
   need it. Visually quiet, but deliberately not blank: a blank cell means
   nobody has said anything yet, which is a different (and more actionable)
   thing entirely. */
td.cell.s-not_required { background: #fbfbfc; color: #b6bcc6; font-size: 0.8em; }
td.cell.s-unknown { background: #fff; color: #d3d7de; }

.matrix-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }
.matrix-legend .key {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78em; color: var(--grey);
}
.matrix-legend .key i {
  width: 22px; height: 15px; border-radius: 3px; border: 1px solid var(--border);
  display: inline-block; flex: none;
}

/* ---------- Pop-ups ----------
   Centred, not a drawer down the side.

   These started as a 420px panel pinned to the right, which was fine for the
   cell editor it was built for — one short form. Everything since is a
   TABLE: what a dashboard number is made of, what a person's role requires.
   Four columns in 420px means reading left to right and back again for every
   row, which is not reading, and the thing people actually did was close it.

   So: centred, as wide as it needs up to a limit, and scrolling DOWN — the
   direction a list is meant to go. */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(20,37,68,0.45); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.drawer {
  background: #fff;
  width: min(1040px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.3);
}
/* A form, not a table — the cell editor. Full width would be a short form
   stranded across a metre of screen. */
.drawer-sm { width: min(460px, 100%); }
.drawer h3 { margin-bottom: 2px; }
.drawer .drawer-sub { color: var(--grey); font-size: 0.85em; margin-bottom: 16px; }
.drawer-close { float: right; }
/* The heading stays put while a long list scrolls under it, so it is always
   clear what is being looked at. */
.drawer > h3, .drawer > .drawer-close {
  position: sticky; top: -22px; background: #fff; z-index: 1;
}
.drawer table { width: 100%; }

/* ---------- Setup / provisioning screen ---------- */
.setup-steps { list-style: none; padding: 0; margin: 0 0 18px; }
.setup-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9em;
}
.setup-steps li:last-child { border-bottom: none; }
.setup-steps .tick { width: 18px; text-align: center; }
.progress {
  height: 8px; background: var(--grey-light); border-radius: 999px; overflow: hidden; margin: 10px 0 4px;
}
.progress > div { height: 100%; background: var(--navy); width: 0; transition: width 0.2s; }

/* ---------- Misc ---------- */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inline-note { font-size: 0.82em; color: var(--grey); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.empty-state { text-align: center; color: var(--grey); padding: 34px 10px; font-size: 0.9em; }

@media (max-width: 900px) {
  .team-bar-row { grid-template-columns: 110px 1fr 60px; }
  .drawer { width: 100%; }
}

/* A second line under a cell in a plain table — who deactivated somebody,
   or their job role. .row-sub was only ever styled inside the matrix name
   column; the Deactivated tab needs the same thing in an ordinary table,
   and with no rule it runs on as part of the line above it. */
.row-sub { display: block; color: var(--grey); font-size: 0.88em; }
.muted { color: var(--grey); }

/* The import plan. Hundreds of lines of "this would change", which has to be
   readable enough that somebody actually reads it before pressing Apply —
   scrollable rather than endless, and monospaced so names line up. */
.import-list {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fcfcfd;
  font-size: 0.82em;
  line-height: 1.6;
}
.import-list > div { white-space: nowrap; }
#import-detail h4 { margin: 0 0 2px; color: var(--navy); font-size: 0.95em; }

/* A section heading that folds the thing under it away. Looks like the
   heading it replaced — it IS the heading — and says which way it is
   about to go with the caret. */
.fold-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0 0 4px;
  font: inherit; color: var(--navy); cursor: pointer;
  font-size: 1.15em; font-weight: 700;
}
.fold-toggle:hover { color: var(--red); }
.fold-caret { display: inline-block; transition: transform 0.15s; font-size: 0.8em; }
.fold-toggle.open .fold-caret { transform: rotate(90deg); }

/* ---- A person's record: ID card, and their documents -----------------
   The card sits beside the name rather than under everything else: it is
   what somebody opens this screen to print or send on. */
.person-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.id-card-block {
  min-width: 260px;
  max-width: 340px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.015);
}
.id-card-block h4 {
  margin: 0 0 6px;
}
.id-card-current {
  margin-bottom: 8px;
  word-break: break-word;
}
.person-docs {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e2e5ea);
}
.doc-list {
  margin: 8px 0 12px;
  padding-left: 18px;
}
.doc-list li {
  margin: 4px 0;
}
.doc-older {
  margin-top: 10px;
  font-size: 13px;
}
.doc-older summary {
  cursor: pointer;
}

/* On a phone the card goes under the name rather than squeezing both. */
@media (max-width: 700px) {
  .person-head {
    flex-direction: column;
  }
  .id-card-block {
    max-width: none;
    width: 100%;
  }
}