:root {
  --sx-ink: #1e2a2f;
  --sx-accent: #f0b429;
  --sx-surface: #ffffff;
  --sx-soft: #f4f6f8;
  --sx-shadow: 0 8px 24px rgba(19, 28, 35, 0.08);
}

body {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--sx-ink);
  background: radial-gradient(circle at top left, #f8f3ea, #eef2f7 40%, #f4f6f8 70%);
  min-height: 100vh;
}

h1, h2, h3, h4, .navbar-brand {
  font-family: "Space Grotesk", sans-serif;
}

.brand-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--sx-accent);
  border-radius: 50%;
  margin-right: 6px;
}

.card {
  border: none;
  box-shadow: var(--sx-shadow);
}

.kpi-card {
  background: var(--sx-surface);
  border-left: 4px solid var(--sx-accent);
}

.table thead th {
  background: var(--sx-soft);
  font-weight: 600;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

.sort-icon {
  font-size: 0.8rem;
  opacity: 0.6;
}

.inc-row:hover {
  background: rgba(240, 180, 41, 0.08);
}

.inc-row {
  cursor: pointer;
}

.badge-priority-high {
  background: #d64545;
}

.badge-priority-medium {
  background: #f0b429;
  color: #1e2a2f;
}

.badge-priority-low {
  background: #2d9c73;
}

.inline-help {
  font-size: 0.9rem;
  color: #6c757d;
}

.progress {
  height: 10px;
}