/* Sign-in and account administration.
 *
 * Kept out of the demo stylesheets so those stay byte-identical to the
 * reference build; everything here is additive and uses the same tokens.
 */

/* ---- sign in ---- */
.signin-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5573;
  text-align: left;
}
.signin-field input {
  font: inherit;
  font-weight: 500;
  padding: 12px 14px;
  border: 1px solid rgba(22, 43, 94, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #151c2e;
}
.signin-field input:focus-visible {
  outline: 2px solid #162b5e;
  outline-offset: 1px;
  border-color: transparent;
}
/* Inherits button.primary from style.css (blue fill, white label, shadow) and
   only widens it to the panel and sizes it for a primary action. */
.signin-submit {
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
  border-radius: 10px;
}
.signin-submit:disabled {
  cursor: progress;
}
/* Guidance belongs beside the form, not inside the control that submits it. */
.signin-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6e7c94;
  text-align: center;
}
.signin-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fcefef;
  color: #a3272b;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

/* `display:flex` on the labels below would otherwise win against the `hidden`
 * attribute, so the linked-record field stayed visible for manager accounts. */
.record-form [hidden],
.signin-panel [hidden] {
  display: none !important;
}

/* ---- account administration ---- */
.record-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.record-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5573;
}
.record-form input,
.record-form select {
  font: inherit;
  font-weight: 500;
  padding: 11px 13px;
  border: 1px solid rgba(22, 43, 94, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #151c2e;
}
/* A dropdown draws two pixels taller than a text box by default, which shows
   wherever the two sit side by side. */
.record-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.record-form select {
  height: 42px;
}
/* A hint inside a label reads as a hint, not as part of the label. */
.record-form label small,
.record-form label .hint {
  font-weight: 500;
  color: #6e7c94;
}
.record-form input:focus-visible,
.record-form select:focus-visible {
  outline: 2px solid #162b5e;
  outline-offset: 1px;
}
.record-form .dialog-actions {
  margin-top: 4px;
}
button.danger {
  background: #a3272b;
  border-color: #a3272b;
  color: #fff;
}

/* The workspace is a property of the account now, not a dropdown. */
.workspace-name {
  font-size: 13px;
  font-weight: 650;
  color: #1d2a4a;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(22, 43, 94, 0.06);
  white-space: nowrap;
}

/* Legend swatch for the anonymous programme-average line on a beneficiary's
   progress chart. Matches the dotted grey stroke used in chart(). */
.legend .cohort {
  background: #9aa4bf;
}

/* Says plainly that document submission records a state change rather than
   storing a file — there is no upload endpoint behind it. */
.document-note {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: #6b7590;
}

/* ---- EEA1: fill in and sign in the workspace ---- */
.choice-set {
  border: 1px solid rgba(22, 43, 94, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.choice-set legend {
  font-size: 12px;
  font-weight: 650;
  color: #4a5573;
  padding: 0 4px;
}
label.choice {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  color: #152342;
}
.quiet-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6e7c94;
}
/* Beside a field in a spaced column or grid, a note belongs to the field
   above it, so it closes up rather than floating halfway to the next one. */
.record-form > .quiet-note,
.form-grid > .quiet-note {
  margin-top: -6px;
}
dialog .record-form p.quiet-note {
  margin-bottom: 0;
}
.signature-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signature-label {
  font-size: 13px;
  font-weight: 600;
  color: #4a5573;
}
/* `touch-action: none` so signing on a phone draws instead of scrolling. */
.signature-pad {
  width: 100%;
  height: 180px;
  border: 1px dashed rgba(22, 43, 94, 0.3);
  border-radius: 10px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.signature-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-signature {
  font-size: 12.5px;
  font-weight: 600;
  color: #3b5bc4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A password you can reveal: the field and its button share one rounded box. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:44px}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);border:0;background:none;padding:6px;color:#8a97af;cursor:pointer;display:inline-flex;border-radius:7px;min-width:0}
.pw-toggle:hover{color:#3b5bc4;background:#eef2ff}
.pw-toggle .icon{width:18px;height:18px}
.pw-toggle:focus-visible{outline:2px solid #8ba5e4;outline-offset:1px}
.pw-field{display:grid;gap:8px}

/* A heading that introduces a group of fields inside a dialog form.
   Some of these forms are flex columns with their own gap and some are not,
   so the spacing belongs on the heading rather than on the form. */
.form-section {
  margin: 14px 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: #1d2a4a;
}
.form-section:first-child {
  margin-top: 4px;
}

/* A field beside one with a hint under it keeps its own height, rather than
   stretching its input to fill the taller row. */
.form-grid label {
  align-content: start;
}

/* A document row keeps its buttons on one line at the right, and lets the
   description wrap instead. Left to itself the row squeezed the buttons, and
   the last one fell to a line of its own under the description. Phones keep
   the stacked layout from style.css. */
@media (min-width: 681px) {
  .document > div:nth-child(2) {
    flex: 1 1 180px;
    min-width: 0;
  }
  .document .actions {
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
  }
}

/* Panels and notes placed straight on a page stack with room between them.
   Most pages wrap theirs in a grid that spaces them; the ones that do not
   had a note and two panels touching. */
.content > .note,
.content > .panel {
  margin-bottom: 22px;
}
.content > :last-child {
  margin-bottom: 0;
}

/* Who carries whom: the names stay on one line and every dropdown starts at
   the same place, rather than wherever the name before it happened to end. */
.signature-row .person {
  min-width: 0;
  white-space: nowrap;
}
.signature-row .assign-supervisor {
  width: min(320px, 55%);
  flex: 0 0 auto;
}
.signature-row:has(.assign-supervisor) {
  gap: 12px;
}
@media (max-width: 680px) {
  .signature-row:has(.assign-supervisor) {
    flex-wrap: wrap;
  }
  .signature-row .assign-supervisor {
    width: 100%;
  }
}

/* On a short screen the sidebar scrolls, rather than cutting off the account
   at its foot. */
@media (min-width: 681px) {
  .sidebar {
    overflow-y: auto;
  }
}

/* Settings: one button at the foot of the sidebar, looking like the menu
   items above it, and part of the menu itself on a phone, where the foot of
   the sidebar is hidden. */
.sidebar-settings,
.nav-settings {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #687791;
  font-size: 13px;
  font-weight: 500;
}
.sidebar-settings:hover,
.nav-settings:hover {
  background: #f5f7fb;
  color: #33486f;
}
.sidebar-bottom {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.nav-settings {
  display: none;
}
@media (max-width: 680px) {
  .nav-settings {
    display: inline-flex;
    width: auto;
    white-space: nowrap;
    font-size: 11px;
    padding: 9px;
  }
  .nav-settings .icon {
    width: 15px;
    height: 15px;
  }
}

/* The line that explains a password screen sits at the top of its card, read
   first and left aligned like the fields under it. */
.signin-hint.password-lead {
  margin: 0 0 2px;
  text-align: left;
  font-size: 13.5px;
}

/* Who is signed in: an icon, the full name, and the workspace under it. */
.identity-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(22, 43, 94, 0.06);
  max-width: 340px;
}
.identity-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #3b5bc4;
  flex-shrink: 0;
}
.identity-icon .icon {
  width: 17px;
  height: 17px;
}
.identity-text {
  display: grid;
  line-height: 1.25;
  min-width: 0;
}
.identity-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #1d2a4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.identity-text small {
  font-size: 11px;
  color: #6e7c94;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 680px) {
  .identity-chip {
    max-width: 100%;
  }
}
/* On a phone the chip already says whose workspace this is, so the label
   beside it goes, and the bar takes the chip's height instead of a fixed one. */
@media (max-width: 680px) {
  .topbar {
    height: auto;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topbar .crumb {
    display: none;
  }
  .topbar .tools {
    width: 100%;
  }
}

/* Whole cards and table rows that open something. */
.row-link {
  cursor: pointer;
}
tr.row-link:hover td {
  background: #f7f9fd;
}
.host-card.row-link {
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.host-card.row-link:hover {
  border-color: #b9c6e4;
  box-shadow: 0 10px 30px #162b5e12;
  transform: translateY(-2px);
}
.row-link:focus-visible {
  outline: 3px solid #8ba5e4;
  outline-offset: 2px;
}

/* Uploads: the two downloads side by side, then what is missing, grouped by
   where it is filled in. */
.upload-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.upload-card .panel-body {
  padding-top: 0;
}
.fix-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.fix-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.fix-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.gap-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8a5a14;
  background: #fff4df;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 2px 4px 2px 0;
  white-space: nowrap;
}
.sheet-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #6e7c94;
  background: #fff;
  border-radius: 4px;
  padding: 1px 4px;
}
.done-mark {
  font-size: 11.5px;
  font-weight: 600;
  color: #19765e;
}
.gap-table th small {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #8a96ac;
  margin-top: 3px;
}
.gap-table td {
  white-space: normal;
  vertical-align: middle;
}
@media (max-width: 880px) {
  .upload-cards {
    grid-template-columns: 1fr;
  }
}

/* A warning in running text, such as a beneficiary with no supervisor. */
.warn-text {
  color: #93661b;
  font-weight: 600;
}
/* The number beside the document dashes, so nobody has to count them. */
.docdots {
  align-items: center;
}
.docdots-count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6e7c94;
}