/* ==========================================================================
   clothoff-components.css —— Phase 0 通用组件视觉样式
   --------------------------------------------------------------------------
   配套 templates/_components/clothoff/*.html 使用。所有视觉值引用
   --clothoff-* token（定义于 static/css/global.css §8 + docs/clothoff-design-system.md）。
   单页 worker 不应在此文件追加业务样式；如需扩展，新建组件 partial。
   ========================================================================== */


/* ==========================================================================
   1. CTA 按钮 (clothoff-cta-primary / clothoff-cta-secondary / clothoff-cta-ghost)
   --------------------------------------------------------------------------
   实测：clothoff 所有按钮 hover 不变色，仅 transform: scale(1.02) 微缩放。
   ========================================================================== */
.clothoff-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--clothoff-radius-full);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  transition: transform var(--clothoff-duration-hover) var(--clothoff-ease-default),
              background-color var(--clothoff-duration-hover) var(--clothoff-ease-default),
              color var(--clothoff-duration-hover) var(--clothoff-ease-default);
  will-change: transform;
}
.clothoff-cta:hover  { transform: scale(1.02); }
.clothoff-cta:active { transform: scale(0.98); transition-duration: var(--clothoff-duration-fast); }
.clothoff-cta:disabled,
.clothoff-cta[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.clothoff-cta:focus-visible {
  outline: 2px solid var(--clothoff-orange-500);
  outline-offset: 2px;
}

/* sizes */
.clothoff-cta--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.clothoff-cta--md { height: 40px; padding: 0 16px; font-size: 14px; }
.clothoff-cta--lg { height: 48px; padding: 0 24px; font-size: 14px; }
.clothoff-cta--xl { height: 56px; padding: 0 32px; font-size: 16px; }

/* variants */
.clothoff-cta--primary {
  background: var(--clothoff-orange-500);
  color: #ffffff;
}
.clothoff-cta--primary:hover { background: var(--clothoff-orange-600); }

.clothoff-cta--secondary {
  background: var(--clothoff-surface-2);
  color: var(--clothoff-text);
}
.clothoff-cta--secondary:hover { background: var(--clothoff-border-strong); }

.clothoff-cta--ghost {
  background: transparent;
  color: var(--clothoff-text);
}
.clothoff-cta--ghost:hover { background: var(--clothoff-surface-2); }

.clothoff-cta--outline {
  background: transparent;
  color: var(--clothoff-text);
  box-shadow: inset 0 0 0 1px var(--clothoff-border-strong);
}
.clothoff-cta--outline:hover {
  box-shadow: inset 0 0 0 1px var(--clothoff-orange-500);
  color: var(--clothoff-orange-500);
}

.clothoff-cta--danger {
  background: var(--clothoff-danger);
  color: #ffffff;
}

/* full-width */
.clothoff-cta--block { display: flex; width: 100%; }

.clothoff-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}


/* ==========================================================================
   2. Tab Pill (clothoff-tab-pill)
   --------------------------------------------------------------------------
   横向胶囊式 tab 容器，active item 高亮。
   ========================================================================== */
.clothoff-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--clothoff-surface-1);
  border-radius: var(--clothoff-radius-full);
  border: 1px solid var(--clothoff-border-soft);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
}
.clothoff-tab-pill::-webkit-scrollbar { display: none; }

.clothoff-tab-pill__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--clothoff-text-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--clothoff-radius-full);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--clothoff-duration-hover) var(--clothoff-ease-default),
              color var(--clothoff-duration-hover) var(--clothoff-ease-default);
}
.clothoff-tab-pill__item:hover {
  color: var(--clothoff-text);
}
.clothoff-tab-pill__item[aria-selected="true"],
.clothoff-tab-pill__item[data-active="true"] {
  background: var(--clothoff-surface-2);
  color: var(--clothoff-text);
  font-weight: 600;
}


/* ==========================================================================
   3. Card (clothoff-card)
   ========================================================================== */
.clothoff-card {
  display: block;
  background: var(--clothoff-surface-1);
  border-radius: var(--clothoff-radius-lg);
  padding: 16px;
  border: 1px solid transparent;
  transition: transform var(--clothoff-duration-card) var(--clothoff-ease-quint),
              border-color var(--clothoff-duration-card) var(--clothoff-ease-default);
  text-decoration: none;
  color: inherit;
}
.clothoff-card--lg { border-radius: var(--clothoff-radius-xl); padding: 20px; }
.clothoff-card--sm { border-radius: var(--clothoff-radius-md); padding: 12px; }

