/**
 * 蓝寻 Layout System V2.0 - 响应式规则
 * 标准断点：390 / 768 / 1024 / 1366 / 1440 / 1600 / 1920。
 */

/* 小于 390：紧凑手机 */
@media (max-width: 389px) {
  .lx-layout {
    --lx-page-padding: 12px;
  }

  .lx-header {
    gap: var(--lx-space-8);
  }

  .lx-header__actions {
    gap: 0;
  }

  .lx-page__title {
    font-size: var(--lx-font-size-2xl);
  }

  .lx-toolbar,
  .lx-content__header,
  .lx-content__body,
  .lx-content__footer {
    padding-right: var(--lx-space-12);
    padding-left: var(--lx-space-12);
  }
}

/* 390 - 767：标准手机 */
@media (min-width: 390px) and (max-width: 767px) {
  .lx-layout {
    --lx-page-padding: 16px;
  }
}

/* 1024 以下：侧栏改为移动 Drawer */
@media (max-width: 1023px) {
  .lx-layout,
  .lx-layout--sidebar-collapsed {
    --lx-layout-sidebar-current: 0px;

    grid-template:
      "header" var(--lx-topbar-height)
      "page" minmax(0, 1fr)
      "footer" auto /
      minmax(0, 1fr);
  }

  .lx-layout__sidebar {
    display: none;
  }

  .lx-header__menu-button,
  .lx-header__logo {
    display: inline-flex;
  }

  .lx-header__breadcrumbs {
    display: none;
  }

  .lx-header__search {
    flex-basis: 240px;
  }

  .lx-sidebar__collapse {
    display: none;
  }
}

/* 768 以下：移动优先内容结构 */
@media (max-width: 767px) {
  .lx-header {
    gap: var(--lx-space-8);
    padding-right: var(--lx-page-padding);
    padding-left: var(--lx-page-padding);
  }

  .lx-header__leading {
    gap: var(--lx-space-8);
  }

  .lx-header__search,
  .lx-header__action--desktop,
  .lx-header__user-copy,
  .lx-header__logout {
    display: none;
  }

  .lx-header__user {
    margin-left: 0;
    padding-left: var(--lx-space-8);
  }

  .lx-page {
    padding-bottom: calc(var(--lx-space-64) + env(safe-area-inset-bottom));
  }

  .lx-page__heading {
    display: block;
    margin-bottom: var(--lx-space-16);
  }

  .lx-page__title {
    font-size: var(--lx-font-size-2xl);
  }

  .lx-page__primary-actions {
    justify-content: flex-start;
    margin-top: var(--lx-space-16);
  }

  .lx-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lx-space-12);
    margin-bottom: var(--lx-space-16);
  }

  .lx-dashboard__value {
    font-size: var(--lx-font-size-2xl);
  }

  .lx-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: var(--lx-space-12);
  }

  .lx-toolbar__group {
    width: 100%;
  }

  .lx-toolbar__search,
  .lx-toolbar__group .lx-search,
  .lx-toolbar__group .lx-input,
  .lx-toolbar__group .lx-select {
    width: 100%;
  }

  .lx-content__header,
  .lx-content__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .lx-content__footer {
    align-items: stretch;
  }

  .lx-content__footer .lx-pagination {
    justify-content: center;
    width: 100%;
  }

  .lx-footer {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .lx-bottom-nav {
    display: flex;
  }

  .lx-detail-drawer__panel {
    width: 100vw;
  }
}

/* 768 - 1023：平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  .lx-layout {
    --lx-page-padding: 20px;
  }

  .lx-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1024 - 1365：小型桌面 */
@media (min-width: 1024px) and (max-width: 1365px) {
  .lx-layout {
    --lx-sidebar-width: 216px;
    --lx-layout-content-max: 1180px;
    --lx-page-padding: 20px;
  }

  .lx-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lx-header__search {
    flex-basis: 220px;
  }

  .lx-header__action--optional {
    display: none;
  }
}

/* 1366 - 1439：标准办公屏 */
@media (min-width: 1366px) and (max-width: 1439px) {
  .lx-layout {
    --lx-sidebar-width: 224px;
    --lx-layout-content-max: 1280px;
  }

  .lx-dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 1440 - 1599：中型桌面 */
@media (min-width: 1440px) and (max-width: 1599px) {
  .lx-layout {
    --lx-sidebar-width: 232px;
    --lx-layout-content-max: 1360px;
  }
}

/* 1600 - 1919：宽屏 */
@media (min-width: 1600px) and (max-width: 1919px) {
  .lx-layout {
    --lx-sidebar-width: 240px;
    --lx-layout-content-max: 1480px;
    --lx-page-padding: 28px;
  }
}

/* 1920 及以上：超宽屏，内容保持可读宽度 */
@media (min-width: 1920px) {
  .lx-layout {
    --lx-sidebar-width: 248px;
    --lx-layout-content-max: 1600px;
    --lx-page-padding: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-layout,
  .lx-layout * {
    scroll-behavior: auto;
  }
}
