/* Admin single-student profile page: stacked panels of cached state plus the
 * reset / retry write actions and the reset audit history. */

.admin-student {
  & > section {
    @apply mb-6;

    &:last-child {
      @apply mb-0;
    }
  }

  & .panel-grid {
    @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
  }

  & .panel {
    @apply rounded-md border border-slate-200 bg-white p-4;

    & > h2 {
      @apply mb-3 flex items-center gap-2 text-sm font-medium uppercase tracking-wide text-slate-700;
    }

    & dl {
      @apply space-y-2 text-sm;

      & > div {
        @apply flex justify-between gap-3;
      }
    }

    & dt {
      @apply text-slate-700;
    }

    & dd {
      @apply font-medium;

      &.mono {
        @apply font-mono text-xs font-normal;
      }
    }

    /* A full-width row (a link/button) inside an otherwise two-column dl. */
    & .link-row {
      @apply mt-3;
    }

    & .callout {
      @apply mt-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-900;
    }

    & p {
      @apply mb-3 text-sm text-slate-700;
    }

    /* Amber "caution" variant for the recoverable reset action. */
    &.caution {
      @apply border-amber-200 bg-amber-50;

      & > h2,
      & p,
      & label {
        @apply text-amber-900;
      }

      & label {
        @apply text-xs uppercase tracking-wide;
      }

      & form {
        @apply flex flex-col gap-3;

        /* Keep the submit at its natural width inside the stacked form. */
        & .btn {
          @apply self-start;
        }
      }

      & textarea {
        @apply w-full rounded-md border border-amber-300 bg-white px-3 py-2 text-sm;
      }
    }
  }

  & .history {
    & ul {
      @apply divide-y divide-slate-100 text-sm;
    }

    & li {
      @apply py-2;
    }

    & .when {
      @apply text-slate-900;
    }

    & .who {
      @apply text-slate-600;
    }
  }
}