.clothoff-card--interactive { cursor: pointer; }
.clothoff-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--clothoff-border-strong);
}

.clothoff-card--selected {
  border: 2px solid #ffffff;
}


/* ==========================================================================
   4. Drawer / Bottom-Sheet (clothoff-drawer)
   --------------------------------------------------------------------------
   注：项目已有 static/css/components/drawer.css（fx-drawer），这套是组件库
   独立类名 clothoff-drawer，命名与 .fx-drawer 区分避免混淆。
   单页 worker 想用现有 vaul-drawer.js 就引用 fx-drawer；想用组件库自带就用 clothoff-drawer。
   ========================================================================== */
.clothoff-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--clothoff-overlay-side);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--clothoff-duration-sheet) var(--clothoff-ease-sheet);
}
.clothoff-drawer-overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.clothoff-drawer-overlay--bottom {
  background: var(--clothoff-overlay-bottom);
}

.clothoff-drawer {
  position: fixed;
  z-index: 50;
  background: var(--clothoff-surface-1);
  pointer-events: none;
  opacity: 0;
  transition: transform var(--clothoff-duration-sheet) var(--clothoff-ease-sheet),
              opacity var(--clothoff-duration-sheet) var(--clothoff-ease-sheet);
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.clothoff-drawer[data-direction="bottom"] {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 95dvh;
  border-radius: var(--clothoff-radius-2xl) var(--clothoff-radius-2xl) 0 0;
  transform: translateY(100%);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.clothoff-drawer[data-direction="right"] {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(600px, 100vw);
  height: 100dvh;
  border-radius: 0;
  transform: translateX(100%);
  background: #000000;
}
.clothoff-drawer[data-direction="left"] {
  top: 0;
  left: 0;
  bottom: 0;
  width: min(600px, 100vw);
  height: 100dvh;
  border-radius: 0;
  transform: translateX(-100%);
}
.clothoff-drawer[data-state="open"] {
  transform: translateX(0) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.clothoff-drawer__handle {
  width: 48px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  margin: 12px auto;
  flex-shrink: 0;
  transition: opacity var(--clothoff-duration-hover) var(--clothoff-ease-default);
}
.clothoff-drawer__handle:hover,
.clothoff-drawer__handle:active { opacity: 1; }


/* ==========================================================================
   5. Modal (clothoff-modal)
   ========================================================================== */
.clothoff-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--clothoff-overlay-side);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--clothoff-duration-card) var(--clothoff-ease-default);
}
.clothoff-modal-overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}

.clothoff-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  background: var(--clothoff-surface-1);
  border-radius: var(--clothoff-radius-xl);
  padding: 24px;
  overflow-y: auto;
  box-shadow: var(--clothoff-shadow-pop);
  transform: translateY(48px);
  opacity: 0;
  transition: transform var(--clothoff-duration-sheet) var(--clothoff-ease-sheet),
              opacity var(--clothoff-duration-sheet) var(--clothoff-ease-sheet);
}
.clothoff-modal-overlay[data-state="open"] .clothoff-modal {
  transform: translateY(0);
  opacity: 1;
}

.clothoff-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  color: var(--clothoff-text-muted);
  border: 0;
  cursor: pointer;
  transition: background var(--clothoff-duration-hover) var(--clothoff-ease-default),
              color var(--clothoff-duration-hover) var(--clothoff-ease-default);
}
.clothoff-modal__close:hover {
  background: var(--clothoff-surface-2);
  color: var(--clothoff-text);
}


/* ==========================================================================
   6. Toast (clothoff-toast)
   --------------------------------------------------------------------------
   显示策略：JS 控制 [data-state="open"]；2.5s 后自动 [data-state="closed"]。
   组件 partial 出空容器 + 动画样式；JS 用 fx 现有 toast 客户端注入即可。
   ========================================================================== */
