/* ==================== 通用输入框组件 ==================== */

/* 
 * 输入框组件系统 - Linear 风格玻璃态设计
 * 统一所有输入框样式：login-input, modal-input, input-field, form-control
 * 设计特点：玻璃态效果 + 紫色聚焦 + 平滑动画
 */

/* ==================== 基础输入框样式 ==================== */

.input,
input.input,
textarea.input,
select.input {
  /* 布局 */
  display: block;
  width: 100%;
  
  /* 尺寸 */
  padding: 0.875rem 1.125rem;
  min-height: 40px;
  
  /* 外观 */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 0.75rem;
  
  /* 文字 */
  color: var(--text-primary, #ffffff);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  
  /* 交互 */
  outline: none;
  transition: all 0.2s ease;
}

/* 悬浮状态 */
.input:hover,
input.input:hover,
textarea.input:hover,
select.input:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong, rgba(255, 255, 255, 0.15));
}

/* 聚焦状态 */
.input:focus,
input.input:focus,
textarea.input:focus,
select.input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glow-purple, #7877c6);
  box-shadow: 0 0 0 3px rgba(120, 119, 198, 0.1);
}

/* 占位符 */
.input::placeholder,
input.input::placeholder,
textarea.input::placeholder {
  color: var(--text-tertiary, #737373);
  opacity: 0.8;
}

/* ==================== 尺寸变体 ==================== */

/* 小尺寸 */
.input--sm {
  padding: 0.5rem 0.875rem;
  font-size: 0.813rem;
  min-height: 36px;
}

/* 中等尺寸（默认） */
.input--md {
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  min-height: 40px;
}

/* 大尺寸 */
.input--lg {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  min-height: 48px;
}

/* ==================== 状态变体 ==================== */

/* 错误状态 */
.input--error {
  border-color: var(--error, #f87171);
  background: rgba(248, 113, 113, 0.05);
}

.input--error:focus {
  border-color: var(--error, #f87171);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

/* 成功状态 */
.input--success {
  border-color: var(--success, #34d399);
  background: rgba(52, 211, 153, 0.05);
}

.input--success:focus {
  border-color: var(--success, #34d399);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

/* 警告状态 */
.input--warning {
  border-color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.05);
}

.input--warning:focus {
  border-color: var(--warning, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* 禁用状态 */
.input:disabled,
.input--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

/* 只读状态 */
.input:read-only,
.input--readonly {
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
}

/* ==================== 文本域 ==================== */

textarea.input {
  resize: vertical;
  min-height: 100px;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* 固定高度 */
textarea.input--fixed {
  resize: none;
}

/* 自动高度 */
textarea.input--auto {
  resize: none;
  overflow: hidden;
}

/* ==================== 输入框组（带图标/按钮） ==================== */

.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* 带左图标的输入框 */
.input-group--icon-left .input {
  padding-left: 3rem;
}

.input-group__icon--left {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  
  width: 1rem;
  height: 1rem;
  
  color: var(--text-tertiary, #737373);
  pointer-events: none;
  z-index: 10;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 带右图标的输入框 */
.input-group--icon-right .input {
  padding-right: 3rem;
}

.input-group__icon--right {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  
  width: 1rem;
  height: 1rem;
  
  color: var(--text-tertiary, #737373);
  z-index: 10;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图标按钮（可点击） */
.input-group__icon--clickable {
  cursor: pointer;
  pointer-events: all;
  transition: color 0.2s ease;
}

.input-group__icon--clickable:hover {
  color: var(--text-primary, #ffffff);
}

/* 聚焦时图标变色 */
.input-group .input:focus ~ .input-group__icon--left,
.input-group .input:focus ~ .input-group__icon--right {
  color: var(--glow-purple, #7877c6);
}

/* ==================== 输入框附加组件 ==================== */

/* 前缀/后缀 */
.input-group__prepend,
.input-group__append {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
  white-space: nowrap;
}

.input-group__prepend {
  border-right: none;
  border-radius: 0.75rem 0 0 0.75rem;
}

.input-group__append {
  border-left: none;
  border-radius: 0 0.75rem 0.75rem 0;
}

.input-group--prepend .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group--append .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ==================== 表单标签 ==================== */

.input-label {
  display: block;
  margin-bottom: 0.5rem;
  
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
  font-weight: 500;
}

.input-label--required::after {
  content: ' *';
  color: var(--error, #f87171);
}

/* ==================== 帮助文本 ==================== */

.input-help {
  display: block;
  margin-top: 0.5rem;
  
  color: var(--text-tertiary, #737373);
  font-size: 0.813rem;
  line-height: 1.4;
}

/* 错误提示 */
.input-error {
  display: block;
  margin-top: 0.5rem;
  
  color: var(--error, #f87171);
  font-size: 0.813rem;
  line-height: 1.4;
}

.input-error::before {
  content: '⚠ ';
}

/* 成功提示 */
.input-success {
  display: block;
  margin-top: 0.5rem;
  
  color: var(--success, #34d399);
  font-size: 0.813rem;
  line-height: 1.4;
}

.input-success::before {
  content: '✓ ';
}

/* ==================== 表单组 ==================== */

.form-group {
  margin-bottom: 1.25rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

/* 表单行（网格布局） */
.form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-row--2 {
  grid-template-columns: repeat(2, 1fr);
}

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

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

/* 响应式表单行 */
@media (max-width: 768px) {
  .form-row,
  .form-row--2,
  .form-row--3,
  .form-row--4 {
    grid-template-columns: 1fr;
  }
}

/* ==================== 特殊输入类型 ==================== */

/* 复选框样式（在按钮中使用） */
.btn input[type="checkbox"],
.btn input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  margin-right: 0.5rem;
  cursor: pointer;
  accent-color: var(--glow-purple, #7877c6);
  flex-shrink: 0;
}

/* 数字输入框（隐藏spinner） */
input[type="number"].input {
  -moz-appearance: textfield;
}

input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 搜索输入框 */
input[type="search"].input {
  -webkit-appearance: none;
}

input[type="search"].input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* 文件输入框 */
input[type="file"].input {
  padding: 0.625rem 1rem;
  cursor: pointer;
}

input[type="file"].input::file-selector-button {
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  
  background: rgba(120, 119, 198, 0.15);
  border: 1px solid rgba(120, 119, 198, 0.3);
  border-radius: 0.5rem;
  
  color: var(--glow-purple, #7877c6);
  font-size: 0.813rem;
  font-weight: 500;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="file"].input::file-selector-button:hover {
  background: rgba(120, 119, 198, 0.25);
  border-color: var(--glow-purple, #7877c6);
}

/* ==================== 响应式自适应变体 ==================== */

/*
 * 使用 input--responsive 类，输入框会自动根据屏幕尺寸调整
 * 移动端 (<768px): LG (更大的点击区域)
 * 平板端 (≥768px): MD
 * 桌面端 (≥1200px): MD
 */

.input.input--responsive,
input.input--responsive,
textarea.input--responsive,
select.input--responsive {
  /* 默认移动端 - LG 尺寸（大点击区域） */
  padding: 1rem 1.25rem;
  font-size: 1rem;
  min-height: 48px;
}

/* 平板端 (≥768px) - MD 尺寸 */
@media (min-width: 768px) {
  .input.input--responsive,
  input.input--responsive,
  textarea.input--responsive,
  select.input--responsive {
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    min-height: 40px;
  }
}

/* 桌面端 (≥1200px) - MD 尺寸（保持） */
@media (min-width: 1200px) {
  .input.input--responsive,
  input.input--responsive,
  textarea.input--responsive,
  select.input--responsive {
    /* 保持平板尺寸 */
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    min-height: 40px;
  }
}

/* ==================== 响应式设计 ==================== */

@media (max-width: 768px) {
  .input,
  input.input,
  textarea.input,
  select.input {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  .input--sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.813rem;
  }
  
  .input--lg {
    padding: 0.875rem 1.125rem;
    font-size: 0.938rem;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
}

/* ==================== 特殊用途输入框 ==================== */

/* 只读文本框 - 用于显示长文本（URL、代码等） */
.input-readonly-copy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem; /* 为复制按钮留出空间 */
  
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 0.5rem;
  
  overflow: hidden;
  cursor: default;
}

.input-readonly-copy:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* 文本内容 */
.input-readonly-copy__text {
  flex: 1;
  min-width: 0; /* 关键：允许flex子元素缩小 */
  
  color: var(--text-primary, #ffffff);
  font-size: 0.813rem;
  font-family: 'Monaco', 'Menlo', monospace;
  line-height: 1.5;
  
  /* 文本截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

/* 不同颜色变体 */
.input-readonly-copy__text--purple {
  color: var(--glow-purple, #7877c6);
}

.input-readonly-copy__text--blue {
  color: #60a5fa;
}

.input-readonly-copy__text--green {
  color: var(--success, #34d399);
}

/* 复制按钮（在输入框内部右侧） */
.input-readonly-copy__copy-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 2rem;
  height: 2rem;
  padding: 0;
  
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 0.375rem;
  
  color: var(--text-secondary, #a3a3a3);
  font-size: 0.875rem;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  flex-shrink: 0; /* 防止按钮被压缩 */
  z-index: 10;
}

.input-readonly-copy__copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #ffffff);
}

.input-readonly-copy__copy-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* 小尺寸变体 */
.input-readonly-copy--sm {
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
}

.input-readonly-copy--sm .input-readonly-copy__text {
  font-size: 0.75rem;
}

.input-readonly-copy--sm .input-readonly-copy__copy-btn {
  width: 1.75rem;
  height: 1.75rem;
  right: 0.5rem;
  font-size: 0.75rem;
}

/* 大尺寸变体 */
.input-readonly-copy--lg {
  padding: 1rem 1.25rem;
  padding-right: 3.5rem;
}

.input-readonly-copy--lg .input-readonly-copy__text {
  font-size: 0.938rem;
}

.input-readonly-copy--lg .input-readonly-copy__copy-btn {
  width: 2.5rem;
  height: 2.5rem;
  right: 1rem;
  font-size: 1rem;
}

/* ==================== 只读文本显示（自适应高度） ==================== */

/* 
 * 用于详情弹窗中显示多行只读文本
 * 使用 div 实现，可以根据内容自适应高度
 * 看起来像 textarea，但高度会随内容变化
 */
.input-readonly-text {
  /* 布局 */
  display: block;
  width: 100%;
  
  /* 尺寸 */
  padding: 0.875rem 1.125rem;
  min-height: 40px;
  
  /* 外观 */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 0.75rem;
  
  /* 文字 */
  color: var(--text-primary, #ffffff);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  white-space: pre-wrap; /* 保留换行和空格 */
  word-wrap: break-word; /* 自动换行 */
  
  /* 禁用选择和编辑的视觉提示 */
  cursor: default;
  user-select: text; /* 允许选择文本 */
}

/* 尺寸变体 */
.input-readonly-text--sm {
  padding: 0.625rem 0.875rem;
  font-size: 0.813rem;
}

.input-readonly-text--md {
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
}

.input-readonly-text--lg {
  padding: 1rem 1.25rem;
  font-size: 0.938rem;
}

/* ==================== 表单辅助元素 ==================== */

/* 输入框提示文本 */
.input-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  line-height: 1.4;
}

/* ==================== 兼容性 - 旧类名映射 ==================== */

/* 保持向后兼容 */
.login-input,
.modal-input,
.input-field,
.form-control {
  /* 继承 .input 的所有样式 */
  /* 建议迁移到统一的 .input 类 */
}