/*
 * Portal additions. Loaded after the supplied app.css (which is left untouched)
 * and only styles things the design didn't cover: alerts, validation, status labels,
 * the sign-in screens and the manager pages. Same palette and type throughout.
 */

/* ---- Navigation: show where you are ---------------------------------------- */
nav ul li a.is-active {
  box-shadow: 4px 4px 0 var(--c-black);
}

/* ---- Spacing helpers --------------------------------------------------------- */
.content-panel__inner > .panel + .panel,
.content-panel__inner > .panel + form,
.content-panel__inner > .dash-grid + .panel,
.content-panel__inner > .panel + .dash-grid { margin-top: 2rem; }
.form-row + .form-row--check { margin-top: 1.5rem; }
.nowrap { white-space: nowrap; }
.muted { opacity: 0.75; }
h1 { line-height: 1.2; }

/* ---- Alerts ---------------------------------------------------------------- */
.alert {
  background: var(--c-white);
  border-left: 8px solid var(--c-yellow);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  padding: 0.8rem 1.2rem;
  margin: 0 0 1.5rem 0;
  font-weight: 700;
  font-size: 1rem;
}
.alert--success { border-left-color: #00a74c; }
.alert--error   { border-left-color: var(--c-black); }
.panel--pink .alert { box-shadow: none; }

/* ---- Forms ------------------------------------------------------------------- */
form input:focus, form select:focus, form textarea:focus { outline-color: var(--c-black); }
form input[aria-invalid="true"], form select[aria-invalid="true"], form textarea[aria-invalid="true"] { outline-color: var(--c-black); }
.form__error {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 4px 10px;
  margin: 0.75rem 0 0 0;
}
form input[type="file"] { padding: 8px; }
form input[type="file"] + input[type="file"] { margin-top: 1rem; }
form select[multiple] { min-height: 12rem; }
.form-row--check { display: flex; align-items: center; gap: 12px; }
.form-row--check input { width: 22px; height: 22px; flex: 0 0 22px; outline-width: 3px; padding: 0; accent-color: var(--c-black); }
.form-row--check label { margin: 0; text-transform: none; font-weight: 700; }
.radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.radio-group label { display: flex; align-items: center; gap: 10px; text-transform: none; margin: 0; }
.radio-group input { width: 20px; height: 20px; padding: 0; outline-width: 3px; accent-color: var(--c-black); }
.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.button { display: inline-block; text-decoration: none; color: var(--c-black); }
.button--small { padding: 4px 14px; font-size: 0.9rem; }
.button--black { background: var(--c-black); color: var(--c-white); }
.button--black:hover { color: var(--c-yellow); }
.button--white { background: var(--c-white); }
.link-button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---- Status labels ------------------------------------------------------------- */
.status {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--c-white);
  color: var(--c-black);
}
.status--done   { background: #00a74c; color: var(--c-white); }
.status--review { background: var(--c-yellow); color: var(--c-black); }
.status--alert  { background: var(--c-pink); color: var(--c-white); }
.status--todo   { background: var(--c-white); color: var(--c-black); }
.table--black .status--alert { background: var(--c-black); }

/* ---- Tables --------------------------------------------------------------------- */
.table td { vertical-align: top; }
.table td a { color: inherit; }
.mission-link { text-decoration: none; }
.mission-link:hover { text-decoration: underline; }
.mission-desc, .review-note {
  display: block;
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-white);
  margin-top: 4px;
}
.table--black .review-note, .table--black .mission-desc { color: var(--c-black); }
.file-link { display: block; text-transform: none; font-size: 0.85rem; }
.table--black tr.is-me td { background: rgba(255, 255, 255, 0.35); font-weight: 800; }
.table--black tbody tr + tr td { border-top: 1px solid rgba(0, 0, 0, 0.15); }
.table--plain td, .table--plain th { text-transform: none; }
.table .actions { white-space: nowrap; text-align: right; }

/* ---- Sign-in screens ------------------------------------------------------------ */
.guest .content-panel__inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}
.guest__logo { display: block; width: 220px; margin: 0 0 2rem 0; }
.guest .page-title { margin-bottom: 2rem; }
.panel__intro { margin: 0 0 1.5rem 0; }
.input--code {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.5em;
  text-align: center;
}
.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  font-size: 1rem;
}

