/**
 * SocialConecters Core — Frontend App Dashboards CSS
 */

.sc-dashboard-app {
  display: flex;
  min-height: calc(100vh - 100px);
  background: var(--sc-bg);
  border-radius: var(--sc-radius);
  overflow: hidden;
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow);
  margin: 32px auto;
}

.sc-sidebar {
  width: 260px;
  background: var(--sc-secondary);
  color: #FFF;
  padding: 32px 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sc-sidebar-logo {
  font-size: 20px;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-sidebar-logo span { color: var(--sc-primary); }

.sc-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #94A3B8;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--sc-radius-sm);
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.sc-nav-item.active a, .sc-nav-item a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFF;
}

.sc-dashboard-main {
  flex-grow: 1;
  padding: 32px;
  background: #FAFAFA;
  overflow-y: auto;
}

.sc-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sc-border);
}

.sc-tab-content { display: none; }
.sc-tab-content.active { display: block; }

@media (max-width: 900px) {
  .sc-dashboard-app { flex-direction: column; }
  .sc-sidebar { width: 100%; box-sizing: border-box; padding: 20px; }
  .sc-nav-menu { flex-direction: row; flex-wrap: wrap; }
  .sc-dashboard-main { padding: 20px; }
}