/* =========================================================
   PUBLIC PORTAL VARIABLES
   ========================================================= */

.public-portal-layout {
  --public-sidebar-width: 270px;
  --public-header-height: 72px;
  --public-green: #064c3d;
  --public-green-dark: #043e32;
  --public-green-light: #0b6d57;
  --public-border: #dce5e1;
  --public-background: #f3f7f5;
  --public-text: #253a31;
  --public-muted: #738179;
}

/* =========================================================
   GLOBAL PUBLIC PORTAL LAYOUT
   ========================================================= */

.public-portal-layout,
.public-portal-layout *,
.public-portal-layout *::before,
.public-portal-layout *::after {
  box-sizing: border-box;
}

.public-portal-layout {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  min-height: 100vh;

  background:
    var(
      --public-background
    );

  color:
    var(
      --public-text
    );
}

/* =========================================================
   TOP NAVBAR

   The left brand block has exactly the same width as
   the public/form sidebar below it.
   ========================================================= */

.public-portal-header {
  position: sticky;
  top: 0;
  z-index: 100;

  display: grid;
  grid-template-columns:
    var(
      --public-sidebar-width
    )
    minmax(
      0,
      1fr
    );

  width: 100%;
  min-height:
    var(
      --public-header-height
    );

  background: #ffffff;

  box-shadow:
    0 2px 10px
    rgba(
      27,
      56,
      44,
      0.06
    );
}

/* =========================================================
   NAVBAR BRAND AREA
   ========================================================= */

.public-portal-header__brand {
  display: flex;
  align-items: center;

  min-width: 0;
  min-height:
    var(
      --public-header-height
    );

  padding:
    12px
    22px;

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

  background:
    var(
      --public-green
    );
}

.public-portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;

  color: #ffffff;
  text-decoration: none;
}

.public-portal-brand__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 10px;

  background: #ffffff;
  color:
    var(
      --public-green
    );

  font-size: 1rem;
  font-weight: 950;

  box-shadow:
    0 5px 14px
    rgba(
      0,
      0,
      0,
      0.12
    );
}

