/* ==========================================================================
   布局系统 (Layout)
   ========================================================================== */

/* --- 容器 (Container) --- */
.zuoekai-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}

/* 响应式断点 (与 Tailwind 默认断点一致) */
@media (min-width: 640px) {
  .zuoekai-container { max-width: 640px; }
}

@media (min-width: 768px) {
  .zuoekai-container { max-width: 768px; }
}

@media (min-width: 1024px) {
  .zuoekai-container { max-width: 1024px; }
}

@media (min-width: 1280px) {
  .zuoekai-container { max-width: 1280px; }
}

@media (min-width: 1536px) {
  .zuoekai-container { max-width: 1536px; }
}

/* 流式容器 (Fluid) */
.zuoekai-container--fluid {
  max-width: 100%;
}

/* --- 区域 (Section) --- */
.zuoekai-section {
  padding: 40px 0;
  position: relative;
}

.zuoekai-section--sm { padding: 24px 0; }
.zuoekai-section--lg { padding: 80px 0; }

.zuoekai-section--light { background-color: var(--zuoekai-color-surface-page); }
.zuoekai-section--gray { background-color: var(--zuoekai-color-surface-hover); }
.zuoekai-section--dark { 
  background-color: #111827; 
  color: white;
}

.zuoekai-panel-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zuoekai-panel-header {
  padding: 24px;
  border-bottom: 1px solid var(--zuoekai-color-border);
}

.zuoekai-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--zuoekai-color-text);
  line-height: 1.3;
}

.zuoekai-panel-title svg {
  width: 24px;
  height: 24px;
  color: var(--zuoekai-color-text-secondary);
}

.zuoekai-panel-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--zuoekai-color-text-secondary);
}

.zuoekai-soft-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--zuoekai-radius-lg);
  border: 1px solid var(--zuoekai-color-border);
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
}

.zuoekai-soft-panel__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--zuoekai-color-text-secondary);
  margin-right: 4px;
}

.zuoekai-mb-4 {
  margin-bottom: 16px;
}

.zuoekai-mb-6 {
  margin-bottom: 24px;
}

.zuoekai-mt-2 {
  margin-top: 8px;
}

.zuoekai-mt-4 {
  margin-top: 16px;
}

.zuoekai-pagination-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.zuoekai-divided > * + * {
  border-top: 1px solid var(--zuoekai-color-border);
}

.zuoekai-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* 筛选行 - 右对齐变体：内容靠右（适用于操作按钮行） */
.zuoekai-filter-row--end {
  justify-content: flex-end;
}

/* 筛选行 - 上间距变体：与上方内容分隔（适用于表单底部保存按钮行） */
.zuoekai-filter-row--mt {
  margin-top: 24px;
}

.zuoekai-card-grid {
  display: grid;
  gap: 24px;
}

