/* Shared vertical page shell spacing helpers. */

.p-2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-main > .page-shell,
.app-main > .page-shell.p-2 {
  padding: 0 !important;
  margin: 0 !important;
}

.p-2 > .el-row,
.p-2 > .el-card,
.p-2 > .search-wrap,
.p-2 > div,
.p-2 > section {
  margin-bottom: 0 !important;
}

.page-shell > .el-row,
.page-shell > .el-card,
.page-shell > .search-wrap,
.page-shell > div,
.page-shell > section {
  margin-bottom: 0 !important;
}

/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */

@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) {
  .data-table {
    :deep(.el-button.is-link) {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: $background;
    }
  }
}

@mixin toolbar-responsive($mobile-breakpoint: 900px) {
  @media (max-width: $mobile-breakpoint) {
    .toolbar-shell {
      align-items: flex-start;
    }
  }
}

@mixin content-stack($gap: 12px) {
  .content-main {
    display: flex;
    flex-direction: column;
    gap: $gap;
  }
}

@mixin dept-tree-panel($padding-top: 6px) {
  .dept-tree {
    padding-top: $padding-top;
  }
}

@mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
  @include action-link-buttons($background);
  @include toolbar-responsive($mobile-breakpoint);
}

@mixin tree-table-crud-page($mobile-breakpoint: 900px, $gap: 12px, $tree-padding-top: 6px, $background: rgba(53, 109, 255, 0.08)) {
  @include content-stack($gap);
  @include dept-tree-panel($tree-padding-top);
  @include table-crud-page($mobile-breakpoint, $background);
}