/* ==========================================================================
   Role ID / Authorization Cards.

   The card itself is ID-1 (85.6 x 54 mm) so it drops straight into the
   existing .a4-card-grid used by the passport print sheet. --rc-accent is set
   inline per card type, which is what makes a Flagman card readable as a
   Flagman card from across a site office.
   ========================================================================== */

.role-card {
  --rc-accent: #1e3a5f;
  position: relative;
  width: 85.6mm;
  height: 54mm;
  box-sizing: border-box;
  padding: 4.2mm 4.5mm 3.6mm;
  border-radius: 3.2mm;
  background: #fff;
  color: #14213d;
  border: 0.3mm solid #dde1e8;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2mm;
  overflow: hidden;
}

.rc-accent-bar {
  position: absolute; inset: 0 0 auto 0; height: 2.2mm;
  background: var(--rc-accent);
}

.rc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 2mm;
  margin-top: 1.4mm;
}
.rc-org { display: flex; align-items: center; gap: 1.4mm; min-width: 0; font-size: 6.6pt; font-weight: 700; color: #55617a; }
.rc-org i { color: var(--rc-accent); }
.rc-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rc-status {
  flex: none; font-size: 5.8pt; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.6mm 1.6mm; border-radius: 999px; border: 0.25mm solid currentColor;
}
.rc-status.is-valid { color: #047857; }
.rc-status.is-expired { color: #b45309; }
.rc-status.is-revoked { color: #b91c1c; }

.rc-role { display: flex; align-items: center; gap: 2mm; min-width: 0; }
.rc-role > i {
  flex: none; width: 7mm; height: 7mm; border-radius: 1.6mm;
  display: flex; align-items: center; justify-content: center;
  background: var(--rc-accent); color: #fff; font-size: 8pt;
}
.rc-role-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11pt; font-weight: 800; line-height: 1.05; color: var(--rc-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-role-cat { font-size: 6pt; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7b8496; }

.rc-body { display: flex; align-items: center; gap: 2.4mm; flex: 1 1 auto; min-height: 0; }

.rc-avatar {
  flex: none; width: 11mm; height: 11mm; border-radius: 2mm;
  display: flex; align-items: center; justify-content: center;
  background: #eef2f8; color: var(--rc-accent);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10pt; font-weight: 800;
  border: 0.25mm solid #dde1e8;
}

.rc-identity { flex: 1 1 auto; min-width: 0; }
.rc-name {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 9pt; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-designation, .rc-company {
  font-size: 6.4pt; color: #55617a; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rc-qr { flex: none; display: flex; flex-direction: column; align-items: center; }
.rc-qr-pending { font-size: 5.6pt; color: #9aa3b2; text-align: center; width: 12mm; }

.rc-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5mm;
  border-top: 0.25mm solid #e5e8ee; padding-top: 1.6mm;
}
.rc-foot span { display: block; font-size: 5.4pt; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8891a1; }
.rc-foot strong { display: block; font-size: 6.6pt; font-weight: 700; color: #14213d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Design variants ---------------------------------------------------- */
/* Standard: white card, coloured accent bar (the base above). */

/* Technical: tinted panel behind the role block, for the trade credentials. */
.rc-authorization-technical .rc-role {
  background: color-mix(in srgb, var(--rc-accent) 10%, #fff);
  border-left: 1mm solid var(--rc-accent);
  border-radius: 1.4mm; padding: 1.4mm 2mm; margin: 0 -1mm;
}

/* Formal: full accent header, for permit/first-aid style authorizations. */
.rc-authorization-formal { padding-top: 0; }
.rc-authorization-formal .rc-accent-bar { height: 13mm; }
.rc-authorization-formal .rc-head { position: relative; margin-top: 1.6mm; }
.rc-authorization-formal .rc-org { color: rgba(255, 255, 255, 0.86); }
.rc-authorization-formal .rc-org i { color: #fff; }
.rc-authorization-formal .rc-status { color: #fff; }
.rc-authorization-formal .rc-role { position: relative; margin-top: -0.6mm; }
.rc-authorization-formal .rc-role > i { background: rgba(255, 255, 255, 0.18); }
.rc-authorization-formal .rc-role-name { color: #fff; }
.rc-authorization-formal .rc-role-cat { color: rgba(255, 255, 255, 0.75); }

/* --- Back face ---------------------------------------------------------- */
.role-card-back { justify-content: flex-start; }
.rc-back-title {
  margin-top: 1.6mm; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 8pt; font-weight: 800; color: var(--rc-accent);
}
.rc-back-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4mm 3mm; }
.rc-back-grid span { display: block; font-size: 5.4pt; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8891a1; }
.rc-back-grid strong { display: block; font-size: 7pt; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-back-qr { display: flex; flex-direction: column; align-items: center; gap: 1mm; margin-top: auto; }
.rc-back-note { font-size: 5.6pt; color: #55617a; }
.rc-back-foot { font-size: 5.2pt; color: #8891a1; text-align: center; padding-top: 1.4mm; border-top: 0.25mm solid #e5e8ee; }

/* --- On-screen (non-print) preview --------------------------------------
   mm units keep the card true to size for print; on screen the browser maps
   them at ~96dpi, which is close enough to a real card for the operator to
   judge the layout. */
.rc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85.6mm, max-content));
  gap: var(--sp-4);
  justify-content: start;
}

.rc-tile { position: relative; }
.rc-tile-select {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 18px; height: 18px; cursor: pointer;
}
.rc-tile-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.rc-type-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px;
  vertical-align: -1px;
}

/* --- Type library cards (Settings) -------------------------------------- */
.rc-type-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.rc-type-card {
  border: 1px solid var(--border-subtle, #e5e8ee); border-left: 4px solid var(--rc-accent, #1e3a5f);
  border-radius: 10px; padding: var(--sp-3) var(--sp-4); background: var(--surface-1, #fff);
}
.rc-type-card.is-inactive { opacity: 0.55; }
.rc-type-name { font-weight: 800; font-size: 14px; }
.rc-type-meta { font-size: 11.5px; color: var(--text-tertiary, #7b8496); margin-top: 2px; }
.rc-type-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

@media print {
  /* Card identity is almost entirely background colour — without this most
     printers drop the accent bar and the card becomes unidentifiable. */
  .role-card, .rc-accent-bar, .rc-role > i, .rc-avatar, .rc-status {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .role-card { box-shadow: none; }
}

/* ==========================================================================
   Legacy notice.

   Authorization is the Training Passport. This page predates that decision,
   so it says so plainly at the top rather than sitting there looking like a
   second, competing authorization route. Nothing here is disabled — issued
   cards remain readable, printable and auditable.
   ========================================================================== */
.legacy-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; margin-bottom: 16px;
  border: 1px solid var(--amber-100);
  border-left: 4px solid var(--amber-500);
  border-radius: var(--radius-md);
  background: var(--amber-50);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.legacy-notice i { color: var(--amber-600); font-size: 15px; margin-top: 1px; }
.legacy-notice strong { color: var(--text-primary); }
.legacy-notice a { color: var(--accent-600); font-weight: 600; white-space: nowrap; }

.legacy-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-tertiary);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}