body { font-family: 'Prompt', sans-serif; background: #f4f6f5; }
.status-pending { color: #b8860b; }
.status-approved { color: #198754; }
.status-rejected { color: #dc3545; }
.status-not_started { color: #adb5bd; }
.brand-orange { color: #E88B2F; }
.dashboard-bg { background: #f2ece2; }
.border-brand-orange { border-color: #E88B2F !important; }
.checklist-card:hover, .checklist-card:active { border-color: #E88B2F !important; }
.bg-brand-orange { background-color: #E88B2F; }
.bg-brand-teal { background-color: #9BCEC1; }
.login-btn { -webkit-tap-highlight-color: transparent; }
.login-btn:hover, .login-btn:focus, .login-btn:active, .login-btn.active {
  color: #E88B2F !important;
  background: rgba(245,245,245,0.3) !important;
  border-color: #E88B2F !important;
  box-shadow: none !important;
}
.admin-shell { min-height: 100vh; }
.admin-sidebar { width: 220px; flex-shrink: 0; min-height: 100vh; }
.admin-main { min-width: 0; }
.admin-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 2px;
  color: #333; text-decoration: none; font-size: 14px;
}
.admin-nav-link:hover { background: #f4f6f5; color: #E88B2F; }
.admin-nav-link.active { background: #E88B2F; color: #fff; }

/* Dashboard: stat tiles */
.stat-tile {
  background: #fff; border: 1px solid #eceeed; border-radius: 12px;
  padding: 16px 18px; min-width: 160px; flex: 1 1 160px;
}
.stat-tile .stat-label { font-size: 12px; color: #6c757d; margin-bottom: 4px; }
.stat-tile .stat-value { font-size: 28px; font-weight: 600; line-height: 1.1; }

/* Dashboard: horizontal bar rows */
.dash-section { background: #fff; border: 1px solid #eceeed; border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
.dash-section h6 { margin-bottom: 14px; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.bar-row .bar-date { width: 84px; flex-shrink: 0; font-size: 12px; color: #6c757d; font-variant-numeric: tabular-nums; }
.bar-row .bar-track { flex: 1 1 auto; background: #eef0ef; border-radius: 4px; height: 14px; position: relative; overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row .bar-fill.bar-fill-full { border-radius: 4px; }
.bar-row .bar-value { width: 34px; flex-shrink: 0; text-align: right; font-size: 12px; color: #495057; font-variant-numeric: tabular-nums; }

.mini-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mini-chart-card { border: 1px solid #eceeed; border-radius: 10px; padding: 12px 14px; }
.mini-chart-card .mini-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mini-chart-card .bar-row .bar-date { width: 62px; font-size: 11px; }
.mini-chart-card .bar-row .bar-track { height: 10px; }
.mini-chart-card .bar-row .bar-value { width: 24px; font-size: 11px; }

/* Users page: status badges */
.status-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-approved { background: #e6f4ea; color: #198754; }
.badge-pending { background: #fff3cd; color: #8a6400; }
.badge-rejected { background: #fdecea; color: #dc3545; }
.badge-not_started { background: #f1f3f2; color: #868e96; }
.progress-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #fff0e0; color: #b5661a; }

/* Users page: sticky first column on wide table */
.users-table-wrap { max-height: 70vh; overflow: auto; border: 1px solid #eceeed; border-radius: 10px; }
.users-table-wrap table { margin-bottom: 0; }
.users-table-wrap thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
.users-table-wrap th:first-child, .users-table-wrap td:first-child {
  position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 #eceeed;
}

/* Users page: mobile card list */
.user-card { background: #fff; border: 1px solid #eceeed; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.user-card .user-name { font-weight: 600; font-size: 14px; }
.user-card .user-meta { font-size: 12px; color: #6c757d; margin-bottom: 8px; }
.user-card .status-badge { margin: 2px 4px 0 0; }