/* 班组履职评价系统 V1.7.3
 * 移动端权限详情与权限筛选恢复单层自然滚动；操作按钮位于内容流末尾。
 * 权限页签继续吸顶，桌面端及既有权限、业务规则保持不变。
 */

/* 桌面端延续历史布局；包装层仅在移动端承担滚动。 */
.permission-detail-scroll,
.permission-filter-scroll {
  display: contents;
}

.permission-detail-actions[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .permission-detail-backdrop {
    block-size: 100dvh;
    height: 100dvh;
    overflow: hidden;
  }

  /* 抽屉只限定可视高度；内部包装层是唯一纵向滚动容器。 */
  .permission-detail-drawer {
    display: block;
    block-size: calc(100vh - 48px);
    height: calc(100vh - 48px);
    block-size: calc(100dvh - 48px);
    height: calc(100dvh - 48px);
    max-block-size: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
  }

  /* 统一在此设置一次左右留白，不使用负边距或宽度补偿。 */
  .permission-detail-scroll {
    display: block;
    inline-size: 100%;
    width: 100%;
    block-size: 100%;
    height: 100%;
    min-inline-size: 0;
    min-width: 0;
    min-block-size: 0;
    min-height: 0;
    max-inline-size: 100%;
    max-width: 100%;
    margin: 0;
    margin-inline: 0;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-block: 16px;
    scroll-padding-block-end: calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* 顶部资料随内容滚动；关闭按钮只由身份行避让。 */
  .permission-detail-head {
    position: relative;
    top: auto;
    max-inline-size: 100%;
    max-width: 100%;
    margin: 0;
    margin-inline: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .permission-detail-head > div {
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
  }

  .permission-detail-head .close {
    right: 0;
  }

  .permission-detail-identity {
    padding-right: 56px;
  }

  .permission-detail-meta,
  .permission-detail-stats,
  .permission-detail-panel,
  .permission-group,
  .permission-change-box {
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
  }

  /* 页签仍在唯一滚动容器顶部吸附。 */
  .permission-detail-tabs {
    position: sticky;
    z-index: 6;
    top: 0;
    margin-right: 0;
    margin-left: 0;
    margin-inline: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .permission-change-box textarea {
    font-size: 16px;
    scroll-margin-block-end: 20px;
  }

  /* 取消/保存回到正常内容流，随滚动及 iOS 回弹一起移动。 */
  .permission-detail-actions {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 9px;
    margin: 16px 0 0;
    margin-inline: 0;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e4ebf1;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
  }

  .permission-detail-actions .btn {
    inline-size: auto;
    width: auto;
    min-inline-size: 0;
    min-width: 0;
    min-height: 48px;
    flex: 1 1 0;
  }

  .permission-detail-panel[data-permission-panel="history"] {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* 筛选抽屉同样只保留一个纵向滚动层。 */
  .permission-filter-panel {
    display: block;
    height: min(90vh, 760px);
    height: min(90dvh, 760px);
    max-height: min(90vh, 760px);
    max-height: min(90dvh, 760px);
    padding: 0;
    overflow: hidden;
  }

  .permission-filter-scroll {
    display: block;
    inline-size: 100%;
    width: 100%;
    block-size: 100%;
    height: 100%;
    min-inline-size: 0;
    min-width: 0;
    min-block-size: 0;
    min-height: 0;
    max-inline-size: 100%;
    max-width: 100%;
    margin: 0;
    margin-inline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding-block: 16px;
    scroll-padding-block-end: calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .permission-filter-panel .mobile-filter-head {
    position: static;
    top: auto;
  }

  /* 筛选仅保留全宽查询按钮，并置于最后筛选项之后。 */
  .permission-filter-panel .mobile-filter-actions {
    position: static;
    inset: auto;
    display: block;
    margin: 0;
    padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 0;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
  }

  .permission-filter-panel .mobile-filter-actions .btn.primary {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
}

@media (max-width: 430px) {
  .permission-detail-actions {
    display: flex;
    grid-template-columns: none;
  }

  .permission-detail-actions .btn {
    inline-size: auto;
    width: auto;
  }
}