/* UserHub — demo polish on top of Bootstrap. One accent, quiet neutrals. */

:root {
  --uh-accent: #0e7490;
  --uh-accent-soft: #e0f2f7;
  --uh-ink: #16232b;
  --uh-paper: #f6f8f9;
  --uh-line: #e3e8ea;
}

body {
  background: var(--uh-paper);
  color: var(--uh-ink);
}

/* navbar */
.uh-navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--uh-line);
}
.uh-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--uh-accent);
  color: #fff;
  font-size: 15px;
}
.uh-accent { color: var(--uh-accent); }
.uh-badge-env {
  background: var(--uh-accent-soft);
  color: var(--uh-accent);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.uh-navbar .nav-link { color: #5b6b74; border-radius: 8px; padding: .4rem .7rem; }
.uh-navbar .nav-link:hover { color: var(--uh-ink); background: var(--uh-paper); }
.uh-navbar .nav-link.active { color: var(--uh-accent); background: var(--uh-accent-soft); font-weight: 500; }

/* buttons */
.uh-btn-primary {
  background: var(--uh-accent);
  border: 1px solid var(--uh-accent);
  color: #fff;
}
.uh-btn-primary:hover, .uh-btn-primary:focus { background: #0b5c73; border-color: #0b5c73; color: #fff; }

/* cards */
.uh-card {
  background: #fff;
  border: 1px solid var(--uh-line);
  border-radius: 14px;
}
.uh-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #75838c; }
.uh-stat-value { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.uh-stat-sub { font-size: 12px; color: #909ba3; }

/* department bars */
.uh-dept-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: 14px;
  align-items: center;
  padding: 7px 0;
}
.uh-dept-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh-dept-bar-track { background: var(--uh-paper); border-radius: 99px; height: 10px; overflow: hidden; }
.uh-dept-bar { background: var(--uh-accent); height: 100%; border-radius: 99px; min-width: 4px; }
.uh-dept-count { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: #5b6b74; }

/* table */
.uh-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #75838c;
  background: #fbfcfc;
  border-bottom: 1px solid var(--uh-line);
  white-space: nowrap;
}
.uh-table td { border-color: #eef1f2; font-size: 14px; }
.uh-table tbody tr:hover { background: #fafcfd; }
.uh-num { font-variant-numeric: tabular-nums; }
.uh-table-footer { border-top: 1px solid var(--uh-line); background: #fbfcfc; }

.uh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--uh-accent-soft);
  color: var(--uh-accent);
  font-size: 12px;
  font-weight: 600;
  flex: none;
  text-transform: uppercase;
}

/* badges */
.uh-badge-dept { background: #eef1f2; color: #45525a; font-weight: 500; }
.uh-badge-ok   { background: #e5f3ea; color: #177245; }
.uh-badge-warn { background: #fdf1dc; color: #9a6a10; }
.uh-badge-muted{ background: #eef1f2; color: #75838c; }

/* toast + search + form */
.uh-toast { background: #e5f3ea; border-color: #cfe8d9; color: #14532d; }
.uh-search .input-group-text { background: #fff; border-right: 0; color: #909ba3; }
.uh-search .form-control { border-left: 0; min-width: 280px; }
.uh-form-section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--uh-accent);
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--uh-line);
}

/* footer */
.uh-footer { border-top: 1px solid var(--uh-line); background: #fff; font-size: 13px; color: #75838c; }

/* pagination accent */
.pagination .page-link { color: var(--uh-accent); }
.pagination .page-item.active .page-link { background: var(--uh-accent); border-color: var(--uh-accent); }