:root {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: #17212b;
  background: #eef2f4;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;

  background:
    radial-gradient(
      circle at top right,
      rgba(230, 181, 34, 0.14),
      transparent 32%
    ),
    #eef2f4;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.public-portal {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

.public-header {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #004c39,
      #087056
    );

  border-bottom:
    5px solid #e4b429;
}

.public-header__inner {
  width:
    min(
      1180px,
      calc(100% - 36px)
    );

  margin: 0 auto;
  padding: 22px 0;

  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-mark {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    2px solid
    rgba(255, 255, 255, 0.75);

  border-radius: 50%;

  color: #00513d;
  background: #ffffff;

  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.brand-overline {
  margin: 0 0 4px;

  color:
    rgba(255, 255, 255, 0.82);

  font-size: 0.76rem;
  font-weight: 700;

  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.brand-title {
  margin: 0;

  font-size:
    clamp(
      1.2rem,
      3vw,
      1.8rem
    );

  line-height: 1.2;
}

.public-main {
  width:
    min(
      1180px,
      calc(100% - 36px)
    );

  margin: 0 auto;
  padding: 48px 0;

  flex: 1;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.portal-card {
  width: min(620px, 100%);

  overflow: hidden;

  border: 1px solid #dbe4e0;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 20px 60px
    rgba(17, 35, 30, 0.12);
}

.portal-card--wide {
  width: min(820px, 100%);
}

.portal-card__content {
  padding: 38px;
}

.portal-intro {
  margin-bottom: 26px;
}

.portal-badge {
  display: inline-flex;

  margin-bottom: 14px;
  padding: 6px 10px;

  border-radius: 999px;

  color: #075b46;
  background: #e8f5f0;

  font-size: 0.76rem;
  font-weight: 800;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.portal-intro h2 {
  margin: 0 0 12px;

  color: #15261f;

  font-size:
    clamp(
      1.65rem,
      4vw,
      2.3rem
    );

  line-height: 1.16;
}

.portal-intro p {
  margin: 0;

  color: #62716b;

  line-height: 1.7;
}

.campaign-panel {
  margin-bottom: 24px;
  padding: 17px 18px;

  border-left:
    4px solid #e4b429;

  border-radius: 8px;

  background: #fff9e8;
}

.campaign-panel span,
.campaign-panel strong,
.campaign-panel small {
  display: block;
}

.campaign-panel span {
  margin-bottom: 4px;

  color: #876b14;

  font-size: 0.75rem;
  font-weight: 800;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.campaign-panel strong {
  color: #44380f;
}

.campaign-panel small {
  margin-top: 6px;

  color: #746634;
}

.portal-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  color: #263831;

  font-size: 0.92rem;
  font-weight: 750;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;

  padding: 11px 13px;

  border:
    1px solid #cbd6d1;

  border-radius: 9px;

  color: #16241e;
  background: #ffffff;

  outline: none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #08775a;

  box-shadow:
    0 0 0 4px
    rgba(8, 119, 90, 0.12);
}

.form-group input:disabled {
  cursor: not-allowed;
  background: #f1f4f3;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 72px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;

  transform: translateY(-50%);

  border: 0;
  background: transparent;

  color: #07654e;

  font-size: 0.82rem;
  font-weight: 800;
}

.primary-button,
.secondary-button {
  min-height: 49px;

  padding: 12px 18px;

  border-radius: 9px;

  font-weight: 800;

  transition:
    transform 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.primary-button {
  border:
    1px solid #056048;

  color: #ffffff;
  background: #056048;

  box-shadow:
    0 8px 20px
    rgba(5, 96, 72, 0.2);
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);

  background: #034f3b;
}

.secondary-button {
  border:
    1px solid #cbd6d1;

  color: #30453c;
  background: #ffffff;
}

.secondary-button:hover:not(:disabled) {
  background: #f3f7f5;
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.security-notice,
.privacy-notice {
  margin-top: 25px;
  padding: 16px;

  border-radius: 10px;

  color: #4d5f58;
  background: #f3f7f5;

  font-size: 0.86rem;
  line-height: 1.6;
}

.security-notice strong,
.privacy-notice strong {
  display: block;

  margin-bottom: 3px;

  color: #263b32;
}

.security-notice p,
.privacy-notice p {
  margin: 0;
}

.form-alert,
.information-banner {
  margin-bottom: 22px;
  padding: 14px 16px;

  border-radius: 9px;

  line-height: 1.5;
}

.form-alert--error {
  border:
    1px solid #efc6c6;

  color: #8a2525;
  background: #fff0f0;
}

.information-banner {
  border:
    1px solid #beded3;

  color: #185642;
  background: #ecf8f4;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 28px;
  padding-bottom: 20px;

  border-bottom:
    1px solid #e4eae7;
}

.step-indicator__number {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

  color: #ffffff;
  background: #07654e;

  font-weight: 900;
}

.step-indicator strong,
.step-indicator small {
  display: block;
}

.step-indicator small {
  margin-top: 3px;

  color: #738079;
}

.success-heading {
  display: flex;
  align-items: center;
  gap: 16px;

  margin-bottom: 28px;
}

.success-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

  color: #ffffff;
  background: #0a7d5e;

  font-size: 1.5rem;
  font-weight: 900;
}

.success-heading p {
  margin: 0 0 4px;

  color: #0a7257;

  font-size: 0.8rem;
  font-weight: 800;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.success-heading h2 {
  margin: 0;

  color: #17281f;
}

.record-summary {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-bottom: 28px;
}

.record-summary > div {
  padding: 16px;

  border:
    1px solid #dce5e1;

  border-radius: 10px;

  background: #fafcfb;
}

.record-summary span,
.record-summary strong {
  display: block;
}

.record-summary span {
  margin-bottom: 5px;

  color: #718079;

  font-size: 0.78rem;
  font-weight: 750;
}

.record-summary strong {
  color: #25382f;

  overflow-wrap: anywhere;
}

.status-badge {
  width: fit-content;

  padding: 4px 8px;

  border-radius: 999px;

  color: #085a45 !important;
  background: #e2f4ed;

  font-size: 0.78rem;
  text-transform: capitalize;
}

.form-roadmap {
  margin-bottom: 24px;
}

.form-roadmap h3 {
  margin: 0 0 14px;

  color: #25382f;
}

.form-roadmap ol {
  margin: 0;
  padding-left: 22px;

  columns: 2;
  column-gap: 40px;

  color: #586860;
}

.form-roadmap li {
  margin-bottom: 9px;

  break-inside: avoid;
}

.public-footer {
  padding: 22px 18px;

  text-align: center;

  color: #67766f;
  background: #e5ebe8;

  font-size: 0.78rem;
}

.public-footer p {
  margin: 3px 0;
}

@media (max-width: 640px) {
  .public-header__inner {
    width:
      min(
        calc(100% - 24px),
        1180px
      );
  }

  .brand-mark {
    width: 48px;
    height: 48px;
  }

  .brand-overline {
    font-size: 0.66rem;
  }

  .public-main {
    width:
      min(
        calc(100% - 24px),
        1180px
      );

    padding: 28px 0;
  }

  .portal-card__content {
    padding: 25px 20px;
  }

  .record-summary {
    grid-template-columns: 1fr;
  }

  .form-roadmap ol {
    columns: 1;
  }
}



/* =========================================================
   STAFF FORM WIZARD
   ========================================================= */

.staff-form-shell {
  width: min(1180px, 100%);

  display: grid;
  grid-template-columns:
    270px minmax(0, 1fr);

  gap: 24px;
}

.staff-form-sidebar {
  position: sticky;
  top: 24px;

  align-self: start;

  padding: 24px;

  border: 1px solid #dce5e1;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 14px 40px
    rgba(22, 43, 35, 0.08);
}

.form-progress-heading {
  margin-bottom: 14px;
}

.form-progress-heading span,
.form-progress-heading strong {
  display: block;
}

.form-progress-heading span {
  margin-bottom: 5px;

  color: #718079;

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-progress-heading strong {
  color: #22352d;

  font-size: 1.05rem;
}

.progress-track {
  height: 8px;

  overflow: hidden;

  margin-bottom: 24px;

  border-radius: 999px;

  background: #e6ece9;
}

.progress-track__bar {
  height: 100%;

  border-radius: inherit;

  background: #087358;

  transition:
    width 220ms ease;
}

.form-section-navigation {
  display: grid;
  gap: 7px;
}

.form-section-link {
  display: flex;
  align-items: center;
  gap: 11px;

  width: 100%;
  min-width: 0;
  padding: 10px 11px;

  border: 1px solid transparent;
  border-radius: 10px;

  background: transparent;
  color: #5d7067;

  font-family: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.form-section-link:hover {
  border-color: #d4e1dc;

  background: #f5f9f7;
  color: #244a3b;

  transform: translateX(2px);
}

.form-section-link__number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 31px;
  height: 31px;

  border-radius: 50%;

  background: #edf2f0;
  color: #607169;

  font-size: 0.76rem;
  font-weight: 900;
}

.form-section-link__content {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.form-section-link__label {
  overflow: hidden;

  color: inherit;

  font-size: 0.78rem;
  font-weight: 850;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-section-link__status {
  color: #87938d;

  font-size: 0.65rem;
  font-weight: 700;

  text-transform: capitalize;
}

.form-section-link--active {
  border-color: #a9d1c1;

  background: #ecf8f3;
  color: #087358;
}

.form-section-link--active
.form-section-link__number {
  background: #087358;
  color: #ffffff;
}

.form-section-link--completed {
  color: #24664f;
}

.form-section-link--completed
.form-section-link__number {
  background: #d7eee4;
  color: #087358;
}

.form-section-link__status--completed {
  color: #087358;
}

.form-section-link__status--in_progress {
  color: #9a6b09;
}

.form-section-link__status--not_started {
  color: #87938d;
}

.form-sidebar-message {
  margin-bottom: 16px;
  padding: 10px 11px;

  border: 1px solid #f0c9c9;
  border-radius: 9px;

  background: #fff4f4;
  color: #a12d2d;

  font-size: 0.7rem;
  line-height: 1.5;
}

.staff-form-sidebar__actions {
  margin-top: 22px;
  padding-top: 18px;

  border-top: 1px solid #e3ebe7;
}

.staff-form-sidebar__actions
.secondary-button {
  width: 100%;
}

.form-page-card {
  padding: 34px;

  border: 1px solid #dce5e1;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 14px 40px
    rgba(22, 43, 35, 0.08);
}

.form-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 28px;
  padding-bottom: 22px;

  border-bottom: 1px solid #e3eae7;
}

.form-page-heading span:not(
  .form-step-badge
) {
  display: block;

  margin-bottom: 5px;

  color: #087358;

  font-size: 0.76rem;
  font-weight: 850;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.form-page-heading h2 {
  margin: 0 0 8px;

  color: #20332b;

  font-size: 1.8rem;
}

.form-page-heading p {
  max-width: 650px;
  margin: 0;

  color: #6a7972;

  line-height: 1.65;
}

.form-step-badge {
  flex-shrink: 0;

  padding: 7px 11px;

  border-radius: 999px;

  color: #6e5914;
  background: #fff7d9;

  font-size: 0.75rem;
  font-weight: 850;
}

.staff-record-form {
  display: grid;
  gap: 22px;
}

.form-grid {
  display: grid;
  gap: 18px;
}

.form-grid--two {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.form-grid--three {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.staff-record-form textarea {
  resize: vertical;
}

.required-mark {
  margin-left: 4px;

  color: #b02d2d;
}

.field-error {
  color: #a32929;

  font-size: 0.77rem;
  font-weight: 650;
}

.form-alert--success {
  border: 1px solid #b9dfd1;

  color: #126148;
  background: #eaf8f3;
}

.form-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  margin-top: 8px;
  padding-top: 22px;

  border-top: 1px solid #e3eae7;
}

.sidebar-message {
  padding: 12px;

  border-radius: 8px;

  color: #54655e;
  background: #f2f6f4;

  font-size: 0.82rem;
}

.sidebar-message--error {
  color: #8a2525;
  background: #fff0f0;
}

@media (max-width: 920px) {
  .staff-form-shell {
    grid-template-columns: 1fr;
  }

  .staff-form-sidebar {
    position: static;
  }

  .form-section-navigation {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .form-page-card {
    padding: 24px 18px;
  }

  .form-page-heading {
    display: grid;
  }

  .form-step-badge {
    width: fit-content;
  }

  .form-grid--two,
  .form-grid--three {
    grid-template-columns: 1fr;
  }

  .form-section-navigation {
    grid-template-columns: 1fr;
  }

  .form-action-bar {
    display: grid;
  }

  .form-action-bar button {
    width: 100%;
  }
}


/* =========================================================
   DEPENDENTS
   ========================================================= */

.dependents-list {
  display: grid;
  gap: 20px;

  margin-top: 24px;
}

.dependent-card {
  padding: 22px;

  border: 1px solid #dce5e1;
  border-radius: 12px;

  background: #fafcfb;
}

.dependent-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 20px;
  padding-bottom: 14px;

  border-bottom: 1px solid #e2e9e6;
}

.dependent-card__header span {
  display: block;

  margin-bottom: 3px;

  color: #087358;

  font-size: 0.72rem;
  font-weight: 850;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dependent-card__header h3 {
  margin: 0;

  color: #263930;

  font-size: 1.05rem;
}

.danger-text-button {
  padding: 5px 8px;

  border: 0;
  background: transparent;

  color: #a52d2d;

  font-size: 0.8rem;
  font-weight: 800;
}

.danger-text-button:hover:not(:disabled) {
  text-decoration: underline;
}

.add-dependent-button {
  width: 100%;
  min-height: 48px;

  padding: 12px 18px;

  border: 1px dashed #087358;
  border-radius: 10px;

  color: #076047;
  background: #f1faf6;

  font-weight: 800;
}

.add-dependent-button:hover:not(:disabled) {
  background: #e7f6f0;
}

.add-dependent-button:disabled,
.danger-text-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.dependents-general-error {
  margin-top: 8px;
}

.dependents-empty-message {
  margin-top: 24px;
  margin-bottom: 0;
}

@media (max-width: 680px) {
  .dependent-card {
    padding: 18px 14px;
  }

  .dependent-card__header {
    align-items: center;
  }
}

/* =========================================================
   QUALIFICATIONS
   ========================================================= */

.qualification-section {
  margin-bottom: 28px;
  padding: 22px;

  border: 1px solid #dce5e1;
  border-radius: 12px;

  background: #fafcfb;
}

.qualification-section__heading {
  margin-bottom: 20px;
  padding-bottom: 14px;

  border-bottom: 1px solid #e2e9e6;
}

.qualification-section__heading h3 {
  margin: 0 0 5px;

  color: #263930;

  font-size: 1.05rem;
}

.qualification-section__heading p {
  margin: 0;

  color: #68776f;

  font-size: 0.88rem;
  line-height: 1.55;
}

.certification-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 12px;

  margin-top: 10px;
}

.certification-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 14px;

  border: 1px solid #dce5e1;
  border-radius: 9px;

  background: #ffffff;

  color: #35453d;

  cursor: pointer;

  font-size: 0.87rem;
  font-weight: 650;
  line-height: 1.45;
}

.certification-option:hover {
  border-color: #78ae9c;
  background: #f3faf7;
}

.certification-option input {
  width: 17px;
  height: 17px;

  margin-top: 2px;

  accent-color: #087358;
}

.certification-option:has(
  input:checked
) {
  border-color: #087358;
  background: #eaf7f2;
}

.certification-option:has(
  input:disabled
) {
  cursor: not-allowed;
  opacity: 0.7;
}

@media (max-width: 700px) {
  .qualification-section {
    padding: 18px 14px;
  }

  .certification-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SUPPORTING DOCUMENTS
   ========================================================= */

.document-upload-panel,
.uploaded-documents {
  margin-top: 24px;
  padding: 22px;

  border: 1px solid #dce5e1;
  border-radius: 12px;

  background: #fafcfb;
}

.document-upload-panel__heading,
.uploaded-documents__heading {
  margin-bottom: 20px;
  padding-bottom: 14px;

  border-bottom: 1px solid #e2e9e6;
}

.document-upload-panel__heading h3,
.uploaded-documents__heading h3 {
  margin: 0 0 5px;

  color: #263930;

  font-size: 1.05rem;
}

.document-upload-panel__heading p,
.uploaded-documents__heading p {
  margin: 0;

  color: #68776f;

  font-size: 0.88rem;
  line-height: 1.55;
}

.document-upload-button {
  margin-top: 4px;
}

.uploaded-document-list {
  display: grid;
  gap: 12px;
}

.uploaded-document-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 16px;

  border: 1px solid #dde6e2;
  border-radius: 10px;

  background: #ffffff;
}

.uploaded-document-card__details {
  min-width: 0;
}

.document-type-label {
  display: block;

  margin-bottom: 5px;

  color: #087358;

  font-size: 0.72rem;
  font-weight: 850;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.uploaded-document-card h4 {
  margin: 0 0 4px;

  color: #263930;

  font-size: 0.96rem;
}

.uploaded-document-card p {
  overflow: hidden;

  margin: 0 0 3px;

  color: #64726b;

  font-size: 0.82rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploaded-document-card small {
  color: #829088;

  font-size: 0.76rem;
}

.uploaded-document-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;

  flex-shrink: 0;
}

.uploaded-document-card__actions
.secondary-button {
  min-height: 38px;
  padding: 8px 13px;
}

@media (max-width: 720px) {
  .document-upload-panel,
  .uploaded-documents {
    padding: 18px 14px;
  }

  .uploaded-document-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .uploaded-document-card__actions {
    width: 100%;
  }

  .uploaded-document-card__actions
  .secondary-button {
    flex: 1;
  }
}


/* =========================================================
   DECLARATION
   ========================================================= */

.declaration-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 22px;
  padding: 14px 18px;

  border: 1px solid #d8e7e1;
  border-radius: 10px;

  background: #f3faf7;
}

.declaration-reference span {
  color: #62736a;

  font-size: 0.8rem;
  font-weight: 700;
}

.declaration-reference strong {
  color: #087358;

  font-size: 0.95rem;
}

.declaration-statement {
  margin-bottom: 22px;
  padding: 22px;

  border: 1px solid #dce5e1;
  border-radius: 12px;

  background: #fafcfb;
}

.declaration-statement h3 {
  margin: 0 0 14px;

  color: #263930;

  font-size: 1.05rem;
}

.declaration-statement p {
  margin: 0 0 12px;

  color: #53635b;

  font-size: 0.9rem;
  line-height: 1.7;
}

.declaration-statement p:last-child {
  margin-bottom: 0;
}

.declaration-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 18px;

  border: 1px solid #d8e3de;
  border-radius: 10px;

  background: #ffffff;

  color: #32443a;

  cursor: pointer;

  font-weight: 750;
  line-height: 1.5;
}

.declaration-checkbox input {
  width: 19px;
  height: 19px;

  margin-top: 2px;

  accent-color: #087358;
}

.declaration-checkbox:has(
  input:checked
) {
  border-color: #087358;
  background: #edf8f3;
}

.declaration-name-field {
  margin-top: 22px;
}

.final-submission-warning {
  margin-top: 24px;
  padding: 16px 18px;

  border-left: 4px solid #d99418;
  border-radius: 8px;

  background: #fff8e7;
}

.final-submission-warning strong {
  display: block;

  margin-bottom: 5px;

  color: #7a4c00;
}

.final-submission-warning p {
  margin: 0;

  color: #705527;

  font-size: 0.87rem;
  line-height: 1.55;
}

.incomplete-sections-alert {
  margin-bottom: 20px;
  padding: 16px 18px;

  border: 1px solid #efc7c7;
  border-radius: 9px;

  background: #fff3f3;

  color: #812f2f;
}

.incomplete-sections-alert ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.final-submit-button {
  background: #086a50;
}

/* =========================================================
   SUBMISSION SUCCESS
   ========================================================= */

.submission-success-card {
  text-align: center;
}

.submission-success-icon {
  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  margin: 0 auto 20px;

  border-radius: 50%;

  background: #e5f6ee;
  color: #087358;

  font-size: 2rem;
  font-weight: 900;
}

.submission-receipt {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 12px;

  margin: 24px 0;
  text-align: left;
}

.submission-receipt div {
  padding: 15px;

  border: 1px solid #dce5e1;
  border-radius: 9px;

  background: #fafcfb;
}

.submission-receipt span {
  display: block;

  margin-bottom: 5px;

  color: #76837c;

  font-size: 0.74rem;
  font-weight: 750;

  text-transform: uppercase;
}

.submission-receipt strong {
  color: #2e4137;

  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .declaration-reference {
    align-items: flex-start;
    flex-direction: column;
  }

  .declaration-statement {
    padding: 18px 15px;
  }

  .submission-receipt {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   SYSTEM CONFIRMATION MODAL
   ========================================================= */

.system-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 20px;

  background: rgba(19, 34, 27, 0.58);
  backdrop-filter: blur(3px);
}

.system-modal {
  width: min(100%, 480px);

  padding: 28px;

  border: 1px solid #dce6e1;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 24px 60px
    rgba(18, 39, 30, 0.24);

  animation:
    system-modal-open
    0.18s ease-out;
}

.system-modal__icon {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  margin-bottom: 18px;

  border-radius: 50%;

  background: #fff4d9;
  color: #9a6300;

  font-size: 1.45rem;
  font-weight: 900;
}

.system-modal__content h3 {
  margin: 0 0 10px;

  color: #25382f;

  font-size: 1.25rem;
}

.system-modal__content p {
  margin: 0;

  color: #617068;

  font-size: 0.92rem;
  line-height: 1.65;
}

.system-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  margin-top: 26px;
}

.system-modal__actions button {
  min-height: 44px;
}

.system-modal__confirm {
  background: #086a50;
}

@keyframes system-modal-open {
  from {
    opacity: 0;
    transform:
      translateY(10px)
      scale(0.98);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@media (max-width: 520px) {
  .system-modal {
    padding: 22px 18px;
  }

  .system-modal__actions {
    flex-direction: column-reverse;
  }

  .system-modal__actions button {
    width: 100%;
  }
}


/* =========================================================
   ADMIN LOGIN
   ========================================================= */

.admin-login-page {
  min-height: 100vh;

  display: grid;
  grid-template-columns:
    minmax(340px, 1fr)
    minmax(420px, 0.85fr);

  background: #f4f7f6;
}

.admin-login-brand {
  position: relative;

  display: flex;
  align-items: center;

  padding: 70px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #063d31,
      #087358 65%,
      #0b8b69
    );

  color: #ffffff;
}

.admin-login-brand::after {
  content: "";

  position: absolute;
  right: -160px;
  bottom: -180px;

  width: 420px;
  height: 420px;

  border: 70px solid
    rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.admin-login-brand__content {
  position: relative;
  z-index: 1;

  max-width: 560px;
}

.admin-system-label {
  display: inline-flex;

  margin-bottom: 24px;
  padding: 8px 14px;

  border: 1px solid
    rgba(255, 255, 255, 0.3);
  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.1);

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}

.admin-login-brand h1 {
  max-width: 540px;

  margin: 0 0 18px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  line-height: 1.08;
}

.admin-login-brand p {
  max-width: 520px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.82);

  font-size: 1rem;
  line-height: 1.7;
}

.admin-security-note {
  display: grid;
  gap: 5px;

  margin-top: 42px;
  padding: 18px;

  border-left: 4px solid
    #f2c94c;

  border-radius: 8px;

  background:
    rgba(0, 0, 0, 0.12);
}

.admin-security-note span {
  color:
    rgba(255, 255, 255, 0.76);

  font-size: 0.83rem;
  line-height: 1.55;
}

.admin-login-section {
  display: grid;
  place-items: center;

  padding: 40px;
}

.admin-login-card {
  width: min(100%, 430px);

  padding: 38px;

  border: 1px solid #dce5e1;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 20px 55px
    rgba(24, 48, 38, 0.1);
}

.admin-login-card__heading {
  margin-bottom: 26px;
}

.admin-login-card__heading > span {
  display: block;

  margin-bottom: 7px;

  color: #087358;

  font-size: 0.76rem;
  font-weight: 850;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-login-card__heading h2 {
  margin: 0 0 8px;

  color: #263a31;

  font-size: 1.6rem;
}

.admin-login-card__heading p {
  margin: 0;

  color: #6c7972;

  font-size: 0.88rem;
  line-height: 1.55;
}

.admin-login-form {
  display: grid;
  gap: 18px;
}

.admin-password-field {
  position: relative;
}

.admin-password-field input {
  padding-right: 70px;
}

.admin-password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;

  border: 0;
  background: transparent;

  color: #087358;

  cursor: pointer;

  font-size: 0.78rem;
  font-weight: 800;

  transform: translateY(-50%);
}

.admin-login-button {
  width: 100%;
  min-height: 48px;

  margin-top: 4px;
}

.admin-login-support {
  margin: 24px 0 0;

  color: #839088;

  font-size: 0.78rem;
  text-align: center;
}

/* =========================================================
   ADMIN SHELL
   ========================================================= */

.admin-shell {
  min-height: 100vh;

  display: flex;

  background: #f3f6f5;
}

.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;

  width: 270px;

  display: flex;
  flex-direction: column;

  padding: 22px 16px;

  background: #073e32;
  color: #ffffff;
}

.admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 4px 8px 24px;

  border-bottom: 1px solid
    rgba(255, 255, 255, 0.1);
}

.admin-brand-mark {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 12px;

  background: #ffffff;
  color: #087358;

  font-size: 1.1rem;
  font-weight: 950;
}

.admin-sidebar__brand strong,
.admin-sidebar__brand span {
  display: block;
}

.admin-sidebar__brand strong {
  font-size: 0.96rem;
}

.admin-sidebar__brand span {
  margin-top: 2px;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 0.72rem;
}

.admin-navigation {
  display: grid;
  gap: 6px;

  margin-top: 24px;
}

.admin-navigation__label {
  margin: 0 10px 7px;

  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 11px 12px;

  border-radius: 9px;

  color:
    rgba(255, 255, 255, 0.73);

  font-size: 0.85rem;
  font-weight: 700;

  text-decoration: none;
}

.admin-nav-link:hover {
  background:
    rgba(255, 255, 255, 0.08);

  color: #ffffff;
}

.admin-nav-link--active {
  background:
    rgba(255, 255, 255, 0.14);

  color: #ffffff;
}

.admin-nav-link__icon {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.1);

  font-size: 0.63rem;
  font-weight: 900;
}

.admin-sidebar__account {
  display: flex;
  align-items: center;
  gap: 11px;

  margin-top: auto;
  padding: 15px 9px 5px;

  border-top: 1px solid
    rgba(255, 255, 255, 0.1);
}

.admin-account-avatar {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #dff4ec;
  color: #087358;

  font-weight: 900;
}

.admin-account-details {
  min-width: 0;
}

.admin-account-details strong,
.admin-account-details span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-details strong {
  font-size: 0.78rem;
}

.admin-account-details span {
  margin-top: 3px;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 0.66rem;
}

.admin-main {
  min-width: 0;

  flex: 1;

  margin-left: 270px;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 50;

  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 13px 30px;

  border-bottom: 1px solid #dfe7e3;

  background:
    rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(8px);
}

.admin-topbar__left,
.admin-topbar__right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.admin-topbar__left span {
  display: block;

  color: #829088;

  font-size: 0.68rem;
  font-weight: 700;
}

.admin-topbar__left h1 {
  margin: 2px 0 0;

  color: #2a3e34;

  font-size: 1.12rem;
}

.admin-menu-button {
  display: none;

  width: 40px;
  height: 40px;

  border: 1px solid #dce5e1;
  border-radius: 9px;

  background: #ffffff;

  cursor: pointer;
}

.admin-topbar-user {
  text-align: right;
}

.admin-topbar-user strong,
.admin-topbar-user span {
  display: block;
}

.admin-topbar-user strong {
  color: #30433a;

  font-size: 0.78rem;
}

.admin-topbar-user span {
  margin-top: 2px;

  color: #87928c;

  font-size: 0.67rem;
}

.admin-logout-button {
  min-height: 39px;

  padding: 8px 14px;

  border: 1px solid #d5e2dc;
  border-radius: 8px;

  background: #ffffff;
  color: #44554c;

  cursor: pointer;

  font-size: 0.76rem;
  font-weight: 750;
}

.admin-content {
  padding: 28px;
}

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.admin-dashboard {
  display: grid;
  gap: 24px;
}

.admin-welcome-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  padding: 26px;

  border-radius: 15px;

  background:
    linear-gradient(
      130deg,
      #075744,
      #087358
    );

  color: #ffffff;
}

.admin-welcome-panel span {
  display: block;

  color:
    rgba(255, 255, 255, 0.7);

  font-size: 0.76rem;
  font-weight: 750;
}

.admin-welcome-panel h2 {
  margin: 4px 0 7px;

  font-size: 1.5rem;
}

.admin-welcome-panel p {
  max-width: 620px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.76);

  font-size: 0.85rem;
  line-height: 1.55;
}

.admin-today-summary {
  min-width: 130px;

  padding: 17px;

  border: 1px solid
    rgba(255, 255, 255, 0.2);
  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.1);

  text-align: center;
}

.admin-today-summary strong {
  display: block;

  margin-top: 4px;

  font-size: 1.8rem;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 16px;
}

.admin-stat-card {
  padding: 19px;

  border: 1px solid #dde6e2;
  border-radius: 12px;

  background: #ffffff;
}

.admin-stat-card__label {
  display: block;

  color: #6f7d76;

  font-size: 0.76rem;
  font-weight: 750;
}

.admin-stat-card strong {
  display: block;

  margin: 9px 0 4px;

  color: #263b31;

  font-size: 1.8rem;
}

.admin-stat-card p {
  margin: 0;

  color: #8a958f;

  font-size: 0.7rem;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.8fr)
    minmax(280px, 0.8fr);
  gap: 20px;
}

.admin-panel {
  min-width: 0;

  padding: 22px;

  border: 1px solid #dde6e2;
  border-radius: 13px;

  background: #ffffff;
}

.admin-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid #e6ece9;
}