.clothoff-toast-region {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.clothoff-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 360px;
  padding: 14px 16px;
  background: var(--clothoff-surface-1);
  color: var(--clothoff-text);
  border-radius: var(--clothoff-radius-md);
  border: 1px solid var(--clothoff-border-strong);
  box-shadow: var(--clothoff-shadow-toast);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: auto;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform var(--clothoff-duration-card) var(--clothoff-ease-quint),
              opacity var(--clothoff-duration-card) var(--clothoff-ease-default);
}
.clothoff-toast[data-state="open"] {
  transform: translateY(0);
  opacity: 1;
}
.clothoff-toast--success { border-color: var(--clothoff-success); }
.clothoff-toast--danger  { border-color: var(--clothoff-danger); }
.clothoff-toast--warning { border-color: var(--clothoff-warning); }
.clothoff-toast--info    { border-color: var(--clothoff-info); }

.clothoff-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.clothoff-toast__close {
  flex-shrink: 0;
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--clothoff-text-muted);
  cursor: pointer;
  border-radius: 9999px;
  transition: color var(--clothoff-duration-hover) var(--clothoff-ease-default);
}
.clothoff-toast__close:hover { color: var(--clothoff-text); }


/* ==========================================================================
   7. Pill Filter (clothoff-pill-filter)
   --------------------------------------------------------------------------
   单选/多选过滤芯片，用于筛选条件 / 标签。比 tab-pill 更轻量，不带容器。
   ========================================================================== */
.clothoff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--clothoff-surface-2);
  color: var(--clothoff-text-soft);
  border-radius: var(--clothoff-radius-full);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--clothoff-duration-hover) var(--clothoff-ease-default),
              color var(--clothoff-duration-hover) var(--clothoff-ease-default),
              border-color var(--clothoff-duration-hover) var(--clothoff-ease-default);
  appearance: none;
}
.clothoff-pill:hover {
  color: var(--clothoff-text);
  border-color: var(--clothoff-border-strong);
}
.clothoff-pill[aria-pressed="true"],
.clothoff-pill[data-active="true"] {
  background: var(--clothoff-orange-500);
  color: #ffffff;
  border-color: var(--clothoff-orange-500);
}
.clothoff-pill__count {
  font-weight: 600;
  font-size: 11px;
  opacity: 0.7;
}


/* ==========================================================================
   8. Dropzone (clothoff-dropzone)
   --------------------------------------------------------------------------
   文件上传区，dashed 边框 + center 内容；支持 [data-state="dragging"] 高亮。
   ========================================================================== */
.clothoff-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 240px;
  padding: 24px;
  background: var(--clothoff-surface-1);
  border: 2px dashed var(--clothoff-border-strong);
  border-radius: var(--clothoff-radius-xl);
  color: var(--clothoff-text-soft);
  cursor: pointer;
  text-align: center;
  transition: background var(--clothoff-duration-hover) var(--clothoff-ease-default),
              border-color var(--clothoff-duration-hover) var(--clothoff-ease-default),
              color var(--clothoff-duration-hover) var(--clothoff-ease-default);
}
.clothoff-dropzone:hover,
.clothoff-dropzone:focus-within {
  border-color: var(--clothoff-orange-500);
  color: var(--clothoff-text);
}
.clothoff-dropzone[data-state="dragging"] {
  background: rgba(255, 152, 0, 0.08);
  border-color: var(--clothoff-orange-500);
  color: var(--clothoff-text);
}
.clothoff-dropzone[data-state="error"] {
  border-color: var(--clothoff-danger);
  color: var(--clothoff-danger);
}
.clothoff-dropzone__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--clothoff-surface-2);
  color: var(--clothoff-orange-500);
  flex-shrink: 0;
}
.clothoff-dropzone__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--clothoff-text);
}
.clothoff-dropzone__hint {
  font-size: 12px;
  color: var(--clothoff-text-muted);
}
.clothoff-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}


/* ==========================================================================
   9. Loading Spinner (clothoff-spinner)
   --------------------------------------------------------------------------
   单一规格圆环旋转。颜色和现有 .loading-spinner 协调（橙色起 18% alpha 描边）。
   ========================================================================== */
.clothoff-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(255, 152, 0, 0.18);
  border-top-color: var(--clothoff-orange-500);
  border-radius: 50%;
  animation: clothoffSpin 800ms linear infinite;
  flex-shrink: 0;
}
.clothoff-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.clothoff-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
.clothoff-spinner--inverse {
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: #ffffff;
}

@keyframes clothoffSpin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   END clothoff-components.css
   ========================================================================== */