/* ═════════════════════════════════════════════
   Utility Classes v5.1 — Semantic Composables
   ~130 classes in 18 sections — composable via decomposition engine
   Load order: after design-tokens.css, before feature CSS
   Strategy: atomic utilities compose to cover 95%+ of inline style patterns
   ═════════════════════════════════════════════ */

/* ── 1. Display ── */
.inline-flex  { display: inline-flex; }
.block        { display: block; }
.inline-block { display: inline-block; }
.contents     { display: contents; }
.table-cell   { display: table-cell; }

/* ── 2. Flex children ── */
.flex-col-gap { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-wrap    { flex-wrap: wrap; }
.items-end       { align-items: flex-end; }
.shrink-0        { flex-shrink: 0; }

/* ── 3. Gap ── */
.gap     { gap: var(--space-3); }   /* 8px */

/* ── 4. Panel & Card ── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.card-body {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-stat {
  flex: 1;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

/* ── 5. Background ── */
.bg-accent     { background: var(--accent); }
.bg-success-soft { background: var(--success-soft); }
.bg-danger-soft  { background: var(--danger-soft); }
.bg-warning-soft { background: var(--warning-soft); }
.bg-danger        { background: var(--danger); }
.bg-warning       { background: var(--warning); }
.bg-none       { background: none; }

/* ── 6. Container ── */
.container    { max-width: 1440px; margin: 0 auto; padding: var(--space-6); }
.container-sm { max-width: 960px;  margin: 0 auto; padding: var(--space-6); }

/* ── 7. Spacing ── */
.pad       { padding: var(--space-3); }


.m-0  { margin: 0; }
.p-0  { padding: 0; }
/* Directional zero reset (for compound decomposition) */
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

/* ── 8. Buttons ── */
.btn-accent {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
}
.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.btn-ghost {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
}
.btn-close {
  background: none;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  color: var(--text-tertiary);
}
.btn-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}

/* ── 9. Table ── */
.table       { width: 100%; border-collapse: collapse; }
.th          { padding: var(--space-2-5) var(--space-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 600; }
.td          { padding: 9px var(--space-3); }
.td-nowrap   { white-space: nowrap; }
.td-c        { text-align: center; }
.td-w30      { width: 30px; padding: var(--space-2-5) var(--space-2); }
.td-ellipsis { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 10. Form ── */
.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--bg-base);
  color: var(--text-primary);
}
.select-sm {
  padding: var(--space-1-5) var(--space-2-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  background: var(--bg-base);
  color: var(--text-primary);
}
.label {
  font-size: var(--text-xs);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
}
.field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}
.form-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
}
.textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--bg-base);
  color: var(--text-primary);
  resize: vertical;
}

/* ── 11. Text — colors ── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-accent    { color: var(--accent); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-info      { color: var(--info, var(--accent)); }
.text-accent-emphasis { color: var(--accent-emphasis, var(--accent)); }

/* ── 12. Text — sizes & styles ── */
.text-xs      { font-size: var(--text-xs); }
.text-body    { font-size: var(--text-base); }
.text-2xl     { font-size: var(--text-2xl); }

.fw-400       { font-weight: 400; }
.fw-500       { font-weight: 500; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }

.text-right   { text-align: right; }

.text-no-decoration { text-decoration: none; }