.zuoekai-card-grid--stores {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .zuoekai-card-grid--stores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .zuoekai-card-grid--stores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 栅格系统 (Simple Grid) --- */
/* 基于 Flexbox 的 12 列栅格 */

.zuoekai-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

.zuoekai-col {
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  flex: 1 0 0%; /* Auto width */
}

/* 预定义列宽 */
.zuoekai-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.zuoekai-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.zuoekai-col-3 { flex: 0 0 25%; max-width: 25%; }
.zuoekai-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.zuoekai-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.zuoekai-col-6 { flex: 0 0 50%; max-width: 50%; }
.zuoekai-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.zuoekai-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.zuoekai-col-9 { flex: 0 0 75%; max-width: 75%; }
.zuoekai-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.zuoekai-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.zuoekai-col-12 { flex: 0 0 100%; max-width: 100%; }

/* 偏移 (Offset) */
.zuoekai-offset-1 { margin-left: 8.333333%; }
.zuoekai-offset-2 { margin-left: 16.666667%; }
.zuoekai-offset-3 { margin-left: 25%; }
.zuoekai-offset-4 { margin-left: 33.333333%; }
.zuoekai-offset-5 { margin-left: 41.666667%; }
.zuoekai-offset-6 { margin-left: 50%; }

/* 间距 (Gap) - 使用 CSS Grid 实现更简单的 Grid */
.zuoekai-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.zuoekai-span-1 { grid-column: span 1 / span 1; }
.zuoekai-span-2 { grid-column: span 2 / span 2; }
.zuoekai-span-3 { grid-column: span 3 / span 3; }
.zuoekai-span-4 { grid-column: span 4 / span 4; }
.zuoekai-span-5 { grid-column: span 5 / span 5; }
.zuoekai-span-6 { grid-column: span 6 / span 6; }
.zuoekai-span-7 { grid-column: span 7 / span 7; }
.zuoekai-span-8 { grid-column: span 8 / span 8; }
.zuoekai-span-9 { grid-column: span 9 / span 9; }
.zuoekai-span-10 { grid-column: span 10 / span 10; }
.zuoekai-span-11 { grid-column: span 11 / span 11; }
.zuoekai-span-12 { grid-column: span 12 / span 12; }

/* 响应式 (Mobile First) */
@media (max-width: 768px) {
  .zuoekai-grid {
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 16px;
  }

  .zuoekai-panel-content {
    padding: 16px;
    gap: 16px;
  }

  .zuoekai-panel-header {
    padding: 16px;
  }

  .zuoekai-soft-panel {
    padding: 10px 12px;
    border-radius: var(--zuoekai-radius-md);
  }

  .zuoekai-card-grid {
    gap: 16px;
  }
  
  /* 在移动端强制全宽 */
  [class*="zuoekai-span-"] {
    grid-column: 1 / -1 !important;
  }
}

.zuoekai-layout {
  min-height: 100vh;
}

.zuoekai-layout__main {
  padding: 0;
  padding-bottom: 0;
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

.zuoekai-layout__workspace {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.zuoekai-layout__content {
  flex-grow: 1;
  overflow-y: auto;
  height: 100vh;
  background-color: var(--zuoekai-color-surface-page);
  margin-left: calc(var(--side-dock-width, 68px) + var(--side-dock-gap, 16px) * 2 - 24px);
  scrollbar-width: thin;
  scrollbar-color: var(--zuoekai-scrollbar-thumb) var(--zuoekai-scrollbar-track);
}

.zuoekai-layout__content::-webkit-scrollbar {
  width: 8px;
}

.zuoekai-layout__content::-webkit-scrollbar-track {
  background: var(--zuoekai-scrollbar-track);
}

.zuoekai-layout__content::-webkit-scrollbar-thumb {
  background: var(--zuoekai-scrollbar-thumb);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.zuoekai-layout__content::-webkit-scrollbar-thumb:hover {
  background: var(--zuoekai-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.zuoekai-layout__content-wrapper {
}

.zuoekai-layout__workspace > .zuoekai-sidebar-dock[data-dock-mode="compact"] ~ .zuoekai-layout__content {
  margin-left: 0;
}

@media (max-width: 768px) {
  .zuoekai-layout__content {
    margin-left: 0;
  }
}

/* ==========================================================================
   表单分组 (Form Group)
   纵向排列的表单字段容器，统一间距节奏，替代 Tailwind 的 space-y-4。
   ========================================================================== */
.zuoekai-form-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 紧凑间距变体 */
.zuoekai-form-group--compact {
  gap: 12px;
}

/* 宽松间距变体 */
.zuoekai-form-group--loose {
  gap: 24px;
}

/* 隐藏变体：用于 JS 动态显隐的表单分组（替代 TW hidden） */
.zuoekai-form-group--hidden {
  display: none;
}

/* ==========================================================================
   可滚动容器 (Scrollable)
   带自定义滚动条的列表/内容容器，支持最大高度限制。
   ========================================================================== */
.zuoekai-scrollable {
  overflow-y: auto;
  padding-right: 4px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--zuoekai-scrollbar-thumb) var(--zuoekai-scrollbar-track);
}

.zuoekai-scrollable::-webkit-scrollbar {
  width: 6px;
}

.zuoekai-scrollable::-webkit-scrollbar-track {
  background: var(--zuoekai-scrollbar-track);
}

.zuoekai-scrollable::-webkit-scrollbar-thumb {
  background: var(--zuoekai-scrollbar-thumb);
  border-radius: 9999px;
}

.zuoekai-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--zuoekai-scrollbar-thumb-hover);
}

/* 最大高度变体 */
.zuoekai-scrollable--sm  { max-height: 200px; }
.zuoekai-scrollable--md  { max-height: 40vh; }
.zuoekai-scrollable--lg  { max-height: 400px; }
.zuoekai-scrollable--xl  { max-height: 560px; }

/* ==========================================================================
   通用隐藏工具类 (Hidden Utility)
   用于 JS 动态显隐切换，替代 Tailwind 的 hidden 类。
   ========================================================================== */
.zuoekai-hidden {
  display: none !important;
}

/* ==========================================================================
   面板分列布局 (Panel Split)
   用于打卡页、仪表盘等"左侧卡片区 + 右侧大组件"左右分栏场景。
   桌面端（≥1024px）双列并排，平板/手机端（<1024px）单列堆叠。
   ========================================================================== */

/* 面板分列 - 根容器 */
.zuoekai-panel-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zuoekai-spacing-lg, 24px);
  padding: var(--zuoekai-spacing-md, 16px);
}

/* 桌面端：双列等宽并排 */
@media (min-width: 1024px) {
  .zuoekai-panel-split {
    grid-template-columns: 1fr 1fr;
    padding: var(--zuoekai-spacing-lg, 24px);
  }
}

/* 面板分列 - 子区域容器（左侧 / 右侧） */
.zuoekai-panel-split__zone {
  min-width: 0;
}

/* --- 分支：居中模式 (--centered) ---
   让分列容器填满可视区域并垂直居中子区域内容。
   适用于打卡页等内容不满一屏、需要视觉居中的场景。 */
.zuoekai-panel-split--centered {
  min-height: calc(100vh - 160px);
  align-items: center;
}
.zuoekai-panel-split--centered .zuoekai-panel-split__zone {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 小屏幕下居中模式取消 min-height，改为自然堆叠 */
@media (max-width: 1023px) {
  .zuoekai-panel-split--centered {
    min-height: auto;
    align-items: stretch;
  }
  .zuoekai-panel-split--centered .zuoekai-panel-split__zone {
    justify-content: flex-start;
  }
}