/* styles/dashboard.css */

/* ── Layout ─────────────────────────────────────────────────── */
.dashboard-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────────── */
.dash-sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  padding: 1.5rem 0;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.dash-sidebar-brand {
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.dash-sidebar-user {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.75rem;
}
.sidebar-avatar    { flex-shrink: 0; }
.sidebar-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-user-name {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-role-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cobalt-light);
}

.dash-nav { flex: 1; padding: 0 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }

.dash-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.65rem 0.75rem;
  background: none; border: none; border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s, color 0.2s;
  text-align: left;
}
.dash-nav-item:hover         { background: var(--cobalt-faint); color: var(--text-primary); }
.dash-nav-item--active       { background: rgba(65,105,225,0.12); color: var(--text-primary); border-left: 2px solid var(--cobalt-light); }
.dash-nav-item--admin        { color: var(--cobalt-light); }
.dash-nav-item--signout      { color: var(--text-muted); margin-top: 0.25rem; }
.dash-nav-item--signout:hover { color: var(--crimson); background: var(--crimson-faint); }

.dash-sidebar-bottom {
  padding: 0.75rem; border-top: 1px solid var(--border-subtle);
  margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem;
}

/* ── Main area ──────────────────────────────────────────────── */
.dashboard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Header ─────────────────────────────────────────────────── */
.dash-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.25rem 2rem; flex-shrink: 0;
}
.dash-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dash-header-title { font-size: 1.2rem; color: var(--text-primary); }
.dash-header-sub   { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.06em; margin-top: 0.2rem; }
.dash-header-status { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.06em; }

.status-dot         { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot--active { background: var(--cyan-neon); box-shadow: 0 0 6px var(--cyan-neon); animation: pulse-dot 2.4s ease-in-out infinite; }

/* ── Content area ───────────────────────────────────────────── */
.dashboard-content { flex: 1; padding: 2rem; overflow-y: auto; }
.dashboard-loading  { display: flex; align-items: center; justify-content: center; padding: 5rem; }

/* ── Overview ───────────────────────────────────────────────── */
.overview-view { max-width: 680px; display: flex; flex-direction: column; gap: 1.5rem; }

.overview-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--card-shadow); }
.overview-card-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.overview-identity  { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
.overview-name      { font-size: 1.2rem; color: var(--text-primary); }
.overview-email     { font-size: 0.85rem; color: var(--text-secondary); }

.overview-details { display: flex; flex-direction: column; gap: 0.9rem; }
.overview-detail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle);
}
.overview-detail-row:last-child { border-bottom: none; }
.overview-detail-label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.overview-detail-value { font-size: 0.9rem; color: var(--text-secondary); }

.overview-bio-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; }
.overview-bio-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
.overview-bio-text  { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
.overview-bio-card--empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; color: var(--text-muted); border-style: dashed; }
.overview-bio-card--empty p { font-size: 0.85rem; }

/* ── Profile form ───────────────────────────────────────────── */
.profile-view        { max-width: 580px; }
.profile-view-header { margin-bottom: 2rem; }
.profile-view-title  { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.profile-view-sub    { font-size: 0.9rem; color: var(--text-secondary); }
.profile-form .btn   { margin-top: 0.5rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-sidebar      { display: none; }
  .dashboard-layout  { flex-direction: column; }
  .dashboard-content { padding: 1.25rem; }
  .overview-view     { max-width: 100%; }
  .profile-view      { max-width: 100%; }
  }