.admin-panel__heading h3 {
  margin: 0 0 4px;

  color: #2c4036;

  font-size: 1rem;
}

.admin-panel__heading p {
  margin: 0;

  color: #7b8881;

  font-size: 0.75rem;
}

.admin-text-button {
  border: 0;
  background: transparent;

  color: #087358;

  cursor: pointer;

  font-size: 0.76rem;
  font-weight: 800;
}

.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;

  border-collapse: collapse;
}

.admin-table th {
  padding: 10px 12px;

  color: #7e8a84;

  font-size: 0.67rem;
  font-weight: 850;

  text-align: left;
  text-transform: uppercase;
}

.admin-table td {
  padding: 13px 12px;

  border-top: 1px solid #edf1ef;

  color: #45564d;

  font-size: 0.75rem;
}

.admin-table td strong {
  display: block;

  color: #2f4238;
}

.admin-table-subtext {
  display: block;

  margin-top: 3px;

  color: #87928c;

  font-size: 0.66rem;
}

.admin-status {
  display: inline-flex;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 0.64rem;
  font-weight: 850;
}

.admin-status--submitted {
  background: #fff3d6;
  color: #8a5b00;
}

.admin-status--under_review {
  background: #e5f0ff;
  color: #275d9b;
}

.admin-status--approved {
  background: #e4f6ed;
  color: #087358;
}

