/* Shared components: cards, buttons, notes. */
.card {
  background: var(--pn-surface);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-radius);
  padding: var(--pn-sp-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pn-sp-2);
  min-height: var(--pn-target);
  padding: 0 var(--pn-sp-4);
  border: 1px solid transparent;
  border-radius: var(--pn-radius-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--pn-navy); color: var(--pn-on-navy); }
.btn--primary:hover { background: var(--pn-navy-deep); color: var(--pn-on-navy); }
.btn--secondary { background: var(--pn-surface); color: var(--pn-navy); border-color: var(--pn-input-border); }
.btn--secondary:hover { border-color: var(--pn-input-border-hover); }

.note {
  display: flex;
  gap: var(--pn-sp-3);
  align-items: flex-start;
  padding: var(--pn-sp-3) var(--pn-sp-4);
  border-radius: var(--pn-radius-sm);
  font-size: var(--pn-fs-14);
}
.note p { margin: 0; }
.note__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.note--info { background: var(--pn-tint); color: var(--pn-navy); }

.system-page { max-width: 40rem; margin: var(--pn-sp-10) auto 0; }
.system-page__title { font-size: var(--pn-fs-24); }

/* Buttons: variants */
.btn--block { display: flex; width: 100%; }
.btn--tall { min-height: 50px; }
.btn--small { min-height: 36px; padding: 0 var(--pn-sp-3); font-size: var(--pn-fs-14); }
.btn--danger { background: var(--pn-red); color: var(--pn-on-navy); }
.btn--danger:hover { filter: brightness(.92); color: var(--pn-on-navy); }
.btn:focus-visible { outline: 2px solid var(--pn-navy); outline-offset: 2px; }

/* Alerts and summaries */
.alert {
  display: flex;
  gap: var(--pn-sp-3);
  align-items: flex-start;
  margin-bottom: var(--pn-sp-6);
  padding: var(--pn-sp-3) var(--pn-sp-4);
  border-radius: var(--pn-radius-sm);
  font-size: var(--pn-fs-14);
}
.alert p { margin: 0; }
.alert__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.alert--error { background: var(--pn-error-bg); border: 2px solid var(--pn-red); color: var(--pn-red); }
.alert--success { background: var(--pn-status-approved-bg); color: var(--pn-success); }

.error-summary {
  margin-bottom: var(--pn-sp-6);
  padding: var(--pn-sp-4);
  background: var(--pn-error-bg);
  border: 2px solid var(--pn-red);
  border-radius: var(--pn-radius-sm);
}
.error-summary__title { margin-bottom: var(--pn-sp-2); color: var(--pn-red); font-size: var(--pn-fs-16); }
.error-summary ul { margin: 0; padding-left: var(--pn-sp-6); }
.error-summary a { color: var(--pn-red); font-weight: 600; }

/* Forms */
.form { display: grid; gap: var(--pn-sp-4); }
.form-card { max-width: 34rem; }
.field { display: grid; gap: var(--pn-sp-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { color: var(--pn-charcoal); font-size: var(--pn-fs-14); font-weight: 600; padding: 0; }
.field__hint { margin: 0; color: var(--pn-muted); font-size: var(--pn-fs-14); }
.field__error { margin: 0; color: var(--pn-red); font-size: var(--pn-fs-14); font-weight: 600; }
.field--error .input { border-color: var(--pn-red); }

.input {
  width: 100%;
  min-height: var(--pn-target);
  padding: var(--pn-sp-2) var(--pn-sp-3);
  background: var(--pn-surface);
  border: 1px solid var(--pn-input-border);
  border-radius: var(--pn-radius-sm);
  color: var(--pn-charcoal);
}
.input:hover { border-color: var(--pn-input-border-hover); }
.input:focus-visible { outline: 2px solid var(--pn-navy); outline-offset: 1px; border-color: var(--pn-navy); }
.input--compact { width: auto; min-height: 36px; padding: var(--pn-sp-1) var(--pn-sp-2); }
.input--mono { font-family: var(--pn-mono); letter-spacing: .04em; }

.password-field { position: relative; }
.password-field .input { padding-right: 72px; }
.password-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--pn-sp-1);
  min-width: 56px;
  min-height: 36px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  border-radius: var(--pn-radius-sm);
  color: var(--pn-navy);
  font-size: var(--pn-fs-14);
  font-weight: 600;
  cursor: pointer;
}

