/* ===== Global ===== */
* { -webkit-font-smoothing: antialiased; }
body { font-family: 'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== Sidebar ===== */
.sidebar-link { transition: all .15s ease; }
.sidebar-link:hover { background: rgba(255,255,255,.08); }
.sidebar-link.active { background: #4f46e5; color: #fff; }

/* ===== Card ===== */
.card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); }
.card-hover { transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }

/* ===== Status badges ===== */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-transit    { background:#e0e7ff; color:#3730a3; }
.badge-pending    { background:#fef3c7; color:#92400e; }
.badge-inspecting { background:#dbeafe; color:#1e40af; }
.badge-repair     { background:#fed7aa; color:#9a3412; }
.badge-stocked    { background:#d1fae5; color:#065f46; }
.badge-selling    { background:#dbeafe; color:#1e40af; }
.badge-sold       { background:#e9d5ff; color:#6b21a8; }
.badge-scrap      { background:#fecaca; color:#991b1b; }

/* ===== Grade badges ===== */
.grade-A { background:#d1fae5; color:#065f46; }
.grade-B { background:#fef3c7; color:#92400e; }
.grade-C { background:#fed7aa; color:#9a3412; }

/* ===== Table ===== */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.05em; padding:12px 16px; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.data-table td { padding:12px 16px; border-bottom:1px solid #f1f5f9; font-size:14px; }
.data-table tbody tr:hover { background:#f8fafc; }

/* ===== Modal ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#fff; border-radius:16px; max-width:90vw; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.15); }

/* ===== Form ===== */
.form-input { width:100%; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; font-size:14px; transition:border-color .15s; outline:none; }
.form-input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.form-label { display:block; font-size:13px; font-weight:600; color:#475569; margin-bottom:4px; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; border:none; }
.btn-primary { background:#4f46e5; color:#fff; }
.btn-primary:hover { background:#4338ca; }
.btn-secondary { background:#f1f5f9; color:#475569; }
.btn-secondary:hover { background:#e2e8f0; }
.btn-success { background:#10b981; color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:6px; }

/* ===== Fade transition ===== */
.fade-enter-active, .fade-leave-active { transition: opacity .2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* ===== Stat card ===== */
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; }

/* ===== Progress bar ===== */
.progress-bar { height:6px; border-radius:3px; background:#e2e8f0; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width .3s ease; }

/* ===== Device card ===== */
.device-card { border:1px solid #e2e8f0; border-radius:10px; padding:16px; transition:all .2s; cursor:pointer; }
.device-card:hover { border-color:#6366f1; box-shadow:0 4px 12px rgba(99,102,241,.1); }

/* ===== Inspection score ring ===== */
.score-ring { width:80px; height:80px; position:relative; display:flex; align-items:center; justify-content:center; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-text { position:absolute; font-size:22px; font-weight:700; }

/* ===== Timeline ===== */
.timeline-item { position:relative; padding-left:24px; padding-bottom:20px; }
.timeline-item::before { content:''; position:absolute; left:6px; top:4px; bottom:0; width:2px; background:#e2e8f0; }
.timeline-item::after { content:''; position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%; background:#4f46e5; border:3px solid #fff; box-shadow:0 0 0 2px #4f46e5; }
.timeline-item:last-child::before { display:none; }