.admin-status--returned {
  background: #fff0df;
  color: #a05b0b;
}

.admin-status--rejected {
  background: #fde8e8;
  color: #a33a3a;
}

.admin-reviewer-list {
  display: grid;
  gap: 11px;
}

.admin-reviewer-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px;

  border: 1px solid #e3eae7;
  border-radius: 9px;
}

.admin-reviewer-avatar {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #e4f5ee;
  color: #087358;

  font-weight: 900;
}

.admin-reviewer-details {
  min-width: 0;

  flex: 1;
}

.admin-reviewer-details strong,
.admin-reviewer-details span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-reviewer-details strong {
  color: #35483e;

  font-size: 0.75rem;
}

.admin-reviewer-details span {
  margin-top: 3px;

  color: #8a958f;

  font-size: 0.65rem;
}

.admin-reviewer-total {
  color: #087358;

  font-size: 0.96rem;
}

.admin-empty-state {
  padding: 28px 15px;

  color: #87938d;

  font-size: 0.78rem;
  text-align: center;
}

.admin-empty-state--large {
  min-height: 300px;

  display: grid;
  place-items: center;
}

.admin-auth-loading,
.admin-page-loading {
  min-height: 60vh;

  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;

  color: #6f7d76;
}

.admin-loading-spinner {
  width: 32px;
  height: 32px;

  border: 3px solid #d9e6e0;
  border-top-color: #087358;
  border-radius: 50%;

  animation:
    admin-spinner
    0.7s linear infinite;
}

