/* ------------------------------------------------------------
   Dashboard Layout
------------------------------------------------------------ */

.dashboard-wrapper {
  display: flex;
  min-height: calc(100vh - 75px); /* minus header */
  background: var(--bg);
}

/* Sidebar */
.dashboard-sidebar {
  width: 240px;
  background: var(--bg-light);
  border-right: 1px solid var(--outline);
  padding-top: 2rem;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1.5rem;
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.sidebar-nav a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 0.4rem 0;
  transition: 0.2s;
}

.sidebar-nav a:hover {
  color: var(--primary-light);
}

.sidebar-nav a.active {
  color: var(--primary);
  font-weight: 600;
}

/* Main Content */
.dashboard-content {
  flex: 1;
  padding: 3rem;
}

.dashboard-content h1 {
  margin-bottom: 0.4rem;
}

.mb-2 {
  margin-bottom: 1.5rem;
}

/* Cards Grid */
.dash-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.dash-card {
  background: var(--card);
  border: 1px solid var(--outline);
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 12px #ff660015;
  transition: 0.25s ease;
}

.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px #ff660020;
}

.dash-card h3 {
  margin-bottom: 0.35rem;
  color: var(--text-muted);
}

.dash-number {
  font-size: 1.7rem;
  font-weight: 700;
}

.dash-status {
  font-size: 1.2rem;
  font-weight: 700;
}

.dash-status.online {
  color: #22ff88;
}

.dash-status.offline {
  color: #ff3333;
}

/* ------------------------------------------------------------
   MOBILE ONLY
------------------------------------------------------------ */

@media (max-width: 820px) {

  /* Hide sidebar completely on mobile */
  .dashboard-sidebar {
    display: none;
  }

  .dashboard-wrapper {
    flex-direction: column;
  }

  /* Full-width content */
  .dashboard-content {
    padding: 1.75rem 1.25rem;
  }

}