// ==========================================================================
// Settings Page Styles
// ==========================================================================

// Settings page specific layout and styling
.settings-page {
  .settings-layout {
    @include page-layout();
  }

  .settings-sidebar {
    @include page-sidebar();
  }

  .settings-nav {
    .nav-link {
      @include page-nav-link();
    }
  }

  .settings-section {
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--bs-border-color);
  }

  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bs-border-color);

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

    .setting-label {
      flex: 1;
      margin-right: 1rem;

      h6 {
        margin-bottom: 0.25rem;
        font-weight: 500;
      }

      p {
        margin: 0;
        color: var(--bs-secondary-color);
        font-size: 0.875rem;
      }
    }

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

  .settings-form {
    .form-label {
      font-weight: 500;
      color: var(--bs-emphasis-color);
    }

    .form-text {
      color: var(--bs-secondary-color);
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--bs-primary);
      box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
    }
  }

  .notification-settings {
    .notification-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background: var(--bs-light);
      border: 1px solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      margin-bottom: 0.75rem;

      .notification-info {
        flex: 1;

        .notification-title {
          font-weight: 500;
          margin-bottom: 0.25rem;
        }

        .notification-desc {
          color: var(--bs-secondary-color);
          font-size: 0.875rem;
          margin: 0;
        }
      }

      .notification-toggle {
        flex-shrink: 0;
      }
    }
  }

  .privacy-settings {
    .privacy-level {
      background: var(--bs-info-bg-subtle);
      border: 1px solid var(--bs-info-border-subtle);
      border-radius: var(--bs-border-radius);
      padding: 1rem;
      margin-bottom: 1rem;

      .level-title {
        font-weight: 600;
        color: var(--bs-info-text-emphasis);
        margin-bottom: 0.5rem;
      }

      .level-description {
        color: var(--bs-info-text-emphasis);
        margin: 0;
        font-size: 0.875rem;
      }
    }
  }

  .account-settings {
    .danger-zone {
      background: var(--bs-danger-bg-subtle);
      border: 1px solid var(--bs-danger-border-subtle);
      border-radius: var(--bs-border-radius);
      padding: 1.5rem;
      margin-top: 2rem;

      .danger-title {
        color: var(--bs-danger-text-emphasis);
        font-weight: 600;
        margin-bottom: 1rem;
      }

      .danger-description {
        color: var(--bs-danger-text-emphasis);
        margin-bottom: 1rem;
      }

      .btn-danger {
        background-color: var(--bs-danger);
        border-color: var(--bs-danger);

        &:hover {
          background-color: var(--bs-danger-hover);
          border-color: var(--bs-danger-hover);
        }
      }
    }
  }

  .save-settings-bar {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 0;
    margin-top: 2rem;
    text-align: right;

    .btn {
      @include button-hover-lift();
    }
  }

  .settings-search {
    margin-bottom: 1.5rem;

    .form-control {
      border-radius: 50px;
      padding-left: 2.5rem;
    }

    .search-icon {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--bs-secondary-color);
    }
  }

  .theme-preview {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;

    .theme-option {
      flex: 1;
      border: 2px solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      text-align: center;

      &:hover {
        border-color: var(--bs-primary);
      }

      &.selected {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary-bg-subtle);
      }

      .theme-name {
        font-weight: 500;
        margin-bottom: 0.5rem;
      }

      .theme-colors {
        display: flex;
        gap: 0.25rem;
        justify-content: center;

        .color-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid var(--bs-border-color);
        }
      }
    }
  }
}

// CSS variables for theming
:root {
  --settings-bg: #{$body-bg};
  --settings-sidebar-bg: #{$light};
  --settings-border: #{$border-color};
  --settings-text: #{$body-color};
  --settings-text-muted: #{$text-muted};
  --settings-section-bg: #{$body-bg};
  --settings-nav-hover: #{$gray-200};
}

[data-bs-theme="dark"] {
  --settings-bg: #{$dark-bg};
  --settings-sidebar-bg: #{$gray-900};
  --settings-border: #{$dark-border-color};
  --settings-text: #{$dark-color};
  --settings-text-muted: #{$dark-text-muted};
  --settings-section-bg: #{$dark-bg};
  --settings-nav-hover: #{$gray-700};
}