/* ======================================================
   REEHOR WORK MOBILE HOME V2
   只在手机端启用
====================================================== */

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


@media (max-width: 768px) {

  /* ==================================================
     APP HOME
  ================================================== */

  #rh-mobile-home {
    position: fixed;

    inset: 0;

    z-index: 8000;

    display: none;

    box-sizing: border-box;

    overflow-y: auto;

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

    background:
      #F4F8FB;

    -webkit-overflow-scrolling:
      touch;
  }


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


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

  .rh-mobile-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
  }


  .rh-mobile-brand {
    display: flex;

    align-items: center;

    gap: 10px;
  }


  .rh-mobile-logo {
    width: 42px;
    height: 42px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    border-radius: 11px;

    background:
      linear-gradient(
        145deg,
        #087F94,
        #075064
      );

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 700;

    box-shadow:
      0 5px 14px
      rgba(6,60,77,.20);
  }


  .rh-mobile-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    box-sizing: border-box;

    padding: 3px;
  }


  .rh-mobile-brand-name {
    color: #081C2D;

    font-size: 16px;

    font-weight: 750;
  }


  .rh-mobile-brand-sub {
    margin-top: 2px;

    color: #617687;

    font-size: 10px;
  }


  .rh-mobile-notification {
    position: relative;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
      1px solid #DCE8EF;

    border-radius: 10px;

    background: #FFFFFF;

    color: #173C4F;

    font-size: 19px;

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


  .rh-mobile-notification-badge {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 17px;
    height: 17px;

    box-sizing: border-box;

    padding: 0 4px;

    display: none;

    align-items: center;

    justify-content: center;

    border:
      2px solid #F4F8FB;

    border-radius: 9px;

    background: #E25252;

    color: #FFFFFF;

    font-size: 8px;

    font-weight: 700;
  }


  .rh-mobile-notification-badge.show {
    display: flex;
  }


  /* ==================================================
     GREETING
  ================================================== */

  .rh-mobile-greeting {
    margin-bottom: 14px;
  }


  .rh-mobile-greeting-main {
    color: #081C2D;

    font-size: 23px;

    font-weight: 760;

    line-height: 1.25;
  }


  .rh-mobile-date {
    margin-top: 5px;

    color: #617687;

    font-size: 11px;
  }


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

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

    padding: 15px;

    border:
      1px solid #DCE8EF;

    border-radius: 13px;

    background: #FFFFFF;

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


  .rh-mobile-section-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;
  }


  .rh-mobile-section-title {
    color: #081C2D;

    font-size: 14px;

    font-weight: 720;
  }


  .rh-mobile-section-more {
    border: 0;

    background: transparent;

    color: #078EA1 !important;

    font-size: 11px !important;

    cursor: pointer;
  }


  /* ==================================================
     KPI
  ================================================== */

  .rh-mobile-kpi-grid {
    display: grid;

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

    gap: 9px;
  }


  .rh-mobile-kpi {
    position: relative;

    min-height: 92px;

    box-sizing: border-box;

    padding: 12px;

    border:
      1px solid #DDE9EF;

    border-radius: 11px;

    background:
      linear-gradient(
        145deg,
        #FFFFFF,
        #F9FCFD
      );

    text-align: left;

    cursor: pointer;

    box-shadow:
      0 2px 7px
      rgba(26,70,88,.04);
  }


  .rh-mobile-kpi:active {
    transform:
      scale(.985);
  }


  .rh-mobile-kpi-icon {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 8px;

    border-radius: 8px;

    background: #E4F6F8;

    color: #078EA1;

    font-size: 15px;
  }


  .rh-mobile-kpi-value {
    color: #081C2D;

    font-size: 25px;

    font-weight: 760;

    line-height: 1;
  }


  .rh-mobile-kpi-label {
    margin-top: 7px;

    color: #4D6577;

    font-size: 10px;
  }


  .rh-mobile-kpi-arrow {
    position: absolute;

    top: 12px;
    right: 11px;

    color: #90A7B4;

    font-size: 14px;
  }


  .rh-mobile-kpi.danger
  .rh-mobile-kpi-icon {
    background: #FDEAEA;
    color: #D94747;
  }


  .rh-mobile-kpi.waiting
  .rh-mobile-kpi-icon {
    background: #FFF2DF;
    color: #D7791D;
  }


  /* ==================================================
     AI
  ================================================== */

  .rh-mobile-ai {
    position: relative;

    overflow: hidden;

    padding: 17px;

    border:
      1px solid #0B6073;

    border-radius: 13px;

    background:
      linear-gradient(
        115deg,
        #073E50 0%,
        #075467 100%
      );

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


  .rh-mobile-ai::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    top: -95px;
    right: -60px;

    border-radius: 50%;

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


  .rh-mobile-ai-title {
    position: relative;

    z-index: 2;

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 720;
  }


  .rh-mobile-ai-text {
    position: relative;

    z-index: 2;

    margin-top: 4px;

    color: #C8E0E6;

    font-size: 10px;

    line-height: 1.6;
  }


  .rh-mobile-ai-button {
    position: relative;

    z-index: 2;

    width: 100%;

    height: 40px;

    margin-top: 14px;

    border:
      1px solid #20A0B1;

    border-radius: 8px;

    background: #078EA1;

    color: #FFFFFF !important;

    font-size: 11px !important;

    font-weight: 650;

    cursor: pointer;
  }


  /* ==================================================
     PRIORITY TASK
  ================================================== */

  .rh-mobile-task-list {
    display: flex;

    flex-direction: column;

    gap: 7px;
  }


  .rh-mobile-task {
    width: 100%;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
      1fr auto;

    gap: 10px;

    padding: 12px 10px;

    border:
      1px solid #E0EAF0;

    border-radius: 9px;

    background: #FFFFFF;

    text-align: left;

    cursor: pointer;
  }


  .rh-mobile-task:active {
    background: #F5FBFC;
  }


  .rh-mobile-task-name {
    overflow: hidden;

    color: #102536;

    font-size: 11px;

    font-weight: 680;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .rh-mobile-task-action {
    overflow: hidden;

    max-width: 220px;

    margin-top: 5px;

    color: #536A7A;

    font-size: 9px;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .rh-mobile-task-date {
    color: #526A7B;

    font-size: 9px;

    white-space: nowrap;

    text-align: right;
  }


  .rh-mobile-task-tag {
    display: inline-block;

    margin-top: 5px;

    padding: 3px 6px;

    border-radius: 5px;

    background: #DDF5F8;

    color: #067386;

    font-size: 8px;
  }


  .rh-mobile-task-tag.overdue {
    background: #FDEAEA;
    color: #C53F3F;
  }


  .rh-mobile-empty {
    padding: 25px 10px;

    text-align: center;

    color: #708493;

    font-size: 10px;
  }


  /* ==================================================
     MOBILE DRILLDOWN
  ================================================== */

  .rh-mobile-sheet {
    position: fixed;

    inset: 0;

    z-index: 17000;

    display: none;

    background:
      rgba(10,25,38,.28);
  }


  .rh-mobile-sheet.open {
    display: block;
  }


  .rh-mobile-sheet-panel {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    max-height: 88vh;

    overflow-y: auto;

    box-sizing: border-box;

    padding:
      17px
      14px
      calc(
        18px
        + env(safe-area-inset-bottom)
      );

    border-radius:
      18px 18px 0 0;

    background: #FFFFFF;

    box-shadow:
      0 -10px 30px
      rgba(15,40,55,.16);
  }


  .rh-mobile-sheet-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;
  }


  .rh-mobile-sheet-title {
    color: #081C2D;

    font-size: 16px;

    font-weight: 720;
  }


  .rh-mobile-sheet-close {
    width: 34px;
    height: 34px;

    border:
      1px solid #DCE8EF;

    border-radius: 9px;

    background: #F7FAFB;

    color: #526979 !important;

    font-size: 19px !important;
  }


  .rh-mobile-sheet-task {
    width: 100%;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
      1fr auto;

    gap: 9px;

    margin-bottom: 8px;

    padding: 12px;

    border:
      1px solid #E0EAF0;

    border-radius: 9px;

    background: #FFFFFF;

    text-align: left;
  }


  .rh-mobile-sheet-task-name {
    color: #102536;

    font-size: 11px;

    font-weight: 680;
  }


  .rh-mobile-sheet-task-sub {
    margin-top: 4px;

    color: #637888;

    font-size: 9px;
  }


  .rh-mobile-sheet-task-status {
    color: #087F91;

    font-size: 9px;

    text-align: right;
  }


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

  .rh-mobile-home-loading {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 70vh;

    color: #617687;

    font-size: 11px;
  }

}