/* ============================================================
   FleetFlow · 全局基础样式
   ============================================================ */
html, body { height: 100%; }

body {
  font-family: var(--ff-font);
  font-size: 14px;
  color: var(--ff-text);
  background: var(--ff-bg);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--ff-primary); }
a:hover { color: var(--ff-primary-dark); }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cdd5e0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b3bfce; }
::-webkit-scrollbar-track { background: transparent; }

/* —— Bootstrap 品牌色对齐 —— */
.btn-primary {
  --bs-btn-bg: var(--ff-primary);
  --bs-btn-border-color: var(--ff-primary);
  --bs-btn-hover-bg: var(--ff-primary-dark);
  --bs-btn-hover-border-color: var(--ff-primary-dark);
  --bs-btn-active-bg: var(--ff-primary-dark);
  --bs-btn-active-border-color: var(--ff-primary-dark);
  --bs-btn-disabled-bg: #93b4f5;
  --bs-btn-disabled-border-color: #93b4f5;
}
.btn-outline-primary {
  --bs-btn-color: var(--ff-primary);
  --bs-btn-border-color: #b9cdf6;
  --bs-btn-hover-bg: var(--ff-primary-soft);
  --bs-btn-hover-border-color: var(--ff-primary);
  --bs-btn-hover-color: var(--ff-primary-dark);
  --bs-btn-active-bg: var(--ff-primary-soft);
  --bs-btn-active-border-color: var(--ff-primary);
  --bs-btn-active-color: var(--ff-primary-dark);
}
.form-control:focus, .form-select:focus {
  border-color: #9db9f2;
  box-shadow: 0 0 0 0.2rem rgba(var(--ff-primary-rgb), 0.12);
}
.form-check-input:checked { background-color: var(--ff-primary); border-color: var(--ff-primary); }
.form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(var(--ff-primary-rgb), 0.12); border-color: #9db9f2; }
.nav-link { color: var(--ff-muted); }
.nav-link:hover { color: var(--ff-text); }
.nav-link.active { color: var(--ff-primary); }
.page-link { color: var(--ff-primary); }
.page-link:focus { box-shadow: 0 0 0 0.2rem rgba(var(--ff-primary-rgb), 0.12); }
.page-item.active .page-link { background-color: var(--ff-primary); border-color: var(--ff-primary); }

/* —— 卡片 —— */
.ff-card {
  background: var(--ff-card);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow);
}
.ff-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ff-border);
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ff-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ff-card .card-header .ff-head-tool { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 400; }
.ff-card .card-body { padding: 1rem; }
.ff-card .card-footer { background: transparent; border-top: 1px solid var(--ff-border); padding: 0.55rem 1rem; font-size: 12.5px; color: var(--ff-muted); }

/* —— 状态徽章 —— */
.ff-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1.5px 9px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.6;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
}
.ff-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ff-badge.no-dot::before { display: none; }

