/**
 * 布局系统 (Layout)
 * 任務管理系統 - 现代化CSS重构
 *
 * 包含: 容器、网格系统、Flexbox工具、页面布局
 * 移动优先设计，使用容器查询实现组件级响应式
 */

/* ========================================
   容器系统
   ======================================== */

.container {
  /* 宽度 */
  inline-size: 100%;
  margin-inline: auto;

  /* 间距 */
  padding-inline: var(--space-4);
}

/* 响应式容器宽度 - 移动优先 */
@media (min-width: 640px) {
  .container {
    max-inline-size: var(--container-sm);
    padding-inline: var(--space-6);
  }
}

@media (min-width: 768px) {
  .container {
    max-inline-size: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-inline-size: var(--container-lg);
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .container {
    max-inline-size: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-inline-size: var(--container-2xl);
  }
}

/* 容器变体 */
.container-fluid {
  inline-size: 100%;
  padding-inline: var(--space-4);
}

.container-narrow {
  max-inline-size: var(--container-sm);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ========================================
   网格系统
   ======================================== */

.grid {
  display: grid;
  gap: var(--space-4);
}

/* 自动填充网格 - 响应式 */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* 固定列网格 - 移动优先 */
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
  .grid-cols-sm-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .grid-cols-lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* 主应用布局网格 */
.main-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .main-layout {
    grid-template-columns: 2fr 1fr;
  }

  .main-layout--reverse {
    grid-template-columns: 1fr 2fr;
  }
}

/* 日历 + 任务列表布局 */
.calendar-task-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  block-size: 100%;
}

@media (min-width: 1024px) {
  .calendar-task-layout {
    grid-template-columns: 2fr 1fr;
  }
}

/* ========================================
   Flexbox工具
   ======================================== */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* 方向 */
.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

/* 换行 */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* 主轴对齐 */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* 交叉轴对齐 */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

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

/* 间距 */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ========================================
   页面布局组件
   ======================================== */

/* 页面包装器 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

/* 页头 */
.page-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: var(--surface-overlay);
  border-block-end: 1px solid var(--border-primary);
  backdrop-filter: blur(8px);
}

.page-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-height-mobile);
  padding-inline: var(--space-4);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .page-header__container {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .page-header__container {
    block-size: var(--header-height-desktop);
    padding-inline: var(--space-8);
  }
}

/* 页头左侧 - Logo和标题 */
.page-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 1;
  min-inline-size: 0;
}

.page-header__logo {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex-shrink: 0;
  color: var(--color-primary-500);
}

@media (min-width: 1024px) {
  .page-header__logo {
    inline-size: 2rem;
    block-size: 2rem;
  }
}

.page-header__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

@media (min-width: 640px) {
  .page-header__title {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 1024px) {
  .page-header__title {
    font-size: var(--font-size-xl);
  }
}

/* 页头右侧 - 导航和操作 */
.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .page-header__actions {
    gap: var(--space-4);
  }
}

/* 主内容区域 */
.page-main {
  flex-grow: 1;
  padding-inline: var(--space-4);
  padding-block: var(--space-4);
}

@media (min-width: 640px) {
  .page-main {
    padding-inline: var(--space-6);
    padding-block: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .page-main {
    padding-inline: var(--space-8);
    padding-block: var(--space-8);
  }
}

/* 页脚 */
.page-footer {
  padding-inline: var(--space-4);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--border-primary);
  background-color: var(--surface-secondary);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ========================================
   卡片布局
   ======================================== */

.card {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding-inline: var(--space-6);
  padding-block: var(--space-6);
  contain: layout style paint;
}

.card-compact {
  padding-inline: var(--space-4);
  padding-block: var(--space-4);
}

.card__header {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-primary);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.card__body {
  /* 内容区域 */
}

.card__footer {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-primary);
}

/* ========================================
   栈式布局 (Stack)
   ======================================== */

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--space-4);
}

.stack-sm > * + * {
  margin-block-start: var(--space-2);
}

.stack-lg > * + * {
  margin-block-start: var(--space-6);
}

/* ========================================
   侧边栏布局
   ======================================== */

.sidebar-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .sidebar-layout {
    flex-direction: row;
  }

  .sidebar-layout__sidebar {
    flex-shrink: 0;
    inline-size: 250px;
  }

  .sidebar-layout__main {
    flex-grow: 1;
    min-inline-size: 0;
  }
}

/* ========================================
   吸顶工具栏
   ======================================== */

.sticky-toolbar {
  position: sticky;
  inset-block-start: calc(var(--header-height-mobile) + var(--space-2));
  z-index: var(--z-sticky);
  background-color: var(--surface-overlay);
  border-radius: var(--radius-lg);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
}

@media (min-width: 1024px) {
  .sticky-toolbar {
    inset-block-start: calc(var(--header-height-desktop) + var(--space-4));
  }
}

/* ========================================
   容器查询支持
   ======================================== */

/* 为组件容器启用容器查询 */
.task-list-container,
.calendar-container,
.card-container {
  container-type: inline-size;
  container-name: component;
}

/* 容器查询 - 任务列表 */
@container component (min-width: 500px) {
  .task-card {
    flex-direction: row;
    align-items: center;
  }

  .task-card__content {
    flex-grow: 1;
  }

  .task-card__actions {
    flex-shrink: 0;
  }
}

/* 容器查询 - 日历 */
@container component (min-width: 600px) {
  .calendar__grid {
    gap: var(--space-3);
  }

  .calendar__cell {
    padding-inline: var(--space-3);
    padding-block: var(--space-3);
  }
}

/* ========================================
   隐藏/显示工具类
   ======================================== */

/* 移动端隐藏 */
.hidden-mobile {
  display: none;
}

@media (min-width: 640px) {
  .hidden-mobile {
    display: initial;
  }
}

/* 桌面端隐藏 */
.hidden-desktop {
  display: initial;
}

@media (min-width: 1024px) {
  .hidden-desktop {
    display: none;
  }
}

/* 仅移动端显示 */
.show-mobile {
  display: initial;
}

@media (min-width: 640px) {
  .show-mobile {
    display: none;
  }
}

/* 仅桌面端显示 */
.show-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .show-desktop {
    display: initial;
  }
}

/* ========================================
   间距工具
   ======================================== */

/* Padding */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-2 { padding-inline: var(--space-2); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }

.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }

/* Margin */
.m-0 { margin: 0; }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }

.mx-auto { margin-inline: auto; }
.mx-2 { margin-inline: var(--space-2); }
.mx-4 { margin-inline: var(--space-4); }

.my-2 { margin-block: var(--space-2); }
.my-4 { margin-block: var(--space-4); }
.my-6 { margin-block: var(--space-6); }

/* ========================================
   溢出处理
   ======================================== */

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ========================================
   滚动区域优化
   ======================================== */

.scroll-area {
  overflow-y: auto;
  max-block-size: calc(100dvh - var(--header-height-mobile) - var(--space-8));
  overscroll-behavior: contain;

  /* iOS平滑滚动 */
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .scroll-area {
    max-block-size: calc(100dvh - var(--header-height-desktop) - var(--space-12));
  }
}