.public-portal-brand__details {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.public-portal-brand__details strong {
  overflow: hidden;

  color: #ffffff;

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

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

.public-portal-brand__details small {
  overflow: hidden;

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

  font-size: 0.62rem;
  font-weight: 650;

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

/* =========================================================
   RIGHT NAVBAR TOOLBAR
   ========================================================= */

.public-portal-header__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-width: 0;
  min-height:
    var(
      --public-header-height
    );

  padding:
    11px
    28px;

  border-bottom:
    1px solid
    var(
      --public-border
    );

  background: #ffffff;
}

.public-portal-page-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.public-portal-page-title span {
  color: #87938d;

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

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

.public-portal-page-title strong {
  overflow: hidden;

  color: #294036;

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

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

.public-portal-header__badge {
  flex: 0 0 auto;

  padding:
    8px
    13px;

  border:
    1px solid
    #cfe0d8;

  border-radius: 8px;

  background: #f4f8f6;
  color:
    var(
      --public-green
    );

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

/* =========================================================
   MAIN WORKSPACE
   ========================================================= */

.public-portal-main {
  flex: 1;

  width: 100%;
  min-width: 0;
}

/* =========================================================
   STANDARD PUBLIC PAGES

   Ghana Card, Staff Identification and Welcome.
   ========================================================= */

.public-portal-main--standard {
  display: grid;
  grid-template-columns:
    var(
      --public-sidebar-width
    )
    minmax(
      0,
      1fr
    );
}

/* =========================================================
   STANDARD PUBLIC SIDEBAR
   ========================================================= */

.public-portal-sidebar {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height:
    calc(
      100vh -
      var(
        --public-header-height
      )
    );

  padding:
    28px
    16px
    24px;

  background:
    linear-gradient(
      180deg,
      var(
        --public-green
      )
      0%,
      var(
        --public-green-dark
      )
      100%
    );

  color: #ffffff;
}

.public-portal-sidebar__heading {
  display: grid;
  gap: 4px;

  margin:
    0
    8px
    22px;

  padding-bottom: 19px;

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

.public-portal-sidebar__heading span {
  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

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

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

.public-portal-sidebar__heading strong {
  color: #ffffff;

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

/* =========================================================
   PUBLIC SIDEBAR NAVIGATION
   ========================================================= */

.public-portal-navigation {
  display: grid;
  gap: 8px;
}

.public-portal-navigation__item {
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding:
    9px
    11px;

  border:
    1px solid
    transparent;

  border-radius: 10px;

  background: transparent;
  color:
    rgba(
      255,
      255,
      255,
      0.84
    );

  text-decoration: none;

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

.public-portal-navigation__item:hover {
  border-color:
    rgba(
      255,
      255,
      255,
      0.15
    );

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

  color: #ffffff;

  transform:
    translateX(
      2px
    );
}

.public-portal-navigation__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 34px;
  height: 34px;

  border-radius: 9px;

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

  color: #ffffff;

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

.public-portal-navigation__text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.public-portal-navigation__text small {
  color:
    rgba(
      255,
      255,
      255,
      0.56
    );

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

  text-transform: uppercase;
}

.public-portal-navigation__text strong {
  overflow: hidden;

  color: inherit;

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

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

/* Active page */

.public-portal-navigation__item--active {
  border-color:
    rgba(
      255,
      255,
      255,
      0.15
    );

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

  color: #ffffff;

  box-shadow:
    0 5px 14px
    rgba(
      0,
      0,
      0,
      0.1
    );
}

.public-portal-navigation__item--active
.public-portal-navigation__icon {
  background: #ffffff;
  color:
    var(
      --public-green
    );
}

/* Completed page */

.public-portal-navigation__item--completed
.public-portal-navigation__icon {
  background: #bde7d7;
  color:
    var(
      --public-green
    );
}

/* =========================================================
   SIDEBAR SECURITY NOTICE
   ========================================================= */

.public-portal-sidebar__notice {
  margin-top: auto;
  padding:
    18px
    10px
    0;

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

.public-portal-sidebar__notice strong {
  color: #ffffff;

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

.public-portal-sidebar__notice p {
  margin:
    7px
    0
    0;

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

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

/* =========================================================
   PUBLIC CONTENT AREA
   ========================================================= */

.public-portal-content {
  min-width: 0;
}

.public-portal-main--standard
> .public-portal-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding:
    32px
    28px
    42px;
}

/*
 * Centre the three standard public cards.
 */

.public-portal-main--standard
.public-portal-content
> .portal-card {
  width: 100%;

  margin-right: auto;
  margin-left: auto;
}

.public-portal-main--standard
.public-portal-content
> .portal-card:not(
  .portal-card--wide
) {
  max-width: 680px;
}

.public-portal-main--standard
.public-portal-content
> .portal-card--wide {
  max-width: 980px;
}

/* =========================================================
   FORM WORKSPACE

   StaffFormLayout already contains:
   - .staff-form-sidebar
   - .staff-form-content

   Its columns are aligned with the public navbar columns.
   ========================================================= */

.public-portal-main--form
> .public-portal-content {
  display: block;

  width: 100%;
  min-width: 0;
}

/*
 * The staff form shell uses the full public workspace.
 * The 270px progress sidebar aligns directly below
 * the 270px navbar brand area.
 */

.public-portal-main--form
.staff-form-shell {
  display: grid;

  grid-template-columns:
    var(
      --public-sidebar-width
    )
    minmax(
      0,
      1fr
    );

  gap: 0;

  width: 100%;
  max-width: none;
  min-width: 0;

  margin: 0;
}

/* =========================================================
   FORM PROGRESS SIDEBAR
   ========================================================= */

.public-portal-main--form
.staff-form-sidebar {
  position: sticky;
  top:
    var(
      --public-header-height
    );

  align-self: start;

  min-height:
    calc(
      100vh -
      var(
        --public-header-height
      )
    );

  padding:
    28px
    18px;

  border: 0;
  border-radius: 0;

  background:
    linear-gradient(
      180deg,
      var(
        --public-green
      )
      0%,
      var(
        --public-green-dark
      )
      100%
    );

  color: #ffffff;

  box-shadow: none;
}

/* Progress heading */

.public-portal-main--form
.form-progress-heading span {
  color:
    rgba(
      255,
      255,
      255,
      0.63
    );
}

.public-portal-main--form
.form-progress-heading strong {
  color: #ffffff;
}

/* Progress track */

.public-portal-main--form
.progress-track {
  background:
    rgba(
      255,
      255,
      255,
      0.18
    );
}

.public-portal-main--form
.progress-track__bar {
  background: #bde7d7;
}

/* =========================================================
   FORM SIDEBAR NAVIGATION
   ========================================================= */

.public-portal-main--form
.form-section-link {
  border-color: transparent;

  background: transparent;

  color:
    rgba(
      255,
      255,
      255,
      0.84
    );
}

.public-portal-main--form
.form-section-link:hover {
  border-color:
    rgba(
      255,
      255,
      255,
      0.16
    );

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

  color: #ffffff;
}

.public-portal-main--form
.form-section-link__number {
  background:
    rgba(
      255,
      255,
      255,
      0.13
    );

  color: #ffffff;
}

.public-portal-main--form
.form-section-link__label {
  color: inherit;
}

.public-portal-main--form
.form-section-link__status {
  color:
    rgba(
      255,
      255,
      255,
      0.58
    );
}

/* Active form section */

.public-portal-main--form
.form-section-link--active {
  border-color:
    rgba(
      255,
      255,
      255,
      0.17
    );

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

  color: #ffffff;

  box-shadow:
    0 5px 14px
    rgba(
      0,
      0,
      0,
      0.1
    );
}

.public-portal-main--form
.form-section-link--active
.form-section-link__number {
  background: #ffffff;
  color:
    var(
      --public-green
    );
}

.public-portal-main--form
.form-section-link--active
.form-section-link__status {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}

/* Completed form section */

.public-portal-main--form
.form-section-link--completed
.form-section-link__number {
  background: #bde7d7;
  color:
    var(
      --public-green
    );
}

.public-portal-main--form
.form-section-link--completed
.form-section-link__status {
  color: #cceee2;
}

/* Form sidebar action */

.public-portal-main--form
.staff-form-sidebar__actions {
  border-top-color:
    rgba(
      255,
      255,
      255,
      0.16
    );
}

.public-portal-main--form
.staff-form-sidebar__actions
.secondary-button {
  border-color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  background: transparent;
  color: #ffffff;
}

.public-portal-main--form
.staff-form-sidebar__actions
.secondary-button:hover {
  border-color: #ffffff;

  background: #ffffff;
  color:
    var(
      --public-green
    );
}

/* Form sidebar error */

.public-portal-main--form
.form-sidebar-message {
  border-color:
    rgba(
      255,
      255,
      255,
      0.2
    );

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

  color: #ffffff;
}

/* =========================================================
   FORM CONTENT

   The active form remains centred inside the right column.
   ========================================================= */

.public-portal-main--form
.staff-form-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  min-width: 0;
  min-height:
    calc(
      100vh -
      var(
        --public-header-height
      )
    );

  padding:
    28px
    30px
    42px;

  background:
    var(
      --public-background
    );
}

.public-portal-main--form
.staff-form-content
> * {
  width: min(
    1180px,
    100%
  );

  min-width: 0;
  max-width: none;

  margin-right: auto;
  margin-left: auto;
}

/* =========================================================
   GREEN CENTRED FOOTER
   ========================================================= */

.public-portal-footer {
  position: relative;
  z-index: 20;

  width: 100%;

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

  background:
    var(
      --public-green-dark
    );

  color: #ffffff;
}

.public-portal-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;

  width: 100%;
  min-height: 82px;

  margin: 0;
  padding:
    16px
    24px;

  text-align: center;
}

.public-portal-footer__inner strong {
  color: #ffffff;

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

.public-portal-footer__inner span {
  color:
    rgba(
      255,
      255,
      255,
      0.76
    );

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

.public-portal-footer__inner small {
  max-width: 700px;

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

  font-size: 0.61rem;
  line-height: 1.55;
  text-align: center;
}

/* =========================================================
   TABLET RESPONSIVENESS
   ========================================================= */

@media (max-width: 920px) {
  .public-portal-header {
    grid-template-columns:
      1fr;
  }

  .public-portal-header__brand {
    min-height: 62px;

    justify-content: center;

    padding:
      10px
      18px;
  }

  .public-portal-header__toolbar {
    min-height: 62px;

    padding:
      10px
      18px;
  }

  .public-portal-main--standard {
    grid-template-columns:
      1fr;
  }

  .public-portal-sidebar {
    min-height: auto;

    padding:
      18px
      16px;
  }

  .public-portal-sidebar__heading,
  .public-portal-sidebar__notice {
    display: none;
  }

  .public-portal-navigation {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .public-portal-navigation__item {
    justify-content: center;
  }

  .public-portal-navigation__text small {
    display: none;
  }

  .public-portal-main--form
  .staff-form-shell {
    grid-template-columns:
      1fr;
  }

  .public-portal-main--form
  .staff-form-sidebar {
    position: static;

    min-height: auto;

    padding:
      22px
      18px;
  }

  .public-portal-main--form
  .staff-form-content {
    min-height: auto;

    padding:
      24px
      18px
      34px;
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
   ========================================================= */

@media (max-width: 680px) {
  .public-portal-brand__details small {
    display: none;
  }

  .public-portal-header__toolbar {
    gap: 12px;
  }

  .public-portal-header__badge {
    display: none;
  }

  .public-portal-page-title {
    width: 100%;

    text-align: center;
  }

  .public-portal-navigation {
    grid-template-columns:
      1fr;
  }

  .public-portal-navigation__item {
    justify-content: flex-start;
  }

  .public-portal-navigation__text small {
    display: block;
  }

  .public-portal-main--standard
  > .public-portal-content {
    padding:
      22px
      12px
      30px;
  }

  .public-portal-main--form
  .staff-form-content {
    padding:
      18px
      12px
      28px;
  }

  .public-portal-footer__inner {
    padding:
      16px
      14px;
  }
}