// ==========================================================================
// PAGE TEMPLATES
// ==========================================================================
// Common page layout templates for different application pages
// Structural definitions without visual theming
// ==========================================================================

// LANDING PAGE TEMPLATE
.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .landing-hero {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hero-min-height, 60vh);
    text-align: center;
    position: relative;
    overflow: hidden;

    .hero-content {
      max-width: var(--hero-content-max-width, 800px);
      padding: var(--hero-content-padding, 48px 24px);
      z-index: 2;
      position: relative;
    }

    .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }

  .landing-features {
    flex-shrink: 0;
    padding: var(--features-padding, 80px 24px);

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--features-gap, 48px);
      max-width: var(--features-max-width, 1200px);
      margin: 0 auto;
    }
  }

  .landing-cta {
    flex-shrink: 0;
    text-align: center;
    padding: var(--cta-padding, 80px 24px);
  }
}

// DASHBOARD PAGE TEMPLATE
.dashboard-page {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .dashboard-nav {
    flex-shrink: 0;
    z-index: var(--z-nav, 100);
  }

  .dashboard-body {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

// PROFILE PAGE TEMPLATE
.profile-page {
  max-width: var(--profile-max-width, 1000px);
  margin: 0 auto;
  padding: var(--profile-padding, 24px);

  .profile-header {
    display: flex;
    align-items: flex-start;
    gap: var(--profile-header-gap, 24px);
    margin-bottom: var(--profile-header-spacing, 48px);

    .profile-avatar {
      flex-shrink: 0;
      width: var(--profile-avatar-size, 120px);
      height: var(--profile-avatar-size, 120px);
      border-radius: var(--profile-avatar-radius, 50%);
      overflow: hidden;
    }

    .profile-info {
      flex: 1;
      min-width: 0;

      .profile-name {
        margin: 0 0 var(--profile-name-spacing, 8px) 0;
        font-size: var(--profile-name-size, 2rem);
        font-weight: var(--profile-name-weight, 600);
      }

      .profile-bio {
        margin: 0 0 var(--profile-bio-spacing, 16px) 0;
        opacity: 0.7;
      }

      .profile-actions {
        display: flex;
        gap: var(--profile-actions-gap, 12px);
        flex-wrap: wrap;
      }
    }
  }

  .profile-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--profile-content-gap, 48px);
    align-items: flex-start;

    .profile-main {
      min-width: 0;
    }

    .profile-sidebar {
      min-width: 0;
    }
  }
}

@media (max-width: 768px) {
  .profile-page {
    .profile-header {
      flex-direction: column;
      text-align: center;

      .profile-info {
        text-align: center;
      }
    }

    .profile-content {
      grid-template-columns: 1fr;
      gap: var(--profile-content-gap-mobile, 32px);
    }
  }
}

// SETTINGS PAGE TEMPLATE
.settings-page {
  max-width: var(--settings-max-width, 800px);
  margin: 0 auto;
  padding: var(--settings-padding, 24px);

  .settings-nav {
    margin-bottom: var(--settings-nav-spacing, 32px);

    .nav-tabs {
      display: flex;
      gap: var(--nav-tabs-gap, 24px);
      border-bottom: 1px solid var(--border-color, #e5e5e5);

      .nav-tab {
        padding: var(--nav-tab-padding, 12px 0);
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: all var(--transition-duration, 0.2s);

        &.nav-tab-active {
          border-bottom-color: var(--primary-color, #007bff);
        }
      }
    }
  }

  .settings-content {
    .settings-section {
      margin-bottom: var(--settings-section-spacing, 48px);

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        margin: 0 0 var(--section-title-spacing, 24px) 0;
        font-size: var(--section-title-size, 1.25rem);
        font-weight: var(--section-title-weight, 600);
      }

      .section-description {
        margin: 0 0 var(--section-description-spacing, 24px) 0;
        opacity: 0.7;
      }

      .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: var(--setting-item-padding, 16px 0);
        border-bottom: 1px solid var(--border-color-light, #f0f0f0);

        &:last-child {
          border-bottom: none;
        }

        .setting-info {
          flex: 1;
          margin-right: var(--setting-info-spacing, 24px);

          .setting-label {
            margin: 0 0 var(--setting-label-spacing, 4px) 0;
            font-weight: var(--setting-label-weight, 500);
          }

          .setting-description {
            margin: 0;
            opacity: 0.7;
            font-size: var(--setting-description-size, 0.875rem);
          }
        }

        .setting-control {
          flex-shrink: 0;
        }
      }
    }
  }
}

// ERROR PAGE TEMPLATE
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: var(--error-page-padding, 24px);

  .error-content {
    max-width: var(--error-content-max-width, 600px);

    .error-code {
      font-size: var(--error-code-size, 6rem);
      font-weight: var(--error-code-weight, 700);
      line-height: 1;
      margin: 0 0 var(--error-code-spacing, 24px) 0;
    }

    .error-title {
      font-size: var(--error-title-size, 2rem);
      font-weight: var(--error-title-weight, 600);
      margin: 0 0 var(--error-title-spacing, 16px) 0;
    }

    .error-message {
      margin: 0 0 var(--error-message-spacing, 32px) 0;
      opacity: 0.7;
    }

    .error-actions {
      display: flex;
      justify-content: center;
      gap: var(--error-actions-gap, 16px);
      flex-wrap: wrap;
    }
  }
}

// AUTH PAGE TEMPLATE
.auth-page {
  display: flex;
  min-height: 100vh;

  .auth-visual {
    flex: 1;
    display: none;
    position: relative;
    overflow: hidden;

    @media (min-width: 768px) {
      display: flex;
    }

    .auth-visual-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 2;
    }

    .auth-visual-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }

  .auth-form-container {
    flex-shrink: 0;
    width: 100%;
    max-width: var(--auth-form-max-width, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--auth-form-padding, 48px 24px);

    .auth-form {
      width: 100%;
      max-width: var(--auth-form-width, 400px);

      .auth-header {
        text-align: center;
        margin-bottom: var(--auth-header-spacing, 48px);

        .auth-title {
          margin: 0 0 var(--auth-title-spacing, 16px) 0;
          font-size: var(--auth-title-size, 2rem);
          font-weight: var(--auth-title-weight, 600);
        }

        .auth-subtitle {
          margin: 0;
          opacity: 0.7;
        }
      }

      .auth-footer {
        text-align: center;
        margin-top: var(--auth-footer-spacing, 32px);
      }
    }
  }
}