/* ============================================================================
   DASHBOARD STYLES
   ============================================================================ */

:root {
  --navbar-height: 70px;
  --primary-color: #3874ff;
  --secondary-color: #6c757d;
  --body-bg: #f9fbfd;
  --navbar-bg: #ffffff;
  --border-color: #e9ecef;
}

[data-theme="dark"] {
  --body-bg: #0f1419;
  --navbar-bg: #1a1d21;
  --border-color: #2a2d31;
}

body { 
  background: var(--body-bg);
  transition: background-color 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.fonts-loaded body {
  font-family: var(--font-sans);
}

.navbar-top { 
  height: var(--navbar-height); 
  background: var(--navbar-bg); 
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.navbar-brand img { 
  height: 32px; 
  width: auto; 
}

.navbar-nav .nav-link { 
  color: var(--secondary-color); 
  padding: 0.75rem 1.5rem; 
  border-radius: 0.375rem; 
  transition: all 0.2s ease;
  margin: 0 0.25rem;
  font-weight: 500;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover { 
  color: var(--primary-color); 
  background: rgba(56,116,255,0.1); 
}

.navbar-icons { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}

.navbar-icon { 
  width: 40px; 
  height: 40px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 0.375rem; 
  color: var(--secondary-color); 
  background: transparent; 
  border: none;
  transition: all 0.2s ease;
}

.navbar-icon:hover { 
  color: var(--primary-color); 
  background: rgba(56,116,255,0.1); 
}

.main-content { 
  min-height: calc(100vh - 130px); 
  padding: 2rem 0;
}

.footer { 
  background: var(--navbar-bg); 
  border-top: 1px solid var(--border-color); 
  padding: 1rem 2rem; 
  text-align: center; 
  color: var(--secondary-color); 
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.dropdown-menu {
  border: 1px solid var(--border-color);
  background: var(--navbar-bg);
  transition: all 0.3s ease;
}

.dropdown-item {
  color: var(--secondary-color);
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(56, 116, 255, 0.1);
  color: var(--primary-color);
}

/* Dashboard specific typography */
.dashboard-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: 1.5rem;
}

.dashboard-subtitle {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--secondary-color);
  margin-bottom: 2rem;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
  .navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    margin: 0 0.125rem;
    font-size: 0.875rem;
  }
  
  .navbar-icons {
    gap: 0.25rem;
  }
  
  .navbar-icon {
    width: 36px;
    height: 36px;
  }
  
  .main-content {
    padding: 1rem 0;
  }
}

@media (max-width: 576px) {
  .navbar-nav {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .navbar-nav .nav-link {
    text-align: center;
    margin: 0;
  }
  
  .navbar-icons {
    justify-content: center;
    margin-top: 1rem;
  }
}