/* ── 13. Text — composites (size + color + extras) ── */
.text-hint    { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.text-overline { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }

.page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

/* ── 14. Borders ── */
.border       { border: 1px solid var(--border-default); }
.border-none  { border: none; }
.divider      { border-bottom: 1px solid var(--border-default); }
.divider-heavy { border-bottom: 2px solid var(--border-default); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 50%; }

/* ── 15. Layout ── */
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cell-empty  { text-align: center; padding: var(--space-10); color: var(--text-tertiary); }
.overflow-x  { overflow-x: auto; }
.col-full    { grid-column: 1 / -1; }
.cursor-help    { cursor: help; }

/* ── 16. Chrome ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.batch-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

/* ── 17. Status & Alert ── */
.alert {
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger); }
.pill {
  display: inline-block;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

/* ── 18. Misc utilities (v5.2 extension) ── */
.min-w-200px  { min-width: 200px; }
.border-dashed    { border: 2px dashed var(--border-default); }
.border-dashed-sm { border: 1px dashed var(--border-default); }

/* ── 19. Misc utilities (v5.3 extension) ── */
.h-full        { height: 100%; }
.transition-all { transition: all var(--motion-fast); }
.flex-dir-col  { flex-direction: column; }
.break-all     { word-break: break-all; }
.break-word    { word-break: break-word; overflow-wrap: break-word; }
.pre-wrap      { white-space: pre-wrap; }

/* ── Directional padding Y+X composites ── */

/* ── Margin bottom extras ── */
.mb-xs { margin-bottom: var(--space-1); }

/* ── 20. Percentage widths ── */
.w-15pct { width: 15%; }
.w-20pct { width: 20%; }
.w-25pct { width: 25%; }

/* ── 21. Grid template columns (atomic, for decomposition) ── */
.gtc-2   { grid-template-columns: 1fr 1fr; }
.gtc-3   { grid-template-columns: 1fr 1fr 1fr; }
.gtc-4   { grid-template-columns: repeat(4, 1fr); }
.gtc-5   { grid-template-columns: repeat(5, 1fr); }
.gtc-6   { grid-template-columns: repeat(6, 1fr); }
.gtc-2-1 { grid-template-columns: 2fr 1fr; }

/* ── 23. Font weight extras ── */
.fw-800 { font-weight: 800; }

/* ── 24. v5.4: Missing tokens & layout helpers ── */
.text-inverse  { color: var(--text-inverse); }
.pr-2xl        { padding-right: var(--space-6); }
.pl-2xl        { padding-left: var(--space-6); }
.rounded-xl    { border-radius: var(--radius-xl); }
.w-60px          { width: 60px; }
.w-30px          { width: 30px; }
.w-40px          { width: 40px; }
.w-80px          { width: 80px; }
.w-130px         { width: 130px; }
.w-28px          { width: 28px; }
.w-95pct          { width: 95%; }
.min-w-80px      { min-width: 80px; }
.min-w-60px      { min-width: 60px; }
.min-w-260px     { min-width: 260px; }
.max-w-200px     { max-width: 200px; }
.max-w-480px     { max-width: 480px; }
.max-w-600px     { max-width: 600px; }
.h-300px         { height: 300px; }
.h-28px          { height: 28px; }
.opacity-60    { opacity: 0.6; }
.mt-1px        { margin-top: 1px; }
.text-ellipsis { text-overflow: ellipsis; }
.pad-3xl       { padding: var(--space-12); }

/* ── 25. v5.5: Surface/content tokens + utilities + layout overrides ── */
/* Surface / Content token namespace */
.bg-surface-base        { background: var(--surface-base); }
.text-content-primary   { color: var(--content-primary); }
.text-content-tertiary  { color: var(--content-tertiary); }
/* Accent / Overlay / Input tokens */
.bg-accent-soft         { background: var(--accent-soft); }
.bg-overlay             { background: var(--bg-overlay); }
.bg-base                { background: var(--bg-base); }
.bg-card                { background: var(--bg-card); }
.bg-raised              { background: var(--bg-raised); }
/* Utility properties */
.cursor-pointer         { cursor: pointer; }
.no-underline           { text-decoration: none; }
.overflow-y-auto        { overflow-y: auto; }
.overflow-x-auto        { overflow-x: auto; }
.border-collapse        { border-collapse: collapse; }
.uppercase              { text-transform: uppercase; }
.shadow-sm              { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.border-t               { border-top: 1px solid var(--border-default); }
.border-b               { border-bottom: 1px solid var(--border-default); }
/* Transitions */
.transition             { transition: all .15s; }
/* Layout overrides (preserved raw px) */
.max-h-30px               { max-height: 30px; }
.max-h-28px               { max-height: 28px; }
.max-h-90vh             { max-height: 90vh; }

/* ── 26. v5.6: Directional margin (for shorthand decomposition) ── */
/* dir-margin */
.mt             { margin-top: var(--space-3); }
.mt-120         { margin-top: 120px; }
.mr             { margin-right: var(--space-3); }
.mb             { margin-bottom: var(--space-3); }
.ml             { margin-left: var(--space-3); }
/* Font sizes (normalized tokens) */
.text-2xs       { font-size: 10px; }
.text-base      { font-size: 14px; }
.text-3xl       { font-size: var(--text-4xl); }
.text-4xl       { font-size: 40px; }

/* ── 27. v5.6: Partial decomposition enablers (position, z-index, dimensions, borders, animations) ── */
/* Position */
.sticky                  { position: sticky; }
.absolute                { position: absolute; }
.fixed                   { position: fixed; }
.z-1                     { z-index: 1; }
/* Gap */
.gap-0                   { gap: 0; }
/* Min dimensions */
/* Form controls */
/* Width px */
.w-2-5                     { width: var(--space-2-5); }
.w-90pct                    { width: 90%; }
.w-30pct                 { width: 30%; }
.w-300px                   { width: 300px; }
.w-8px                     { width: 8px; }
.w-16px                    { width: 16px; }
/* Height px */
.h-4px                     { height: 4px; }
.h-6px                     { height: 6px; }
.h-2-5                     { height: var(--space-2-5); }
.h-screen                { height: 100vh; }
.h-2px                     { height: 2px; }
.h-5px                     { height: 5px; }
.h-16px                    { height: 16px; }
/* Border-radius raw px */
.rounded-t-3             { border-radius: 3px 3px 0 0; }
/* Line-height */
.lh-1                    { line-height: 1; }
/* Margin auto */
.mr-auto                 { margin-right: auto; }
.ml-auto                 { margin-left: auto; }
/* Padding shorthands */
.py-0-5                  { padding-top: var(--space-0-5); padding-bottom: var(--space-0-5); }
.px-md                   { padding-left: var(--space-3); padding-right: var(--space-3); }
.py-sm                   { padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* Margin shorthands */
.my-sm                   { margin-top: var(--space-2); margin-bottom: var(--space-2); }
/* Flex */
.flex-nowrap             { flex-wrap: nowrap; }
/* Transition */
/* Animation */
/* Object fit */
/* Border variants */
.border-accent           { border: 2px solid var(--accent); }
.border-l-3-transparent  { border-left: 3px solid transparent; }
.border-l-success         { border-left-color: var(--success); }
.border-l-danger          { border-left-color: var(--danger); }
/* Background */
/* Overflow */
.overflow-visible        { overflow: visible; }
/* User select / pointer events */
.select-none             { user-select: none; }
.pointer-events-none     { pointer-events: none; }
.invisible               { visibility: hidden; }
/* Vertical align */
.align-top               { vertical-align: top; }
.align-middle            { vertical-align: middle; }
.align-bottom            { vertical-align: bottom; }

/* ── 28. v5.7: Final push to cross <500 inline barrier ── */
.text-white              { color: var(--text-inverse); }
.text-slate              { color: #64748b; }           /* slate-500, used in status badges */
.w-fit                   { width: fit-content; }
.text-display            { font-size: var(--text-display); }

/* ── 29. v5.8/5.9: Clean up remaining inline patterns ── */
.text-content-secondary   { color: var(--content-secondary); }
.border-warning           { border: 1px solid var(--warning); }
.border-accent-1          { border: 1px solid var(--accent); }
.outline-none             { outline: none; }
.bg-info                  { background: var(--info); }
.bg-success               { background: var(--success); }
.bg-surface-raised        { background: var(--surface-raised); }
.text-xl                  { font-size: var(--text-xl); }
.text-lg                  { font-size: var(--text-lg); }
.text-sm                  { font-size: var(--text-sm); }
.pt-10                    { padding-top: var(--space-10); }
.pb-10                    { padding-bottom: var(--space-10); }
.pt-16                    { padding-top: var(--space-16); }
.pb-16                    { padding-bottom: var(--space-16); }
.pr-8                    { padding-right: var(--space-8); }
.pl-8                    { padding-left: var(--space-8); }
.max-w-full               { max-width: 100%; }
.max-w-180px                { max-width: 180px; }
.max-w-250px                { max-width: 250px; }
.max-w-280px                { max-width: 280px; }
.max-w-300                  { max-width: 18.75rem; }
.max-w-1100px               { max-width: 1100px; }
.max-w-1200px               { max-width: 1200px; }
.min-h-0                  { min-height: 0; }
.h-8px                      { height: 8px; }
.h-80px                     { height: 80px; }
.text-color-accent        { color: var(--color-accent); }
/* Position */
/* Typography */
.tracking-wide            { letter-spacing: 0.5px; }
.font-mono                { font-family: var(--font-mono, monospace); }
/* Border */
/* Layout */
.container-max            { max-width: var(--container-max, 1280px); }
/* ── 30. v5.10: Gap + surface overlay + hex fallbacks ── */
.bg-surface-overlay       { background: var(--surface-overlay); }
.bg-slate-50              { background: #f8fafc; }
.bg-white                 { background: #fff; }
.max-w-560px                { max-width: 560px; }
.flex-col                 { flex-direction: column; display: flex; }
/* ── 30. v5.11: Generic single-property patterns ── */
.shadow-lg                { box-shadow: var(--shadow-lg); }
.shadow-md                { box-shadow: var(--shadow-md); }
.z-9999                   { z-index: 9999; }
.z-50                     { z-index: 50; }
.transition-opacity       { transition: opacity .15s; }
.transition-fast          { transition: all var(--motion-fast); }
.transition-border        { transition: border-color var(--motion-fast); }
.translatex-center        { transform: translateX(-50%); }
.left-50p                 { left: 50%; }
.lh-2                     { line-height: 2; }
.lh-loose                 { line-height: 2.5; }
.lh-tight                 { line-height: 1.1; }
.col-span-full            { grid-column: 1 / -1; }
.animate-pulse            { animation: pulse 2s infinite; }
.underline                { text-decoration: underline; }
/* ── 31. v5.12: Final generic entries ── */
.top-0                    { top: 0; }
.right-0                  { right: 0; }
.bottom-0                 { bottom: 0; }
.left-0                   { left: 0; }
.max-w-400px                { max-width: 400px; }
.max-h-300px                { max-height: 300px; }
.max-h-360px                { max-height: 360px; }
.opacity-50               { opacity: .5; }
.opacity-70               { opacity: .7; }
.tabular-nums             { font-variant-numeric: tabular-nums; }
.flex-1                   { flex: 1; }

/* ── 32. v5.13: Final inline style migration — pagination/tabs/wizard/banners ── */
.wizard-step-bar           { height: 2px; min-width: 24px; }
.bg-warning-muted-border   { background: var(--warning-soft);
                             border: 1px solid var(--warning); }
.bg-success-muted-border   { background: var(--success-soft);
                             border: 1px solid var(--success); }
.shadow-glow               { box-shadow: 0 4px 24px rgba(0, 82, 255, .15); }
.pricing-badge-top         { top: -12px; }
.text-nowrap               { white-space: nowrap; }
.min-w-0                   { min-width: 0; }
.h-6px                     { height: 6px; }

/* ── 任务 #271 (2026-09-02): 静态内联 style → class (零风险批次) ── */
.inline                    { display: inline; }
.w-4px                     { width: 4px; }
.w-100px                   { width: 100px; }
.w-140px                   { width: 140px; }
.w-180px                   { width: 180px; }
.w-200px                   { width: 200px; }
.h-420px                     { height: 420px; }
.max-h-150px                 { max-height: 150px; }
.border-danger-1           { border: 1px solid var(--danger); }
.border-warning-soft       { border: 1px solid var(--warning-soft); }
.border-l-3-danger         { border-left: 3px solid var(--danger); }
.rounded-r-4               { border-radius: 0 4px 4px 0; }
.rounded-20                { border-radius: 20px; }

/* ── 33. Override layer (load last — highest priority) ── */
.d-none       { display: none; }
.visible      { visibility: visible; }

/* ═══ Dark Theme Overrides (html.dark) ═══ */
/* Hardcoded hex utilities get dark-mode equivalents */
html.dark .text-slate       { color: #94a3b8; }        /* slate-400, brighter for dark */
html.dark .bg-slate-50      { background: #1e293b; }   /* slate-800 */
html.dark .bg-white         { background: var(--bg-card); }