/* ========== APP NAVIGATION ==========
   Top navigation bar with active link highlighting
   Mobile responsive with hamburger menu */

.app-navigation {
  background-color: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: var(--max-container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--top-bar-height);
}

.nav-brand {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: var(--font-size-h4);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}

/* ========== NAVIGATION MENU ========== */
.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: 500;
  text-decoration: none;
  padding: var(--spacing-xs) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--color-accent);
}

/* Active link: deep red underline */
.nav-link.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.nav-link.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ========== HAMBURGER MENU ==========
   Hidden by default, visible on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  align-items: center;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-fast);
  border-radius: 1px;
}

.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 1px;
  transition: all var(--transition-fast);
}

.hamburger::before {
  transform: translateY(-8px);
}

.hamburger::after {
  transform: translateY(8px);
}

/* Hamburger animation when open */
.nav-toggle.active .hamburger {
  background-color: transparent;
}

.nav-toggle.active .hamburger::before {
  transform: rotate(45deg);
}

.nav-toggle.active .hamburger::after {
  transform: rotate(-45deg);
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  .nav-container {
    height: auto;
    flex-wrap: wrap;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all var(--transition-normal);
    margin-top: 0;
    padding: 0;
    order: 3;
  }

  .nav-menu.open {
    max-height: 500px;
    opacity: 1;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: var(--border-width) solid var(--color-border);
  }

  .nav-link {
    padding: var(--spacing-sm) 0;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-link.active {
    border-bottom-color: var(--color-accent);
  }
}

/* ========== APP CONTENT LAYOUT ========== */
.app-content {
  background-color: var(--color-background);
  flex: 1;
  min-height: calc(100vh - var(--top-bar-height) - var(--footer-height));
}

.app-content > div {
  max-width: var(--max-container-width);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

/* ========== PAGE PLACEHOLDER ==========
   Skeleton pages for each route */
.page-placeholder {
  text-align: center;
}

.page-placeholder h1 {
  font-family: var(--font-headings);
  font-size: var(--font-size-h1);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-tight);
}

.page-placeholder p {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  max-width: var(--max-text-width);
  margin: 0 auto;
}

/* ========== FOOTER ========== */
.app-footer {
  background-color: var(--color-white);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--spacing-md);
  text-align: center;
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-content {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.footer-content p {
  margin: 0;
}

/* ========== LANDING PAGE ========== */
.landing-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--top-bar-height) - var(--footer-height));
  padding: var(--spacing-xl) var(--spacing-md);
}

.landing-hero {
  text-align: center;
  max-width: var(--max-text-width);
}

.landing-hero h1 {
  font-family: var(--font-headings);
  font-size: 3rem;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-tight);
}

.landing-subtext {
  font-size: var(--font-size-body-large);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
}

.landing-hero .btn {
  margin-top: var(--spacing-md);
}

/* ========== PAGE CONTENT LAYOUT ========== */
.page-content {
  max-width: var(--max-container-width);
  margin: 0 auto;
}

.page-header {
  margin-bottom: var(--spacing-lg);
}

.page-header h1 {
  font-family: var(--font-headings);
  font-size: var(--font-size-h1);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  letter-spacing: var(--letter-spacing-tight);
}

.page-subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ========== EMPTY STATE ========== */
.empty-state {
  background-color: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  margin: var(--spacing-lg) 0;
}

.empty-state h3 {
  font-family: var(--font-headings);
  font-size: var(--font-size-h3);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  letter-spacing: var(--letter-spacing-tight);
}

.empty-state p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  max-width: var(--max-text-width);
  margin: 0 auto;
}

/* ========== SETTINGS FORM ========== */
.settings-form {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  max-width: 600px;
}

.form-section {
  margin-bottom: var(--spacing-lg);
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section h2 {
  font-family: var(--font-headings);
  font-size: var(--font-size-h3);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-tight);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group:last-child {
  margin-bottom: 0;
}

.input-label {
  display: block;
  font-weight: 500;
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  letter-spacing: var(--letter-spacing-normal);
}

.input-field {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  transition: border-color 150ms ease-in-out;
}

.input-field:focus {
  outline: none;
  border-color: var(--color-accent);
}

.input-field:disabled {
  background-color: #FAFAF9;
  opacity: 0.6;
  cursor: not-allowed;
}

.input-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-body);
  cursor: pointer;
  user-select: none;
}

.checkbox-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--color-accent);
}

.checkbox-item input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .landing-hero h1 {
    font-size: 2rem;
  }
  
  .landing-subtext {
    font-size: var(--font-size-body);
  }
  
  .settings-form {
    padding: var(--spacing-md);
  }
}