.ff-badge.st-pending  { background: var(--ff-warning-soft); color: #b45309; }
.ff-badge.st-assigned { background: var(--ff-info-soft); color: #0e7490; }
.ff-badge.st-running  { background: #dbeafe; color: #1d4ed8; }
.ff-badge.st-arrived  { background: var(--ff-success-soft); color: #15803d; }
.ff-badge.st-signed   { background: var(--ff-success-soft); color: #166534; }
.ff-badge.st-error    { background: var(--ff-danger-soft); color: #b91c1c; }
.ff-badge.st-cancelled{ background: #f1f5f9; color: #64748b; }
.ff-badge.st-idle     { background: #f1f5f9; color: #475569; }
.ff-badge.st-repair   { background: #ffedd5; color: #c2410c; }
.ff-badge.st-offline  { background: #e2e8f0; color: #334155; }
.ff-badge.st-rest     { background: #ede9fe; color: #6d28d9; }

/* —— 优先级 —— */
.ff-priority { font-size: 12px; font-weight: 600; border-radius: 4px; padding: 1px 7px; }
.ff-priority.high   { background: var(--ff-danger-soft); color: var(--ff-danger); }
.ff-priority.medium { background: var(--ff-warning-soft); color: #b45309; }
.ff-priority.low    { background: #f1f5f9; color: #64748b; }

/* —— 表格（高密度） —— */
.ff-table { font-size: 13px; margin-bottom: 0; }
.ff-table thead th {
  background: #f8fafc;
  color: var(--ff-muted);
  font-weight: 500;
  font-size: 12.5px;
  border-bottom: 1px solid var(--ff-border);
  white-space: nowrap;
  padding: 0.55rem 0.75rem;
}
.ff-table tbody td {
  padding: 0.55rem 0.75rem;
  vertical-align: middle;
  color: var(--ff-text-secondary);
  white-space: nowrap;
}
.ff-table tbody td.ff-td-main { color: var(--ff-text); font-weight: 600; }
.ff-table tbody tr:hover > * { background: #f8fafc; }
.ff-table .ff-actions a, .ff-table .ff-actions button { font-size: 12.5px; padding: 0 4px; }

/* —— 工具栏 —— */
.ff-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ff-border);
}
.ff-toolbar .form-control, .ff-toolbar .form-select { width: auto; min-width: 130px; font-size: 13px; }
.ff-toolbar .ff-search { min-width: 230px; }
.ff-toolbar .ff-spacer { flex: 1 1 auto; }
.ff-filter-tabs { display: inline-flex; background: #eef1f6; border-radius: 8px; padding: 3px; gap: 2px; }
.ff-filter-tabs button {
  border: none; background: transparent; color: var(--ff-muted);
  font-size: 12.5px; padding: 3px 12px; border-radius: 6px;
}
.ff-filter-tabs button.active { background: #fff; color: var(--ff-text); font-weight: 600; box-shadow: var(--ff-shadow); }

/* —— 分页 —— */
.ff-pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--ff-border);
  font-size: 12.5px; color: var(--ff-muted);
}
.ff-pagination-bar .pagination { margin: 0; }
.pagination .page-link { font-size: 12.5px; padding: 3px 9px; }

/* —— 弹窗 —— */
.modal-content { border: 1px solid var(--ff-border); border-radius: 12px; box-shadow: var(--ff-shadow-lg); }
.modal-header { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--ff-border); }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-body { padding: 1.1rem; font-size: 13.5px; }
.modal-footer { padding: 0.7rem 1.1rem; border-top: 1px solid var(--ff-border); }
.modal .form-label { font-size: 12.5px; color: var(--ff-text-secondary); margin-bottom: 4px; font-weight: 500; }
.modal .form-control, .modal .form-select { font-size: 13px; }

/* —— Toast —— */
.ff-toast-wrap { position: fixed; top: 66px; right: 18px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.ff-toast {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--ff-border); border-left: 3px solid var(--ff-primary);
  border-radius: 8px; box-shadow: var(--ff-shadow-lg);
  padding: 10px 16px; font-size: 13px; min-width: 240px; max-width: 360px;
  animation: ff-toast-in 0.25s ease;
}
.ff-toast.success { border-left-color: var(--ff-success); }
.ff-toast.warn { border-left-color: var(--ff-warning); }
.ff-toast.danger { border-left-color: var(--ff-danger); }
.ff-toast .ff-toast-ico { flex: none; display: grid; place-items: center; }
.ff-toast .ff-toast-ico svg { width: 16px; height: 16px; }
.ff-toast.success .ff-toast-ico { color: var(--ff-success); }
.ff-toast.warn .ff-toast-ico { color: var(--ff-warning); }
.ff-toast.danger .ff-toast-ico { color: var(--ff-danger); }
.ff-toast.info .ff-toast-ico { color: var(--ff-primary); }
@keyframes ff-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* —— 空状态 —— */
.ff-empty { text-align: center; padding: 42px 16px; color: var(--ff-faint); font-size: 13px; }
.ff-empty svg { width: 34px; height: 34px; margin-bottom: 8px; opacity: 0.55; }

/* —— 工具类 —— */
.ff-num { font-variant-numeric: tabular-nums; }
.ff-mono { font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: -0.2px; }
.ff-muted { color: var(--ff-muted); }
.ff-small { font-size: 12.5px; }
.ff-clickable { cursor: pointer; }
.ff-nowrap { white-space: nowrap; }
.ff-w-100-m { }
.ff-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-divider-v { width: 1px; height: 20px; background: var(--ff-border); margin: 0 4px; }
.lucide-lg { width: 18px; height: 18px; }
.lucide-sm { width: 14px; height: 14px; }