/* ======================================================
   REEHOR WORK
   MOBILE PROJECT DETAIL V1
====================================================== */

.rh-mobile-project-header {
  display: none;
}


@media (max-width: 768px) {

  /* ==================================================
     OVERLAY
  ================================================== */

  .drawer-overlay.rh-mobile-project-overlay {
    position: fixed !important;

    inset: 0 !important;

    z-index: 19000 !important;

    display: block !important;

    overflow: hidden !important;

    background: #F4F8FB !important;
  }


  .rh-mobile-project-drawer {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
      calc(
        59px
        + env(safe-area-inset-top)
      )
      14px
      calc(
        25px
        + env(safe-area-inset-bottom)
      )
      !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #F4F8FB !important;

    box-shadow: none !important;

    -webkit-overflow-scrolling: touch;
  }


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

  .rh-mobile-project-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 19020;

    height:
      calc(
        54px
        + env(safe-area-inset-top)
      );

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
      80px 1fr 80px;

    align-items: end;

    padding:
      env(safe-area-inset-top)
      8px
      7px;

    border-bottom:
      1px solid #DCE8EF;

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

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

    backdrop-filter: blur(12px);
  }


  .rh-mobile-project-back {
    height: 38px;

    display: flex;

    align-items: center;

    gap: 3px;

    padding: 0 8px;

    border: 0;

    background: transparent;

    color: #087E91 !important;

    font-size: 13px !important;

    font-weight: 650;

    cursor: pointer;
  }


  .rh-mobile-project-back-symbol {
    font-size: 23px;

    line-height: 1;
  }


  .rh-mobile-project-header-title {
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #081C2D;

    font-size: 15px;

    font-weight: 720;
  }


  /* 原关闭按钮手机版隐藏 */
  .rh-mobile-project-drawer
  :where(
    .drawer-close,
    .close-drawer,
    .drawer-close-button
  ) {
    display: none !important;
  }


  /* ==================================================
     EXISTING PROJECT CONTENT
  ================================================== */

  .rh-mobile-project-drawer
  :where(
    .card,
    .panel,
    .section-card
  ) {
    width: 100% !important;

    box-sizing: border-box !important;

    margin-bottom: 12px !important;

    padding: 15px !important;

    border:
      1px solid #DCE8EF !important;

    border-radius: 12px !important;

    background: #FFFFFF !important;

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


  .rh-mobile-project-drawer
  :where(
    h1,
    h2,
    .project-title,
    .drawer-title
  ) {
    color: #081C2D !important;

    font-size: 20px !important;

    line-height: 1.35 !important;

    overflow-wrap: anywhere;
  }


  .rh-mobile-project-drawer
  :where(
    label,
    .field-label
  ) {
    color: #40596B !important;

    font-size: 11px !important;

    font-weight: 650 !important;
  }


  .rh-mobile-project-drawer
  :where(
    input,
    select,
    textarea
  ) {
    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    border:
      1px solid #D3E1E8 !important;

    border-radius: 8px !important;

    background: #FFFFFF !important;

    color: #172D3E !important;
  }


  /* ==================================================
     MOBILE PROJECT TASK PANEL
  ================================================== */

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

    box-sizing: border-box;

    margin: 13px 0;

    padding: 15px;

    border:
      1px solid #DCE8EF;

    border-radius: 12px;

    background: #FFFFFF;

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


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

    font-size: 13px;

    font-weight: 720;
  }


  .rh-mobile-project-panel-subtitle {
    margin-top: 3px;

    color: #617687;

    font-size: 9px;
  }


  /* ==================================================
     SUMMARY
  ================================================== */

  .rh-mobile-project-summary {
    display: grid;

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

    gap: 8px;

    margin-top: 12px;
    margin-bottom: 14px;
  }


  .rh-mobile-project-summary-item {
    padding: 11px 7px;

    border:
      1px solid #E0EAF0;

    border-radius: 9px;

    background: #F8FBFC;

    text-align: center;
  }


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

    font-size: 21px;

    font-weight: 760;
  }


  .rh-mobile-project-summary-label {
    margin-top: 4px;

    color: #5F7585;

    font-size: 9px;
  }


  /* ==================================================
     TASK LIST
  ================================================== */

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

    flex-direction: column;

    gap: 7px;
  }


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

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
      minmax(0,1fr)
      auto
      18px;

    align-items: center;

    gap: 9px;

    padding: 12px 10px;

    border:
      1px solid #E0EAF0;

    border-radius: 9px;

    background: #FFFFFF;

    text-align: left;

    cursor: pointer;
  }


  .rh-mobile-project-task-row:active {
    background: #F4FAFB;
  }


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

    color: #102536;

    font-size: 11px;

    font-weight: 680;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .rh-mobile-project-task-meta {
    overflow: hidden;

    margin-top: 4px;

    color: #617687;

    font-size: 9px;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .rh-mobile-project-task-status {
    max-width: 90px;

    padding: 4px 7px;

    border-radius: 6px;

    background: #DDF5F8;

    color: #067386;

    font-size: 8px;

    white-space: nowrap;
  }


  .rh-mobile-project-task-status.completed {
    background: #E8F6F0;

    color: #117252;
  }


  .rh-mobile-project-task-status.overdue {
    background: #FDEAEA;

    color: #C53F3F;
  }


  .rh-mobile-project-task-arrow {
    color: #8BA3B1;

    font-size: 18px;
  }


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

    text-align: center;

    color: #718491;

    font-size: 10px;
  }


  /* ==================================================
     PROJECT ACTIONS
  ================================================== */

  .rh-mobile-project-drawer
  #project-actions-final-panel {
    width: 100% !important;

    box-sizing: border-box !important;

    margin:
      16px 0 5px !important;

    padding:
      16px !important;

    border:
      1px solid #DCE8EF !important;

    border-radius:
      12px !important;

    background:
      #FFFFFF !important;

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


  .rh-mobile-project-drawer
  .project-actions-button-grid {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }


  .rh-mobile-project-drawer
  .project-actions-complete {
    width: 100% !important;

    min-height: 46px !important;

    border: 0 !important;

    border-radius: 8px !important;

    background: #078EA1 !important;

    color: #FFFFFF !important;

    font-size: 12px !important;

    font-weight: 700 !important;
  }


  .rh-mobile-project-drawer
  :where(
    .project-actions-delete,
    .project-actions-delete-full
  ) {
    width: 100% !important;

    min-height: 44px !important;

    margin-top: 0 !important;

    border:
      1px solid #E2BEBE !important;

    border-radius: 8px !important;

    background: #FFFFFF !important;

    color: #B04444 !important;

    font-size: 11px !important;
  }


  .rh-mobile-project-drawer
  .project-actions-note {
    margin-top: 9px !important;

    color: #5E7383 !important;
  }


  /* project modal */
  .project-actions-final-modal-overlay {
    z-index: 21000 !important;

    align-items: flex-end !important;
  }


  .project-actions-final-modal {
    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    padding:
      20px 16px
      calc(
        20px
        + env(safe-area-inset-bottom)
      )
      !important;

    border-radius:
      18px 18px 0 0
      !important;
  }


  /* ==================================================
     BOTTOM NAV
  ================================================== */

  body.rh-mobile-project-open
  .mobile-bottom-nav,

  body.rh-mobile-project-open
  .mobile-install-app {

    display: none !important;
  }

}