@keyframes admin-spinner {
  to {
    transform: rotate(360deg);
  }
}

.admin-sidebar-overlay {
  display: none;
}

/* =========================================================
   ADMIN RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 1050px) {
  .admin-stat-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .admin-login-page {
    grid-template-columns: 1fr;
  }

  .admin-login-brand {
    display: none;
  }

  .admin-sidebar {
    transform:
      translateX(-100%);

    transition:
      transform 0.2s ease;
  }

  .admin-sidebar--open {
    transform:
      translateX(0);
  }

  .admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;

    display: block;

    border: 0;

    background:
      rgba(20, 35, 29, 0.5);
  }

  .admin-main {
    margin-left: 0;
  }

  .admin-menu-button {
    display: grid;
    place-items: center;
  }
}

@media (max-width: 650px) {
  .admin-login-section {
    padding: 20px;
  }

  .admin-login-card {
    padding: 26px 20px;
  }

  .admin-topbar {
    padding: 12px 16px;
  }

  .admin-topbar-user {
    display: none;
  }

  .admin-content {
    padding: 18px 14px;
  }

  .admin-welcome-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-today-summary {
    width: 100%;
  }

  .admin-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-panel {
    padding: 18px 14px;
  }
}

/* =========================================================
   ADMIN STAFF SUBMISSIONS
   ========================================================= */

.admin-submissions-page {
  display: grid;
  gap: 20px;
}

.admin-submissions-heading {
  align-items: center;
}

.admin-submission-count {
  min-width: 110px;

  padding: 10px 14px;

  border: 1px solid #dce7e2;
  border-radius: 10px;

  background: #f7faf9;

  text-align: center;
}

.admin-submission-count span,
.admin-submission-count strong {
  display: block;
}

.admin-submission-count span {
  color: #77857d;

  font-size: 0.66rem;
  font-weight: 750;
}

.admin-submission-count strong {
  margin-top: 2px;

  color: #087358;

  font-size: 1.3rem;
}

.admin-submission-filters {
  display: grid;
  grid-template-columns:
    minmax(280px, 2fr)
    repeat(
      3,
      minmax(150px, 1fr)
    )
    auto;
  gap: 14px;
  align-items: end;

  margin-bottom: 22px;
  padding: 16px;

  border: 1px solid #e1e9e5;
  border-radius: 11px;

  background: #f8faf9;
}

.admin-filter-search,
.admin-filter-group {
  display: grid;
  gap: 7px;
}

.admin-filter-search label,
.admin-filter-group label {
  color: #506158;

  font-size: 0.7rem;
  font-weight: 800;
}

.admin-filter-search__field {
  display: flex;
  gap: 8px;
}

.admin-filter-search__field input {
  min-width: 0;

  flex: 1;
}

.admin-filter-search__field button {
  flex-shrink: 0;
}

.admin-submission-filters input,
.admin-submission-filters select {
  width: 100%;
  min-height: 42px;

  padding: 9px 11px;

  border: 1px solid #d5e1db;
  border-radius: 8px;

  background: #ffffff;
  color: #35483e;

  outline: none;
}

.admin-submission-filters input:focus,
.admin-submission-filters select:focus {
  border-color: #087358;

  box-shadow:
    0 0 0 3px
    rgba(8, 115, 88, 0.1);
}

.admin-clear-filter-button {
  min-height: 42px;

  white-space: nowrap;
}

.admin-submissions-table {
  min-width: 980px;
}

.admin-reference-value {
  color: #475b51;

  font-size: 0.72rem;
  font-weight: 750;
}

.admin-assigned-reviewer strong,
.admin-assigned-reviewer span {
  display: block;
}

.admin-assigned-reviewer strong {
  color: #34483d;

  font-size: 0.73rem;
}

.admin-assigned-reviewer span {
  margin-top: 3px;

  color: #89948e;

  font-size: 0.64rem;
}

.admin-unassigned-label {
  display: inline-flex;

  padding: 5px 8px;

  border-radius: 999px;

  background: #f0f2f1;
  color: #748078;

  font-size: 0.63rem;
  font-weight: 800;
}

.admin-table-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-action-button {
  min-height: 33px;

  padding: 6px 10px;

  border: 1px solid #087358;
  border-radius: 7px;

  background: #087358;
  color: #ffffff;

  cursor: pointer;

  font-size: 0.68rem;
  font-weight: 800;

  white-space: nowrap;
}

.admin-action-button:hover {
  background: #066149;
}

.admin-action-button--secondary {
  border-color: #cedbd5;

  background: #ffffff;
  color: #4b5e54;
}

.admin-action-button--secondary:hover {
  background: #f4f8f6;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid #e4ebe7;

  color: #718078;

  font-size: 0.75rem;
}

.admin-pagination__actions {
  display: flex;
  gap: 9px;
}

.admin-page-loading--compact {
  min-height: 250px;
}

/* =========================================================
   ASSIGNMENT MODAL
   ========================================================= */

.admin-assignment-modal {
  width: min(
    100%,
    560px
  );
}

.admin-assignment-modal__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 22px;
  padding-bottom: 17px;

  border-bottom: 1px solid #e3eae7;
}

