/**
 * 基础样式 (Base Styles)
 * 任務管理系統 - 现代化CSS重构
 *
 * 包含: CSS重置、基础元素样式、无障碍性改进
 * 遵循移动优先原则
 */

/* ========================================
   现代CSS重置
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 移除默认列表样式 */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* 设置根元素 */
html {
  /* 使用逻辑属性 */
  scroll-padding-block-start: var(--header-height-mobile);

  /* 平滑滚动 */
  scroll-behavior: smooth;

  /* 防止文本尺寸调整（iOS） */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* 改进字体渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {
  html {
    scroll-padding-block-start: var(--header-height-desktop);
  }
}

/* 尊重用户的运动偏好设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   Body元素
   ======================================== */

body {
  min-block-size: 100dvh;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  background-color: var(--background-page);

  /* 使用逻辑属性 */
  padding-inline: 0;
  padding-block: 0;

  /* 性能优化 */
  text-rendering: optimizeSpeed;

  /* 防止水平滚动 */
  overflow-x: hidden;
}

/* ========================================
   排版元素
   ======================================== */

/* 标题 */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);

  /* 使用逻辑属性 */
  margin-block-end: var(--space-4);

  /* 平衡文本换行 */
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-3xl);
  margin-block-end: var(--space-6);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5, h6 {
  font-size: var(--font-size-base);
}

/* 段落 */
p {
  margin-block-end: var(--space-4);
  text-wrap: pretty; /* 优化文本换行 */
}

/* 链接 */
a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover,
a:focus-visible {
  color: var(--color-primary-600);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   表单元素
   ======================================== */

/* 输入框、文本域、选择框 */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

input,
textarea,
select {
  inline-size: 100%;
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary-500) l c h / 0.1);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-block-size: 6rem;
}

/* ========================================
   日期輸入框特定樣式 - 簡化版本
   ======================================== */

/* 確保日期輸入框顯示日期選擇器 - 使用最簡配置 */
input[type="date"] {
  cursor: pointer;

  /* 移除可能干擾的樣式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Chrome/Safari/Edge - 簡化日期選擇器指示器 */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  background: transparent;
  color: var(--text-secondary);
}

/* Firefox - 簡化日期選擇器指示器 */
input[type="date"]::-moz-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  background: transparent;
  color: var(--text-secondary);
}

/* 懸停效果 */
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
  color: var(--color-primary-500);
}

input[type="date"]:hover::-moz-calendar-picker-indicator,
input[type="date"]:focus::-moz-calendar-picker-indicator {
  color: var(--color-primary-500);
}

/* 移除干擾元素 */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="date"]::-webkit-clear-button {
  display: none;
}

/* Placeholder样式 */
::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

/* 按钮 */
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: opacity var(--duration-fast) var(--ease-out);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   图像和媒体
   ======================================== */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

img {
  /* 防止图片拖拽 */
  -webkit-user-drag: none;
  user-select: none;
}

svg {
  fill: currentColor;
  inline-size: 1em;
  block-size: 1em;
}

/* ========================================
   表格
   ======================================== */

table {
  inline-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  text-align: start;
  border-block-end: 1px solid var(--border-primary);
}

th {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  background-color: var(--surface-secondary);
}

/* ========================================
   代码块
   ======================================== */

code,
kbd,
samp,
pre {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

code {
  padding-inline: var(--space-1);
  padding-block: 0.125rem;
  background-color: var(--surface-tertiary);
  border-radius: var(--radius-sm);
}

pre {
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  background-color: var(--surface-tertiary);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
}

/* ========================================
   滚动条样式 (现代浏览器)
   ======================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-400) var(--surface-secondary);
}

/* Webkit浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  inline-size: 8px;
  block-size: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-400);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-neutral-500);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--color-neutral-600);
}

/* ========================================
   选中文本样式
   ======================================== */

::selection {
  background-color: oklch(from var(--color-primary-500) l c h / 0.3);
  color: var(--text-primary);
}

/* ========================================
   无障碍性改进
   ======================================== */

/* 仅为屏幕阅读器可见 */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 跳过导航链接 */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* 聚焦指示器 */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 移除按钮和链接的默认焦点样式 */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   暗色模式过渡
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
  :root {
    transition: background-color var(--duration-normal) var(--ease-out),
                color var(--duration-normal) var(--ease-out);
  }
}

/* ========================================
   打印样式
   ======================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}