Cleanuparr/code/UI/src/app/settings/settings-page/settings-page.component.scss

.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  
  .settings-section {
    margin-bottom: 2rem;
    
    h2 {
      margin-bottom: 1rem;
      color: var(--primary-color);
      font-size: 1.5rem;
      font-weight: 500;
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .settings-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--surface-border);
    color: var(--primary-color);
  }
  
  .field-row {
    display: flex;
    margin-bottom: 1.5rem;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &.field-disabled {
      opacity: 0.6;
    }
    
    label {
      width: 30%;
      min-width: 150px;
      font-weight: 500;
      padding-top: 0.5rem;
    }
    
    .field-input {
      width: 70%;
      
      .form-helper-text {
        display: block;
        color: var(--text-color-secondary);
        margin-top: 0.5rem;
        font-size: 0.85rem;
      }
      
      input, .p-dropdown, .p-inputnumber {
        width: 100%;
      }
    }
  }
  
  /* Card styling */
  ::ng-deep {
    .settings-card {
      height: 100%;
      transition: box-shadow 0.3s;
      
      &:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      }
      
      .p-card-content {
        padding: 1.5rem;
      }
    }
    
    /* Input styling */
    .p-inputtext, .p-dropdown, .p-inputnumber {
      &:hover {
        border-color: var(--primary-color);
      }
      
      &:focus, &.p-focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-100);
      }
    }
    
    .p-dropdown {
      .p-dropdown-label {
        padding: 0.5rem 0.75rem;
      }
    }
    
    /* Input Group */
    .p-inputgroup {
      .p-button {
        background-color: var(--surface-200);
        color: var(--text-color-secondary);
        border-color: var(--surface-border);
        
        &:hover {
          background-color: var(--surface-300);
          color: var(--text-color);
        }
      }
    }
    
    /* Slider styling */
    .p-slider {
      background-color: var(--surface-200);
      
      .p-slider-handle {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        
        &:hover {
          background-color: var(--primary-600);
          border-color: var(--primary-600);
        }
      }
      
      .p-slider-range {
        background-color: var(--primary-color);
      }
    }
    
    /* Radio Button */
    .p-radiobutton {
      .p-radiobutton-box {
        &.p-highlight {
          border-color: var(--primary-color);
          background-color: var(--primary-color);
        }
        
        &:not(.p-disabled):hover {
          border-color: var(--primary-color);
        }
      }
    }
  }
  
  /* Responsive adjustments */
  @media screen and (max-width: 768px) {
    .field-row {
      flex-direction: column;
      align-items: flex-start;
      
      label {
        width: 100%;
        margin-bottom: 0.5rem;
      }
      
      .field-input {
        width: 100%;
      }
    }
  }
}