/* Sidebar nav icon boxes — replaces inline styles on nav items */

.nav-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(96, 165, 250, 0.18);
}

.nav-icon--lg {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.nav-icon .material-symbols-outlined {
  font-size: 0.9375rem;
  color: #60a5fa;
}

.nav-icon--lg .material-symbols-outlined {
  font-size: 1rem;
}

.nav-icon[data-tone="blue"] { background: rgba(96, 165, 250, 0.18); }
.nav-icon[data-tone="blue"] .material-symbols-outlined { color: #60a5fa; }

.nav-icon[data-tone="indigo"] { background: rgba(129, 140, 248, 0.18); }
.nav-icon[data-tone="indigo"] .material-symbols-outlined { color: #818cf8; }

.nav-icon[data-tone="emerald"] { background: rgba(52, 211, 153, 0.18); }
.nav-icon[data-tone="emerald"] .material-symbols-outlined { color: #34d399; }

.nav-icon[data-tone="violet"] { background: rgba(167, 139, 250, 0.18); }
.nav-icon[data-tone="violet"] .material-symbols-outlined { color: #a78bfa; }

.nav-icon[data-tone="pink"] { background: rgba(244, 114, 182, 0.18); }
.nav-icon[data-tone="pink"] .material-symbols-outlined { color: #f472b6; }

.nav-icon[data-tone="orange"] { background: rgba(251, 146, 60, 0.18); }
.nav-icon[data-tone="orange"] .material-symbols-outlined { color: #fb923c; }

.nav-icon[data-tone="purple"] { background: rgba(192, 132, 252, 0.18); }
.nav-icon[data-tone="purple"] .material-symbols-outlined { color: #c084fc; }

.nav-icon[data-tone="amber"] { background: rgba(251, 191, 36, 0.18); }
.nav-icon[data-tone="amber"] .material-symbols-outlined { color: #fbbf24; }

.nav-icon[data-tone="blue-deep"] { background: rgba(37, 99, 235, 0.18); }
.nav-icon[data-tone="blue-deep"] .material-symbols-outlined { color: #2563eb; }

.nav-icon[data-tone="cyan"] { background: rgba(34, 211, 238, 0.18); }
.nav-icon[data-tone="cyan"] .material-symbols-outlined { color: #22d3ee; }

.nav-icon[data-tone="teal"] { background: rgba(45, 212, 191, 0.18); }
.nav-icon[data-tone="teal"] .material-symbols-outlined { color: #2dd4bf; }

.nav-icon[data-tone="teal-dark"] { background: rgba(20, 184, 166, 0.18); }
.nav-icon[data-tone="teal-dark"] .material-symbols-outlined { color: #14b8a6; }

.nav-icon[data-tone="green"] { background: rgba(74, 222, 128, 0.18); }
.nav-icon[data-tone="green"] .material-symbols-outlined { color: #4ade80; }

.nav-icon[data-tone="fuchsia"] { background: rgba(232, 121, 249, 0.18); }
.nav-icon[data-tone="fuchsia"] .material-symbols-outlined { color: #e879f9; }

.nav-icon[data-tone="slate"] { background: rgba(148, 163, 184, 0.18); }
.nav-icon[data-tone="slate"] .material-symbols-outlined { color: #94a3b8; }

.nav-icon[data-tone="red"] { background: rgba(248, 113, 113, 0.18); }
.nav-icon[data-tone="red"] .material-symbols-outlined { color: #f87171; }

.nav-icon[data-tone="cyan-emerald"] {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(16, 185, 129, 0.2));
}
.nav-icon[data-tone="cyan-emerald"] .material-symbols-outlined { color: #22d3ee; }

.nav-group-icon[data-tone="blue"] { color: #60a5fa !important; }
.nav-group-icon[data-tone="orange"] { color: #fb923c !important; }
.nav-group-icon[data-tone="amber"] { color: #fbbf24 !important; }
.nav-group-icon[data-tone="emerald"] { color: #34d399 !important; }
.nav-group-icon[data-tone="teal"] { color: #2dd4bf !important; }
.nav-group-icon[data-tone="pink"] { color: #f472b6 !important; }
.nav-group-icon[data-tone="indigo"] { color: #818cf8 !important; }
.nav-group-icon[data-tone="slate"] { color: #94a3b8 !important; }

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--r-lg);
  margin-bottom: 0.75rem;
}

.sidebar-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}

.sidebar-user-meta { min-width: 0; flex: 1; }

.sidebar-user-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.sidebar-user-role {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.sidebar-signout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-signout-btn:hover,
.sidebar-signout-btn:focus-visible {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 0, 0, 0.15);
}

.sidebar-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}