/* ======================================================
   REEHOR WORK MOBILE APP V1
====================================================== */

.mobile-bottom-nav,
.mobile-install-app {
  display: none;
}


/* ======================================================
   PHONE
====================================================== */

@media (max-width: 768px) {

  html,
  body {
    width: 100%;

    min-width: 0 !important;

    overflow-x: hidden;

    background: #F4F8FB;
  }


  body {
    padding-bottom: 72px !important;
  }


  /* --------------------------------------------------
     左侧电脑导航隐藏
  -------------------------------------------------- */

  :where(
    .sidebar,
    .app-sidebar,
    .side-nav
  ) {
    display: none !important;
  }


  /* --------------------------------------------------
     主内容铺满
  -------------------------------------------------- */

  :where(
    .main-content,
    .page-content,
    .app-content,
    .dashboard-content,
    main
  ) {
    width: 100% !important;

    max-width: none !important;

    margin-left: 0 !important;

    padding-left: 14px !important;

    padding-right: 14px !important;

    box-sizing: border-box;
  }


  /* --------------------------------------------------
     Header
  -------------------------------------------------- */

  :where(
    header,
    .topbar,
    .top-bar,
    .app-header,
    .page-header
  ) {
    padding-left: 14px !important;

    padding-right: 14px !important;
  }


  h1,
  .page-title,
  .dashboard-title {
    font-size: 21px !important;

    line-height: 1.25;
  }


  /* --------------------------------------------------
     Card
  -------------------------------------------------- */

  :where(
    .card,
    .panel,
    .dashboard-card,
    .dashboard-panel,
    .todo-card,
    .todo-panel,
    .table-card,
    .ai-card,
    .ai-panel
  ) {
    border-radius: 12px !important;
  }


  /* --------------------------------------------------
     KPI：
     手机端统一两列
  -------------------------------------------------- */

  :where(
    .dashboard-grid,
    .kpi-grid,
    .metric-grid,
    .stats-grid
  ) {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;

    gap: 10px !important;
  }


  :where(
    .metric-card,
    .kpi-card
  ) {
    min-width: 0 !important;

    min-height: 112px;
  }


  /* --------------------------------------------------
     AI
  -------------------------------------------------- */

  .employee-ai-assistant,
  .rh-ai-dark-bar {
    flex-direction: column;

    align-items: stretch !important;

    gap: 12px;
  }


  .employee-ai-button {
    width: 100%;
  }


  /* --------------------------------------------------
     表格：
     手机允许横向滚动
  -------------------------------------------------- */

  table {
    min-width: 650px;
  }


  :where(
    .table-card,
    .table-wrapper,
    .table-container
  ) {
    overflow-x: auto;
  }


  /* --------------------------------------------------
     Drawer：
     手机改成整页
  -------------------------------------------------- */

  :where(
    .drawer,
    .drawer-panel,
    .drawer-content,
    .employee-drilldown-drawer
  ) {
    width: 100vw !important;

    max-width: 100vw !important;

    left: 0 !important;

    right: 0 !important;

    border-left: 0 !important;

    border-radius: 0 !important;
  }


  /* --------------------------------------------------
     表单
  -------------------------------------------------- */

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }


  input,
  select {
    min-height: 44px;
  }


  textarea {
    min-height: 90px;
  }


  /* --------------------------------------------------
     时间选择
  -------------------------------------------------- */

  .reehor-hour-picker {
    grid-template-columns:
      minmax(0, 1fr)
      90px
      64px !important;

    gap: 6px;
  }


  /* --------------------------------------------------
     手机底部导航
  -------------------------------------------------- */

  .mobile-bottom-nav {
    position: fixed;

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

    z-index: 15000;

    height:
      calc(
        62px
        + env(safe-area-inset-bottom)
      );

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
      repeat(5, 1fr);

    padding:
      5px 5px
      calc(
        5px
        + env(safe-area-inset-bottom)
      );

    border-top:
      1px solid #DCE8EF;

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

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

    backdrop-filter:
      blur(12px);
  }


  .mobile-bottom-item {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    border: 0;

    background: transparent;

    color: #536A7A !important;

    font-size: 11px !important;

    cursor: pointer;
  }


  .mobile-bottom-icon {
    font-size: 20px;

    line-height: 1;
  }


  .mobile-bottom-item.active {
    color: #078EA1 !important;

    font-weight: 700;
  }


  .mobile-bottom-item.quick {
    color: #FFFFFF !important;
  }


  .mobile-bottom-item.quick
  .mobile-bottom-icon {
    width: 42px;

    height: 42px;

    margin-top: -20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #078EA1;

    color: #FFFFFF;

    font-size: 27px;

    box-shadow:
      0 5px 15px
      rgba(7,142,161,.30);
  }


  .mobile-bottom-item.quick
  .mobile-bottom-label {
    margin-top: -2px;

    color: #536A7A;
  }


  /* --------------------------------------------------
     PWA安装按钮
  -------------------------------------------------- */

  .mobile-install-app {
    position: fixed;

    right: 14px;

    bottom:
      calc(
        76px
        + env(safe-area-inset-bottom)
      );

    z-index: 14500;

    height: 38px;

    padding: 0 14px;

    border: 0;

    border-radius: 19px;

    background: #063C4D;

    color: #FFFFFF !important;

    font-size: 12px !important;

    font-weight: 650;

    box-shadow:
      0 5px 16px
      rgba(6,60,77,.24);

    cursor: pointer;
  }


  /* --------------------------------------------------
     手机下钻
  -------------------------------------------------- */

  .employee-drilldown-row {
    grid-template-columns:
      minmax(0,1fr)
      90px
      20px
      !important;

    min-height: 78px;
  }


  .employee-drilldown-action,
  .employee-drilldown-date {
    display: none !important;
  }

}


/* ======================================================
   SMALL PHONE
====================================================== */

@media (max-width: 420px) {

  :where(
    .dashboard-grid,
    .kpi-grid,
    .metric-grid,
    .stats-grid
  ) {
    gap: 8px !important;
  }


  :where(
    .metric-card,
    .kpi-card
  ) {
    padding: 12px !important;
  }


  .reehor-hour-picker {
    grid-template-columns:
      1fr 78px !important;
  }


  .reehor-hour-picker-confirm {
    grid-column:
      1 / -1 !important;
  }

}