/* ---- Manager pages ----------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.filter-bar .form-row { margin: 0; flex: 1 1 160px; }
.filter-bar .form-row + .form-row { margin: 0; }
.filter-bar label { font-size: 0.8rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem 0; padding: 0; list-style: none; }
.tabs a {
  display: inline-block; padding: 5px 15px; font-weight: 800; text-decoration: none;
  background: var(--c-white); color: var(--c-black); font-size: 1rem;
}
.tabs a.is-active { background: var(--c-black); color: var(--c-white); }
.summary-line { font-size: 1rem; margin: 0 0 1rem 0; }
.pager { display: flex; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; font-size: 1rem; }
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0 0 2rem 0; }
.detail-list dt { font-weight: 800; text-transform: uppercase; font-size: 0.9rem; padding-top: 0.15em; }
.detail-list dd { margin: 0; font-weight: 500; }
.detail-list dd .file-link { font-size: 1rem; }
@media screen and (max-width: 600px) {
  .detail-list { grid-template-columns: 1fr; gap: 0.15rem; }
  .detail-list dd { margin-bottom: 0.75rem; }
}
.description-box { background: var(--c-white); padding: 1rem 1.25rem; font-weight: 500; white-space: pre-wrap; margin: 0; }
.card .stat-label { margin: 0; }
.split { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media screen and (min-width: 1200px) { .split { grid-template-columns: 1fr 1fr; } }
.danger-zone { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid rgba(0, 0, 0, 0.2); }
.preview-link { font-size: 1rem; }
.top-list { margin: 0.5rem 0 0 0; padding-left: 1.5rem; font-weight: 600; }
details.advanced { margin-top: 1.5rem; }
details.advanced summary { cursor: pointer; font-weight: 800; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 0.75rem; }

/* ---- Information icon picker --------------------------------------------------- */
.icon-picker { border: 0; padding: 0; margin: 1.5rem 0 0 0; min-width: 0; }
.icon-picker legend { display: block; font-weight: 800; text-transform: uppercase; margin-bottom: 7px; padding: 0; }
.icon-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.icon-picker__option {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; background: var(--c-white); cursor: pointer; text-align: center;
  font-size: 0.75rem; font-weight: 700; line-height: 1.2; text-transform: none; margin: 0;
  outline: 4px solid transparent;
}
.icon-picker__option svg { width: 36px; height: 36px; }
.icon-picker__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icon-picker__option:hover { outline-color: var(--c-yellow); }
.icon-picker__option:has(input:checked) { background: var(--c-yellow); outline-color: var(--c-black); }
.icon-picker__option:has(input:focus-visible) { outline-color: var(--c-black); outline-style: dashed; }
.icon-cell svg { width: 32px; height: 32px; display: block; }

/* ---- "Log in as" banner + manager confirmation ------------------------------------ */
.impersonation-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  background: var(--c-black); color: var(--c-white); padding: 0.8rem 1.2rem; margin: 0 0 1.5rem 0;
  font-size: 1rem; font-weight: 600; border-left: 8px solid var(--c-yellow);
}
.inline-form { display: inline; }
.table .actions .button + .inline-form, .table .actions .inline-form + .button { margin-left: 4px; }
.manager-confirm {
  margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--c-black); color: var(--c-white);
  border-left: 8px solid var(--c-yellow); font-size: 1rem;
}
.manager-confirm p { margin: 0 0 0.75rem 0; }
.manager-confirm .form-row--check label { color: var(--c-yellow); }
.manager-confirm .form-row--check input { outline-color: var(--c-yellow); }
.manager-confirm .form__error { background: var(--c-yellow); color: var(--c-black); }
.manager-confirm + .form-row { margin-top: 1.5rem; }

/* ---- "Submitted on their behalf" markers ------------------------------------------ */
.on-behalf {
  display: block; margin-top: 4px; font-size: 0.75rem; font-weight: 800; text-transform: none;
  color: var(--c-black); background: var(--c-yellow); padding: 1px 6px; width: fit-content;
}
.on-behalf--large { font-size: 1rem; font-weight: 600; padding: 0.6rem 1rem; margin: 0 0 1.5rem 0; width: auto; border-left: 8px solid var(--c-black); }

/* ---- Automatic sign-ups --------------------------------------------------------------- */
.settings-heading { font-size: 1.3rem; text-transform: uppercase; margin: 2.5rem 0 0.5rem; padding-top: 1.5rem; border-top: 2px solid rgba(0, 0, 0, 0.2); }
.settings-heading:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.signups-tools { margin-top: 2rem; }
.test-api { margin-top: 1.5rem; }
.test-result { background: var(--c-white); padding: 1rem 1.25rem; border-left: 8px solid #00a74c; font-size: 1rem; overflow-wrap: anywhere; }
.test-result--fail { border-left-color: var(--c-black); }
.test-result p { margin: 0 0 0.5rem; }
.test-result pre { margin: 0; white-space: pre-wrap; font-size: 0.85rem; background: #f4f4f4; padding: 0.5rem; }
.mono, code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; }
.auto-signups-note { background: var(--c-yellow); padding: 0.8rem 1rem; margin: 0; font-weight: 600; font-size: 1rem; }
.referral-url { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; font-size: 0.9rem; }
.referral-box { background: var(--c-yellow); padding: 1rem 1.25rem; margin: 0 0 2rem 0; font-size: 1rem; }
.referral-box p { margin: 0 0 0.5rem; }
.referral-box__row { display: flex; gap: 0.75rem; align-items: center; }
.referral-box__row input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; border: 0; border-radius: 5px; padding: 10px; font: inherit; font-size: 0.95rem; outline: 4px solid var(--c-black); background: var(--c-white); }
.form-row:has(.auto-signups-note) { margin-bottom: 1.25rem; }

/* ---- Help / manager guide ------------------------------------------------------- */
.help-meta { font-size: 0.9rem; }
.guide-viewer { margin-top: 2rem; }
.guide-viewer iframe { display: block; width: 100%; height: 80vh; min-height: 520px; border: 4px solid var(--c-black); background: #525659; }