/* ==========================================
 * Layui 页面布局结构样式
 * 基于layui框架的现代化页面布局
 * ========================================== */

/* ==========================================
 * 主布局容器
 * ========================================== */
.layui-layout-admin {
  position: relative;
  min-height: 100vh;
  background: var(--layui-bg-secondary);
}

/* 主体内容区域 */
.layui-layout-admin .layui-body {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow: auto;
  transition: var(--layui-transition-normal);
  background: var(--layui-bg-secondary);
  z-index: 1;
  width: calc(100% - 200px);
  height: calc(100vh - 60px);
}

/* 主体内容内部容器 */
.layui-layout-admin .layui-body .layui-fluid {
  padding: var(--layui-space-lg);
  min-height: calc(100vh - 60px);
  margin-top: 0;
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 200px);
}

/* 页面标题区域 */
.layui-layout-admin .layui-body .layui-page-header {
  background: var(--layui-bg-primary);
  padding: var(--layui-space-xl) var(--layui-space-lg);
  margin-bottom: var(--layui-space-lg);
  border-radius: var(--layui-radius-lg);
  box-shadow: var(--layui-shadow-sm);
  border: 1px solid var(--layui-border-light);
}

.layui-layout-admin .layui-body .layui-page-header h1 {
  margin: 0 0 var(--layui-space-sm) 0;
  font-size: var(--layui-font-size-2xl);
  font-weight: var(--layui-font-weight-semibold);
  color: var(--layui-text-primary);
}

.layui-layout-admin .layui-body .layui-page-header .layui-breadcrumb {
  margin: 0;
  font-size: var(--layui-font-size-sm);
  color: var(--layui-text-secondary);
}

.layui-layout-admin .layui-body .layui-page-header .layui-breadcrumb a {
  color: var(--layui-text-secondary);
}

.layui-layout-admin .layui-body .layui-page-header .layui-breadcrumb a:hover {
  color: var(--layui-primary);
}

.layui-layout-admin .layui-body .layui-page-header .layui-breadcrumb cite {
  color: var(--layui-text-primary);
  font-weight: var(--layui-font-weight-medium);
}

/* ==========================================
 * 卡片组件
 * ========================================== */
.layui-card {
  background: var(--layui-bg-primary);
  border-radius: var(--layui-radius-lg);
  box-shadow: var(--layui-shadow-sm);
  border: 1px solid var(--layui-border-light);
  margin-bottom: var(--layui-space-lg);
  overflow: hidden;
  transition: var(--layui-transition-normal);
}

.layui-card:hover {
  box-shadow: var(--layui-shadow-md);
  transform: translateY(-2px);
}