.admin-assignment-modal__heading > div > span {
  display: block;

  margin-bottom: 5px;

  color: #087358;

  font-size: 0.67rem;
  font-weight: 850;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-assignment-modal__heading h3 {
  margin: 0 0 5px;

  color: #2e4137;

  font-size: 1.2rem;
}

.admin-assignment-modal__heading p {
  margin: 0;

  color: #7c8982;

  font-size: 0.75rem;
}

.admin-modal-close {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border: 1px solid #dce5e1;
  border-radius: 8px;

  background: #ffffff;
  color: #68766f;

  cursor: pointer;

  font-size: 1.25rem;
}

.admin-assignment-form {
  display: grid;
  gap: 18px;
}

.admin-assignment-form select,
.admin-assignment-form textarea {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid #d5e1db;
  border-radius: 8px;

  background: #ffffff;
  color: #35483e;

  font: inherit;

  outline: none;
}

.admin-assignment-form select {
  min-height: 44px;
}

.admin-assignment-form textarea {
  resize: vertical;
}

.admin-assignment-form select:focus,
.admin-assignment-form textarea:focus {
  border-color: #087358;

  box-shadow:
    0 0 0 3px
    rgba(8, 115, 88, 0.1);
}

.optional-label {
  margin-left: 6px;

  color: #89958f;

  font-size: 0.65rem;
  font-weight: 600;
}

/* =========================================================
   RESPONSIVE SUBMISSIONS
   ========================================================= */

@media (max-width: 1200px) {
  .admin-submission-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-filter-search {
    grid-column:
      1 / -1;
  }

  .admin-clear-filter-button {
    width: fit-content;
  }
}

@media (max-width: 700px) {
  .admin-submissions-heading {
    align-items: flex-start;
  }

  .admin-submission-count {
    min-width: 90px;
  }

  .admin-submission-filters {
    grid-template-columns: 1fr;
  }

  .admin-filter-search {
    grid-column: auto;
  }

  .admin-filter-search__field {
    flex-direction: column;
  }

  .admin-clear-filter-button {
    width: 100%;
  }

  .admin-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-pagination__actions {
    width: 100%;
  }

  .admin-pagination__actions button {
    flex: 1;
  }
}

/* =========================================================
   ADMIN SUBMISSION REVIEW
   ========================================================= */

.admin-review-page {
  display: grid;
  gap: 20px;
}

.admin-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding: 25px;

  border: 1px solid #dce6e1;
  border-radius: 14px;

  background: #ffffff;
}

.admin-review-back-button {
  display: block;

  margin: 0 0 17px;
  padding: 0;

  border: 0;
  background: transparent;

  color: #087358;

  cursor: pointer;

  font-size: 0.73rem;
  font-weight: 800;
}

.admin-review-eyebrow {
  display: block;

  margin-bottom: 5px;

  color: #7b8981;

  font-size: 0.67rem;
  font-weight: 850;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-review-header h2 {
  margin: 0 0 9px;

  color: #293e34;

  font-size: 1.55rem;
}

.admin-review-reference {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;

  color: #738078;

  font-size: 0.75rem;
}

.admin-review-reference strong {
  color: #43564c;
}

.admin-review-header__status {
  display: grid;
  justify-items: end;
  gap: 9px;

  flex-shrink: 0;
}

.admin-review-header__status small {
  color: #849089;

  font-size: 0.68rem;
}

.admin-review-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 14px;
}

.admin-review-summary-grid article {
  padding: 17px;

  border: 1px solid #dde7e2;
  border-radius: 11px;

  background: #ffffff;
}

.admin-review-summary-grid span,
.admin-review-summary-grid strong {
  display: block;
}

.admin-review-summary-grid span {
  color: #7d8983;

  font-size: 0.67rem;
  font-weight: 750;
}

.admin-review-summary-grid strong {
  margin-top: 7px;

  color: #30443a;

  font-size: 0.86rem;
}

.admin-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  padding: 16px;

  border: 1px solid #dce6e1;
  border-radius: 11px;

  background: #ffffff;
}

.admin-review-action {
  min-height: 42px;

  padding: 9px 15px;

  border-radius: 8px;

  cursor: pointer;

  font-size: 0.74rem;
  font-weight: 850;
}

.admin-review-action--approve {
  border: 1px solid #087358;

  background: #e4f6ed;
  color: #087358;
}

.admin-review-action--return {
  border: 1px solid #d6992c;

  background: #fff4df;
  color: #8a5c06;
}

.admin-review-action--reject {
  border: 1px solid #c65353;

  background: #fdeaea;
  color: #a33434;
}

.admin-review-section {
  padding: 22px;

  border: 1px solid #dce6e1;
  border-radius: 13px;

  background: #ffffff;
}

.admin-review-section__heading {
  margin-bottom: 18px;
  padding-bottom: 13px;

  border-bottom: 1px solid #e6ece9;
}

.admin-review-section__heading h3 {
  margin: 0 0 4px;

  color: #2d4137;

  font-size: 1rem;
}

.admin-review-section__heading p {
  margin: 0;

  color: #7d8983;

  font-size: 0.73rem;
  line-height: 1.5;
}

.admin-review-field-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 12px;
}

.admin-review-field {
  min-width: 0;

  padding: 12px;

  border: 1px solid #e1e9e5;
  border-radius: 9px;

  background: #f8faf9;
}

.admin-review-field span,
.admin-review-field strong {
  display: block;
}

.admin-review-field span {
  margin-bottom: 5px;

  color: #7c8982;

  font-size: 0.63rem;
  font-weight: 800;

  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-review-field strong {
  overflow-wrap: anywhere;

  color: #34483d;

  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-review-empty {
  padding: 28px;

  border: 1px dashed #d7e2dd;
  border-radius: 9px;

  color: #819089;

  font-size: 0.76rem;
  text-align: center;
}

.admin-comparison-table {
  min-width: 760px;
}

.admin-comparison-changed {
  background: #f0faf6;

  color: #087358 !important;

  font-weight: 750;
}

.admin-review-record-list {
  display: grid;
  gap: 14px;
}

.admin-review-record-card {
  padding: 16px;

  border: 1px solid #e0e8e4;
  border-radius: 10px;

  background: #fbfcfc;
}

.admin-review-record-card h4 {
  margin: 0 0 14px;

  color: #3d5146;

  font-size: 0.8rem;
}

.admin-document-review-list {
  display: grid;
  gap: 10px;
}

.admin-document-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 14px;

  border: 1px solid #e0e8e4;
  border-radius: 9px;

  background: #f9fbfa;
}

.admin-document-review-item strong,
.admin-document-review-item span,
.admin-document-review-item small {
  display: block;
}

.admin-document-review-item strong {
  color: #35493e;

  font-size: 0.77rem;
}

.admin-document-review-item span {
  margin-top: 3px;

  color: #69786f;

  font-size: 0.71rem;
}

.admin-document-review-item small {
  margin-top: 4px;

  color: #8a958f;

  font-size: 0.63rem;
}

.admin-review-timeline {
  position: relative;

  display: grid;
  gap: 0;
}

.admin-review-timeline__item {
  position: relative;

  display: grid;
  grid-template-columns:
    20px
    minmax(0, 1fr);
  gap: 12px;

  padding-bottom: 22px;
}

.admin-review-timeline__item:not(:last-child)::before {
  content: "";

  position: absolute;
  top: 15px;
  bottom: 0;
  left: 6px;

  width: 1px;

  background: #d7e3dd;
}

.admin-review-timeline__marker {
  position: relative;
  z-index: 1;

  width: 13px;
  height: 13px;

  margin-top: 3px;

  border: 3px solid #dff1e9;
  border-radius: 50%;

  background: #087358;
}

.admin-review-timeline__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.admin-review-timeline__heading strong {
  color: #34483d;

  font-size: 0.76rem;
}

.admin-review-timeline__heading span {
  color: #87938d;

  font-size: 0.64rem;
}

.admin-review-timeline p {
  margin: 6px 0;

  color: #68776f;

  font-size: 0.73rem;
  line-height: 1.55;
}

.admin-review-timeline small {
  color: #8b9690;

  font-size: 0.63rem;
}

.admin-review-action-modal {
  width: min(
    100%,
    560px
  );
}

.admin-danger-button {
  background: #aa3434;
}

.admin-danger-button:hover {
  background: #8e2929;
}

/* =========================================================
   RESPONSIVE REVIEW WORKSPACE
   ========================================================= */

@media (max-width: 1050px) {
  .admin-review-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-review-field-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 700px) {
  .admin-review-header {
    flex-direction: column;
  }

  .admin-review-header__status {
    justify-items: start;
  }

  .admin-review-summary-grid {
    grid-template-columns: 1fr;
  }

  .admin-review-field-grid {
    grid-template-columns: 1fr;
  }

  .admin-review-section {
    padding: 18px 14px;
  }

  .admin-document-review-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-document-review-item button {
    width: 100%;
  }

  .admin-review-timeline__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}


/* =========================================================
   STAFF CORRECTION WORKFLOW
   ========================================================= */

.staff-correction-notice {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  gap: 18px;
  align-items: flex-start;

  margin-bottom: 22px;
  padding: 20px;

  border: 1px solid #e6b65a;
  border-radius: 13px;

  background: #fff8e8;

  box-shadow:
    0 8px 22px
    rgba(112, 74, 9, 0.07);
}

.staff-correction-notice__icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #f4b942;
  color: #5f3b00;

  font-size: 1.15rem;
  font-weight: 950;
}

.staff-correction-notice__content > span {
  display: block;

  margin-bottom: 4px;

  color: #946000;

  font-size: 0.68rem;
  font-weight: 900;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.staff-correction-notice__content h3 {
  margin: 0 0 7px;

  color: #513d1b;

  font-size: 1rem;
}

.staff-correction-notice__content > p {
  margin: 0;

  color: #75613e;

  font-size: 0.78rem;
  line-height: 1.6;
}

.staff-correction-reason {
  margin-top: 15px;
  padding: 13px;

  border-left: 4px solid #d3961c;
  border-radius: 7px;

  background: #ffffff;
}

.staff-correction-reason strong {
  display: block;

  margin-bottom: 5px;

  color: #624919;

  font-size: 0.72rem;
}

.staff-correction-reason p {
  margin: 0;

  color: #6d5a37;

  font-size: 0.76rem;
  line-height: 1.6;
}

.staff-correction-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;

  margin-top: 13px;

  color: #89714a;

  font-size: 0.66rem;
}

.staff-correction-meta strong {
  color: #69532f;
}

.staff-correction-button {
  min-width: 145px;

  white-space: nowrap;
}

.correction-response-field textarea {
  width: 100%;

  padding: 12px;

  border: 1px solid #d5e1db;
  border-radius: 9px;

  background: #ffffff;
  color: #35483e;

  font: inherit;
  line-height: 1.55;

  resize: vertical;
  outline: none;
}

