/* ==================== CONTAINER SYSTEM ==================== */
/* Responsive container layouts for different page types */

/* Page-specific container overrides */
[data-page="login"] .container {
  max-width: 400px;
  margin: 2rem auto;
}

[data-page="register"] .container {
  max-width: 400px;
  margin: 2rem auto;
}

[data-page="profile"] .container {
  max-width: 1400px;
}

[data-page="admin"] .container {
  max-width: 1400px;
}

[data-page="landing"] .container {
  max-width: none;
}

/* Base Container Layout (Mobile First) */
.container {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  padding: calc(var(--spacing) * 2);
  width: 100%;
  max-width: 400px;
  min-height: calc(100vh - 64px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: var(--spacing) auto;
  display: block;
}

/* Profile sections layout */
.container .time-tracking-card,
.container .history-card,
.container .profile-actions,
.container #adminDashboard,
.container #developerDashboard {
  margin-bottom: calc(var(--spacing) * 1.5);
}

/* Specific section behaviors */
#loginSection {
  min-height: auto;
  height: auto;
  max-height: none;
  overflow-y: visible;
}

#profileSection {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 60, 67, 0.3) transparent;
}

#profileSection::-webkit-scrollbar {
  width: 8px;
}

#profileSection::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

#profileSection::-webkit-scrollbar-thumb {
  background: rgba(60, 60, 67, 0.3);
  border-radius: 4px;
}

#profileSection::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 60, 67, 0.5);
}