/*
 * tailwind-utils.css
 * 精简 Tailwind 工具类 — 仅包含项目实际用到的类
 * 替代 cdn.tailwindcss.com 运行时（~350 KB JS），体积约 4 KB
 * 生成日期：2026-03
 */

/* ── Preflight（브라우저 기본 스타일 리셋） ──────────
   Tailwind CDN에 내장된 리셋으로, 없으면 iOS Safari가
   <button>에 회색 배경·테두리·패딩을 자동 적용함      */
*, *::before, *::after { box-sizing: border-box; }
button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* ★ 关键：img/svg 默认 display:inline 会在底部产生约 3–4px 基线空白；
   Tailwind Preflight 将其改为 block，消除错位。
   <a> 包裹图标时高度会比裸 img 多出基线空白，导致图标行东倒西歪。  */
img, svg {
  display: block;
  max-width: 100%;
}
/* ★ <a> 包裹图标时不应继承 inline 换行行为，改为 inline-flex 让其高度
   紧贴内容，与相邻裸 img 的高度一致，配合父级 items-center 精准居中。 */
a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: inherit;
}

/* ── Display ─────────────────────────────────────── */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.flex         { display: flex; }
.hidden       { display: none !important; }

/* ── Flex ────────────────────────────────────────── */
.flex-col      { flex-direction: column; }
.flex-grow     { flex-grow: 1; }
.flex-1        { flex: 1 1 0%; }       /* ★ 补充：弹性填充剩余空间 */
.shrink-0      { flex-shrink: 0; }
.flex-shrink-0 { flex-shrink: 0; }     /* ★ 补充：Tailwind v2 写法兼容 */
.min-w-0       { min-width: 0; }
.items-center  { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

/* ── Gap ─────────────────────────────────────────── */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

/* ── Width ───────────────────────────────────────── */
.w-3    { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4    { width: 1rem; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-7    { width: 1.75rem; }
.w-9    { width: 2.25rem; }
.w-10   { width: 2.5rem; }
.w-11   { width: 2.75rem; }
.w-full { width: 100%; }

/* ── Height ──────────────────────────────────────── */
.h-3    { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4    { height: 1rem; }
.h-5    { height: 1.25rem; }
.h-6    { height: 1.5rem; }
.h-7    { height: 1.75rem; }
.h-9    { height: 2.25rem; }
.h-10   { height: 2.5rem; }
.h-11   { height: 2.75rem; }
.h-auto { height: auto; }
.h-full { height: 100%; }

/* ── Padding ─────────────────────────────────────── */
.p-1   { padding: 0.25rem; }           /* ★ 补充：按钮内边距 */
.p-3   { padding: 0.75rem; }           /* ★ 补充：弹出层内边距 */
.p-4   { padding: 1rem; }              /* ★ 补充：弹出层内边距 */
.px-2  { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }
.px-10 { padding-left: 2.5rem;  padding-right: 2.5rem; }
.py-2  { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.pb-2  { padding-bottom: 0.5rem; }
.pl-2  { padding-left: 0.5rem; }
.pr-2  { padding-right: 0.5rem; }

/* ── Margin ──────────────────────────────────────── */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-4    { margin-top: 1rem; }
.mt-6    { margin-top: 1.5rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.ml-0\.5 { margin-left: 0.125rem; }
.ml-1    { margin-left: 0.25rem; }
.ml-2    { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mr-1    { margin-right: 0.25rem; }
.mr-4    { margin-right: 1rem; }

/* ── Typography ──────────────────────────────────── */
.text-xs  { font-size: 0.75rem;   line-height: 1rem; }
.text-sm  { font-size: 0.875rem;  line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;   line-height: 1.75rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug  { line-height: 1.375; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ── Text Colors ─────────────────────────────────── */
.text-white      { color: #ffffff; }
.text-white\/40  { color: rgba(255, 255, 255, 0.4); }
.text-white\/50  { color: rgba(255, 255, 255, 0.5); }
.text-white\/60  { color: rgba(255, 255, 255, 0.6); }
.text-white\/70  { color: rgba(255, 255, 255, 0.7); }
.text-white\/80  { color: rgba(255, 255, 255, 0.8); }
.text-blue-500   { color: #3b82f6; }
.text-red-500    { color: #ef4444; }
.text-yellow-500 { color: #eab308; }
.text-amber-500  { color: #f59e0b; }
.text-gray-400   { color: #9ca3af; }
.text-gray-500   { color: #6b7280; }
.text-gray-600   { color: #4b5563; }

/* ── Background Colors ───────────────────────────── */
.bg-blue-500  { background-color: #3b82f6; }
.bg-gray-100  { background-color: #f3f4f6; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }

/* ── Border Radius ───────────────────────────────── */
.rounded-lg { border-radius: 0.5rem; }

/* ── Object Fit ──────────────────────────────────── */
.object-contain { object-fit: contain; }

/* ── Overflow ────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-y-auto  { overflow-y: auto; }            /* ★ 补充：弹出层滚动 */

/* ── SVG Fill ────────────────────────────────────── */
.fill-current { fill: currentColor; }              /* ★ 补充：SVG 图标继承文字颜色（缺失此类导致图标空白）*/

/* ── Shadow ──────────────────────────────────────── */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); } /* ★ 补充 */

/* ── Position ────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }

/* ── Inset / Offset ──────────────────────────────── */
.bottom-0 { bottom: 0; }
.right-0  { right: 0; }

/* ── Z-Index ─────────────────────────────────────── */
.z-10 { z-index: 10; }

/* ── Opacity ─────────────────────────────────────── */
.opacity-60 { opacity: 0.6; }
.opacity-90 { opacity: 0.9; }

/* ── Transitions ─────────────────────────────────── */
.transition-all       { transition-property: all;       transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-colors    { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.duration-200         { transition-duration: 200ms; }   /* ★ 补充：配合 transition-all 使用 */

/* ── Active (按压反馈) ───────────────────────────── */
.active\:scale-90:active { transform: scale(0.90); }  /* ★ 补充：按钮按压缩放 */
.active\:scale-95:active { transform: scale(0.95); }  /* ★ 补充：按钮按压缩放 */

/* ── Hover ───────────────────────────────────────── */
.hover\:bg-blue-600:hover   { background-color: #2563eb; }
.hover\:scale-105:hover     { transform: scale(1.05); }
.hover\:scale-110:hover     { transform: scale(1.10); }
.hover\:text-white:hover    { color: #ffffff; }

/* ── Drop Shadow ─────────────────────────────────── */
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04)) drop-shadow(0 4px 3px rgba(0,0,0,0.1)); }

/* ── Group Variant ───────────────────────────────── */
/* group-[.selected]:text-blue-500 → 当祖先同时拥有 .group 和 .selected 时生效 */
.group.selected .group-\[\.selected\]\:text-blue-500 { color: #3b82f6; }

/* ── Dark Mode Text Color Overrides ─────────────────*/
@media (prefers-color-scheme: dark) {
  .text-gray-400 { color: #9ca3af; }
  .text-gray-500 { color: #9ca3af; }
  .text-gray-600 { color: #9ca3af; }
  .bg-gray-100   { background-color: #374151; }
}