.choice { display: flex; align-items: center; gap: var(--pn-sp-2); min-height: var(--pn-target); cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--pn-navy); }

.form__actions { display: flex; flex-wrap: wrap; gap: var(--pn-sp-3); justify-content: flex-end; margin-top: var(--pn-sp-2); }
.inline-form { display: flex; align-items: center; gap: var(--pn-sp-2); }

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--pn-sp-3);
  margin: var(--pn-sp-6) 0 var(--pn-sp-4);
  color: var(--pn-muted);
  font-size: var(--pn-fs-12);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--pn-border); }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--pn-sp-2);
  border-radius: 4px;
  font-size: var(--pn-fs-12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tag--navy { background: var(--pn-navy); color: var(--pn-on-navy); }
.tag--muted { background: var(--pn-status-hold-bg); color: var(--pn-status-hold-fg); }

/* Page heading and cards */
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pn-sp-4); margin-bottom: var(--pn-sp-6); }
.page-heading p { margin: 0; }
.back-link { margin-bottom: var(--pn-sp-4); }
.back-link a { display: inline-flex; align-items: center; gap: var(--pn-sp-1); min-height: var(--pn-target); font-weight: 600; text-decoration: none; }
.card--flush { padding: 0; overflow: hidden; }
.card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pn-sp-3); padding: var(--pn-sp-4) var(--pn-sp-6); border-bottom: 1px solid var(--pn-border); }
.card__header h2 { margin: 0; }
.card + .card, .temp-password { margin-bottom: var(--pn-sp-6); }

/* Tables (become cards below 768 px using data-label) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--pn-fs-14); }
.table th {
  padding: var(--pn-sp-3) var(--pn-sp-4);
  background: var(--pn-subtle);
  border-bottom: 1px solid var(--pn-border);
  color: var(--pn-muted);
  font-size: var(--pn-fs-12);
  font-weight: 600;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td { padding: var(--pn-sp-3) var(--pn-sp-4); border-bottom: 1px solid var(--pn-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table__row--muted td { color: var(--pn-muted); }

@media (max-width: 767.98px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: var(--pn-sp-3) var(--pn-sp-4); border-bottom: 1px solid var(--pn-border); }
  .table td { display: flex; justify-content: space-between; gap: var(--pn-sp-4); padding: var(--pn-sp-1) 0; border: 0; }
  .table td::before { content: attr(data-label); color: var(--pn-muted); font-weight: 600; }
}

/* Switch (a submit button with role="switch") */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--pn-sp-2);
  min-height: var(--pn-target);
  padding: 0;
  background: none;
  border: 0;
  color: var(--pn-charcoal);
  font-weight: 600;
  cursor: pointer;
}
.switch__track { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--pn-input-border); transition: background .15s; }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--pn-surface); transition: transform .15s; }
.switch[aria-checked="true"] .switch__track { background: var(--pn-navy); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(16px); }

/* Dialog */
.dialog {
  max-width: 28rem;
  padding: var(--pn-sp-6);
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-radius);
  color: var(--pn-charcoal);
}
.dialog::backdrop { background: var(--pn-scrim); }
.dialog h2 { font-size: var(--pn-fs-20); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--pn-sp-3); margin-top: var(--pn-sp-6); }

/* Temporary password panel */
.temp-password { border-color: var(--pn-navy); }
.temp-password__row { display: flex; gap: var(--pn-sp-3); margin-bottom: var(--pn-sp-3); max-width: 30rem; }