/* 黄蜂汽修 V4.0 — shadcn/ui Design System */
/* shadcn/ui 设计令牌 + Tailwind 扩展 */

:root {
  /* ── shadcn/ui Color Tokens ── */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 22 83% 47%;        /* 暖橙 #E8782A */
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 22 83% 47%;           /* 聚焦环 = 主色 */
  --radius: 0.5rem;              /* shadcn 默认圆角 */
  --chart-1: 22 83% 47%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  /* ── 门店专属令牌 ── */
  --brand: #1B1B2F;
  --brand-accent: #E8782A;
  --brand-accent-light: #FFF3EB;
  --sidebar-bg: #F8F9FB;
  --sidebar-active: #EEF2FF;
}

/* ── shadcn/ui 组件基类 ── */

/* Button */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500;
  padding: 0.5rem 1rem; transition: all 150ms; cursor: pointer;
  border: 1px solid transparent; outline: none; user-select: none;
}
.sh-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.sh-btn:disabled { opacity: 0.5; pointer-events: none; }
.sh-btn:active { transform: scale(0.97); }

.sh-btn-default { background: var(--background); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.sh-btn-default:hover { background: hsl(var(--accent)); }

.sh-btn-primary { background: var(--brand-accent); color: #fff; }
.sh-btn-primary:hover { opacity: 0.9; }

.sh-btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.sh-btn-secondary:hover { background: hsl(var(--accent)); }

.sh-btn-destructive { background: hsl(var(--destructive)); color: #fff; }
.sh-btn-destructive:hover { opacity: 0.9; }

.sh-btn-ghost { background: transparent; }
.sh-btn-ghost:hover { background: hsl(var(--accent)); }

.sh-btn-outline { background: transparent; border-color: hsl(var(--border)); }
.sh-btn-outline:hover { background: hsl(var(--accent)); }

.sh-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: calc(var(--radius) - 0.125rem); }
.sh-btn-lg { padding: 0.625rem 1.25rem; font-size: 1rem; }
.sh-btn-icon { padding: 0.5rem; }

/* Card */
.sh-card {
  background: hsl(var(--card)); border-radius: calc(var(--radius) + 0.25rem);
  border: 1px solid hsl(var(--border)); box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.sh-card-header { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.25rem 0; }
.sh-card-title { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.sh-card-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.sh-card-content { padding: 1.25rem; }
.sh-card-footer { display: flex; align-items: center; padding: 0 1.25rem 1.25rem; gap: 0.5rem; }

/* Input */
.sh-input {
  display: flex; width: 100%; height: 2.5rem; border-radius: var(--radius);
  border: 1px solid hsl(var(--input)); background: transparent; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; outline: none; transition: border-color 150ms, box-shadow 150ms;
  font-family: inherit;
}
.sh-input::placeholder { color: hsl(var(--muted-foreground)); }
.sh-input:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 2px hsla(var(--ring), 0.2); }
.sh-input:disabled { opacity: 0.5; cursor: not-allowed; background: hsl(var(--muted)); }

/* Label */
.sh-label { font-size: 0.875rem; font-weight: 500; line-height: 1; display: block; margin-bottom: 0.5rem; }

/* Badge */
.sh-badge {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600;
  transition: all 150ms; border: 1px solid transparent;
}
.sh-badge-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.sh-badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.sh-badge-outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.sh-badge-destructive { background: hsl(var(--destructive)); color: #fff; }
.sh-badge-success { background: #ECFDF5; color: #065F46; }

/* Separator */
.sh-separator { width: 100%; height: 1px; background: hsl(var(--border)); }

/* Avatar */
.sh-avatar { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; font-weight: 600; font-size: 0.875rem; }
.sh-avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }

/* Tabs */
.sh-tabs { display: flex; gap: 0.125rem; background: hsl(var(--muted)); border-radius: var(--radius); padding: 0.25rem; }
.sh-tab { flex: 1; text-align: center; padding: 0.5rem 1rem; border-radius: calc(var(--radius) - 0.125rem); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 150ms; color: hsl(var(--muted-foreground)); border: none; background: transparent; }
.sh-tab[data-state="active"] { background: #fff; color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(0,0,0,.06); font-weight: 600; }

/* Dialog overlay */
.sh-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sh-dialog { background: hsl(var(--background)); border-radius: calc(var(--radius) + 0.25rem); border: 1px solid hsl(var(--border)); box-shadow: 0 10px 40px rgba(0,0,0,.15); width: 100%; max-width: 28rem; max-height: 85vh; overflow-y: auto; }
.sh-dialog-header { padding: 1.25rem 1.25rem 0; font-size: 1.125rem; font-weight: 600; }
.sh-dialog-body { padding: 1.25rem; }
.sh-dialog-footer { padding: 0 1.25rem 1.25rem; display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Skeleton loading */
@keyframes sh-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sh-skeleton { background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--accent)) 50%, hsl(var(--muted)) 75%); background-size: 200% 100%; animation: sh-skeleton 1.5s infinite; border-radius: var(--radius); }

/* Step indicator */
.sh-step { display: flex; gap: 0.75rem; padding: 0.75rem 0; position: relative; }
.sh-step-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; margin-top: 0.25rem; position: relative; z-index: 1; }
.sh-step-dot[data-state="done"] { background: #10B981; }
.sh-step-dot[data-state="active"] { background: var(--brand-accent); box-shadow: 0 0 0 3px hsla(var(--ring), 0.2); }
.sh-step-dot[data-state="pending"] { background: hsl(var(--muted)); }
.sh-step:not(:last-child) .sh-step-dot::after { content: ''; position: absolute; top: 14px; left: 4px; width: 2px; height: calc(100% + 12px); background: hsl(var(--border)); }
.sh-step-dot[data-state="done"]::after { background: #10B981 !important; }

/* Toast */
.sh-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: hsl(var(--foreground)); color: hsl(var(--background)); padding: 0.75rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,.15); opacity: 0; transition: opacity 200ms; pointer-events: none; }
.sh-toast[data-visible="true"] { opacity: 1; }

/* Utility: focus ring */
.sh-ring:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }