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

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


@media (max-width: 768px) {

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

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

    inset: 0 !important;

    z-index: 20000 !important;

    display: block !important;

    background: #F4F8FB !important;

    overflow: hidden !important;
  }


  /*
   * 真正的任务Drawer。
   */
  .rh-mobile-task-drawer {
    position: fixed !important;

    inset: 0 !important;

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

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

    margin: 0 !important;

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

    box-sizing: border-box !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;
  }


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

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

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

    z-index: 20020;

    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-task-back {
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 3px;

    padding: 0 8px;

    border: 0;

    background: transparent;

    color: #087E91 !important;

    font-size: 13px !important;

    font-weight: 600;

    cursor: pointer;
  }


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

    line-height: 1;
  }


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

    display: flex;

    align-items: center;

    justify-content: center;

    color: #081C2D;

    font-size: 15px;

    font-weight: 720;
  }


  /* ==================================================
     OLD CLOSE BUTTON
     手机版使用自己的返回按钮
  ================================================== */

  .rh-mobile-task-drawer
  :where(
    .drawer-close,
    .close-drawer,
    .drawer-close-button
  ) {
    display: none !important;
  }


  /* ==================================================
     MAIN SECTIONS
  ================================================== */

  .rh-mobile-task-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;
  }


  /* ==================================================
     TASK TITLE
  ================================================== */

  .rh-mobile-task-drawer
  :where(
    h1,
    h2,
    .task-title,
    .drawer-title
  ) {
    max-width: 100%;

    color: #081C2D !important;

    font-size: 20px !important;

    line-height: 1.35 !important;

    overflow-wrap: anywhere;
  }


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

  .rh-mobile-task-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;
  }


  .rh-mobile-task-drawer
  :where(
    input,
    select
  ) {
    min-height: 46px !important;

    padding:
      0 11px !important;
  }


  .rh-mobile-task-drawer textarea {
    min-height: 118px !important;

    padding: 11px !important;

    line-height: 1.65 !important;
  }


  .rh-mobile-task-drawer
  :where(
    label,
    .field-label
  ) {
    display: block;

    margin-bottom: 6px;

    color: #40596B !important;

    font-size: 11px !important;

    font-weight: 650 !important;
  }


  /* ==================================================
     TASK V6 EXECUTION AREA
  ================================================== */

  .rh-mobile-task-drawer
  :where(
    .task-v6-grid,
    .task-execution-grid,
    .task-info-grid
  ) {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 13px !important;
  }


  .rh-mobile-task-drawer
  .task-v6-field {
    width: 100% !important;

    margin: 0 !important;
  }


  .rh-mobile-task-drawer
  .task-v6-readonly {
    min-height: 44px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    padding: 0 11px;

    border:
      1px solid #E1E9EE;

    border-radius: 8px;

    background: #F6F9FA;

    color: #354D5F !important;
  }


  /* ==================================================
     DATE + HOUR + CONFIRM
  ================================================== */

  .rh-mobile-task-drawer
  .reehor-hour-picker {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      minmax(0,1fr)
      88px !important;

    gap: 7px !important;
  }


  .rh-mobile-task-drawer
  .reehor-hour-picker-confirm {
    grid-column:
      1 / -1 !important;

    width: 100% !important;

    min-height: 42px !important;

    border: 0 !important;

    border-radius: 8px !important;

    background: #E4F6F8 !important;

    color: #067386 !important;

    font-weight: 650 !important;
  }


  /* ==================================================
     CONFIRM STATUS
  ================================================== */

  .rh-mobile-task-drawer
  :where(
    .task-v6-confirm,
    #task-v6-confirm,
    .task-confirm-status
  ) {
    width: 100% !important;

    min-height: 46px !important;

    margin-top: 4px !important;

    border: 0 !important;

    border-radius: 8px !important;

    background: #078EA1 !important;

    color: #FFFFFF !important;

    font-size: 12px !important;

    font-weight: 700 !important;
  }


  /* ==================================================
     NOTE BUTTONS
  ================================================== */

  .rh-mobile-task-drawer
  :where(
    .task-note-actions,
    .note-actions
  ) {
    display: grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap: 8px !important;
  }


  .rh-mobile-task-drawer
  :where(
    .task-note-actions button,
    .note-actions button
  ) {
    min-height: 42px !important;

    border-radius: 8px !important;
  }


  /* ==================================================
     TASK ACTIONS
  ================================================== */

  .rh-mobile-task-drawer
  #task-actions-final-panel,
  .rh-mobile-task-drawer
  #task-lifecycle-v2-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-task-drawer
  :where(
    .task-actions-final-buttons,
    .task-life-v2-actions
  ) {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }


  .rh-mobile-task-drawer
  :where(
    .task-actions-complete,
    .task-life-v2-complete,
    .task-actions-primary-full
  ) {
    width: 100% !important;

    min-height: 46px !important;

    border-radius:
      8px !important;

    font-size:
      12px !important;
  }


  .rh-mobile-task-drawer
  :where(
    .task-actions-delete,
    .task-life-v2-delete
  ) {
    width: 100% !important;

    min-height: 44px !important;

    border:
      1px solid #E2BEBE !important;

    border-radius:
      8px !important;

    background:
      #FFFFFF !important;

    color:
      #B04444 !important;

    font-size:
      11px !important;
  }


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

  :where(
    .task-actions-final-modal-overlay,
    .task-life-v2-modal-overlay
  ) {
    z-index:
      21000 !important;

    align-items:
      flex-end !important;
  }


  :where(
    .task-actions-final-modal,
    .task-life-v2-modal-box
  ) {
    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;
  }


  /* ==================================================
     HIDE PC-ONLY WASTE
  ================================================== */

  .rh-mobile-task-drawer
  :where(
    .desktop-only,
    .task-desktop-only
  ) {
    display: none !important;
  }


  /* ==================================================
     BOTTOM NAV
     打开任务详情时暂时隐藏
  ================================================== */

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

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

    display:
      none !important;
  }

}