/* dashboard.css — visual system for the role-based homepage dashboard
   (index.html). Kept separate from style.css/components.css because this
   is a deliberately different look (Sora + Public Sans, flat icon-badge
   cards) from the rest of the site, per the NAMTES Portal Mockups design. */

.dash-shell {
  font-family: 'Public Sans', system-ui, sans-serif;
}
.dash-shell h1, .dash-shell h2, .dash-shell h3, .dash-shell .dash-heading {
  font-family: 'Sora', sans-serif;
}

.dash-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(2, 44, 34, .08);
}

.dash-tile {
  border-radius: 18px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.dash-tile:hover {
  box-shadow: 0 4px 14px rgba(2, 44, 34, .14);
  transform: translateY(-1px);
}
.dash-tile:active { transform: translateY(0); }

.dash-icon-badge {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-icon-badge.green { background: #ecfdf5; color: #065f46; }
.dash-icon-badge.gold  { background: #fef9c3; color: #a16207; }

.dash-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #eab308;
  color: #022c22;
  font: 700 14px/1 'Public Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-toggle {
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.dash-toggle.on  { background: #065f46; justify-content: flex-end; }
.dash-toggle.off { background: #dbe2e9; justify-content: flex-start; }
.dash-toggle.disabled { cursor: not-allowed; opacity: .6; }
.dash-toggle .knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

.dash-chip {
  font: 700 10px/1 'Public Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: 999px;
}

@media (max-width: 420px) {
  .dash-card-width { width: 100% !important; }
}