.layui-card .layui-card-header {
  padding: var(--layui-space-lg);
  border-bottom: 1px solid var(--layui-border-light);
  background: var(--layui-bg-primary);
  font-size: var(--layui-font-size-lg);
  font-weight: var(--layui-font-weight-medium);
  color: var(--layui-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layui-card .layui-card-header .layui-card-tools {
  display: flex;
  align-items: center;
  gap: var(--layui-space-sm);
}

.layui-card .layui-card-body {
  padding: var(--layui-space-lg);
}

.layui-card .layui-card-footer {
  padding: var(--layui-space-lg);
  border-top: 1px solid var(--layui-border-light);
  background: var(--layui-bg-secondary);
  font-size: var(--layui-font-size-sm);
  color: var(--layui-text-secondary);
}

/* ==========================================
 * 统计卡片
 * ========================================== */
.layui-stats-card {
  background: var(--layui-bg-primary);
  border-radius: var(--layui-radius-lg);
  padding: var(--layui-space-xl);
  box-shadow: var(--layui-shadow-sm);
  border: 1px solid var(--layui-border-light);
  transition: var(--layui-transition-normal);
  position: relative;
  overflow: hidden;
}

.layui-stats-card:hover {
  box-shadow: var(--layui-shadow-md);
  transform: translateY(-2px);
}

.layui-stats-card .layui-stats-icon {
  position: absolute;
  right: var(--layui-space-lg);
  top: var(--layui-space-lg);
  width: 48px;
  height: 48px;
  border-radius: var(--layui-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--layui-font-size-2xl);
  color: var(--layui-text-light);
  opacity: 0.8;
}

.layui-stats-card .layui-stats-content {
  position: relative;
  z-index: 1;
}

.layui-stats-card .layui-stats-number {
  font-size: var(--layui-font-size-3xl);
  font-weight: var(--layui-font-weight-bold);
  color: var(--layui-text-primary);
  margin-bottom: var(--layui-space-xs);
  line-height: 1;
}

.layui-stats-card .layui-stats-label {
  font-size: var(--layui-font-size-sm);
  color: var(--layui-text-secondary);
  margin-bottom: var(--layui-space-sm);
}

.layui-stats-card .layui-stats-trend {
  display: flex;
  align-items: center;
  font-size: var(--layui-font-size-xs);
  color: var(--layui-text-secondary);
}

.layui-stats-card .layui-stats-trend.up {
  color: var(--layui-success);
}

.layui-stats-card .layui-stats-trend.down {
  color: var(--layui-danger);
}

.layui-stats-card .layui-stats-trend .layui-icon {
  margin-right: var(--layui-space-xs);
}

/* 统计卡片颜色变体 */
.layui-stats-card.layui-stats-primary .layui-stats-icon {
  background: var(--layui-primary-gradient);
}

.layui-stats-card.layui-stats-success .layui-stats-icon {
  background: var(--layui-success);
}

.layui-stats-card.layui-stats-warning .layui-stats-icon {
  background: var(--layui-warning);
}

.layui-stats-card.layui-stats-danger .layui-stats-icon {
  background: var(--layui-danger);
}

.layui-stats-card.layui-stats-info .layui-stats-icon {
  background: var(--layui-info);
}

/* ==========================================
 * 网格布局
 * ========================================== */
.layui-grid {
  display: grid;
  gap: var(--layui-space-lg);
  margin-bottom: var(--layui-space-lg);
}

.layui-grid.layui-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

.layui-grid.layui-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.layui-grid.layui-grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 响应式网格 */
@media screen and (max-width: 1200px) {
  .layui-grid.layui-grid-cols-4,
  .layui-grid.layui-grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 992px) {
  .layui-grid.layui-grid-cols-3,
  .layui-grid.layui-grid-cols-4,
  .layui-grid.layui-grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .layui-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
 * 内容区域
 * ========================================== */
.layui-content {
  background: var(--layui-bg-primary);
  border-radius: var(--layui-radius-lg);
  padding: var(--layui-space-lg);
  margin-bottom: var(--layui-space-lg);
  box-shadow: var(--layui-shadow-sm);
  border: 1px solid var(--layui-border-light);
}

.layui-content-header {
  margin-bottom: var(--layui-space-lg);
  padding-bottom: var(--layui-space-md);
  border-bottom: 1px solid var(--layui-border-light);
}

.layui-content-header h2 {
  margin: 0;
  font-size: var(--layui-font-size-xl);
  font-weight: var(--layui-font-weight-semibold);
  color: var(--layui-text-primary);
}

.layui-content-header .layui-content-actions {
  margin-top: var(--layui-space-md);
  display: flex;
  gap: var(--layui-space-sm);
  flex-wrap: wrap;
}

/* ==========================================
 * 工具栏
 * ========================================== */
.layui-toolbar {
  background: var(--layui-bg-primary);
  border-radius: var(--layui-radius-lg);
  padding: var(--layui-space-md);
  margin-bottom: var(--layui-space-lg);
  box-shadow: var(--layui-shadow-sm);
  border: 1px solid var(--layui-border-light);
  display: flex;
  align-items: center;
  gap: var(--layui-space-sm);
  flex-wrap: wrap;
}

.layui-toolbar .layui-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--layui-space-sm);
}

.layui-toolbar .layui-toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--layui-border-light);
  margin: 0 var(--layui-space-sm);
}

/* ==========================================
 * 响应式适配
 * ========================================== */
@media screen and (max-width: 768px) {
  .layui-layout-admin .layui-body {
    left: 0;
    transition: left 0.3s ease;
  }
  
  .layui-layout-admin .layui-body .layui-fluid {
    padding: var(--layui-space-md);
  }
  
  .layui-layout-admin .layui-body .layui-page-header {
    padding: var(--layui-space-lg) var(--layui-space-md);
  }
  
  .layui-card .layui-card-header,
  .layui-card .layui-card-body,
  .layui-card .layui-card-footer {
    padding: var(--layui-space-md);
  }
  
  .layui-stats-card {
    padding: var(--layui-space-lg);
  }
  
  .layui-content {
    padding: var(--layui-space-md);
  }
  
  .layui-toolbar {
    padding: var(--layui-space-sm);
  }
}

/* 侧边栏折叠时的主体适配 */
.layui-layout-admin.layui-layout-admin-shrink .layui-body {
  left: 60px;
}

/* ==========================================
 * 暗色模式支持
 * ========================================== */
@media (prefers-color-scheme: dark) {
  .layui-layout-admin .layui-body {
    background: var(--layui-bg-darker);
  }
  
  .layui-layout-admin .layui-body .layui-page-header {
    background: var(--layui-bg-dark);
    border-color: var(--layui-border-dark);
  }
  
  .layui-card {
    background: var(--layui-bg-dark);
    border-color: var(--layui-border-dark);
  }
  
  .layui-card .layui-card-header {
    background: var(--layui-bg-dark);
    border-color: var(--layui-border-dark);
  }
  
  .layui-card .layui-card-footer {
    background: var(--layui-bg-darker);
    border-color: var(--layui-border-dark);
  }
  
  .layui-stats-card {
    background: var(--layui-bg-dark);
    border-color: var(--layui-border-dark);
  }
  
  .layui-content {
    background: var(--layui-bg-dark);
    border-color: var(--layui-border-dark);
  }
  
  .layui-content-header {
    border-color: var(--layui-border-dark);
  }
  
  .layui-toolbar {
    background: var(--layui-bg-dark);
    border-color: var(--layui-border-dark);
  }
  
  .layui-toolbar .layui-toolbar-separator {
    background: var(--layui-border-dark);
  }
}