/* ======================================================
   REEHOR WORK
   MOBILE PROFILE V1
====================================================== */

#rh-mobile-profile {
  display: none;
}


@media (max-width: 768px) {

  #rh-mobile-profile {
    position: fixed;

    inset: 0;

    z-index: 8500;

    display: none;

    box-sizing: border-box;

    overflow-y: auto;

    padding:
      calc(
        16px
        + env(safe-area-inset-top)
      )
      14px
      calc(
        90px
        + env(safe-area-inset-bottom)
      );

    background: #F4F8FB;

    -webkit-overflow-scrolling:
      touch;
  }


  #rh-mobile-profile.visible {
    display: block;
  }


  /* ==================================================
     HEADER
  ================================================== */

  .rh-profile-topbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
  }


  .rh-profile-page-title {
    color: #081C2D;

    font-size: 23px;

    font-weight: 760;
  }


  .rh-profile-refresh-small {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
      1px solid #DCE8EF;

    border-radius: 10px;

    background: #FFFFFF;

    color: #087E91 !important;

    font-size: 18px !important;

    box-shadow:
      0 3px 10px
      rgba(26,70,88,.06);
  }


  /* ==================================================
     PROFILE CARD
  ================================================== */

  .rh-profile-card {
    position: relative;

    overflow: hidden;

    margin-bottom: 13px;

    padding: 18px;

    border:
      1px solid #0C5B6D;

    border-radius: 14px;

    background:
      linear-gradient(
        120deg,
        #063C4D 0%,
        #075467 100%
      );

    box-shadow:
      0 7px 20px
      rgba(4,54,69,.18);
  }


  .rh-profile-card::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -95px;
    right: -70px;

    border-radius: 50%;

    background:
      rgba(255,255,255,.045);
  }


  .rh-profile-main {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;
  }


  .rh-profile-avatar {
    width: 54px;
    height: 54px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
      2px solid
      rgba(255,255,255,.28);

    border-radius: 16px;

    background:
      rgba(255,255,255,.13);

    color: #FFFFFF !important;

    font-size: 20px;

    font-weight: 720;
  }


  .rh-profile-name {
    color: #FFFFFF !important;

    font-size: 18px;

    font-weight: 720;
  }


  .rh-profile-role {
    margin-top: 5px;

    color: #C8E0E6 !important;

    font-size: 10px;
  }


  .rh-profile-username {
    margin-top: 4px;

    color: #AFCED6 !important;

    font-size: 9px;
  }


  /* ==================================================
     SECTION
  ================================================== */

  .rh-profile-section {
    margin-bottom: 13px;

    padding: 15px;

    border:
      1px solid #DCE8EF;

    border-radius: 13px;

    background: #FFFFFF;

    box-shadow:
      0 4px 14px
      rgba(26,70,88,.06);
  }


  .rh-profile-section-title {
    margin-bottom: 12px;

    color: #081C2D;

    font-size: 13px;

    font-weight: 720;
  }


  /* ==================================================
     STATISTICS
  ================================================== */

  .rh-profile-stat-grid {
    display: grid;

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

    gap: 8px;
  }


  .rh-profile-stat {
    padding: 13px;

    border:
      1px solid #E0EAF0;

    border-radius: 10px;

    background: #F8FBFC;
  }


  .rh-profile-stat-number {
    color: #081C2D;

    font-size: 23px;

    font-weight: 760;
  }


  .rh-profile-stat-label {
    margin-top: 6px;

    color: #536A7A;

    font-size: 9px;
  }


  .rh-profile-stat.warning
  .rh-profile-stat-number {
    color: #C66C16;
  }


  .rh-profile-stat.danger
  .rh-profile-stat-number {
    color: #C53F3F;
  }


  /* ==================================================
     INFORMATION ROWS
  ================================================== */

  .rh-profile-row {
    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border-bottom:
      1px solid #E8EFF3;
  }


  .rh-profile-row:last-child {
    border-bottom: 0;
  }


  .rh-profile-row-label {
    color: #40596B;

    font-size: 10px;

    font-weight: 620;
  }


  .rh-profile-row-value {
    max-width: 60%;

    color: #172D3E;

    font-size: 10px;

    text-align: right;

    overflow-wrap: anywhere;
  }


  .rh-profile-status-pill {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 0 8px;

    border-radius: 12px;

    background: #E8F6F0;

    color: #117252;

    font-size: 9px;
  }


  .rh-profile-status-pill.browser {
    background: #EEF3F6;

    color: #536A7A;
  }


  /* ==================================================
     ACTION BUTTON
  ================================================== */

  .rh-profile-action {
    width: 100%;

    min-height: 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    margin-top: 8px;

    padding: 0 12px;

    border:
      1px solid #DCE8EF;

    border-radius: 9px;

    background: #FFFFFF;

    color: #243D50 !important;

    font-size: 11px !important;

    text-align: left;

    cursor: pointer;
  }


  .rh-profile-action:first-of-type {
    margin-top: 0;
  }


  .rh-profile-action-primary {
    border-color: #B9DEE4;

    background: #F0FAFB;

    color: #067386 !important;
  }


  .rh-profile-action-danger {
    border-color: #E5C4C4;

    background: #FFFDFD;

    color: #B04444 !important;
  }


  .rh-profile-action-arrow {
    color: #91A5B2;

    font-size: 18px;
  }


  /* ==================================================
     FOOTER
  ================================================== */

  .rh-profile-footer {
    padding: 12px 0 4px;

    color: #8093A0;

    font-size: 9px;

    line-height: 1.7;

    text-align: center;
  }


  /* ==================================================
     LOADING
  ================================================== */

  .rh-profile-loading {
    min-height: 70vh;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #637888;

    font-size: 11px;
  }

}