.correction-response-field textarea:focus {
  border-color: #087358;

  box-shadow:
    0 0 0 3px
    rgba(8, 115, 88, 0.1);
}

@media (max-width: 760px) {
  .staff-correction-notice {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .staff-correction-button {
    width: 100%;

    grid-column:
      1 / -1;
  }
}


/* =========================================================
   ADMIN CORRECTION AND RESUBMISSION
   ========================================================= */

.admin-submission-status-cell {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.admin-resubmission-badge {
  display: inline-flex;
  align-items: center;

  padding: 4px 7px;

  border: 1px solid #8fb9db;
  border-radius: 999px;

  background: #edf6ff;
  color: #285f91;

  font-size: 0.6rem;
  font-weight: 850;

  white-space: nowrap;
}

.admin-resubmission-badge--header {
  justify-content: center;
  font-size: 0.66rem;
}

.admin-correction-history {
  display: grid;
  gap: 18px;
}

.admin-correction-cycle {
  padding: 18px;

  border: 1px solid #dce6e1;
  border-radius: 11px;

  background: #fbfcfc;
}

.admin-correction-cycle__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 15px;
}

.admin-correction-cycle__heading span {
  display: block;

  color: #7c8982;

  font-size: 0.63rem;
  font-weight: 850;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-correction-cycle__heading h4 {
  margin: 4px 0 0;

  color: #30443a;

  font-size: 0.95rem;
}

.admin-correction-status {
  padding: 5px 9px;

  border-radius: 999px;

  background: #edf6ff;
  color: #285f91 !important;

  font-size: 0.62rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.admin-correction-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 10px;

  margin-bottom: 15px;
}

.admin-correction-detail {
  padding: 11px;

  border: 1px solid #e1e8e5;
  border-radius: 8px;

  background: #ffffff;
}

.admin-correction-detail span,
.admin-correction-detail strong {
  display: block;
}

.admin-correction-detail span {
  margin-bottom: 4px;

  color: #7e8a84;

  font-size: 0.61rem;
  font-weight: 800;

  text-transform: uppercase;
}

.admin-correction-detail strong {
  color: #40534a;

  font-size: 0.71rem;
  line-height: 1.5;
}

.admin-correction-message {
  margin-top: 11px;
  padding: 13px;

  border-radius: 8px;
}

.admin-correction-message strong {
  display: block;

  margin-bottom: 5px;

  font-size: 0.7rem;
}

.admin-correction-message p {
  margin: 0;

  font-size: 0.74rem;
  line-height: 1.6;
}

.admin-correction-message--hr {
  border-left: 4px solid #d29724;

  background: #fff7e6;
  color: #664b18;
}

.admin-correction-message--staff {
  border-left: 4px solid #087358;

  background: #edf8f4;
  color: #30564a;
}

.admin-correction-events {
  display: grid;
  gap: 8px;

  margin-top: 17px;
  padding-top: 15px;

  border-top: 1px solid #e1e8e5;
}

.admin-correction-events h5 {
  margin: 0 0 4px;

  color: #40534a;

  font-size: 0.72rem;
}

.admin-correction-event {
  display: grid;
  grid-template-columns:
    minmax(140px, 1fr)
    auto;
  gap: 7px 14px;

  padding: 10px;

  border: 1px solid #e4ebe7;
  border-radius: 8px;

  background: #ffffff;
}

.admin-correction-event strong,
.admin-correction-event span {
  display: block;
}

.admin-correction-event strong {
  color: #40534a;

  font-size: 0.69rem;
}

.admin-correction-event span {
  margin-top: 2px;

  color: #88948e;

  font-size: 0.62rem;
}

.admin-correction-event p {
  grid-column:
    1 / -1;

  margin: 3px 0 0;

  color: #697870;

  font-size: 0.7rem;
  line-height: 1.5;
}

@media (max-width: 950px) {
  .admin-correction-detail-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 600px) {
  .admin-correction-cycle__heading {
    flex-direction: column;
  }

  .admin-correction-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-correction-event {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ADMIN REVIEW ASSIGNMENTS
   ========================================================= */

.admin-review-assignments-page {
  display: grid;
  gap: 22px;
}

.admin-review-assignments-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding: 24px;

  border: 1px solid #dce6e1;
  border-radius: 14px;

  background: #ffffff;
}

.admin-review-assignments-header h2 {
  margin: 5px 0 7px;

  color: #2f4439;

  font-size: 1.45rem;
}

.admin-review-assignments-header p {
  max-width: 700px;

  margin: 0;

  color: #6f7f77;

  font-size: 0.8rem;
  line-height: 1.65;
}

.admin-review-assignments-eyebrow {
  color: #087358;

  font-size: 0.65rem;
  font-weight: 900;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-assignment-overview {
  display: grid;
  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
  gap: 13px;
}

.admin-assignment-overview article {
  min-height: 138px;
  padding: 17px;

  border: 1px solid #dce6e1;
  border-radius: 12px;

  background: #ffffff;
}

.admin-assignment-overview span,
.admin-assignment-overview strong,
.admin-assignment-overview small {
  display: block;
}

.admin-assignment-overview span {
  color: #66776f;

  font-size: 0.65rem;
  font-weight: 850;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-assignment-overview strong {
  margin-top: 10px;

  color: #263f34;

  font-size: 1.65rem;
  line-height: 1;
}

.admin-assignment-overview small {
  margin-top: 10px;

  color: #839089;

  font-size: 0.66rem;
  line-height: 1.55;
}

.admin-reviewer-workload-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 13px;
}

.admin-reviewer-workload-card {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  gap: 13px;
  align-items: center;

  padding: 15px;

  border: 1px solid #dde7e2;
  border-radius: 11px;

  background: #ffffff;
  color: inherit;

  text-align: left;
  cursor: pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.admin-reviewer-workload-card:hover {
  transform: translateY(-2px);

  border-color: #8ab9aa;

  box-shadow:
    0 10px 24px
    rgba(35, 79, 62, 0.08);
}

.admin-reviewer-workload-card--active {
  border-color: #087358;

  background: #f1f9f6;

  box-shadow:
    0 0 0 2px
    rgba(8, 115, 88, 0.08);
}

.admin-reviewer-avatar {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #e6f4ef;
  color: #087358;

  font-size: 0.75rem;
  font-weight: 900;
}

.admin-reviewer-workload-card__details {
  min-width: 0;
}

.admin-reviewer-workload-card__details strong,
.admin-reviewer-workload-card__details span,
.admin-reviewer-workload-card__details small {
  display: block;
}

.admin-reviewer-workload-card__details strong {
  overflow: hidden;

  color: #344b40;

  font-size: 0.78rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-reviewer-workload-card__details span {
  margin-top: 3px;

  color: #66776f;

  font-size: 0.64rem;
}

.admin-reviewer-workload-card__details small {
  overflow: hidden;

  margin-top: 3px;

  color: #8a9690;

  font-size: 0.6rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-reviewer-workload-card__count {
  display: grid;
  justify-items: center;

  min-width: 58px;
  padding: 8px;

  border-radius: 9px;

  background: #f3f7f5;
}

.admin-reviewer-workload-card__count strong {
  color: #087358;

  font-size: 1rem;
}

.admin-reviewer-workload-card__count span {
  color: #7a8981;

  font-size: 0.57rem;
  font-weight: 800;

  text-transform: uppercase;
}

.admin-review-assignment-table-heading {
  align-items: center;
}

.admin-review-assignment-filters {
  display: grid;
  grid-template-columns:
    minmax(260px, 2fr)
    repeat(
      3,
      minmax(160px, 1fr)
    )
    auto;
  gap: 13px;
  align-items: end;

  margin-bottom: 22px;
  padding: 16px;

  border: 1px solid #e0e8e4;
  border-radius: 11px;

  background: #f8faf9;
}

.admin-review-assignment-clear {
  min-height: 42px;

  white-space: nowrap;
}

.admin-review-assignment-table
td:nth-child(2) {
  min-width: 170px;
}

.admin-review-assignment-table
.admin-resubmission-badge {
  margin-top: 7px;
}

.admin-assignment-empty {
  display: grid;
  justify-items: center;
  gap: 9px;

  padding: 48px 20px;

  text-align: center;
}

.admin-assignment-empty__icon {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  border-radius: 50%;

  background: #eaf6f1;
  color: #087358;

  font-size: 1.25rem;
  font-weight: 900;
}

.admin-assignment-empty h3 {
  margin: 4px 0 0;

  color: #344b40;

  font-size: 1rem;
}

.admin-assignment-empty p {
  max-width: 430px;

  margin: 0 0 8px;

  color: #7a8981;

  font-size: 0.76rem;
  line-height: 1.6;
}

.admin-review-assignment-modal {
  width: min(
    540px,
    calc(100vw - 32px)
  );
}

.admin-current-assignment {
  padding: 13px;

  border: 1px solid #dce6e1;
  border-radius: 9px;

  background: #f7faf8;
}

.admin-current-assignment span,
.admin-current-assignment strong,
.admin-current-assignment small {
  display: block;
}

.admin-current-assignment span {
  color: #7a8981;

  font-size: 0.61rem;
  font-weight: 850;

  text-transform: uppercase;
}

.admin-current-assignment strong {
  margin-top: 5px;

  color: #344b40;

  font-size: 0.76rem;
}

.admin-current-assignment small {
  margin-top: 3px;

  color: #849089;

  font-size: 0.63rem;
}

.admin-selected-reviewer {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  gap: 12px;
  align-items: center;

  padding: 12px;

  border: 1px solid #a8cec0;
  border-radius: 9px;

  background: #f1f9f6;
}

.admin-selected-reviewer strong,
.admin-selected-reviewer span,
.admin-selected-reviewer small {
  display: block;
}

.admin-selected-reviewer strong {
  color: #30483d;

  font-size: 0.75rem;
}

.admin-selected-reviewer span {
  margin-top: 2px;

  color: #60756b;

  font-size: 0.64rem;
}

.admin-selected-reviewer small {
  margin-top: 3px;

  color: #7e8d86;

  font-size: 0.61rem;
}

@media (max-width: 1200px) {
  .admin-assignment-overview {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .admin-reviewer-workload-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-review-assignment-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 760px) {
  .admin-review-assignments-header {
    flex-direction: column;
  }

  .admin-review-assignments-header
  > button {
    width: 100%;
  }

  .admin-assignment-overview {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-reviewer-workload-grid {
    grid-template-columns: 1fr;
  }

  .admin-review-assignment-filters {
    grid-template-columns: 1fr;
  }

  .admin-review-assignment-clear {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .admin-assignment-overview {
    grid-template-columns: 1fr;
  }

  .admin-reviewer-workload-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .admin-reviewer-workload-card__count {
    grid-column:
      1 / -1;

    width: 100%;
  }
}

/* =========================================================
   ADMINISTRATOR USERS
   ========================================================= */

.admin-users-page {
  display: grid;
  gap: 22px;
}

.admin-users-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;

  padding: 24px;

  border: 1px solid #dce6e1;
  border-radius: 14px;

  background: #ffffff;
}

.admin-users-header h2 {
  margin: 5px 0 7px;

  color: #2f4439;

  font-size: 1.45rem;
}

.admin-users-header p {
  max-width: 700px;

  margin: 0;

  color: #6f7f77;

  font-size: 0.8rem;
  line-height: 1.65;
}

.admin-users-eyebrow {
  color: #087358;

  font-size: 0.65rem;
  font-weight: 900;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-user-overview {
  display: grid;
  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
  gap: 13px;
}

.admin-user-overview article {
  min-height: 135px;
  padding: 17px;

  border: 1px solid #dce6e1;
  border-radius: 12px;

  background: #ffffff;
}

.admin-user-overview span,
.admin-user-overview strong,
.admin-user-overview small {
  display: block;
}

.admin-user-overview span {
  color: #66776f;

  font-size: 0.64rem;
  font-weight: 850;

  text-transform: uppercase;
}

.admin-user-overview strong {
  margin-top: 10px;

  color: #263f34;

  font-size: 1.65rem;
}

.admin-user-overview small {
  margin-top: 9px;

  color: #839089;

  font-size: 0.66rem;
  line-height: 1.5;
}

.admin-user-filters {
  display: grid;
  grid-template-columns:
    minmax(280px, 2fr)
    minmax(180px, 1fr)
    minmax(160px, 1fr)
    auto;
  gap: 13px;
  align-items: end;

  margin-bottom: 22px;
  padding: 16px;

  border: 1px solid #e0e8e4;
  border-radius: 11px;

  background: #f8faf9;
}

.admin-user-identity {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.admin-user-avatar {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #e7f4ef;
  color: #087358;

  font-size: 0.72rem;
  font-weight: 900;
}

.admin-user-identity strong,
.admin-user-identity span,
.admin-user-identity small {
  display: block;
}

.admin-user-identity strong {
  color: #344b40;

  font-size: 0.75rem;
}

.admin-user-identity span {
  margin-top: 3px;

  color: #65776e;

  font-size: 0.64rem;
}

.admin-user-identity small {
  margin-top: 2px;

  color: #87938d;

  font-size: 0.61rem;
}

.admin-current-user-badge {
  display: inline-flex !important;

  margin-left: 7px !important;
  padding: 2px 6px;

  border-radius: 999px;

  background: #e8f5ef;
  color: #087358 !important;

  font-size: 0.55rem !important;
  font-weight: 850;
}

.admin-user-role,
.admin-user-status {
  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 0.61rem;
  font-weight: 850;

  text-transform: capitalize;
}

.admin-user-role--super_admin {
  background: #eee9ff;
  color: #5c41a4;
}

.admin-user-role--hr_admin {
  background: #eaf2ff;
  color: #335f98;
}

.admin-user-role--hr_reviewer {
  background: #edf8f4;
  color: #087358;
}

.admin-user-status--active {
  background: #eaf7f1;
  color: #087358;
}

.admin-user-status--inactive {
  background: #f2f2f2;
  color: #6f7773;
}

.admin-user-workload {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.admin-user-workload strong {
  color: #30483d;

  font-size: 0.85rem;
}

.admin-user-workload span,
.admin-user-workload small {
  color: #79877f;

  font-size: 0.61rem;
}

.admin-action-button--danger {
  border-color: #e0a8a8 !important;

  background: #fff1f1 !important;
  color: #a43d3d !important;
}

.admin-action-button--success {
  border-color: #9fcbb9 !important;

  background: #edf8f4 !important;
  color: #087358 !important;
}

.admin-user-modal {
  width: min(
    610px,
    calc(100vw - 32px)
  );
}

.admin-user-form {
  display: grid;
  gap: 16px;
}

.admin-user-form-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 14px;
}

.admin-confirmation-content {
  padding: 8px 0 18px;

  color: #66776f;

  font-size: 0.76rem;
  line-height: 1.65;
}

.admin-confirmation-modal {
  width: min(
    500px,
    calc(100vw - 32px)
  );
}

@media (max-width: 1100px) {
  .admin-user-overview {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .admin-user-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 720px) {
  .admin-users-header {
    flex-direction: column;
  }

  .admin-users-header > button {
    width: 100%;
  }

  .admin-user-overview {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-user-filters,
  .admin-user-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-user-overview {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ADMINISTRATOR AUDIT LOG
   ========================================================= */

.admin-audit-page {
  display: grid;
  gap: 22px;
}

.admin-audit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding: 24px;

  border: 1px solid #dce6e1;
  border-radius: 14px;

  background: #ffffff;
}

.admin-audit-header h2 {
  margin: 5px 0 7px;

  color: #2f4439;

  font-size: 1.45rem;
}

.admin-audit-header p {
  max-width: 720px;

  margin: 0;

  color: #6f7f77;

  font-size: 0.8rem;
  line-height: 1.65;
}

.admin-audit-eyebrow {
  color: #087358;

  font-size: 0.65rem;
  font-weight: 900;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-audit-header__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-audit-overview {
  display: grid;
  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
  gap: 13px;
}

.admin-audit-overview article {
  min-height: 135px;
  padding: 17px;

  border: 1px solid #dce6e1;
  border-radius: 12px;

  background: #ffffff;
}

.admin-audit-overview span,
.admin-audit-overview strong,
.admin-audit-overview small {
  display: block;
}

.admin-audit-overview span {
  color: #66776f;

  font-size: 0.64rem;
  font-weight: 850;

  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-audit-overview strong {
  margin-top: 10px;

  color: #263f34;

  font-size: 1.65rem;
  line-height: 1;
}

.admin-audit-overview small {
  margin-top: 10px;

  color: #839089;

  font-size: 0.66rem;
  line-height: 1.5;
}

.admin-audit-panel-heading {
  align-items: center;
}

.admin-audit-filters {
  display: grid;
  grid-template-columns:
    minmax(300px, 2fr)
    repeat(
      3,
      minmax(170px, 1fr)
    );
  gap: 13px;
  align-items: end;

  margin-bottom: 22px;
  padding: 16px;

  border: 1px solid #e0e8e4;
  border-radius: 11px;

  background: #f8faf9;
}

.admin-audit-filter-search {
  grid-column:
    span 1;
}

.admin-audit-clear-button {
  min-height: 42px;

  white-space: nowrap;
}

.admin-audit-table td {
  vertical-align: middle;
}

.admin-audit-table td:nth-child(1) {
  min-width: 155px;
}

.admin-audit-table td:nth-child(2) {
  min-width: 190px;
}

.admin-audit-table td:nth-child(3) {
  min-width: 160px;
}

.admin-audit-table td:nth-child(4) {
  min-width: 135px;
}

.admin-audit-table td:nth-child(5) {
  min-width: 260px;
  max-width: 360px;
}

.admin-audit-date {
  color: #4f6259;

  font-size: 0.7rem;
  line-height: 1.5;
}

.admin-audit-administrator {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-audit-avatar {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: #e7f4ef;
  color: #087358;

  font-size: 0.68rem;
  font-weight: 900;
}

.admin-audit-administrator strong,
.admin-audit-administrator span,
.admin-audit-administrator small {
  display: block;
}

.admin-audit-administrator strong {
  color: #344b40;

  font-size: 0.72rem;
}

.admin-audit-administrator span {
  margin-top: 2px;

  color: #66776f;

  font-size: 0.62rem;
}

.admin-audit-administrator small {
  margin-top: 2px;

  color: #89948f;

  font-size: 0.59rem;
}

.admin-audit-action {
  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 0.59rem;
  font-weight: 850;

  line-height: 1.35;
}

.admin-audit-action--created,
.admin-audit-action--activated,
.admin-audit-action--approved {
  background: #eaf7f1;
  color: #087358;
}

.admin-audit-action--updated,
.admin-audit-action--assigned {
  background: #eaf2ff;
  color: #335f98;
}

.admin-audit-action--returned {
  background: #fff5df;
  color: #966819;
}

.admin-audit-action--rejected,
.admin-audit-action--deleted,
.admin-audit-action--deactivated {
  background: #fff0f0;
  color: #a64040;
}

.admin-audit-action--downloaded,
.admin-audit-action--viewed {
  background: #f0f2f4;
  color: #56636b;
}

.admin-audit-action--login,
.admin-audit-action--logout,
.admin-audit-action--password {
  background: #eee9ff;
  color: #5c41a4;
}

.admin-audit-action--default {
  background: #f0f3f2;
  color: #59675f;
}

.admin-audit-entity strong,
.admin-audit-entity span {
  display: block;
}

.admin-audit-entity strong {
  color: #42564c;

  font-size: 0.68rem;
}

.admin-audit-entity span {
  margin-top: 4px;

  color: #87928c;

  font-size: 0.61rem;
}

.admin-audit-description {
  display: -webkit-box;
  overflow: hidden;

  margin: 0;

  color: #65756d;

  font-size: 0.68rem;
  line-height: 1.55;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.admin-audit-ip {
  color: #697870;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size: 0.63rem;
}

.admin-audit-empty {
  display: grid;
  justify-items: center;
  gap: 9px;

  padding: 50px 20px;

  text-align: center;
}

.admin-audit-empty__icon {
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  border-radius: 50%;

  background: #eaf6f1;
  color: #087358;

  font-size: 1.2rem;
  font-weight: 900;
}

.admin-audit-empty h3 {
  margin: 4px 0 0;

  color: #344b40;

  font-size: 1rem;
}

.admin-audit-empty p {
  max-width: 430px;

  margin: 0 0 8px;

  color: #7a8981;

  font-size: 0.76rem;
  line-height: 1.6;
}

.admin-audit-detail-modal {
  width: min(
    760px,
    calc(100vw - 32px)
  );

  max-height:
    calc(
      100vh - 40px
    );

  overflow-y: auto;
}

.admin-audit-detail-content {
  display: grid;
  gap: 17px;
}

.admin-audit-detail-summary {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px;
}

.admin-audit-detail-summary > div {
  padding: 12px;

  border: 1px solid #e0e8e4;
  border-radius: 9px;

  background: #f8faf9;
}

.admin-audit-detail-summary span,
.admin-audit-detail-summary strong {
  display: block;
}

.admin-audit-detail-summary span {
  margin-bottom: 5px;

  color: #7b8982;

  font-size: 0.6rem;
  font-weight: 850;

  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-audit-detail-summary strong {
  overflow-wrap: anywhere;

  color: #40534a;

  font-size: 0.7rem;
  line-height: 1.5;
}

.admin-audit-detail-section {
  padding: 14px;

  border: 1px solid #e0e8e4;
  border-radius: 9px;

  background: #ffffff;
}

.admin-audit-detail-section h4 {
  margin: 0 0 8px;

  color: #3f5449;

  font-size: 0.76rem;
}

.admin-audit-detail-section p {
  margin: 0;

  color: #66776f;

  font-size: 0.7rem;
  line-height: 1.65;
}

.admin-audit-user-agent {
  overflow-wrap: anywhere;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size: 0.64rem !important;
}

.admin-audit-metadata {
  display: grid;
  gap: 9px;
}

.admin-audit-metadata__item {
  padding: 11px;

  border: 1px solid #e3eae7;
  border-radius: 8px;

  background: #f8faf9;
}

.admin-audit-metadata__item span {
  display: block;

  margin-bottom: 5px;

  color: #7a8981;

  font-size: 0.6rem;
  font-weight: 850;

  text-transform: uppercase;
}

.admin-audit-metadata__item strong {
  display: block;

  overflow-wrap: anywhere;

  color: #40534a;

  font-size: 0.69rem;
  line-height: 1.5;
}

.admin-audit-metadata__item pre {
  overflow-x: auto;

  margin: 0;
  padding: 10px;

  border-radius: 7px;

  background: #202923;
  color: #e7f0eb;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size: 0.63rem;
  line-height: 1.55;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  .admin-audit-overview {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .admin-audit-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-audit-filter-search {
    grid-column:
      1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-audit-header {
    flex-direction: column;
  }

  .admin-audit-header__actions {
    width: 100%;
  }

  .admin-audit-header__actions button {
    flex: 1;
  }

  .admin-audit-overview {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .admin-audit-filters {
    grid-template-columns: 1fr;
  }

  .admin-audit-filter-search {
    grid-column: auto;
  }

  .admin-audit-clear-button {
    width: 100%;
  }

  .admin-audit-detail-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-audit-overview {
    grid-template-columns: 1fr;
  }

  .admin-audit-header__actions {
    flex-direction: column;
  }

  .admin-audit-header__actions button {
    width: 100%;
  }
}

/* =========================================================
   PUBLIC PORTAL LAYOUT

   These classes are unique to the public wrapper.
   They do not modify the staff form sidebar.
   ========================================================= */

.public-site-layout,
.public-site-layout *,
.public-site-layout *::before,
.public-site-layout *::after {
  box-sizing: border-box;
}

.public-site-layout {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  min-height: 100vh;

  background:
    linear-gradient(
      135deg,
      #f2f7f5 0%,
      #f8faf9 55%,
      #f8f5e9 100%
    );

  color: #283d34;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.public-site-header {
  position: relative;
  z-index: 20;

  width: 100%;

  border-bottom: 1px solid #dce6e1;

  background: #ffffff;

  box-shadow:
    0 3px 15px
    rgba(24, 55, 43, 0.05);
}

.public-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  width: min(
    1180px,
    calc(100% - 40px)
  );

  min-height: 74px;
  margin: 0 auto;
  padding: 12px 0;
}

.public-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  min-width: 0;

  color: inherit;
  text-decoration: none;
}

.public-site-brand__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 43px;
  height: 43px;

  border-radius: 11px;

  background: #087358;
  color: #ffffff;

  font-size: 1rem;
  font-weight: 900;

  box-shadow:
    0 5px 14px
    rgba(8, 115, 88, 0.2);
}

.public-site-brand__text {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.public-site-brand__text strong {
  color: #263d33;

  font-size: 0.88rem;
  font-weight: 900;
}

.public-site-brand__text small {
  color: #74827b;

  font-size: 0.67rem;
  font-weight: 650;
}

.public-site-header__label {
  padding: 8px 13px;

  border: 1px solid #d2e3dc;
  border-radius: 999px;

  background: #f0f8f5;
  color: #087358;

  font-size: 0.67rem;
  font-weight: 850;

  letter-spacing: 0.02em;
}

/* =========================================================
   PUBLIC PAGE CONTENT

   Access, Identification and Welcome cards are centred.
   The form wizard also remains centred, while preserving
   its own sidebar/content grid.
   ========================================================= */

.public-site-main {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  min-width: 0;

  padding: 36px 20px;
}

.public-site-main > * {
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
}

/*
 * Centre the public access, identification
 * and welcome-page cards.
 */

.public-site-main > .portal-card {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.public-site-main
> .portal-card:not(
  .portal-card--wide
) {
  max-width: 680px;
}

.public-site-main
> .portal-card--wide {
  max-width: 980px;
}

/*
 * StaffFormLayout already has:
 *
 * width: min(1180px, 100%);
 *
 * This simply centres it without changing
 * its 270px sidebar and flexible content area.
 */

.public-site-main
> .staff-form-shell {
  width: min(
    1180px,
    100%
  );

  margin-right: auto;
  margin-left: auto;
}

/* =========================================================
   FOOTER
   ========================================================= */

.public-site-footer {
  width: 100%;
  margin-top: auto;

  border-top: 1px solid #dce6e1;

  background: #ffffff;
}

.public-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  width: min(
    1180px,
    calc(100% - 40px)
  );

  min-height: 74px;
  margin: 0 auto;
  padding: 14px 0;

  color: #6e7e76;
}

.public-site-footer__inner > div {
  display: grid;
  gap: 3px;
}

.public-site-footer__inner strong {
  color: #30483c;

  font-size: 0.72rem;
  font-weight: 850;
}

.public-site-footer__inner span {
  font-size: 0.64rem;
  font-weight: 650;
}

.public-site-footer__inner small {
  max-width: 510px;

  font-size: 0.63rem;
  line-height: 1.6;
  text-align: right;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
  .public-site-header__inner,
  .public-site-footer__inner {
    width:
      calc(
        100% - 28px
      );
  }

  .public-site-header__label {
    display: none;
  }

  .public-site-main {
    padding: 22px 12px;
  }

  .public-site-brand__text small {
    display: none;
  }

  .public-site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .public-site-footer__inner small {
    text-align: left;
  }
}


/* =========================================================
   SUBMISSION SUCCESS PAGE
   ========================================================= */

.submission-success-actions {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 24px;
}

.submission-success-actions
.primary-button,
.submission-success-actions
.secondary-button {
  width: auto;
  min-width: 190px;
}

@media (max-width: 600px) {
  .submission-success-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .submission-success-actions
  .primary-button,
  .submission-success-actions
  .secondary-button {
    width: 100%;
    min-width: 0;
  }
}

@media print {
  .public-portal-header,
  .public-portal-sidebar,
  .public-portal-footer,
  .submission-success-actions {
    display: none !important;
  }

  .public-portal-main--standard {
    display: block;
  }

  .public-portal-main--standard
  > .public-portal-content {
    padding: 0;
  }

  .portal-card {
    border: 0;
    box-shadow: none;
  }
}


/* =========================================================
   STAFF RECORD EXPORTS
   ========================================================= */

.admin-record-export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  margin-top: 14px;
}

.admin-record-export-actions
.primary-button,
.admin-record-export-actions
.secondary-button {
  width: auto;
  min-width: 138px;
}

.admin-record-draft-notice {
  display: block;

  max-width: 280px;
  margin-top: 9px;

  color: #946410;

  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.45;
  text-align: right;
}

.admin-submissions-heading__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.admin-bulk-export-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-bulk-export-actions
.primary-button,
.admin-bulk-export-actions
.secondary-button {
  width: auto;
  min-width: 140px;
}

.admin-selection-column {
  width: 46px;
  min-width: 46px;

  text-align: center;
}

.admin-selection-column input {
  width: 16px;
  height: 16px;

  accent-color: #064c3d;

  cursor: pointer;
}

.admin-selection-column
input:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

@media (max-width: 900px) {
  .admin-submissions-heading__tools {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-bulk-export-actions {
    flex-wrap: wrap;
  }

  .admin-record-export-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-record-export-actions
  .primary-button,
  .admin-record-export-actions
  .secondary-button {
    width: 100%;
  }

  .admin-record-draft-notice {
    max-width: none;

    text-align: left;
  }
}